jQuery
jquery 是用JS写的，使用JS进行了高度封装函数
使用jQuery，就是将jQuery封装的函数学习就可以了
jquery核心理念：write less, do more 写的更好，做的更多
$()
click()
show()/hide()
1.7 1.8.3 1.10 1.11.3 1.12.4
// 2.0之后的版本不支持IE8浏览器
2.0
jQuery版本：3.2.1
(***)基本选择器：#id
.class
element
div
p
ul
(***)层级选择期：A B(后代选择器)
A>B(父子选择器)
A+B(相邻选择器)
A~B(兄弟选择器)
(***)基本筛选器：:first 第一个
:last 最后一个
:even 偶数
:odd 奇数
:eq(索引)
:gt(索引) 大于此索引的
:lt(索引) 小于此索引的
:animated 动画
:not(非)
内容选择器： :contains(text) 包含 :contains(汉字) //不要加引号
:empty 空
:has(selector) 包含特定的后代元素
:parent 有内容的
属性：[attr] 查找有attr属性的标签
[attr=value] 查找有attr属性，并且attr只能是value
[class^="middle"] 查找有class类，并且以middle开头
[class$="middle"] 查找有class类，并且以middle结尾
[class~="middle"] 查找有class属性，并且class的多个属性中有独立的middle
[class*="middle"] 查找class属性，并且class属性值中包含middle即可
[class|="middle"] 查找class属性，并且以middle和middle-开头
子元素：
父子级关系的标签
:first-child
:last-child
:nth-child(n)
:nth-last-child(n)
:only-child
获取同辈兄弟间的标签
:first-of-type
:last-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:only-of-type
(***)表单对象属性：:checked
:selected
核心
$('li').each(function(key,value){}):遍历jQuery对象
$('li').length:获取jQuery元素的个数
$('li').get(); 获取所有的li //(5) [li, li, li, li, li]
$('li').get(index):获取指定索引的dom对象 //<li>开心点</li>
$('.small').index():获取指定索引值
jquery对象和DOM对象区别
初学阶段：jQuery和DOM操作不要混用
jq转原生js
$('li').get(0)
原生js转jq
$(li);
事件
$(function(){})/$(document).ready():当页面DOM元素加载完成的时候
// 给jQuery对象绑定事件，而且可以重复绑定
$('li').click(function(){})
$('.username').keydown(function(){})
$(window).scroll(function(){})
// 移入和移出
hover(function(){},function(){})
// 绑定事件
on()/off()
// 手动触发事件
trigger()
// 事件属性
e.pageX/e.pageY
// 阻止事件冒泡
e.stopPropagation()
// 阻止默认行为
e.preventDefault()
文档处理
// 父子级追加
末尾追加
append()
$('.one').append('<p>白龙马</p>'); 在.one中追加白龙马
appendTo()
$('<p>银角大王</p>').appendTo($('.one')); 把银角大王追加到.one
开头追加
prepend()
prependTo()
注意：$('.one').append($('.two p:first')); 把.two中的p的第一个元素加到one中，并且.two中没有刚才追加的元素了，因为不是克隆
// 同辈前插入内容
after()/before()
// 同辈前插入内容
insertAfter()/insertBefore()
// 包裹
wrap()
// 给每个p标签包裹div
$('p').wrap('<div></div>');
unwrap()
移出p元素的父元素
$("p").unwrap()
wrapAll()
// 给所有的p包裹一个div
// $('p').wrapAll('<div></div>');
wrapInner()
// 用span包裹p的内容
// $('p').wrapInner('<span></span>');
// 替换
replaceWith()
// 用h3标签替换所有的p标签
// $('p').replaceWith('<h3>宝玉</h3>');
replaceAll()
// 用h1替换掉所有的p标签
// $('<h1>林黛玉</h1>').replaceAll('p');
// 清空子级内容
empty()
// 删除自身和内容
remove()
// 克隆标签，属性，内容
clone()
// 克隆标签，属性，内容，事件
clone(true)
工具
// 删除两边空格
$.trim()
属性
// 处理 系统属性和自定义属性
$('a').attr('href'):获取href属性
$('a').attr('href','http://www.baidu.com'):设置href属性
$('a').removeAttr('href'):删除href属性
// 处理 系统属性
prop()
// 针对class的处理
$('a').addClass('active')：添加class
$('a').removeClass('active'): 删除class
$('a').toggleClass('active'): 切换class
// 处理标签内容
console.log($('.box').html());:获取.box的内容 //今天是<strong>周四</strong>
console.log($('.box').html('<h3>hello world</h3>')):修改.box的内容为//Hello world
$('.box').html('<h3>hello world</h3>'):设置.box的内容
// 处理标签文本内容
$('span').text():获取span的文本内容 //今天是周四
$('span').text('hello world'):修改.box的文本内容为 //<h3>Hello world</h3>将内容中的标签原型展示
$('span').text('hello world'):设置.box的文本内容为
// 处理表单的值
$('.username').val():获取.username的value值
$('.username').val('zhangsan'):设置.username的value值为zhangsan
CSS
$('h3').css('width'):获取宽度
$('h3').css('width',500):设置h3宽度
$('h3').css('width','500px'):设置h3宽度
$('h3').css({width:500,height：500}):设置h3宽度和高度
// 获取标签距页面的边距
$('.box').offset()
// 获取.box距有定位祖辈的边距，祖辈都没有定位，则距页面的边距
$('.box').position()
// 获取和设置标签内容的滚动距离
scrollTop()/scrollLeft()
// 宽度和高度（width/height）
height()/width()
// 宽度和高度（width+padding）
innerWidth()/innerHeight()
// 宽度和高度（width+padding+border）
outerHeight/outerWidth()
效果
// 展示与隐藏（宽度，高度，透明度变化的过程）
show()/hide()/toggle()
// 下拉与上拉（高度变化的过程,需要设置宽）
slideDown()/slideUp()/slideToggle()
// 淡入淡出（透明度变化的过程）
fadeIn()/fadeOut()/fadeTo()/fadeToggle()
// 自定义动画
animate()
// 停止动画
stop()
$('.box').stop(); // 停止当前执行的动画
stop(true); //当前正在执行的动画效果停下来，队列动画全部清除
stop(true,true);//当前正在执行的动画效果停下来，队列动画清除，直接到达当前动画的目标值
// 延迟动画（单次定时器）
delay()
筛选
.eq([index]) 如果写index就找索引为index的，否则找全部
.first() 第一个
.last() 最后一个
.hasClass(class) 包含class类的
.filter() 过滤
.is() 是
.has() 包含
.not() 不是
.slice() 切割
.children() 查找子代的孩子，参数可以为空，为空就找到全部的孩子
.find() 查找后代的孩子，参数不可以为空，找不到任何值
.next() 下一个
.nextAll()后面的所有
.prev() 上一个
.prevAll()上面的所有
.siblings() 兄弟们，不写参数就找所有的兄弟，写参数就找指定的元素
.parent() 父级
.parents() 祖辈，不写参数就找所有的祖辈，写参数就找参数指定的祖辈元素
.offsetParent() 如果祖辈有定位，就找有定位的祖辈，否则就是html
.add() 添加一个新元素到一组匹配的元素中，并且这个新元素能匹配给定的表达式。
$('h3').css('color','pink').add('p').css('background','yellow');
给h3先设置粉色字体颜色，然后给h3,和p一起设置黄色背景颜色
.addBack()一个字符串，其中包含一个选择器表达式，匹配当前元素集合不包括在内的元素
$('div').find('p').addBack().addClass('bg');
给所有的div和div的后代p都添加bg的类
.end() 选取所有的div元素，查找并选取p子元素，然后再回过来选取div元素
$('div').css('margin','100px').find('p').css('padding','50px').end().css('border','10px solid #ddd');
给div加margin值，然后找到p,给p设置padding,并且在返回来找到div 给div加边框
$('elem').each和$.each()
$('li').each(function(key,value){}) 遍历元素
$.each(arr|obj,function(key,value){}) 遍历数组或者对象
on
同时设置多个事件
$('.box').on('mouseover mouseout',function () { $(this).toggleClass('bg'); });写多个事件
$('.box').on({ mouseover:function () { $(this).addClass('bg'); }, mouseout:function () { $(this).removeClass('bg'); }, click:function () { console.log('点击'); } });
off移除事件
function run() {
console.log('点击box');
}
$('.box').on('click',run);
$('button').eq(0).click(function () {
$('.box').off('click',run);
})
点击.box会触发run() 但是button给事件解绑了，然后在点击.box 不会触发run（）事件
trigger() 手动触发某类事件
$('button:eq(1)').click(function () {
$('.box').trigger('click');
})
点击button按钮也会触发box的click事件， 例如 submit是提交事件，也可以给div设置一个提交事件，就用trigger()
事件委托
$('body').on('mouseover mouseout','.box',function () {
$(this).toggleClass('bg'); // 此时this指向的是box,
});
$('body').append('<div class="box"></div>');
给父级添加事件，就算在后面在添加相同的标签也同样会执行之前添加的事件