jQuery学习归纳总结

常用版本：jQuery-1.12.4.js（未压缩） jQuery-1.12.4.min.js（已压缩）

//   引入jQuery
<script src = 'jQuery-1.12.4.js'></script>

一.jQuery与DOM

1.DOM与jQuery相比：

（1）获取元素名字太长
（2）代码冗余（for）
（3）onclick注册事件存在覆盖问题，addEventListener()注册事件不存在覆盖问题，但有兼容性问题
（4）没有动画效果，如果需要，就必须手动封装

2.dom对象与jQuery对象的转换

dom对象和jQuery对象不能混用，转换
（1）dom对象转成jQuery对象

$(dom对象)

（2）jQuery对象转成dom对象
① 通过中括号[]
② get()方法

3.this的使用

this是个dom对象，所以this要使用jQuery的方法，一定要先转成jQuery对象 $(this)

二.$符号

$的来源：jQuery
类型：函数
作用：根据参数的不同，作用不同
1.选择器：可以获取元素 $(‘div’)
2.函数：入口函数的作用 $(function(){})
3.dom对象：将dom对象转成jQuery对象 $(document)
4.HTML字符串：创建节点 $(‘HTML字符串’)

多库共存：jQuery释放$符号的控制权

// 释放$符号，并且把$符号的能力给C
var c = $.noConflict();

三.选择器

1.CSS选择器（将js中的选择器放入jQuery的$里面）

（1）id选择器 $(’#ZhangSan’)
（2）标签选择器 $(‘li’)
（3）类选择器 $(’.rendering’)
（4）并集选择器 $(’.xiaoming, #ZhangSan’)
（5）交集选择器 $(’.xiaoming.handsome’)
（6）子代选择器 $(’.xiaoming>ol>li’)
（7）后代选择器 $(‘xiaoming li’)

2.过滤选择器

（1）:odd 从获取到的元素中过滤出下标为奇数的元素
（2）:even 从获取到的元素中过滤出下标为偶数的元素
（3）:first 从获取到的元素中过滤出第一个元素
（4）:lase 从获取到的元素中过滤出最后一个元素
（5）:eq 从获取到的元素中过滤出指定下标的元素

$('li:odd')
$('li:even')
$('li:first')
$('li:last')
$('li:eq(4)')     // 获取到里li里面的第5个元素

3.筛选选择器

（1）children()
jq提供的children()方法，可以获取元素内的所有子元素，支持传参，参数为选择器，可以根据选择器筛选出指定的子元素

$(this).children('ul').show();
$(this).chileren('ul').hide();

（2）find() 找后代元素

$(this).find('li')

（3）sibilings() 获取当前元素的所有兄弟元素，不包含自己

// 排他，突出等
$(this).css('opacity', 1);
$(this).sibings().css('opacity', 5);
// 简化上面俩行代码，链式编程
$(this).css('opacity', 1).sibings().css('opacity', 5)

（4）next()和nextAll()
下一个兄弟元素和后面所有兄弟元素
（5）prev()和prevAll()
上一个兄弟元素和前面所有兄弟元素
（6）parent() 查找父元素
（7）eq() 查找指定下标元素

// 获取li的第三个元素
$('li').eq(2);    // 相当于$('li:eq(2)');

四.样式操作和属性操作

1.css()操作

（1）获取样式

css(name)    // 只能获取第一个

（2）设置样式
① css(name, value)：
参数：name：样式名 value：样式值
② css(obj)
参数：包含多个样式的对象

// 给li标签设置样式
$('li').css('fontSize', '50px');
$('li').css('color':'red', 'fontSize':'50px');

2.class操作

添加类选择器：addClass()
移除类选择器：removeClass()
判断是否有该选择器：hasClass()
切换类名（有就移除，没有就添加）：toggleClass()

3.属性attr操作

获取属性：attr(name)
设置单个属性：attr(name, value)
设置多个属性（参数为对象）：attr(obj)
移除属性：removeAttr(name)

$(selector).attr(attribute)
$(selector).attr(attribute,value)
$(selector).attr({attribute:value, attribute:value ...})

prop方法和attr方法
① 对于表单元素的checked，selected，disable属性，使用prop操作
② 除了表单元素的三个属性使用prop方法外，其它都可以使用attr方法
③ 对于自定义属性，使用attr方法(abc, index)
④ 对固有属性，使用prop方法(title, id, style, checkd, selected, disable)

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>全选案例</title><style><style>* {padding: 0;margin: 0;}tbody tr {text-align: center;}</style>
</head><body><div class="wrap"><table><thead><tr><th>全选<input type="checkbox" id="j_cbAll" /></th><th>课程</th><th>老师</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox" /></td><td>吃西瓜</td><td>张三</td></tr><tr><td><input type="checkbox" /></td><td>吃西瓜</td><td>老王</td></tr><tr><td><input type="checkbox" /></td><td>烤番薯</td><td>田鸡</td></tr><tr><td><input type="checkbox" /></td><td>煎鸡蛋</td><td>小鸡炖蘑菇</td></tr></tbody></table></div><script src="jquery-1.12.4.js"></script><script>$(function () {$("#j_cbAll").click(function () {//修改下面的哪些checkbox$("#j_tb input").prop("checked", $(this).prop("checked"));});$("#j_tb input").click(function () {if ($("#j_tb input:checked").length == $("#j_tb input").length) {$("#j_cbAll").prop("checked", true)} else {$("#j_cbAll").prop("checked", false)}});});</script>
</body>
</html>

4.jQuery的特殊属性操作

（1）val方法
作用：用于设置和获取表单元素的值

$('input').val('蚕丝被');   // 设置input标签的内容为蚕丝被

（2）html方法和text方法
html同js中的innerHTML
text()同js中的innertext

$('#box').html('<h1>这是新的内容</h1>')

（3）获取宽高：width()方法和height()方法
获取：KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box').width() 设…(’#box’).width(500);

innerWidth => width+padding

$('#box').innerWidth();

outerWidth => width+padding+border
outerWidth方法的参数用于决定是否获取margin部分的值
默认值为false

$('#box').outerWidth(true);

可视区的宽高

$(window).width()

（4）获取页面的卷曲距离
scrollTop() scrollLeft()

$(window).scrollTop();
// 原生js：
window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

小火箭回到顶部：

$('html, body').animate({scrollTop:0}, 1000)

（5）位置信息：offset方法和position方法
offset方法：获取元素到页面之间的距离
返回的是个对象{top=xx, left=yy}

position方法：获取元素到有定位的父元素之间的距离（即js中offsetLeft，offsetTop相对于offfsetParent）

$('.son').position();

五.节点操作

1.添加节点

在元素里面添加节点的方法：append() appendTo() prepend() prependTo()
（1）append()
语法：parent.append(child);
作用：把children添加到parent里面，在最后面

$('div').append($('.outerP'))

（2）appendTo()
语法：children.appendTo(parent);
作用：把children添加到parent里面，在最后面

$('.outerP').appendTo('div')
// 在每个 <p> 元素的结尾插入 <span> 元素
$("<b>Hello World!</b>").appendTo("p");

（3）prepend()
语法：parent.prepend(child);
作用：把children添加到parent里面，在最前面

$('div').prepend($('.outerP'))

（4）prependTo()
语法：children.prependTo(parent);
作用：把children添加到parent里面，在最后面

$('.outerP').prependTo('div')
// 在每个 <p> 元素的开头插入 <span> 元素
$("<span>Hello World!</span>").prependTo("p");

在元素前面后面添加节点的方法：append() appendTo() prepend() prependTo()
（5）after()和before()
A.after(B); 把B放在A前面
A.before(B); 把B放在A前面

$('div').after($($('div p')));
$('div').before($($('div p')));

2.清除节点

empty()

$('div').empty()

3.删除节点

remove()

$('div').remove();

4.克隆节点

语法：$(selector).clone(true|false)
默认为深拷贝（拷贝元素里面的内容）
参数表示是否克隆元素的事件，默认不拷贝事件
参数为布尔类型值

var $P = $('.outerP').clone(true);
$('div').append($P);

六.动画

1.show系列动画

show（展示） hide（隐藏） toggle（切换）
（1）show(speed, easing, callback)
参数：
① speed：动画时长，单位ms
默认字符串：‘fast’ ：200；‘normal’：400；‘slow’：600
② easing：动画效果，swing(秋千，钟摆=>慢快慢)
默认：swing，另提供linear匀速
③ callback：当动画执行结束后执行的回调函数，可选的

$('button').click(function(){$('div').show(2000, functionn(){$('div').css('background', 'yellow')});
})

2.slide系列动画

slideDown（展示） slideUp（隐藏） slideToggle（切换）

slideXXX(speed, easing, callback)
slide系列动画的使用和show系列一样
注：slide系列没有参数，是有动画效果的

$('button').eq(0).click(function(){$('div').slideDown(2000, function(){console.log('slideDown结束了');});
})

3.fade系列动画

fadeIn（展示） fadeOut（隐藏） fadeToggle（切换）

fadeXX(speed, easing, callback)
fade系列动画的使用和show系列一样
注：fade系列没有参数时，是有动画效果的

4.animate(obj, speed, easing, callback)及stop

（1）animate(obj, speed, easing, callback)
参数：obj是个对象，对象里面写动画的样式和样式值
obj为必须要写的参数
speed，easing（swing/linear），callback都是可选的

$('button').click(function(){$('div').animate({left:800},        // 向左移动800100,          // speed：动画时常functiion(){console.log('到达了终点');})
})

动画队列（一个个执行）：

$('div').animate({left:800},1000).animate({top:200},1000).animate({borderRadius:'50%'},1000).slideUp(1000).slideDown(1000)

（2）stop(clearQueue, jumpToEnd)
参数：都是可选的，默认值为false
clearQueue是否清除元素的动画队列，true表示清除
jumpToEnd是否跳转到当前正在执行的动画的最终效果，true表示跳转

$('button').eq(0).click(function(){$('div').stop();
})

七.事件

jQuery事件：简单事件，bind， delegate， on(type, selector, data, fn) 及off解绑

1.注册事件：简单事件

$('div').click(function(){})

jQuery给元素注册同一事件多次，不存在覆盖问题

$('div').click(function(){console.log('click')}).mouseenter(){console.log('mouseenter')}

2.bind事件：bind(type, data, fn)
事件类型参数，用空格隔开多个事件名，表示给元素同时注册上多个事件

$('div').bind('click mouseenter', function(){console.log(1);
}).

局限性：不支持动态绑定（新创建的元素没有获取到事件）

unbind()：把所有的事件都给解绑了
unbind()：给元素的指定事件给解绑了

$('#btn').click(function(){$('div').unbind('mouseenter');
})

局限性：不支持动态绑定（新创建的元素没有获取到事件）

3.注册事件委托：delegate(seletor, type, fn)

$('div').delegate('p', 'click', function(){// 把点击事件注册给了div// 让元素P去触发alert(1);
})

解绑事件：undelegate
undelegate()解绑元素所有的委托事件
undelegate(seletor, type) => 解绑元素的指定的委托事件

$('btn').click(function(){$('div').undelegate('p', 'click');
})

4.on注册事件：on(type, seletor, data, fn)
参数：type：事件类名
seletor：选择器，由指定的选择器去触发，参数可选（存在on为事件委托）
data：数据，用于事件处理函数内部使用，可选
fn：事件发生运行的函数，可选

$('#box').on('click mouseenter', function(){alert(1);
})

解绑：off()
off()：解绑元素所有的事件
off(type)：解绑元素指定的事件
解绑元素的事件委托：off(type, seletor)

$('#btn').on('click', function(){$('#box').off('mousseenter');
})
// 解绑事件委托
$('#box').off('click', 'p');

5.触发事件与阻止事件传播
（1）触发事件的方式：
① 元素.事件()
② 元素.trigger(‘type’)

$('#btn').click();
$('#btn').tigger();

（2）阻止事件传播：
jQuery：return false能阻止事件传播（事件冒泡）和阻止浏览器的默认行为
js：return false阻止浏览器的默认行为
e.stopPropagation e.preventDefault()

// 节流阀
// keydown事件只要不松手就会一直触发var open = true;
$(document).on('keydown', function(e){if(open){open = false;var keycode = e.keycode;console.log(keycode);}
})
$(document).on('keyup', function(e){open = true; // 阀门打开var keycode = e.keycode;
})

另：事件的循环机制

事件的循环机制：js是一门单线程结构(同步异步问题)
(1) 异步代码：延时器定时器注册事件中的事件处理函数
(2) 宏任务(script timeout)和微任务(promise)：先主线程执行完(事件循环)，再执行异步代码(下一次循环)

八.jQuery的特点：

1.隐式迭代(偷偷地遍历)
（1）设置性操作，会给所有属性设置上相同的值
（2）获取性操作，只返回第一个元素对应的值
（3）想给每个元素设置不同的值，需要手动遍历jQuery对象

var arr = ['red', 'yellow', 'blue'];
for(var i = 0; i < $('li').length; i++){$('li').eq(i).css('backgroundcolor', a);
}

遍历：each遍历对象
语法：jQuery对象.each(function(index, ele){ })
参数：index => 遍历当前元素的下标
ele => 当前遍历的元素

2.链式编程(通过.继续操作，end方法(上次返回的对象))
对于设置性操作，会把当前的jQuery对象给返回出来，可以继续.操作
对于获取性操作，会返回具体的值，不再返回jQuery对象（所以i获取性操作后不可以再链式编程）

var ret = $('body').css('backgroundColor', '#000').text('修改内容').css('fontSize');

链式编程返回上一次的对象：end()方法
preObject => 找到上一次返回的jq对象，是个属性
end() => 把preObject属性封装成方法

// 五星好评案例    =>给点击的五角星设置为实心，前面的也设置为实心，后面的设置为空心
$(this).text(wjx_s).prevAll().text(wjx_s).end().nextAll().text(wjx_k);

九.插件（需要引入jQuery，再引入插件）

1.懒加载插件的使用：jquery.lazyload.js

引用之后需要配置才能实现效果
使用懒加载插件的步骤
① 引用jQuery，jQuery插件
② 修改图片标签
src改为data-original（看实际插件的使用，也有懒加载插件改为data-src）
添加了类名 => 方便找到需要懒加载的图片
最好加上width, height（不是必须）=> 统一图片大小
③ 在js中：$(“img.lazyload”).lazyload();

2.jQuery插件的原理：(jQuery的原型：$.fn().插件名(){ }) 懒加载插件(引入，配置)等
把插件提供的方法放在了jQuery的原型中
jQuery的实例对象都可以访问到原型中的方法
jQuery的原型：
① jQuery.prototype
② jQuery.fn
③ $.prototype
④ . f n 制作插件： .fn 制作插件： .fn制作插件：.fn.插件名(){}

十.jQuery没有封装的DOM办法

（1）load() 加载资源，是H5提供的，jQuery没有封装这个方法
（2）paly() 播放音频或视频，H5提供的，jQuery没有封装这个方法
总结：load()，play()只能通过DOM对象进行调用