jQuery学习总结
一、jQuery概述
jQuery就是一个快速、简洁的javascript库，jQuery封装了javascript常用的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互。
二、jQuery的基本使用
1、jQuery顶级对象$
$就是jQuery的别称，同时 $也是jQuery的顶级对象，相当于原生代码的window，把元素用 $包装成jQuery对象，就可以调用jQuery的方法。
2、jQuery对象和DOM对象
- DOM对象：用原生js获取过来的对象就是DOM对象。
- jQuery对象：本质就是用$把DOM元素进行包装。
- jQuery对象只能调用jQuery方法，DOM对象只能调用DOM方法。
- DOM转化为jQuery的方法：$(DOM元素)
- 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方法
- 参数只写属性名，则返回属性值
$(this).css("color");- 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字不用跟单位和引号。
$(this).css("color", "red");- 参数可以是对象，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号。
$(this).css({"color": "white","font-size": "20px"});(2)设置类样式方法
注意操作类里的参数不用加点
9. 添加类
$("div").addClass("current");- 移除类
$("div").removeClass("current");- 切换类
$("div").toggleClass("current");3、jQuery效果
(1)显示隐藏效果
show([speed],[easing],[fn]);
hide([speed],[easing],[fn]);
toggle([speed],[easing],[fn]);隐藏参数：
- 参数都可以省略，无动画显示。
- speed：三种预定速度的字符串(“slow”, “normal”,“fast”)或者表示动画时长的毫秒数值。
- easing：用来指定切换效果，默认是swing，也可用参数"linear"。
- fn：回调函数，动画结束后执行。
(2)滑动效果
slideDown([speed],[easing],[fn]);
slideUp([speed],[easing],[fn]);
slideToggle([speed],[easing],[fn]);隐藏参数：
- 参数都可以省略。
- speed：三种预定速度的字符串(“slow”, “normal”,“fast”)或者表示动画时长的毫秒数值。
- easing：用来指定切换效果，默认是swing，也可用参数"linear"。
- fn：回调函数，动画结束后执行。
(3)事件切换
hover([over,]out);- over:鼠标移到元素上要触发的函数。
- out：鼠标移出元素上要触发的函数。
- 如果里面只写一个函数则是鼠标经过执行一次，离开又执行一次。
(4)动画队列及其停止排队方法
stop()- stop用于停止动画或效果。
- 注意：stop()写在动画或者效果前面，相当于停止结束上一次动画。
(5)淡入淡出
fadeIn([speed],[easing],[fn]);
fadeOut([speed],[easing],[fn]);
fadeToggle([speed],[easing],[fn]);隐藏参数：
- 参数都可以省略。
- speed：三种预定速度的字符串(“slow”, “normal”,“fast”)或者表示动画时长的毫秒数值。
- easing：用来指定切换效果，默认是swing，也可用参数"linear"。
- 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;})- each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
- 里面回调函数有两个参数：index是每个元素的索引号；domEle是每个DOM元素对象。
- 所以想要使用jQuery方法，需要把这个DOM元素转换为jQuery对象。
$.each(object,function(index,element) {XXX;})- $.each()方法可以遍历任何对象。主要是数据处理。
- 里面回调函数有两个参数：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()
