jQuery
是一个类库，提供强大的选择器，不用考虑兼容性问题，进行DOM操作，动画功能，以及Ajax
jQuery 1点几版本 兼容IE6~8 而2-3的版本不兼容
原生对象与jQuery对象的转化
原生——>jq：oDiv——>$(oDiv)
jq——>原生: $div1——>$div.get(0)
文档就绪函数
一般jq都写在文档就绪函数里
$(document).ready(function(){})
$().ready(funcyion(){})
$(function(){})//一般用第三个
绑定事件最好都用on
$(selector).on("事件类型",function(){})
选择器
pre+next
紧跟在其后的一个元素
pre~siblings
其所有的兄弟元素
：eq()
下标从0开始，-1指倒数第一个
：even 偶数/:odd 奇数
下标从0开始
:gt() 大于/:lt() 小于
下标从0开始
:header
选中h1-h6的元素
：not()
括号里面是一个选择器，去除它
：root()
永远是HTML
：target
一般与用于锚点
:contains()
选择所有包含指定文本的元素，区分大小写
可以适用于输入框输入信息时的筛选
：empty
选中内容为空的
:parent
找其子元素不为空的元素，==与empty相反==
:animated
选中正在执行动画的元素
：hidden
元素被认为隐藏的几个情况：
display：none
type="hidden"的表单元素
宽度和高度为0
祖先元素被隐藏，则该元素不会在页面上显示
注：visibility:hidden或opacity:0被认为可见（因为仍然占据空间）
：first-child/:first-of-type
first-child 选中第一个孩子
first-of-type 选中第一次出现的元素
：nth-child()
整个括号里的索引从1开始
一般适用于找规律
.attr()/.prop()
获取属性
==注：若检查或更改DOM属性，如checked, selected, 或 disabled的情况下只能用.prop()==
.val()
获取value值，主要与用于input
拓：defaultValue 默认值
.css
$div1.css("background","red")//只给对象设置一个属性
$div1.css)({
backgroundColor:"red"
})//给对象设置多个属性
$div1.css)("width",function(){
//...
return...
}//给对象设置的属性是个变量
.addClass()/.removeClass()
添加样式
.hasClass()
可以判断当前样式是否存在
.toggleClass()
切换样式
.width()/.innerWidth()/.outerWidth()
.width() 只包含内容
.innerWidth() 只包含内容和padding
.outerWidth() 包含内容，padding和border
.outerWidth(true) 包含内容，padding,border和margin
.offset()/.position()/.offsetParent
.offset() 相对于文档的位置
.position() 相对于最近的已经定位的祖先元素的位置
.offsetParent 最近的已经定位的祖先元素的对象
注：只有offset能赋值，其他只能取值
.scrollTop() /.scrollLeft()
距离原始滚动条的位置
.clone()
是实现深拷贝
.append()/.appendTo()
.append() 父元素追加子元素
.appendTo() 子元素追加到父元素
注：都在内容的最后插入
.prepend()/.prependTo()
类append，只是在内容的前面插入
.wrap()/.wrapAll()/.wrapInner()
xx.wrap(yy) 在每个xx外包含一个yy
xx.wrapAll(yy) 在所有的xx外只包一个yy
xx.wrapInner(yy) 在每个xx里包一个yy
.text()/.html()
.text() 当作文本输出
.html() 当作HTML标签输出
.after()/.insertAfter()/.before()/.insertBefore()
xx.after(yy) 在这之后插入 xx.after(yy)=yy.insertAfter(xx)
.before() 在这之前插入
.empty()
清空内容，与：empty不一样
.replaceAll()/.replaceWith()
("<>").replaceAll($())
$().repaceWith("<>")
注：两者功能一样，但前后顺序不一样
.eq()
同：eq()功能一样，只不过一个是方法，一个是选择器
.filter()
过滤
.add()
添加具有同样样式的元素
.each(index,elem)
遍历每个元素，不需要考虑下标
.children()/.find()
.children() 只找亲儿子
.find() 找它的子孙后代
.end()
返回链式操作的上一级
.addBack()
将前一个元素添加到当前集合中
.closest()/.parents()
| .closest() | .parents() |
|---|---|
| 开始于当前元素 | 开始于父元素 |
| 在 DOM 树中向上遍历，直到找到与提供的选择器相匹配的元素(找到一个不再找了) | 向上遍历DOM树到文档的根元素，每个祖先元素加入到临时集合，如果提供一个选择器，则会使用该选择器在集合中进行过滤(会一直找找到文档的根元素) |
| 返回包含零个或一个元素的jQuery对象 | 返回包含零个，一个或多个元素的jQuery对象 |
.next()/.nextAll()/.nextUntil
.next() 找到下一个
.nextAll() 找到下面所有
.nextUntil() 找到···直到···
prev()/prevAll()/prevUtil()同上
找前一个
.parent()/parentUnit()同上
找父元素
.sublings()
找他前后的兄弟
.on()/.off()
.on() 绑定事件
.off() 移除事件
注：绑定或移除事件必须是同一个方法
mouse
| .mouseover()/.mouseout() | .mouseenter()/.mouseleave() |
|---|---|
| 有事件冒泡 | 没有事件冒泡（不是原生事件） |
focus
| .focus()/.blur() | .focusin()/.focusout() |
|---|---|
| 默认不会事件冒泡 | 没有事件冒泡（不是原生事件） |
.hover()
鼠标的划入划出
相当于mouseenter和mouseleave，所以不支持事件冒泡
$("#div1").hover(function(){
console.log("over")
},function(){
console.log("out")
})
e.target/e.currentTarget/e.stopProgation()
e.target 事件源
通常用e.target和this比较，来判断事件是不是由于冒泡而触发的，经常用于事件冒泡时处理事件委托
e.currentTarget总是等于this
e.stopProgation() 防止事件冒泡
if(e.target==this){
console.log("不是事件冒泡触发的")
}else{
console.log("是事件冒泡触发的")
}
e.pageX/e.pageY
获取鼠标坐标
e.which
是键盘码， 将 event.keyCode 和 event.charCode 标准化了，没有兼容性问题
.show()/.hide()
改变高度、宽度、透明度；
可以设置事件,单位毫秒 show(5000)
.toggle()
来回切换show和hide
.fadeIn()/.fadeOut()/.fadeTo()/.fadeToggle()
淡入/淡出
只改变透明度
.fadeTo() 淡入到
.fadeToggle() 来回淡入淡出
.slideUp()/.slideDown()/.slideToggle()
像帘子一样收起放下
只改变其高度
.animate()
第一个参数 对象
第二个参数 时间
第三个参数 动画效果(自身提供linear匀速 ，swing先慢后快（默认）)
第四个参数 回调函数
注：不能设置改变背景颜色
以上效果的例子
Document
注：jQuery 的动画插件 jQuery.easing.js,若使用必须在前面先引入jQuery文件
.stop()
停止动画
第一个参数 布尔值 指是否取消已列队动画。默认false
第二个参数 布尔值 指是否立即完成当前动画。默认false
注：一般在执行动画时，前面先写stop
stop
stop运动参数测试
核心
$.extend()
将两个对象的内容合并第一个对象