jQuery 选择器

什么是JQuery选择器？

1. jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选

择器返回的是jQuery对象。

2. jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂更加实

用的选择器。

！！注意：

jQuery选择器返回的是jQuery对象，所以可以直接调用jQuery提供的api

jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法

获取到。所以我们平时真正能用到的只是少数的最常用的选择器

JQuery基础选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

1.2 jQuery 筛选选择器

1.3 jQuery 筛选方法（重点）

重点记住： parent() children() find() siblings() eq() next()

2. jQuery 样式操作

2.1 操作 css 方法-多组样式设置

jQuery 可以使用 css 方法来修改简单元素样式，css方法可以设置单个样式，也可以设置多个样式

1.语法：$(选择器).css(｛样式名称1，样式值1，样式名称2，样式值2｝); // 设置元素的多个样式

2. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性名称可以不用加引号，

$(this).css({ "color":"white","font-size":"20px"});

2.1 操作 css 方法-获取元素的样式

jQuery 可以使用 css 方法设置或获取，元素的样式如果只传入样式属性名称，没有传入样式值，就是用来获取元素的样式

1.语法：$(选择器).css(样式名称); // 获取指定样式属性所对应的值

如：$("div").css("background-color"); 获取div元素的背影色

2.特点：获取样式操作只会返回满足条件的第一个元素对应的样式值

2.2 设置类样式方法

作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。

添加类：$(“div”).addClass(''current'');

移除类：$(“div”).removeClass(''current'');

切换类：(“div”).toggleClass(''current'');

判断元素是否有指定类样式

$(“div”).hasClass(''current''); // 返回true/false,true代表有这个类样式

3.JQuery效果

jQuery 给我们封装了很多动画效果，以满足常见的页面效果需求，最为常见的如下：

3.1 显示隐藏效果

1.显示语法规范

1.显示语法规范

show|hide([speed,[easing],[fn]])

2.参数

（1）参数都可以省略， 如省略则无动画直接显示。

（2）speed：三种预定速度之一的字符串(slow(200)、normal(400)、fast(600))或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3.1 显示隐藏效果

1.切换语法规范

toggle([speed,[easing],[fn]])

2.切换参数

（1）参数都可以省略， 无动画直接显示。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

建议：平时一般不带参数，直接显示隐藏即可。

3.2 滑动效果

1. 下滑效果语法规范

slideDown|slideUp|slideToggle([speed,[easing],[fn]])

2. 下滑效果参数

（1）参数都可以省略。

（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或毫秒数值(如：1000)，默认为normal。

（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3. jQuery 效果

3.3 淡入淡出效果

1. 淡入效果语法规范

fadeIn|fadeOut|fadeToggle[speed,[easing],[fn]])

2. 淡入效果参数

（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3.3 淡入淡出效果

1. 渐进方式调整到指定的不透明度

fadeTo([[speed],opacity,[easing],[fn]])

2. 效果参数

（1）opacity 透明度必须写，取值 0~1 之间。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3.4 自定义动画 animate

1.语法

animate(params,[speed],[easing],[fn])

2. 参数

（1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采

取驼峰命名法 borderLeft。其余参数都可以省略。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3.5 动画队列及其停止排队方法

1. 动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

2. 停止队列中的动画：stop()

(1）stop() 方法用于停止动画或效果。

(2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

4. jQuery 属性操作

4.1 设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。

1. 获取属性语法：prop(''属性'')   类似原生 getAttribute()

2. 设置属性语法：attr(''属性'', ''属性值'')    类似原生 setAttribute()

4.2 设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。

1. 获取属性语法：attr(''属性'')   类似原生 getAttribute()

2. 设置属性语法：attr(''属性'', ''属性值'')   类似原生 setAttribute()

4.3 prop和attr的使用选择

1. 设置或获取元素固有属性值建议使用prop

2. 设置或获取元素自定义属性值建议使用attr

注意！：操作状态值的时候(如'checked','selected','disabled'等)只能使用prop,否则无法获取到想要的结果

4.4 数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

1. 附加数据语法：data(''name'',''value'')    向被选元素附加数据

2. 获取数据语法：

data()    获取元素所有自定义属性，返回一个对象

data(''name'')   向被选元素获取抒写名称的自定义属性数据

5. jQuery 内容文本值

主要针对元素的内容还有表单的值操作。

1. 普通元素内容 html()（ 相当于原生inner HTML)

html()    获取元素的内容

html(''内容'')   设置元素的内容

2. 普通元素文本内容 text() (相当与原生 innerText)

text()    获取元素的文本内容

text(''文本内容'')   设置元素的文本内容

3. 表单的值 val()（ 相当于原生value)

val()    获取表单的值

val(''内容'')   设置表单的值

6. jQuery 元素操作

6.1 遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。

语法1:$("div").each(function (index, domEle) { xxx; }）    //主要用于遍历元素

1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个

2. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象

3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)

语法2： $.each(object，function (index, element) { xxx; }）

1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象

2. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容

6.2 创建元素

语法：$(''<li></li>'');   //动态创建一个li标签

6.3 添加元素

1. 内部添加

element.append(''内容'')    //把内容放入匹配元素内部最后面，类似原生 appendChild。

element.prepend(''内容'')    //把内容放入匹配元素内部最前面。

2. 外部添加

element.after(''内容'')    // 把内容放入目标元素后面

element.before(''内容'')    // 把内容放入目标元素前面

① 内部添加元素，生成之后，它们是父子关系。

② 外部添加元素，生成之后，他们是兄弟关系。

6.4 删除元素

element.remove()    // 删除匹配的元素（本身）

element.empty()    // 删除匹配的元素集合中所有的子节点

element.html('''')    // 清空匹配的元素内容,可以用来删除内容也可以设置内容

7. jQuery 尺寸、位置操作

7.1 jQuery 尺寸

1.以上参数为空，则是获取相应值，返回的是数字型。

2.如果参数为数字，则是设置相应值。

3.参数可以不必写单位。

7.2 jQuery 位置

位置主要有三个： offset()、position()、scrollTop()/scrollLeft()

1. offset() 设置或获取元素偏移

① offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。

② 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。

③ 可以设置元素的偏移：offset({ top: 10, left: 30 });

2. position() 获取元素偏移

① position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

② 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定

位父级左侧的距离。

③ 该方法只能获取。

3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

① scrollTop() 方法设置或返回被选元素被卷去的头部。

② 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部

8. jQuery事件机制

JQ事件发展历程的扩展

jq事件发展的历程：简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐）

简单事件注册

语法：事件类型(事件处理函数)

不能同时注册多个事件,同时也不能实现委托事件

bind方式注册事件

语法：$(jq).bind(‘事件类型’，事件处理函数)

不支持动态事件绑定

delegate注册委托事件

语法：$(jq).delegate(‘子元素选择器’，‘事件类型’，事件处理函数)

只能注册委托事件，因此注册时间需要记得方法太多了

8.2 使用on注册事件

jQuery1.7之后，jQuery用on统一了所有事件的处理方法，建议使用