jQuery 常用API

一、jQuery选择器

1、jQuery基础选择器

$("选择器")  // 里面选择器直接写CSS选择器即可，但是要加引号

 2、jQuery层级选择器

  3、jQuery筛选选择器

4、 jQuery筛选方法

二、jQuery样式操作

1、操作CSS方法

（1）参数只写属性名，则是返回属性值

$(this).css("color");

（2）参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用加单位和引号

$("选择器").css('属性','值');

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

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

2、设置类样式方法

（1）添加类

$("选择器").addClass("css样式选择器");

（2）删除类

$("选择器").removeClass("css样式选择器");

（3）切换类

$("选择器").toggleClass("css样式选择器");

三、jQuery效果

1、显示和隐藏效果

（1）显示和隐藏语法规范

show( speed,easing,fn);   // 显示

hide( speed,easing,fn);  // 隐藏

（2）显示和隐藏参数

• 参数都可以省略，无动画直接显示
• speed：三种预定速度之一的字符串（“slow”，“normal”，“fant”）或表示动画市场的毫秒数值（如：1000）
• easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

2、滑动效果

（1）下滑、上拉和切换效果语法规范

slideDown( speed,easing,fn );   // 下滑

slideUp( speed,easing,fn );  // 上拉

slideToggle( speed,easing,fn );  // 切换

（2）下滑、上拉和切换效果参数

• 参数都可以省略，无动画直接显示
• speed：三种预定速度之一的字符串（“slow”，“normal”，“fant”）或表示动画市场的毫秒数值（如：1000）
• easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

3、动画对列及其停止排队方法

（1）动画或效果队列

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

（2）停止排队

stop()

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

4、淡入淡出效果

（1）淡入淡出语法规范

fadeIn( speed,easing,fn );  // 淡入

fadeOut( speed,easing,fn );   // 淡出

fadeToggle( speed,easing,fn );  // 淡入淡出切换

fadeTo( speed,opacity,easing,fn )  // 透明

（2）淡入淡出切换和透明效果参数

• 参数都可以省略，无动画直接显示
• speed：三种预定速度之一的字符串（“slow”，“normal”，“fant”）或表示动画市场的毫秒数值（如：1000）
• easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次
• opacity透明度必须写，取值0~1之间

5、自定义动画animate

（1）语法

animate( params,speed ,easing,fn );  // 自定义动画

• params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要才去驼峰命名法。其余参数都可以省略
• speed：三种预定速度之一的字符串（“slow”，“normal”，“fant”）或表示动画市场的毫秒数值（如：1000）
• easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

四、jQuery属性操作

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

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

（1）获取属性语法

prop("属性")

（2）设置属性语法

prop("属性","属性值")

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

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

（1）获取属性语法

attr("属性") 

（2）设置属性语法

attr("属性","属性值")

3、数据缓存data()

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

// 数据缓存data()这个里面的数据是存放在元素的内存里面的

// 获取数据语法
data("属性名")
// 附加数据语法
data("属性名","属性值")

// 这个方法获取data-index  h5自定义属性，第一个不用谢data- 而且返回的是数字型
// 比如要获取span标签里面的data-index 属性的值，可以直接这样写
$("span").data("index")

判断复选框被选中的个数

语法：$("选择器:checkd").length

五、jQuery内容文本值

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

html()  // 获取元素的内容

html("内容")  // 设置元素的内容

2、普通元素文本内容text()  （相当于原生innerText）

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

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

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

val()  // 获取表单的值

val("内容")  // 设置表单的内容