Cao NotejQuery
什么是jQuery
下载 jQuery
- 去官方网站下载：http://jquery.com/
- 去 CDN 下载：[https://www.bootcdn.cn/jquery/](
引入方式
jQuery 不需要安装，他就是一个 js 文件，把下载的 jQuery 放到一个公共的位置，想要在某个页面上使用 jQuery 时，只需要在相关的 HTML 文档中引入该库文件即可。
一般可以放在 head 标签中或者 </body> 标签前面，但是一定要注意，要在其它 js 文件前面引入 jQuery 库。
当我们需要使用 jQuery 的时候，会在 HTML 文档中引入 jquery.js, 可以通过以下两种方式引入：
● CDN 引入（CDN 的全称是 Content Delivery Network，即内容分发网络） ● 本地 jQuery 文件引入
<!-- 方式一：引入 CDN 服务 -->
<script src=”https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js”></script>
<!-- 方式二：引用本地文件 -->
<!-- <script src=”js/jquery.min.js”></script> --><!-- 方式一：引入 CDN 服务 -->
<script src=”https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js”></script>
<!-- 方式二：引用本地文件 -->
<!-- <script src=”js/jquery.min.js”></script> -->注：引入 jquery 必须放在所有其他 script 标签之前；
jquery 中 2.0 以上的版本不兼容 ie6,7,8；
jQuery 与$的关系
$ 就是 jQuery 的一个简写形式， $(‘#f00’) 和 jQuery(‘#foo’) 是等价的，$.ajax 和 jQuery.ajax 是等价的。
页面加载
$(document).ready(function(){});$(function(){})；简写；
和原生文档加载完的区别：
① 原生：必须把所有的元素都加载完（包括图片），并且只能写一个 onload；
②jquery：只把页面的结构加载完，读取到标签就可以了，可以写多个；
$(document).ready() 同 window.onload 的区别：
1. 执行时机不同，window.onload 必须等待网页中所有的内容加载完毕后（包括图片）才能执行，而 $(document).ready() 是网页中所有 DOM 结构绘制完毕就执行，可能 DOM 元素关联的东西并没有加载完。 2. window.onload 只能写一个 , 多个时后面的会覆盖掉前面的，而 $(document).ready() 可以写多个，不会覆盖。 3. window.onload没有简写形式，而$(document).ready()可以简写成$(function (){})。
元素
- dom 元素：原生获取的就是 dom 元素（[HTMLCollection]）；
- jquery 元素：k.fn.init 的元素就是 jquery 元素（k.fn.init）;
转换元素
使用 jquery 元素不能使用原生的方法，不能混着用，可以转换元素使用；
- $(li)，将使用 dom 获取 li 变量的元素转换为 jquery 的元素；
- jquery 转 dom：①$("li").get(下标)，②$("li")[下标] 转 dom 加下标，转 jquery 加$；
和其他框架冲突
jQuery 使用$符号的方式，还可以直接使用 jQuery；
- 让渡：jQuery.noConflict();
将$符让给其他的库使用，自己还可以使用jQuery来代替$； 如果 jQuery 库还想使用$符,可以使用闭包，将jQuery作为实参，$作为形参；
(function($){
$("li");
})(jQuery); 使用$作为形参使用；(function($){
$("li");
})(jQuery); 使用$作为形参使用；- 改变：
var j = jQuery.noConflict()；声明任意变量来替换$符；改变之后不能再使用$；
选择器
选择器的实现比较复杂，消耗性能比较大，建议相同的选择器进行变量保存操作，避免重复使用选择器；
css 选择器
可以使用所有的样式选择器；
| 选择器 | 说明 |
|---|---|
#id | 获取 id 名 |
.class | 获取 class 类名 |
div | 获取标签名 |
div,p,li | 群组选择器 |
div.red | 获取 class 为 red 的 div 标签 |
div>span | 获取 div 下的直接子元素 span； |
div span | div 下的所有子元素 span 标签； |
div~span | 选择下面所有的； |
基本筛选选择器
| 选择器 | 说明 |
|---|---|
:first | 第一个 |
:last | 最后一个 |
:eq(index) | 指定第一个，下标从 0 开始； |
:not() | 除了小括号的标签； |
:odd | 下标为奇数的标签，下标是从 0 开始的，所以选择的是偶数标签； |
:even | 下标为偶数的标签 |
:gt(1) | 下标大于 1 的元素 |
:lt(1) | 下标小于 1 的元素； |
:header | 所有 h 标签； |
:root | 选中 html 标签； |
:animated | 匹配所有正在执行动画效果的元素； |
$("div:not(:animated)").animate({"width":"+=200"}) //给没有在动画的 div，加长
内容选择器
| 选择器 | 说明 |
|---|---|
:contains(我) | 选择内容有我的标签 |
:empty | 选择内容为空的标签，有空格或标签都不为空； |
:parent | 选择有内容的标签； |
:has(span) | 选择有 span 标签的标签； |
隐藏看见
| 选择器 | 说明 |
|---|---|
:hidden | 获取看不见的标签(在页面中不显示的标签) type="hidden" 和 display:none； |
:visible | 获取可以看见的标签，页面中显示的 |
属性选择器
| 选择器 | 说明 |
|---|---|
div[class] | 有 class 属性的 |
div[class=box] | div 的 class 属性值为 box 的； |
div[class^=box] | 以 box 开头的 |
div[class$=box] | 以 box 结尾的 |
div[class*=box] | 包含 box 的； |
div[class][title] | 有 class 属性并且有 title 属性的； |
子元素选择器
| 选择器 | 说明 |
|---|---|
ul li:first-child | 选择所有父元素中第一个 li first 的区别：第一个父元素下所有 li 中的第一个 li |
ul li:last-child | 选择所有 ul 下的最后一个 li； |
:nth-child() | 选择指定的第几个标签，从 1 开始 |
:first-of-type | 选择第一次出现的； |
:last-of-type | 最后一次出现的； |
:nth-of-type() | 指定的第几个标签； |
child：是从第一个孩子开始找；
of-type：是从第一次出现的孩子找的；
表单选择器
:input 选中所有表单标签，包括 select、textarea；
选中具体某个 input 标签可以冒号 type 类型，select 直接使用标签选择器；
例：
:text 选中单文本框；
.attr("checked",true)；设置复选框被选中状态
表单对象属性
| 选择器 | 说明 |
|---|---|
:enabled | 选中所有可用的； |
:disabled | 选中所有禁用的； |
:checked | 选中的； |
:selected | 下拉框被选中的； |
选择器迭代
$.each
$.each($('li'), function (index, item) {})
// or
$('li').each(function (index, item) {
// 这里的item是每个元素, 使用jquery需要再次$(item)
// 也可以$(this), this指向当前这个item
})$.each($('li'), function (index, item) {})
// or
$('li').each(function (index, item) {
// 这里的item是每个元素, 使用jquery需要再次$(item)
// 也可以$(this), this指向当前这个item
})$.map
var arr = [1, 2, 3, 4]
$.map(arr, function (item, index) {})var arr = [1, 2, 3, 4]
$.map(arr, function (item, index) {})当 map 操作数组返回 null 和 undefined 时，不会保存在新的数组中；
$.map不能直接$(b).map(function(){});
var ary = [1, 2, 3, 4]
var aa = $.map(ary, function (a, b) {
if (a > 3) {
return null
} else {
return a
}
})
console.log(aa) //[1,2,3]，4满足条件，返回空；var ary = [1, 2, 3, 4]
var aa = $.map(ary, function (a, b) {
if (a > 3) {
return null
} else {
return a
}
})
console.log(aa) //[1,2,3]，4满足条件，返回空；这里的 aa 是 dom 元素的，如果$(ary).map调用的话直接将类型转换jquery元素了；低版本浏览器会发生不兼容；标准调用方法是$.map(ary,function(){});
事件和动画
方法
所有事件的调用：$("button").click(function(){});
直接去掉 on；直接括号函数，
.index()；元素的下标；
jquery 选项卡
$('button').click(function () {
$('.box div').eq($(this).index()).addClass('active').siblings('div').removeClass()
$(this).addClass('on').siblings('button').removeClass()
})
//链式调用，可以一直写点，
//隐式循环，不用循环，隐式调用循环；$('button').click(function () {
$('.box div').eq($(this).index()).addClass('active').siblings('div').removeClass()
$(this).addClass('on').siblings('button').removeClass()
})
//链式调用，可以一直写点，
//隐式循环，不用循环，隐式调用循环；事件对象
在给元素添加事件的函数里，直接传一个形参使用事件对象 event，不需要做兼容；
转回原生事件对象：e.originalEvent; 鼠标滚轮事件等需要转回原生
事件对象常用的属性
类型
type：返回事件类型，click；target：事件源delegateTarget：代理的这个对象，谁调用事件的就是谁（delegate：代表）；currentTarget：触发该事件的当前对象；
事件委托的事件时：delegateTarget指向的是父元素，currentTarget指向的是子元素；
直接绑定的事件时：它们两个的值是相等的；
位置属性
在页面上移动：$(document).mousemove
pageX,pageY：距离文档的位置（还计算被卷起的高度）；clientX,clientY：距离可视窗口的位置；offsetX,offsetY：距离绑定事件元素的位置；screenX,screenY：距离屏幕边缘的位置；
行为
右键：$(document).contextmenu；
e.stopPropagation()阻止事件冒泡（父元素和子元素都设置点击事件，点击子元素会触发父元素）；e.preventDefault()阻止默认行为return false可以阻止冒泡和默认行为；
键盘事件
keydown：按下；keyup：抬起；常用于表单输入框按下数字；keyCode：获取按键的键码值；which： 相当于 keyCode 获取键码值；
which 还可以获取鼠标按键:(1,2,3)代表左中右；需要放在对应的事件当中，click,scroll,contextmenu;
- 键盘常用：
altkeyctrlkeyshiftkey；
$('textarea').keyup(function () {
$('i').html(40 - $(this).val().length) //当输入框的按钮抬起时，修改i标签的内容,做到实时更新；
})$('textarea').keyup(function () {
$('i').html(40 - $(this).val().length) //当输入框的按钮抬起时，修改i标签的内容,做到实时更新；
})事件
把原生的 onclick 变成 click，去掉 on，后面直接跟括号函数，不用等号；
例：
$("button").click(function(){});事件可以链式调用：写完一个事件后面直接点上另一个事件；
.hover(fn1,fn2)；当一个 fn 时，为移入，两个是移入移出；元素.focus()；有参数 function 时，表示元素获得焦点时，要执行的处理函数；
没有参数时，调用 focus 方法，获得焦点；
blur(),submit(),change(), select()，reset()；都可以使用；
事件处理
事件绑定
绑定一个事件：
js$('div').on('click', function () {})$('div').on('click', function () {})绑定多个事件：
js$('div').on('mouseover mouseout', function () {}) // or $('div').on({ click: function () {}, mouseover: function () {}, })$('div').on('mouseover mouseout', function () {}) // or $('div').on({ click: function () {}, mouseover: function () {}, })自定义事件：
js$('div').on('custom', function () {}) // 触发自定义事件 $('div').trigger('custom')$('div').on('custom', function () {}) // 触发自定义事件 $('div').trigger('custom')触发事件：
js$('button').trigger('submit')$('button').trigger('submit')
事件委托
把子元素要做的事交给父元素
$('.parent').on('click', $('.children'), function () {})$('.parent').on('click', $('.children'), function () {})事件移除
$('div').off()$('div').off()（1）不填参数时，移除页面中的所有事件；
（2）一个参数：填写要移除的具体事件，可以填写命名空间的函数；
（3）二个参数：.off(事件，对应事件函数名)；
命名空间
（1）在原生里：将所有的函数放在一个对象里，需要用到哪个函数就对象取值；
（2）jquery：在事件后面加点，后面跟自定义名字，例：click.b；
$("span").off("click.b") 清除事件 b；
- 只执行一次事件：.one(事件，函数)；
动画效果
可用方法
基本效果
show()；显示hide()；隐藏toggle()；显示或隐藏；
透明度变化
fadeIn()；透明度变化显示；fadeOut()；透明度变化隐藏；fadeTo()；指定透明度变到多少，第一个参数时间，第二个参数透明度的值，第三个参数填写其他的；fadeToggle()；透明度的显示或消失；
滑动
slideUp()；收起；slideDown()；放下；slideToggle()；收起或放下；
可用参数
第一个参数：可以传入时间，单位毫秒，或填写关键字：fast(200),normal(400),slow(600);
第二个参数：linear，动画方式；
第三个参数：函数，用来动画完成执行的回调函数；
例：$("div").show(1000,"linear",function(alert(1)));
自定义动画
animate
第一种语法
js$('div').animate({ width: 100 }, 1000, 'linear', function () { console.log(1) })$('div').animate({ width: 100 }, 1000, 'linear', function () { console.log(1) })第一个参数：对象，对象里面是变化属性的键值对；
第二个参数：时间，单位毫秒；
第三个参数：速度变化方式；linear 匀速，默认为 swing；
第四个参数：动画完成的函数；
第二种语法：
js$("div").animate({width:100},{duration:2000,complete:function(){})$("div").animate({width:100},{duration:2000,complete:function(){})第一个参数：对象，对象里面写变化属性的键值对；
第二个参数：对象，动画的额外选项；duration(持续时间)，complete(完成执行的函数);
动画对列
js$('div').animate({ width: 100 }, { queue: false }).animate({ height: 100 })$('div').animate({ width: 100 }, { queue: false }).animate({ height: 100 })执行完前一个，再执行后面的；
queue:false动画一起执行；animate()；也可以使用属性值：show,hide,toggle，来代替透明度变化和高度滑动；
累加、累减动画：使用"+="或"-="；
js$('div').animate({ width: '+=500' })$('div').animate({ width: '+=500' })每点击一下，加 500 的宽度；
stop
.stop([clearQueue],[gotoEnd])
如果不填写参数，停止当前动画，如果后面还有动画，则会直接执行后面的动画；
动画停止：true 或 false；第一个是否清空队列，第二个是否立即完成当前动画；
stop(true)：清空队列，停止当前动画；stop(false,true)；常用于后一个动画需要基于前一个动画结束才执行stop(true,true)；停止当前动画并直接到达当前动画的末状态，并清空动画队列；
//用户鼠标移入，清空后面的队列，停止当前动画，再执行当前动画
//如果不是动画对列，不需要加true；
$('div').hover(
function () {
$(this).stop(true).animate({ width: 500 }, 300).animate({ height: 500 }, 300)
},
function () {
$(this).stop(true).animate({ height: 100 }, 300).animate({ width: 100 }, 300)
},
)//用户鼠标移入，清空后面的队列，停止当前动画，再执行当前动画
//如果不是动画对列，不需要加true；
$('div').hover(
function () {
$(this).stop(true).animate({ width: 500 }, 300).animate({ height: 500 }, 300)
},
function () {
$(this).stop(true).animate({ height: 100 }, 300).animate({ width: 100 }, 300)
},
)finish
元素的动画立即完成；
delay
元素.delay(毫秒).动画；元素等过了毫秒值后再开始动画；
动画队列中的 queue;
- css 不属于动画，在参于动画队列时，不会在动画队列中排队，会先执行；
queue(function(){}); 需要在函数括号添加个形参，在事件里面调用这个形参；- 除了使用 queue 强行插入之外，使用回调函数，在前面的标签，作为结束动画执行的内容；
强行插入动画队列，函数完成以后会影响对列下面的动画执行，需要在函数的括号中写个形参，然后在调用这个形参加小括号，调用确保队列剩下的动画正常执行；这个形参是一个函数，相当于 queue 后面的动画队列的一个集合，需要调用一下；
判断元素是否处于动画状态
在使用 animate() 方法的时候，要避免动画积累而导致动画与用户的行为不一致，当用户快速在某个元素上执行 animate() 动画时，就会出现动画积累。解决方法是判断元素是否处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。
if(!$(this).is(":animated")){ //判断元素是否正处于动画状态
//如果当前没有进行动画，则添加新动画
}
也可以：$("div:not(:animated)").animate({ left: "+=20" }, 1000); //没有在动画的div元素添加动画
$("li").hover(function(){
if(!$(this).find("div").is(":animated")){ //如果没有在动画就执行动画；
$(this).find("div").animate({
"height": "show",
});
}
},function(){
$(this).find("div").animate({
"height": "hide",
});
})
$("div:not(:animated)").animate({ left: "+=20" }, 1000); //没有在动画的div元素添加画if(!$(this).is(":animated")){ //判断元素是否正处于动画状态
//如果当前没有进行动画，则添加新动画
}
也可以：$("div:not(:animated)").animate({ left: "+=20" }, 1000); //没有在动画的div元素添加动画
$("li").hover(function(){
if(!$(this).find("div").is(":animated")){ //如果没有在动画就执行动画；
$(this).find("div").animate({
"height": "show",
});
}
},function(){
$(this).find("div").animate({
"height": "hide",
});
})
$("div:not(:animated)").animate({ left: "+=20" }, 1000); //没有在动画的div元素添加画函数
递归：在函数中调用自己，需要有一个出口，否则会死循环；
回调：当做参数传递给另一个函数；
闭包：两个函数嵌套，内层函数使用外层函数的变量；
$(function () {
function down() {
$(this).next().slideDown(down)
}
$('div').eq(0).slideDown(down)
})$(function () {
function down() {
$(this).next().slideDown(down)
}
$('div').eq(0).slideDown(down)
})递归让下一个
extend
扩展
$.extend(obj,obj1,obj2)；将 obj1 和 obj2 扩展到 obj 中，一般 obj 是一个空对象{}；
var obj3 = $.extend({}, obj1, obj2)var obj3 = $.extend({}, obj1, obj2)深拷贝
复制地址和数据
原理：根据地址找到内容，并复制内容在堆中重新存储，返回新的地址；新的值修改的地址不影响旧的值；
var obj2 = $.extend(true, {}, obj3)var obj2 = $.extend(true, {}, obj3)默认是 false(浅拷贝)；true 深拷贝；如果不用 true 相当于声明了两个变量(加载慢)；如果用 true 就是拷贝；
var obj4 = { name: 'zs' }
var obj6 = $.extend(true, {}, obj4)
obj6.name = 'ls'
console.log(obj6) //ls
console.log(obj4) //zsvar obj4 = { name: 'zs' }
var obj6 = $.extend(true, {}, obj4)
obj6.name = 'ls'
console.log(obj6) //ls
console.log(obj4) //zs浅拷贝(原生方法)
只复制地址，不复制数据；修改新变量的值，旧变量的值也一起修改了；
var obj4 = { name: 'zs' }
var obj5 = obj4
obj5.name = 'ls'
console.log(obj5.name) //ls
console.log(obj4.name) //lsvar obj4 = { name: 'zs' }
var obj5 = obj4
obj5.name = 'ls'
console.log(obj5.name) //ls
console.log(obj4.name) //ls原理：复制了 obj4 的地址，数据没有复制，所以修改了内容，obj4 的地址也是那个内容，所以 obj4 就是 obj5 的内容；
属性、位置
属性操作
.attr(); 传一个参数为获取，两个为设置；removeAttr()； 删除属性；.prop()；传一个为获取，两个为设置；removeProp()；删除属性；
如果需要设置多少属性，可以添加一个对象；
attr 和 prop 的区别
- prop 添加的自定义属性在 html 页面上是没有的，比如 index 属性。
- 对于布尔类型的属性来说，应该使用 prop；
- prop 只能删除自定义的属性，不能删除自带的属性；
- 在 jQuery1.6 之后，对于 checked、selected、disabled 这类 boolean 类型的属性来说，应该使用 prop 方法。
$('input').attr('checked') //checked
$('input').prop('checked') //true
// 设置属性
$(':checked').prop('checked', true)
// 获取属性
$(':checked').prop('checked') // 返回true或者false$('input').attr('checked') //checked
$('input').prop('checked') //true
// 设置属性
$(':checked').prop('checked', true)
// 获取属性
$(':checked').prop('checked') // 返回true或者false全选案例：
$('label :checkbox').click(function () {
$('div input').prop('checked', $(this).prop('checked')) //点击全选，让div下的所有input选项都被选中，值和全选按钮一样；
})
$('div input').click(function () {
if ($('div input:checked').length == $('div input').length) {
//如果被选中的长度和所有input的长度相等，则让全选按钮被选中；
$('label :checkbox').prop('checked', true)
} else {
$('label input').prop('checked', false)
}
})$('label :checkbox').click(function () {
$('div input').prop('checked', $(this).prop('checked')) //点击全选，让div下的所有input选项都被选中，值和全选按钮一样；
})
$('div input').click(function () {
if ($('div input:checked').length == $('div input').length) {
//如果被选中的长度和所有input的长度相等，则让全选按钮被选中；
$('label :checkbox').prop('checked', true)
} else {
$('label input').prop('checked', false)
}
})类名操作
addClass()；添加类名，多个用空格隔开，不会去掉原有的；removeClass()；删除类名，填写指定删除类名；toggleClass()；有则删除，没有则添加，常用于点击事件；hasClass("on")； 是否有 on 的类名的元素，有返回 true，没有返回 false，可以做为判断，判断没有就添加，判断没有就添加；
文本内容
html()； 获取文本内容，传内容为设置新内容；类似于 innerHTML；text()； 获取文本内容，传内容为设置新内容；类似于 innerText；val()； 获取 input 默认值；传内容设置新内容；val([])；根据 value 值选中表单复选框或单选框；中括号填写 value 值来选中，
选中 select 时，可以直接在 val 框填写选中项，多选时，多个项填写到数组中；
css 样式
.css()；
- 获取：填写一个参数属性名；
- 设置：填写属性名和属性值；
- 设置多个样式时，可以放到一个对象当中，
可以简写：属性值可以不加单位 px，对象里属性名可以不加引号，如果有中划线不加引号需要转变驼峰；
$('div').css({ width: 50, height: 50 })$('div').css({ width: 50, height: 50 })位置
offset(); 返回一个对象，到 html 的位置，和定位属性没关系；offset().top/left; 取对象里面的 top 值和 left 值；position(); 返回一个对象，到父元素有定位属性的距离，position().top/left； 取对象里面的 top 值和 left 值$(window).scrollTop()/scrollLeft()浏览器被卷起的 top 值和 left 值；- 括号里面也可以设置值，到指定位置；
- $(document)也可以，最好是 window，是标准写法；
$(window).scroll(function(){}); 浏览器被卷起执行函数；
尺寸
width()/height(); 获取元素的宽度和高度；获取出来的没有单位 px；innerWidth()/innerHeight(); 宽度/高度+paddingouterWidth()/outerHeight(); 宽度/高度+padding+border（真实宽高）；括号里面加 true，可以加上 margin；$(window).width()/height(); 浏览器可视宽高；$(document).width()/height()；文档的真实内容宽高；
节点
创建
创建：$("<li>3</li>"); 创建了一个内容为 3 的 li 标签；
添加节点
- 从后添加
父元素.append(新节点)新节点.appendTo(父元素)
- 从前添加
父元素.prepend(新节点)新节点.prependTo(父元素)
- 指定标签之后
a.after(b)b.insertAfter(a)
- 指定标签之前
a.before(b);b.insertBefore(a)
- 替换
a.replaceWith(b); b 替换 a； 替换会将内容也直接清空；b.replaceAll(a); b 替换 a；
谁在前链式调用就是给谁添加事件；
// 谁在前调用，就是给谁设置css样式；
$("ul").append("<li></li>").css(“border","1px solid red");
$("<li></li>").appendTo($("ul")).css("border","1px solid red");// 谁在前调用，就是给谁设置css样式；
$("ul").append("<li></li>").css(“border","1px solid red");
$("<li></li>").appendTo($("ul")).css("border","1px solid red");包裹节点
a.wrap(b)把调用的标签包起来；a.wrapAll(b)把所有的 a 标签拿出来包一个父元素；a.wrapInner(b)把 a 标签的内容用一个父元素包起来；a.unwrap()删除包裹的父元素；
克隆节点
.clone(); 可以传布尔值，不传为 false；- false：只克隆元素，不克隆脚本；
- true：脚本一起克隆；
删除节点
.empty()删除元素内容，自身保留；.html('')清空内容，会造成内存泄漏，绑定的事件不会被清除；.remove()把整个元素删除，返回被删除的元素，会将脚本删除；（即使再添加回去也没有事件）.detach()返回被删除的元素，不会删除脚本；（添加回去还有事件）
筛选(方法)
first()所有元素中的第一个last()所有元素中的最后一个eq()下标从 0 开始not()除了传入的元素has()有小括号中的元素slice()和字符串 slice 用法一样is()根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。filter()找到传入元素的元素，括号还可以是一个函数；filter(function(){return nodeType!=1}) 不是标签的节点contents()所有子节点和文本节点，一般配合 filter 使用
父元素相关
children()直接子元素，可以传参，指定某个直接子元素find()所有子元素，传参为某个子元素parent()直接父元素parents()所有父元素可以传参，指定某个父元素parentsUntil()所有父元素直到传入的父元素，不包括传入的父元素offsetParent()找到离他最近的有定位的父元素
兄弟节点
next()选择下一个相邻兄弟元素nextAll()选择下面所有的元素，小括号填写可以指定下面的某个元素（css 样式选择器当中是("li~p")li 下面所有的兄弟元素 p）nextUntil()下面所有的兄弟元素直到小括号的元素，不包括小括号prev()上一个兄弟元素prevAll()上面所有的兄弟元素，小括号传参表示指定元素prevUntil()上面所有的兄弟元素直接小括号的元素，不包括小括号siblings()所有兄弟元素，可以传一个具体的标签，指定某些兄弟元素
// 使用contents作childNodes使用；
$('span:contains(改)').click(function () {
var val = prompt('请输入一要添加的内容')
$('div')
.contents()
.filter(function () {
return this.nodeType != 1
})[0].nodeValue = val
console.log(val)
})// 使用contents作childNodes使用；
$('span:contains(改)').click(function () {
var val = prompt('请输入一要添加的内容')
$('div')
.contents()
.filter(function () {
return this.nodeType != 1
})[0].nodeValue = val
console.log(val)
})自定义动画
.animate(); 参数是：对象，时间，函数；
$('div').animate({ opacity: 1 }, 200, function () {
console.log('动画完成')
})$('div').animate({ opacity: 1 }, 200, function () {
console.log('动画完成')
})让浏览器的 scroll 滚动条慢慢回到 0
$("html,body").animate({"scrollTop":0});
写 html 和 body 是兼容；相当于：document.documentElement || document.body；
ajax 自定义 jquery 插件
ajax 的优势和不足： ● 优势： 1. 不需要插件支持 2. 优秀的用户体验 3. 提高 web 程序的性能 4. 减轻服务器和带宽的负担 ● 不足：
破坏浏览器前进、后退按钮的正常功能 2. 对搜索引擎的支持不足
$.ajax({}),括号内容填写一个对象；里面写参数
常用参数：
$.ajax({
url: "", // 请求的地址
type: "", // 请求的方式（get/post），默认为 get
cache: false, // 给链接加缓存
async: "" //是否异步
timeout: "" // 设置请求超时时间，单位毫秒
data: "", // 发送到后端的数据
dataType: "", // 预期服务器返回的数据类型，有 xml, html, script,json, jsonp,text
success: function(data) {}, // 成功的回调
error: function(err) {}, // 失败的回调
complete: function() {}, // 请求完成后调用的函数，请求成功或失败均调用
global: true // 是否触发全局的 ajax 事件，默认为 true
});$.ajax({
url: "", // 请求的地址
type: "", // 请求的方式（get/post），默认为 get
cache: false, // 给链接加缓存
async: "" //是否异步
timeout: "" // 设置请求超时时间，单位毫秒
data: "", // 发送到后端的数据
dataType: "", // 预期服务器返回的数据类型，有 xml, html, script,json, jsonp,text
success: function(data) {}, // 成功的回调
error: function(err) {}, // 失败的回调
complete: function() {}, // 请求完成后调用的函数，请求成功或失败均调用
global: true // 是否触发全局的 ajax 事件，默认为 true
});- $.get()；
$.get(url,{}，function(){},type)；
第一个参数：url 地址；
第二个参数：向后台发送的数据；
第三个参数：成功的处理函数；需要一个形参用来接收，第二个形参是状态 status；
第四个参数：返回类型，一般是 json；
以 get 方式传递数据，只能处理成功的信息，想要处理失败的信息需要使用$.ajax()；
- $.post()；
$.post(url,{},function(){},type)；$.post(url,{},function(){},type)；get 请求和 post 请求的区别 （1）get 请求参数跟在 URL 后进行传递，而 post 请求则是作为 HTTP 消息的实体内容发送给 WEB 服务器。当然，在 ajax 请求中，这种区别对用户是不可见的。
（2）get 请求方式对传输的数据有大小限制（通常不能大于 2KB），而使用 post 方式传递的数据量要比 get 方式大得多（理论上不受限制）。 （3）get 方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，get方式会带来严重的安全性问题，而 post 方式相对来说可以避免这些问题。 （4）get 方式和 post 方式传递的数据在服务器端获取也不相同。在 php 中，get 方式的数据可以用 $_GET[] 获取，而 post 方式可以用 $_POST[] 获取。两种方式都可以用 $_REQUEST[] 来获取。.load(url,[data],[callback]);
将服务器的数据或其他文件的内容加载到调用元素的内容中，如果调用的元素不存在，则不会调用；
常用于加载页面的一个片段，放的一个空标签，往里面填写内容；
url 插入地址，callback 方法完成后所执行的函数名称；
url 地址也可以紧跟空格后写 jQuery 选择器：$("div").load("1.txt #demo");另一个文件中除了这个选择器外的内容被抛弃；
异步 5 秒刷新：
setInterval(function () {
$('#content').load(location.href + ' #content>*', '')
}, 5000)setInterval(function () {
$('#content').load(location.href + ' #content>*', '')
}, 5000)jQuery 中的 jsonp
jsonp 是 jQuery 中的跨域处理；
- 跨域
跨域概念：a.cn 下面的 js 不能调用 b.cn 中的 js。因为 a.cn 和 b.cn 是不同域，所以跨域就出现了。
同域的概念：域名、端口、协议相同。
- jQuery 的 jsonp 如何发起跨域请求及其原理
先准备两个环境：
我们一个用京东的：https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1
另一个用我们本地的环境，这样两个就会产生跨域，直接发起 ajax 请求，如下图 , 浏览器会发出警告
var url = ‘https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1’;
$.ajax({
url: url,
success: function(data) {
console.log(data);
},
error: function(e) {
console.log(e);
}
});var url = ‘https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1’;
$.ajax({
url: url,
success: function(data) {
console.log(data);
},
error: function(e) {
console.log(e);
}
});
3. jsonp 方式及其原理解析；
// 请求的 url 地址
var url = 'https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1';
// 创建一个全局函数
function showData(data) {
console.log(data);
};
$(function() {
// 点击时，在 head 中创建一个 script 标签，标签的 src 即我们要跨域的地址，后面跟上 &callback=showData
$('button').click(function() {
$(‘head’).append(`<script src="${url}&callback=showData"><\/script>`);
})
});// 请求的 url 地址
var url = 'https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1';
// 创建一个全局函数
function showData(data) {
console.log(data);
};
$(function() {
// 点击时，在 head 中创建一个 script 标签，标签的 src 即我们要跨域的地址，后面跟上 &callback=showData
$('button').click(function() {
$(‘head’).append(`<script src="${url}&callback=showData"><\/script>`);
})
});注意：script 标签的反斜杠需要转义；
利用 script 标签可以引用线上 script 的 js 文件，没有跨域的限制，当获取跨域数据时，添加一个 script 标签来跨域请求，地址后面需要带一个 callback 函数，用来包裹请求到的数据；数据返回到前端后，就是 showData(data) 的形式，因为是 script 脚本，所以自动调用全局的 showData 函数，而 data 就是 showData 的参数。
这种方式比较麻烦，需要自己写脚本发起请求，然后写个回调函数处理数据，不是很方便。
jQuery 的 jsonp 方式跨域请求
在 jQuery 中，只需配置一个 dataType:'jsonp'，就可以发起一个跨域请求。jsonp 指定服务器返回的数据类型为 jsonp 格式，可以看发起的请求路径，自动带了一个 callback=xxx，xxx 是 jQuery 随机生成的一个回调函数名称。
注意：jsonp 方式不支持 POST 方式跨域请求，就算指定成 POST 方式，会自动转为 GET 方式；而后端如果设置成 POST 方式了，那就请求不了了；
数据串连化
我们用 serialize() 方法和 serializeArray() 两个方法来序列化元素
格式：
表单 form.serialize();
表单 form.serializeArray();
<form>
<input type="”text”" name="”a”" value="”1”" />
<input type="”text”" name="”b”" value="”2”" />
<input type="”text”" name="”c”" value="”3”" />
</form><form>
<input type="”text”" name="”a”" value="”1”" />
<input type="”text”" name="”b”" value="”2”" />
<input type="”text”" name="”c”" value="”3”" />
</form>- $(‘form’).serialize() 返回的是 a=1&b=2&c=3，它其实是把 name 值和 value 值用等号连接成一组，用 & 再把每个组连接起来，这样，一个表单的数据，可以很方便的发送给后端。
- $(‘form’).serializeArray() 返回的是一个数组数组里的每一项是一个对象，对象里有 name 和 value 两个属性，分别对应 input 的 name 和 value。返回值：[{ name : 'a' , value : '1' },{ name : 'b' , value : '2' },{ name: 'c' , value : '3' }]
跨域
跨域问题：a.cn 去请求 b.cn；
解决跨域三种方法：
- 代理：让服务器代理请求；
- XHR2（XMLHTTPREQUESTLevel2）IE10 不支持；
- jsonP；
jsonP 原理：利用 script 标签中没有跨域的限制，所以将要请求的地址放到 script 标签的 src 中，同时在请求的地址后面添加一个回调函数（&callback=aa），这个 aa 是自定义一个函数的作用，就是去包裹请求回来的数据，需要在 aa 函数中写一个形参用来接收请求到的数据；
在使用$.ajax()中，需要在对象里填写 dataType，指定值 jsonP，回调函数默认使用 success 函数；
一般用第一种和第三种；
注意：jsonp 方式不支持 POST 方式跨域请求，就算指定成 POST 方式，会自动转为 GET 方式；而后端如果设置成 POST 方式了，那就请求不了了；
validate
- 操作方法
一款基于 jquery 用于验证表单的插件，使用前需要引入 jquery 文件；
内置验证规则，支持自定义验证规则，简单强大的验证信息提示；
下载地址：https://jqueryvalidation.org/
下载好之后找到解压文件里面的 dist/jquery.validate.js,和 dist/localization/messages_zh.js；导出这两个文件，并引入；
- $("form").validate()；接收的是一个对象；对象的值：
rules：验证规则，值是一个对象，填写需要验证的内容，里面的键名是 form 表单的 name 名；
如果只是简单的规则 required 这些也可以直接写到标签的 class 类名里面；
单选项作为键名写到函数对象中，需要写 true；
对于 radio、checkbox、select 选项，需要设置相同的 name；
debug : true；表单不提交，进行调试；
messages：提示信息，一个对象，可以修改 rule 验证的每一项提示信息；键名对应 rules 的键名，键值填写提示信息；
submitHandler：是一个函数，用来验证成功执行的函数；用于提交事件，form.submit()；
常用的属性：
required 必须输入；
equalTo:"#field" 密码必须一样；
(1) required:true 必输字段
(2) remote:"remote-valid.jsp" 使用 ajax 方法调用 remote-valid.jsp 验证输入值
(3) email:true 必须输入正确格式的电子邮件
(4) url:true 必须输入正确格式的网址
(5) date:true 必须输入正确格式的日期，日期校验 ie6 出错，慎用
(6) dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7) number:true 必须输入合法的数字(负数，小数)
(8) digits:true 必须输入整数
(9) creditcard:true 必须输入合法的信用卡号
(10) equalTo:"#password" 输入值必须和#password 相同
(11) accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12) maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)
(13) minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)
(14) rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15) range:[5,10] 输入值必须介于 5 和 10 之间
(16) max:5 输入值不能大于 5
(17) min:10 输入值不能小于 10
- 美化提示文字；validate 的属性名；
（1）errorClass：错误时使用的 class 类名；默认是 error；
（2）errorElement：包裹错误文字的标签；默认是 label；
（3）success：成功执行的操作，在标签验证通过时触发；
值可以填写一个字符串，这个字符串是一成功的 class 类名，
也可以填写一个函数，需要传一个形参，函数形参指向成功的标签；
（4）showErrors：验证出错执行的函数；
两个形参，第一个形参指向提示信息对象，第二个形参是一个数组，数组中包含所有验证出错的表单；
函数里面必须填写 this.defaultShowErrors()方法；否则看不到提示文字；
因为如果输入错误之后，成功的类名不会删除，所以需要使用这一步删除下一个标签的类名；
（5）errorPlacement：错误元素放置的位置
两个形参（error,element），第一个形参指向错误标签；第二个形参指向错误表单；
默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面。
- 将错误信息放置到统一的容器显示：
（1）errorContainer：显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，需要用到将错误信息统一放置的时候使用,值为容器,
（2）errorLabelContainer：把错误信息统一放在一个容器里；jquery 选择器；
（3）wrapper：用什么标签再把上边的 errorElement 包起来；
一般这三个属性同时使用：
errorContainer: "div.container",
errorLabelContainer: $("div.container ul"),
wrapper: "li"errorContainer: "div.container",
errorLabelContainer: $("div.container ul"),
wrapper: "li"- 设置 validate 默认值；
$.validator.setDefaults({
submitHandler:function(){
alert("提交事件");
});$.validator.setDefaults({
submitHandler:function(){
alert("提交事件");
});- 自定义添加验证规则
$.validator.addMethod(name,method,message);
name：规则名字，message：输入错误提示信息；
method：是一个函数，三个形参：value,element,pram；
函数里面写一个正则，之后用正则来验证 value 并返回
return reg.test(value)；
自定义一个密码验证规则：
$.validator.addMethod(
'passd',
function (value) {
var reg = /^(?=.*[a-zA-Z])(?=.*[1-9])(?=.*[\W]).{6,}$/
return reg.test(value)
},
'密码至少6-32位,且包含数字、字母、符号',
)$.validator.addMethod(
'passd',
function (value) {
var reg = /^(?=.*[a-zA-Z])(?=.*[1-9])(?=.*[\W]).{6,}$/
return reg.test(value)
},
'密码至少6-32位,且包含数字、字母、符号',
)cookie 插件
下载地址：https://github.com/carhartl/jquery-cookie
cookie 插件是基于 jquery 的 cookie 插件，使用时必须同时引入 jquery 文件；
- 设置
设置：$.cookie(名，值)；
设置有过期时间：$.cookie(名，值，{expires:7})；
设置路径：$.cookie(名，值，{expires:7,path:"/"})；/放在根目录；
- 获取：
$.cookie(名)；传入一个名，返回值；
当传入没有的名时，返回 undefined；
当不传入参数的时候，返回一个对象；
- 删除
$.removeCookie(名)；删除；
当有值时，删除返回 true，当传入的名没有时，返回 false；
当删除一个带路径的，需要把路径也加上，加入路径需要写一个对象；
$.removeCookie("name",{path:"/"})；
自定义插件
- 基于对象的插件；
$.fn.extend({}),在对象里面写插件；键名键值的方式写函数，取方法时直接点调用；
为了能在函数里面写$符，需要写一个闭包，括号外面写一个
注：写方法时为了能够链式调用需要加个 return 返回出去；
- 全局插件
$.extend({})，全局调用：$.方法();
.selector 可以和.context 一起使用，确定查询的选择器，不是方法，不需要加小括号；
.selector 返回选择器里面填写的内容；
在将自定义的方法函数放在 js 文件时，可以在前后都添加一个分号，避免压缩时出错；
使用别人的插件
- 去网上搜，下载，下载后的文件，一般都是一个压缩包，也可以是一个文件夹；
- 引入下载后的 css 文件；
- 引入下载后的 js 文件；
- 使用 f12 找到需要的板块，之后复制 class 类名，查看页面源代码，搜索复制的 class 类名，复制 html 中的结构的代码；
- 复制 html 中实现功能的代码到页面加载的事件中； 一般情况在使用插件的时候，测试的时候，先把这个代码直接复制到一个 div（一个标签），调整整体的大小，位置，样式，然后直接放在自己的页面的某个位置当中，进行使用；