1.jQuery是一个快速、小型且功能丰富的JavaScript库
2.选择器；
基本选择器：id 类 元素
过滤选择器: 都是按照索引来获取元素：索引是从0-n开始计数
:first //匹配第一个元素 （原生js中需要:first-child来筛选）
:last//匹配最后一个元素（原生js中需要:last-child来筛选）
:even//匹配索引是偶数的元素 注意:是按照索引取偶数元素
:odd//匹配索引是奇数的元素 注意:是按照索引取奇数元素
:eq(index)//取索引为index的元素---这个重中之重
:gt(index)//取索引大于index的所有元素
:lt(index)//取索引小于index的所有元素
.contains(text)//匹配内容为text的元素
child系列子选择器都是按照队列来获取元素：队列是从1-n计数
:first-child---获取队列第一个元素
:last-child---获取队列最后一个元素
:nth-child(n)---队列获取第n个元素
of-type系列子选择器：用于杂队列中
:first-of-type---获取队列第一个元素
:last-of-type---获取队列最后一个元素
:nth-of-type(n)---获取队列中第n个元素
内容过滤选择器
:contains(text)
属性选择器
$("元素[属性名='值']")
3.查询和改变元素内容
括号里为空是获取，填值是设置
元素.text("设置的文本");设置或者获取所选元素的文本内容；
元素.html("设置的内容");设置或者获取所选元素的内容（包括html标签）；
元素.val("设置的值");设置或者获取表单字段的值（前提是表单设置了value属性）；
4.获取和改变元素样式
$("元素").css("width")//获取元素的宽(可以获取外部式的样式，原生js只能获取行内样式)；
$("元素).css("属性名","属性值")//改变一个样式
$("元素").css({属性名1:"属性值1",属性名2:"属性值2")
5.操作元素类名的四种方式
元素.addClass("类名")//添加类名
元素.removeClass("类名")//删除类名
元素.toggleClass("类名")//匹配类名，有就删除，没有就添加
元素.hasClass("类名")//检查元素是否有该类名---拥有就返回为true 没有返回false
6.获取和添加修改属性
元素.attr("属性名")//获取自定义属性值
元素.prop("属性名")//获取属性值，只能获取共有属性 w3c定义的属性
元素.prop({属性名1:"属性值1",属性名2:"属性值2"}) //设置属性值
arrt和prop的区别，返回checkbox/radio/select选择性标签的checked或selected属性时，attr是返回属性值或undefind，prop返回的是true或false
7.创建节点 添加节点 删除节点 复制节点
//创建
var el=$("<div id='box'>内容</div>") //可以直接在这里添加内容和属性
//添加节点
父元素.append(子元素)//在父级元素下最后添加一个元素
子元素.appendTo(父元素)//后面几个都不咋用
父元素.prepend(子元素)//在父级元素下第一个添加一个元素
子元素prependTo(父元素)//元素添加到父级元素下第一个元素
兄弟前后关系：after()、insertAfter()、before()、insertBefore()。
//删除
元素.remove()//删除一切，主要用这个
元素.empty()//清空元素下的内容，不算删除，不使用
元素.detach()//删除事件不彻底，不使用
//克隆
var el=元素.clone(true)//变量保存复制的节点，参数true决定了是否复制该节点的方法。添加到购物车会用到
注意：克隆节点要避免ID重复
8.替换节点
老节点.replaceWith(新节点)
新节点.replaceAll(老节点)
9.获取节点
下面全部都要记住
父元素.children()//数组形式获取元素下所有子元素 只能拿到子元素，拿不到后代级 ，不写参数默认获取所有子元素
父元素.find(子元素)//获取父级元素下的指定元素 必须赋参数进行筛选
元素.next()//获取元素紧挨的下一个兄弟元素
元素.prev()//获取元素紧挨的上一个兄弟元素
元素.siblings()//获取其他兄弟元素 //可以使用参数进行筛选
子元素.parent()//获取直接父元素
子元素.parents(指定的父元素)//获取多层外指定的父元素，不给参数获取全部父级
子元素.closest(指定父元素)//必须赋参数，这个方法基本不用
10.each()方法遍历
遍历对象，数组，元素
遍历数组时 i指索引 n指对应的值
遍历对象时 i指属性名 n指属性值
//遍历数组和对象
$.each(arr,function(i,n){
})
//遍历元素
元素.each(function(index,item){
})
11.获取元素距离顶部距离
常常用于楼层导航
元素.offset().top ----返回元素相对于文档顶部的偏移距离。 重重点
元素.scrollTop()----元素的滚动条垂直距离，传参数时可以设置距离。----针对元素本身的滚动条 比如有滚动条的div
12.获取浏览器滚动条距离
获取浏览器显示区域的高度 ： $(window).height();
获取浏览器显示区域的宽度 ： $(window).width();
获取页面的文档高度 ： $(document).height();
获取页面的文档宽度 ：$(document).width();
获取滚动条到顶部的垂直高度 ： $(document).scrollTop(); document可以换成window 重重点
获取滚动条到左边的垂直宽度 ： $(document).scrollLeft();
计算元素位置和偏移量： 元素.offset();
13.监听页面滚动事件
$(window).scroll(function(){//window可以换成document
console.log($(document).scrollTop())//每次滚动都会打印浏览器滚动条的距离
})14.事件委派
给父级元素下的未来元素添加事件-----重重点
普通事件只能注册给页面加载后一开始就有的元素，要想注册给后来添加的元素就要用事件委派。
语法结构：//不用这种写法了 被淘汰了 用on替代
$("父元素").delegate("要被委派的子元素","事件名",function(){
//这里写执行函数
})
常用语法：
$("父元素").on("事件名","要被委派的子元素",function(){
//这里写执行函数
})15.绑定事件
一个元素绑定一个事件
语法结构：
元素.on("事件名"，function（）{})
简化版：
元素.事件名（function(){}）两个事件绑定一个元素 重点记住移入移出例子
元素.on("事件名1 事件名2"，function（）{})//
例：
元素.on("mouseover mouseoout",function(){
$(this).toggleClass("active)//移入移除自动添加和删除类名
})一个元素绑定多个事件
链式操作：
元素.on("事件名"，function（）{}).on("事件名",function(){})
对象添加： //存在相同事件同时存在的时候要给事件添加别名 .an-----n值数字
元素.on({
"事件名"：function(){
},
"事件名"：function(){
},
})16.清除事件
元素.off() //清除全部事件
元素.off("事件1 事件2")//清除多个事件
元素.off("事件名.an") //清除同类型事件的第n个
17.hover（）复合函数
一个事件名，两个回调函数，相当于mouseover 和mouseout集合------常用
元素.hover(function(){
//鼠标移入事件执行代码
},function(){
//鼠标移除事件执行代码
})18.显示隐藏的动画函数
语法：元素.动画函数（时间，特效，回调函数）---//都是可选参数
//普通显示隐藏
元素.show()
元素.hide()
元素.toggle()
//淡入淡出---fade英文意思变淡
元素.fadeIn()
元素.fadeOut()
元素.fadeToggle()
下拉显示隐藏---常用---slide英文意思滑动
元素.slideDown() //下拉显示
元素.slideUp() //上卷隐藏
元素.slideToggle()
19.自定义动画 animate *重重点*
delay()---延迟时间
$("选择器").stop(true).delay(1000).animate({样式名1:"样式值1",样式名2:"样式值2",},设置的动画时间,动画特效,回调函数)
20.stop(true)----清除动画堆砌
21.获取当前元素索引
元素.index()------常用
22.一些jQuery插件
jquery-ui------让颜色参与动画 //有弊端 一些颜色无效，会被解析成透明
jqueryeasing------缓动插件（动画特效）
slide-轮播插件-----让你快速的布置一个轮播图
jquery-validate----快速进行正则自动验证的操作插件
juqery-easyui---前端ui框架插件
可以在：http://www.jq22.com去下载更多的插件
23.聚焦事件focus
当输入框聚焦时，发生的事件
元素.focus(function(){})
24.load()方法
load（url,data,functon(){}）方法从服务器加载数据，并把返回的数据放置到指定元素中。三个参数，后两个可选。
例：
$("#div1").load("./home.html");25.监听hash改变
bom下面的事件。可以直接用在框架上。当页面hash改变时，做相应的操作。
onhashchange 事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发 。
window.onhashchange=function(){}
26.change事件
当元素的值改变时发生 change 事件（仅适用于表单字段） 只能用于textarea select
二、常用jq功能实现方法
1.正则验证插件使用
前提条件：
1.引入插件 2.获取form表单添加validate方法 然后设置规则和报错 3.可以自定义规则
注意：想验证的input框必须设置name，因为验证全靠name值获取该输入框
使用方法参考：https://www.runoob.com/jquery/jquery-plugin-validate.html
//自定义规则
jQuery.validator.addMethod("isUser",function(value,element){
//自定义正则
var reg=/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/
//返回判定结果
return reg.test(value)
},"请输入6-12位用户名，第一个字符只能为字母");
$("form").validate({
//规则
rules:{
user:{//user是用户框的name值
required:true,
isUser:true //调用自定义的规则
},
pwd:{//pwd是密码框的name值
required:true
}
},
//报错信息
messages:{
user:{
required:"请输入用户名"
},
pwd:{
required:"请输入密码"
}
}
})2.input事件
jq没有封装input事件，原生js中用oninput事件，在jq中需要用on绑定，这个事件通常用在input输入框
propertychange是兼容ie9的事件
元素.on("input propertychange",function(){
//执行代码
})