What's jQuery

jq就是一个封装了很多方法的js库。

Why use jQuery

原生js的缺点

不能添加多个入口函数(window.onload),如果添加多个,后面会把前面的覆盖

api名字都太长太难记

代码冗余

某些属性或者方法存在浏览器兼容性问题

容错率低

jq的优点

可以写多个入口函数

jq的api名字较容易记

代码简洁(隐式迭代)

解决了浏览器兼容问题

容错率高

How to use jQuery

1.引入jQuery文件.

2.写一个入口函数.

3.找到你要操作的元素(jq选择器),去操作(添加属性,样式,文本.....)

jq的入口函数

两种写法

// 1.1

$(document).ready(function (){

});

// 1.2

$(function (){

});

jq入口函数和window.onload入口函数的区别

window.onload入口函数不能写多个,但jq的入口函数可以

执行时机不同：jq入口函数要快于window.onload
jq入口函数要等待页面上的dom树加载完后执行

window.onload要等待页面上所有的资源（dom树/外部css/js连接，图片）都加载完毕后执行

$(function () {

    console.log("我是一个入口函数");

});

$(function () {

    console.log("我又是一个入口函数");

});

jq中的$

$是什么？

如果报了$ not defined,就说明没有引入jq文件

jq文件结构

其实是一个自执行函数

(function(){

    window.jQuery = window.$ = jQuery;

}());

引入一个js文件，时会执行js文件中的代码
jQuery文件是一个自执行函数，执行这个jQuery文件中的代码，其实就是执行这个自执行函数
这个自执行文件就是给window对象添加一个jQuery属性和$属性
$其实和jQuery是等价的，是一个函数

console.log(window.jQuery === window.$); //true

$是一个函数,参数传递不同,效果也不一样

如果参数传递的是一个匿名函数 - 入口函数

$(function(){

});

如果参数传递的是一个字符串 - 选择器/创建一个标签

$('#one');

$('<div>这是一个div</div>');

如果参数是一个dom对象,那他就会把dom对象转换成jQuery对象

$(dom对象);

dom对象和jQuery对象

dom对象

原生js选择器获取到的对象
特点：只能调用dom对象或者属性，不能调用jQuery的属性或者方法

document.getElementById("");

document.getElementsByClassName("");

var div1 = document.getElementById("one");

div1.style.backgroundColor = 'red';//dom对象可以调用dom属性和方法

div1.css('backgroundColor','green');//报错

jQueryd对象

利用jq选择器获取到的对象
特点：只能调用jq的对象或者属性，不能调用原生js的属性或者方法

var $div1 = $('one');

$div1.css.('backgroundColor','green');

$div1.style.backgroundColor = 'red';//报错

jQuery对象是一个伪数组，jQuery对象其实就是dom对象的一个包装集

dom对象和jq对象的相互转换

dom转jq

var div1 = document.getElementById("one");

var $div1 = $(div1);

jq转dom

1.使用下标取出来

var $divs = $('div');

var div1 = $div1[0];

2.使用jq的方法 get();

var div2 = $divs.get(1);

选择器

基本选择器

名称	用法	描述
ID选择器	$('#id')	获取指定id元素
类选择器	$('.class')	获取同一类的元素
标签选择器	$('div')	获取同一标签的所有元素

总结：和css的选择器用法一模一样

层级选择器

名称	用法	描述
子代选择器	$('ul>li')	获取儿子层级的元素，不包含孙子层级的元素
后代选择器	$('ul li')	获取ul下的所有li元素,包括孙子等

和CSS选择器用法一模一样

过滤选择器

这类选择器都带冒号

名称	用法	描述
:eq(index)	$('li:eq(2)')	获取li元素中，选择索引为2的的元素，索引从0开始
:odd	$('li:odd')	获取li元素中，选择索引号为奇数的元素
:even	$('li:even')	获取li元素中，选择索引号为偶数的元素

筛选选择器（方法）

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

名称	用法	描述
children(selector)	$('ul').children('li')	相当于$('ul-li'),子代选择器
find(selector)	$('ul').find('li')	相当于$('ul li'),后代选择器
siblings(selector)	$('#first').sibling('li')	查找兄弟节点，不包括自身
parent()	$('#first').parent();	查找父亲
eq(index)	$('li').eq(2)	相当于$('li:eq(2)')
next()	$('li').next()	找下一个兄弟
prev()	$('li').prev()	找上一次兄弟

设置文本内容 text();

    <input type="button" value="获取" id="getBtn" />

    <input type="button" value="设置" id="setBtn" />

    <div id="div1">

        我是一个div标签

        <p>我是一个p标签</p>

        <span>span1</span>

    </div>

    <div>

        我是一个div2标签

        <p>

            我是一个p2标签

            <span>span2</span>

        </p>

    </div>

获取文本

$('#getBtn').click(function () {

    //获取id为div1这个标签的文本

    //会获取到这标签中所有的文本，包括后代元素的文本

    console.log($('#div1').text());

    //获取标签为div元素的文本

    //包含了多个dom元素的jq对象，通过text()方法获取文本，会把所有dom元素的文本获取到。

    console.log($('div').text());

})

设置文本

$('setBtn').click(function () {

    //给id为div1的这个标签设置文本

    //会覆盖原来的文本内容,如果设置文本中包含标签，是不会把标签解析出来的

    $('#div1').text('我是新设置的文本');

    $('#div1').text('我是新设置的文本<a>我是连接</a>');

    //给标签为div的元素设置文本

    //包含了多个dom元素的jq对象，通过text()方法设置文本，会把所有的dom元素都设置上

    $('div').text('设置的文本');//隐式迭代

})

设置获取样式 css()

    <input type="button" value="获取" id="getBtn" />

    <input type="button" value="设置" id="setBtn" />

    <div id="div1" style="width: 200px;border: 1px solid red"></div>

    <div id="div2" style="width: 300px;border: 1px solid red"></div>

    <div id="div3" style="width: 400px;border: 1px solid red"></div>

获取样式：参数为要获取值的样式名

$('#getBtn').click(function () {

    //获取di为div1这个元素的样式

    console.log($('#div1').css('width'));

    //在ie浏览器中，要获取边框这样的样式值，一定要记得给一个准确的边框

    console.log($('div1').css('border-top-width'));

    //获取标签为div的元素们的样式

    //获取包含了多个dom元素的jq对象的样式，只能获取到第一个dom对象的样式

    console.log($('div').css('width'));

});

设置样式 css(样式名,样式值)

$('setBtn').click(function () {

    //给di为div1的这个元素设置样式

    //设置单样式

    $('#div1').css('width','300px');

    $('#div1').css('height',300); 

    //设置多样式

    $('#div1').css({

        width:300,

        'height':'300px',

        'background-color':'red'

    });

    //给标签为div的元素们设置样式

    $('div').css({

        width:300,

        'height':'300px',

        'background-color':'red'

    });

    //隐式迭代

});

Class类操作

添加类:addClass(类名)
- 添加单个类:$('obj').addClass('ClassName');
- 添加多个类:$('obj').addClass('ClassName1 ClassName2');
移除类:removeClass(类名)
- 移除单个或多个类：与添加同
- 不写参数则移除全部类
判断类:hasClass(类名)
- 判断有无某个类，返回值为boolean值
切换类:toggleClass(类名)
- 如果元素存在指定类，则删除，否则添加

jq动画

三组基本动画

显示(show)和隐藏(hide),切换(toggle);
滑入(slideDown)与滑出(slideUp),切换(slideToggle);
淡入(fadeIn)和淡出(fadeOut),切换(fadeToggle);

$obj.show([speed],[callback]);

// speed(可选)：动画执行时间

    //1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal

    //2.毫秒值(比如1000)，动画在1000毫秒执行完成(推荐)

    //3.固定字符串:slow(600),normal(400),fast(200)

//callback(可选)：执行完动画后执行的回调函数

slideDown()/slideUp()/slideToggle();同理

fadeIn()/fadeOut()/fadeToggle();同理

自定义动画 animate();

$(selector).animate({params},[speed],[easing],[callback]);
参数1(params)：必选,对象,代表需要做动画的属性
参数2(speed)：可选,代表执行动画的时长
参数3(easing)：可选,默认swing(缓动),可以是(linear)
参数4(callback)：可选,动画执行完执行的回调函数

动画队列与停止动画

在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画会被放在动画队列中,等前面的动画执行完成了才会执行

// stop方法:停止动画效果

stop(clearQueue,jumpToEnd);

//第一个参数:是否清除队列(true or false) 默认flase

//第二个参数:是否跳转到最终效果(true or false) 默认flase

节点操作

创建节点

html();
- 设置或者获取内容

$('#btnHtml').click(function () {

    //获取内容:html()方法不给参数

    //获取到元素的所有内容

    console.log($('#div').html());

    //设置内容:html()方法给参数

    //会把原来的内容给覆盖

    //如果设置的内容中包含了标签，是会把标签给解析出来的

    $('#div').html('我是设置的内容<a href="http://www.baidu.com">百度一下</a>');

});

$();
- 确实能创建元素，但是创建的元素只存在与内存中，如果要在页面上显示，就要追加

var $link = $('<a href="http://www.baidu.com">百度一下</a>');

$('#div').append($link);

添加节点

append();
- 父元素.append(子元素); 剪切后作为最后一个子元素添加
prepend();
- 父元素.prepend(子元素); 剪切后作为第一个子元素添加
before();
- 元素A.before(元素B); 把元素B插入到元素A的前面，作为兄弟元素添加
after();

-元素A.after(元素B); 把元素B插入到元素A的后面，作为兄弟元素添加
appendTo();

-子元素.appendTo(父元素); 把子元素作为父元素的最后一个子元素添加

清空与移除节点

清空元素:empty();
移除节点:remove();

克隆节点:clone()

只存在于内存中，如果要在页面上显示，就应该追加到页面上
clone()方法参数不管是true还是false，都是会克隆到后代节点的
clone()方法参数是true表示会把事件一起克隆到,参数如果是false就不会克隆事件,默认false

设置或者表单内容 val()

val()方法不给参数就是获取
val()方法给参数就是设置

操作属性

attr操作

设置属性

设置单属性

$(obj).attr('属性名','属性值');
设置多属性

$(obj).attr({

    属性名:'属性值',

    属性名:'属性值',

    属性名:'属性值'

});

获取属性
- $(obj).attr('属性名');
- 如果没有这个属性，获取到的值就是undefined
移除属性: removeAttr();
- 移除单属性
  
  $(obj).removeAttr('属性名');
- 移除多属性
  
  $(obj).removeAttr('属性名属性名属性名');

prop操作

在jq1.6之后，对于checked，selected，disable这类属性Boolean类型的属性来说，不能用attr方法，只能用prop方法

//设置属性

$(obj).prop('checked',true);

//获取属性

$(obj).prop('checked')//返回true或false

尺寸和位置操作

width方法和height方法

设置或者获取高度，不包括内边距，边框和外边距

// 带参数表示高度

$('img').height(200);

// 不带参数获取高度

$('img').height();

获取网页的可视区宽高

// 获取可视区宽度

$(window).width();

// 获取可视区高度

$(window).height();

innerWidth/innerHeight/outerWidth/outerHeight

innerWidth()/innerHeight() //返回元素的宽度/高度（包括内边距）

outerWidth()/outerHeight() //返回元素的宽度高度 （包括内边距和边框）

outerWidth(true)/outerHeight(true) //返回元素的宽度高度 （包括内边距 边框和外边距）

scrollTop与scrollLeft

设置或者获取垂直滚动条位置
- 没有参数则获取，反之设置

// 获取页面被卷曲的高度

$(window).scrollTop();

//获取页面被卷曲的宽度

$(window).scrollLeft();

offset与position

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素(offsetParent)的位置

// 获取元素距离document的位置，返回值为对象：（letf：100，top：100）

$(selector).offset();

// 获取相对于其最近有定位的父元素的位置

$(selector).position();

事件机制

发展历程

简单事件绑定--bind事件绑定--delegate事件绑定--on事件绑定

简单事件注册

cilck(handler) 单击事件

mouseenter(handler) 鼠标进入事件

mouseleave(handler) 鼠标离开事件

缺点:不能同时注册多个事件

bind方式注册事件

// 第一个参数：事件类型

// 第二个参数：事件处理程序

$('p').bind('click mouseenter',function{

    //事件响应方法

});

delegate注册委托事件

// 第一个参数：selector 要绑定事件的元素

// 第二个参数：事件类型

// 第三个参数：事件处理函数

$('.parentBox').delegate('p','click',function(){

    //为.parentBox下面所有的p标签绑定鼠标点击事件

});

on注册事件

on注册事件

on注册简单事件

//表示给$(selector)绑定事件，并由自己触发，不支持动态绑定

$(selector).on('click',function () {});

on注册事件委托

// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能注册这个事件，支持动态绑定

$(selector).on('click','span',function() {});

事件委托原理

// 事件委托的原理

var ul = doucument.querySelector('#ul');

ul.onclick = function(e) {

    //console.log(e.target.tagName);

    if(e.target.tagName.toLowerCase === 'li'){

        console.log(e.target);

    }

}

事件解绑

unbind方式(不用)

$(selector).unbind(); //解绑所有的事件

$(selector).unbind('click') //解绑指定事件

undelegate方式(不用)

$(selector).undelegate(); //解绑所有的事件

$(selector).undelegate('click') //解绑指定事件

off方式(推荐)

// 解绑匹配元素的所有事件

$(selector).off();

//解绑匹配元素的所有click事件

$(selector).off('click');

触发事件

$(selector).click(); //触发 click

$(selector).trigger('click');

事件对象

jq事件对象其实就是js事件对象的一个封装，处理了兼容性

// screenX和screenY 对应屏幕最左上角的值

// clientX和clientY 距离页面左上角的位置（忽视滚动条）

// pageX和pageY 距离页面最顶部的左上角的位置（计算滚动条的距离）

// event.stopPropagation() 阻止事件冒泡行为

// event.preventDefault() 组织浏览器默认行为

// return false 既能阻止事件冒泡，又能阻止浏览器默认行为

// event.keyCode 按下的键盘代码

补充

链式编程

通常情况下，只有设置操作才能把链式编程延续下去，因为获取操作的时会，会返回获取到的相应的值，无法返回jq对象

end(); //筛选选择器会改变jq对象的dom对象，想要回复到上一次的状态，并且返回匹配元素之前的状态

each()方法

jq的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同值的时候，就需要自己进行迭代

作用：遍历jq对象集合，为每个匹配的元素执行一个函数

//参数1 表示当前元素在所有匹配元素中的索引号

//参数2 表示当前元素(DOM对象)

$(selector).each(function(index,element){});

多库共存

jq使用$作为标识符，但是如果与其他框架中的$冲突时，jq可以释放$符的控制权

var c = $.noConflict(); //释放$的控制权，并把$的能力给了c

巴特西

前端框架-jQuery自学笔记

What's jQuery

Why use jQuery

原生js的缺点

jq的优点

How to use jQuery

jq的入口函数

jq中的$

dom对象和jQuery对象

选择器

基本选择器

层级选择器

过滤选择器

筛选选择器（方法）

设置文本内容 text();

设置获取样式 css()

Class类操作

jq动画

三组基本动画

自定义动画 animate();

动画队列与停止动画

节点操作

创建节点

添加节点

清空与移除节点

克隆节点:clone()

设置或者表单内容 val()

操作属性

attr操作

prop操作

尺寸和位置操作

width方法和height方法

innerWidth/innerHeight/outerWidth/outerHeight

scrollTop与scrollLeft

offset与position

事件机制

发展历程

on注册事件

事件解绑

触发事件

事件对象

补充

链式编程

each()方法

多库共存

插件

最新文章

热门文章