jQuery基本方法小结

jQuery学习总结

一、jQuery概述

jQuery就是一个快速、简洁的javascript库，jQuery封装了javascript常用的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互。

二、jQuery的基本使用

1、jQuery顶级对象$

$就是jQuery的别称，同时 $也是jQuery的顶级对象，相当于原生代码的window，把元素用 $包装成jQuery对象，就可以调用jQuery的方法。

2、jQuery对象和DOM对象

1. DOM对象：用原生js获取过来的对象就是DOM对象。
2. jQuery对象：本质就是用$把DOM元素进行包装。
3. jQuery对象只能调用jQuery方法，DOM对象只能调用DOM方法。
4. DOM转化为jQuery的方法：$(DOM元素)
5. jQuery转换为DOM的方法：$(DOM元素)[index], $(DOM元素).get(index)。

三、jQuery常用API

1、jQuery选择器

$(“选择器”)，直接写CSS里的选择器，但要加引号。

(1)隐式迭代

遍历内部DOM元素的过程就叫隐式迭代，给匹配到的所有元素进行循环遍历。

(2)筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(index)”)	获取到该索引号的li元素
:odd	$(“li:odd”)	获取到索引号为奇数的li元素
:even	$(“li:even”)	获取到索引号为偶数的li元素

(3)筛选方法

语法	用法	描述
parent()	$(“li”).parent();	查找父级
children(selector)	$(“ul”).children(“li”)	相当于$(“ul > li”),找亲儿子
find(selector)	$(“ul”).find(“li”)	相当于$(“ul li”),后代选择器
siblings(selector)	$(".first").siblings(“li”)	查找兄弟节点
nextAll([expr])	$(".first").nextAll()	查找当前元素之后的所有同辈元素
prevAll([expr])	$(".last").prevAll()	查找当前元素之前的所有同辈元素
hasClass(class)	$(“div”).hasClass(“protected”)	检查当前元素是否含有某个特定的类，如果有则返回true
eq(index)	$(“li”).eq(2)	查找到索引号为2的li

2、jQuery样式操作

(1)操作CSS方法

6. 参数只写属性名，则返回属性值

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

7. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字不用跟单位和引号。

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

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

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

(2)设置类样式方法

注意操作类里的参数不用加点
9. 添加类

$("div").addClass("current");

10. 移除类

$("div").removeClass("current");

11. 切换类

$("div").toggleClass("current");

3、jQuery效果

(1)显示隐藏效果

show([speed],[easing],[fn]);
hide([speed],[easing],[fn]);
toggle([speed],[easing],[fn]);

隐藏参数：

1. 参数都可以省略，无动画显示。
2. speed：三种预定速度的字符串(“slow”, “normal”,“fast”)或者表示动画时长的毫秒数值。
3. easing：用来指定切换效果，默认是swing，也可用参数"linear"。
4. fn：回调函数，动画结束后执行。

(2)滑动效果

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

隐藏参数：

1. 参数都可以省略。
2. speed：三种预定速度的字符串(“slow”, “normal”,“fast”)或者表示动画时长的毫秒数值。
3. easing：用来指定切换效果，默认是swing，也可用参数"linear"。
4. fn：回调函数，动画结束后执行。

(3)事件切换

hover([over,]out);

1. over:鼠标移到元素上要触发的函数。
2. out：鼠标移出元素上要触发的函数。
3. 如果里面只写一个函数则是鼠标经过执行一次，离开又执行一次。

(4)动画队列及其停止排队方法

stop()

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

(5)淡入淡出

fadeIn([speed],[easing],[fn]);
fadeOut([speed],[easing],[fn]);
fadeToggle([speed],[easing],[fn]);

隐藏参数：

1. 参数都可以省略。
2. speed：三种预定速度的字符串(“slow”, “normal”,“fast”)或者表示动画时长的毫秒数值。
3. easing：用来指定切换效果，默认是swing，也可用参数"linear"。
4. fn：回调函数，动画结束后执行。

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

opacity必须写，取值0~1之间，其他参数和上面一样。

(6)自定义动画

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

params:想要更改的样式属性，以对象形式传递，必须写。复合属性要用驼峰命名法。

4、jQuery属性操作

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

1.获取属性语法

prop("属性")

2.设置属性语法

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

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

1.获取属性语法

attr("属性")//类似原生getAttribute()

2.设置属性语法

attr("属性", "属性值")//类似原生setAttribute()

(3)数据缓存data()

data()方法可以在指定元素上存取数据，并不会修改DOM元素结构，，一旦刷新，之前存放的数据都会清空。
1.附加数据语法

data("name", "value")//向被选的元素附加数据

2.获取数据语法

data("name")//向被选元素获取数据

5、jQuery内容文本值

(1)普通元素内容

html()//获取元素内容

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

(2)普通元素文本内容

text()//获取元素内容

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

(3)普通元素表单内容

val()//获取表单内容

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

6、jQuery元素操作

(1)遍历元素

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

$("div").each(function(index,domEle) {XXX;})

1. each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
2. 里面回调函数有两个参数：index是每个元素的索引号；domEle是每个DOM元素对象。
3. 所以想要使用jQuery方法，需要把这个DOM元素转换为jQuery对象。

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

1. $.each()方法可以遍历任何对象。主要是数据处理。
2. 里面回调函数有两个参数：index是每个元素的索引号；element遍历内容。

(2)遍历元素

$("<li></li>");

(3)添加元素

内部添加

element.append("内容");//加在后面
element.prepend("内容");//加在前面

外部添加

element.after("内容");//加在后面
element.before("内容");//加在前面

(4)删除元素

element.remove();//删除匹配的元素本身
element.empty();//删除匹配元素的内容
element.html("");//删除匹配元素的内容

7、jQuery尺寸位置操作

(1)尺寸

语法	用法
width() / height()	取得匹配元素的宽度和高度，只算width和height
innerWidth() / innerHeight()	取得匹配元素的宽度和高度，包含padding
outerWidth() / outerHeight()	取得匹配元素的宽度和高度，包含padding和border
outerWidth(true) / outerHeight(true)	取得匹配元素的宽度和高度，包含padding，border，margin

(2)位置

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

①offset()方法设置或返回被选中的元素相对于文档的坐标偏移，跟父级没有关系。
②该方法有两个属性left,top,offset().top用于获取数值
③可以设置元素偏移：offset({top:10;left:30});

2.position()方法就是获取具有父级定位的距离

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

四、jQuery事件

1、jQuery事件注册

element.事件(function() {})

2、jQuery事件处理

(1)on 绑定事件

element.on(events,[selector],function() {})

可以绑定多个事件处理

$("div").on({
	mouseover: function() {},
	mouseout: function() {},
	click: function() {}
});

如果事件相同

$("div").on("mouseover mouseout" ,function() {
	$(this).toggleClass("current");
});

on()还可以事件委派操作。

$("ul").on("click", "li", function() {
	alter("hello world!");
});

on()可以给动态创建的元素绑定事件。

(2)off 解绑事件

off()方法可以移除通过on()方法添加的事件处理程序。

$("p").off();//解绑p元素所有事件处理程序
$("p").off("click");//解绑p元素上的点击事件
$("ul").off("click", "li");//解绑事件委托

(3)自动触发事件 trigger()

element.click();
element.trigger("type");//触达的事件类型
element.triggerHandler("type")//不会触发元素的默认行为

3、jQuery事件对象

事件被触发，就会有事件对象产生。

element.on(events,[selector],function(event) {})

阻止默认行为：event.preventDefault()
阻止冒泡：event.stopPropagation()