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
#div1{
width: 500px;
height: 500px;
background: #ff0000;
position: relative;
left:0;
top: 0;
}
hide
show
toggle
fadeIn
fadeOut
fadeToggle
slideDown
slideUp
slideToggle
animate
:animated
$(function () {
var $div1 = $('#div1');
$('#hide').on('click', function(){
$div1.stop().hide(5000);
});
$('#show').on('click', function(){
$div1.stop().show(5000);
});
$('#toggle').on('click', function(){
$div1.toggle(2000);
});
$('#fadeIn').on('click', function(){
$div1.fadeIn('slow');
});
$('#fadeOut').on('click', function(){
$div1.fadeOut('fast');
});
$('#fadeToggle').on('click', function(){
$div1.fadeToggle(1000);
});
$('#slideDown').on('click', function(){
$div1.slideDown(1000);
});
$('#slideUp').on('click', function(){
$div1.slideUp(1000);
});
$('#slideToggle').on('click', function(){
$div1.slideToggle(1000);
});
$('#animate').on('click', function(){
$div1.animate({
width: 800,
opacity: .5,
left: 100
}, 1000, 'easeOutBounce', function(){
console.log('over');
});
});
$('#animated').on('click', function(){
$('#div1:animated').css('background', 'green');
});
});
注：jQuery 的动画插件 jQuery.easing.js,若使用必须在前面先引入jQuery文件
.stop()
停止动画
第一个参数 布尔值 指是否取消已列队动画。默认false
第二个参数 布尔值 指是否立即完成当前动画。默认false
注：一般在执行动画时，前面先写stop
stop
#box {
background: #f00;
height: 100px;
width: 100px;
position: relative;
}
stop运动参数测试
$(function () {
var $box = $("#box");
$("#start").on("click", function () {
$box.animate({
height: 500
}, 5000);
$box.animate({
width: 500
}, 5000);
$box.animate({
height: 100
}, 5000);
$box.animate({
width: 100
}, 5000);
});
// 点击不同的button执行不同的操作
$('#button1').click(function () {
//默认参数是false，不管写一个false还是两个false还是没写false效果一样
$box.stop();
});
$('#button2').click(function () {
//第二个参数默认false
$box.stop(true);
});
$('#button3').click(function () {
$box.stop(false, true);
});
$('#button4').click(function () {
$box.stop(true, true);
});
})
核心
$.extend()
将两个对象的内容合并第一个对象
var obj1 = {
name: 'zhangsan'
};
var obj2 = {
name: 'lisi',
age: 18
};
$.extend(obj1, obj2);
console.log(obj1);
输出 name:lisi age:18
$(selector).load()
加载代码段
注：加载为空 就会加载自己出现死循环
