Jquery是一个优秀的js库，它简化了js的复杂操作，不需要关心浏览器的兼容问题，提供了大量实用方法。
Jquery的写法
方法函数化
链式操作
取值赋值合体]
$(“p”).html(); 取值
$(“p”).html(‘hello’); 赋值
（当一组元素的时候，取值是一组中的第一个，赋值是一组中的所有元素。）
Jq与js可以共存，不能混用
主要的筛选方法
has() not() filter()
next() prev() find() eq() index() attr() indexOf()
Attr() 对属性进行操作，给元素添加属性且赋值，或者取得某个属性的值。
$(“div”).attr(‘title’,’123’);
<div title=”123”></div>
Filter() 对一组元素进行筛选，过滤
满足条件的会被留下来
$(‘div’).filter(‘.box’).css(‘background’,’red’);
含有box类的div背景颜色会改变
Not() filter的反义词
$(‘div’).not(‘.box’).css(‘background’,’red’);
不含有box类的div背景颜色会改变
（filter和not是针对当前元素的，has是针对元素里面的内容的）
Has() 包含的意思
$(".box").has('#ul').css("background","#ccc");
$(“.box”).has(span).css(“background”,“red”);
Next() 找到当前元素的下一个兄弟节点
Prev() 找到当前元素的上一个兄弟节点
Find() 查找
$(‘div’).find(‘h2’).css(‘background’,’red’);
eq() 获得对应下标的元素
$(‘div’).find(‘h2’).eq(1).css(‘background’,’red);
Index(); 获得当前元素的索引。索引就是当前元素在所有兄弟节点中的位置
$(‘#h’).index();
编写选项卡
<input type="submit" value="111">
<input type="submit" value="222">
<input type="submit" value="333">
<div id="div">
<div class="active">111</div>
<div>222</div>
<div>333</div>
</div>
<script>
$(function(){
$("input").click(function(){
var i=$(this).index();
$("#div div").eq(i).show().siblings().hide();
});
});
</script>
<input type="submit" value="222">
<input type="submit" value="333">
<div id="div">
<div class="active">111</div>
<div>222</div>
<div>333</div>
</div>
<script>
$(function(){
$("input").click(function(){
var i=$(this).index();
$("#div div").eq(i).show().siblings().hide();
});
});
</script>
Jquery中常用的属性操作方法
addClass()
添加类名
$(‘div’).addClass(‘box2 box3’);
removeClass()
删除类名
$(‘div’).removeClass(‘box2 box3’);
width()
获取元素的宽度，不包含padding
Height()
获取元素的高度
innerWidth()
获取元素不包含变宽的宽度(包含padding)
outerWidth()
获取元素外的宽度，包含padding border
outerWidth(true) (包含padding,border,和margin)
节点操作常用方法
insertBefore() 插入到节点的前面（动词）剪切的功能
$(‘span’).insertBefore($(‘div’));
<span>1213</span>
<div>2345</div>
before() 节点的前面插入某元素（名词）
insertAfter() 插入到节点的后面（动词）(原生js中没有这个方法)
$(‘div’).insertAfter($(‘span’));
<span>1213</span>
<div>2345</div>
after() 节点的后面插入某元素（名词）
appendTo()
插入到节点内部所有子节点的后面（动词形式）
append() （名词形式）
prependTo()
插入到节点内部所有子节点的前面（动词形式）
prepend() （名词形式）
区别（后续操作不一样，）
$(‘span’).insertBefore($(‘div’)).css(‘background’,’red’);
$(‘div’).before($(‘span’)).css(‘background’,’red’);
remove() 删除节点
on()
$(‘div’).on(‘click mouseover’,function(){
Alert(123);
})
自定义事件,也可以写多个事件，来针对一个操作
$(‘div’).on({
‘click’:function(){
Alert(123);
},
‘mouseover’:function(){
Alert(456);
$(‘div’).off(‘mouseover’);
}
});
off() 关闭它的所有事件操作
scrollTop() 获取滚动条的滚动距离
$(document).click(function(){
Alert($(window).scrollTop());
})
弹窗(popup)，动态创建
创建标签
关键点，弹框的位置，绝对定位，position : absolute;
Left: (窗口宽度 - 弹框宽度)/2；
Top: (窗口的高度 – 弹框的高度)/2 + 滚动条的高度；
监听窗口大小变化和滚动事件
$(window).on(‘resize scroll’,function(){
})
事件细节
Event对象，对事件细节进行操作
ev :兼容后的even对象
ev.pageX (相对于文档的)
ev.clientX (相对于可视区，可视区加上滚动条距离就是pageX)
ev.pageY (相对于文档的)
ev.clientY (相对于可视区的)
ev.which : keyCode 找键盘的键值 回车（13），可以记录鼠标的键值
阻止默认事件 ev.preventDefault();
阻止冒泡的操作 ev.stopPropagation(); return false; // 阻止默认事件 +阻止冒泡的操作
One() 表示事件只执行一次
$(‘div’).one(‘click’,function(){
alert(123);
})
offset() 获取元素距离屏幕的距离
$(‘div’).offset().left
$(‘div’).offset().top
Position() 获取元素距离父元素的距离，元素被定位，margin不算，只能是left值，
到有定位的父级的left值，把当前元素转化成类似定位的形式
$(‘div’).position().left;
$(‘div’).position().top;
parent() 获取父级
offsetParent() 获取有定位的父级
val()
$(‘input’).val();
size() 获取一组元素的长度，像length
$(‘li’).size();
each() 相当于原生的for()循环 each()当中可以接受回调函数
$(‘li’).each(function(下标，元素)){
}
$(‘li’).each(function(I,elem){
$(elem).html(i);
})
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
一参（下标），二参（每个元素）
编写拖拽
$(window).width() //浏览器当前窗口可视区域宽度,不包含滚动条
$(window).height() //浏览器当前窗口可视区域高度，不包含滚动条
$(document).width() //浏览器当前窗口文档对象宽度，不包含右边的滚动条的宽度
$(document).height() //浏览器当前窗口文档的高度，包含了滚动条的高度
alert($(document.body).width()); //浏览器当前窗口文档body的宽度
alert($(document.body).height()); //浏览器当前窗口文档body的高度
$(document.body).outerWidth(true) //浏览器当前窗口文档body的总宽度 包括border padding margin
$(document.body).outerHeight(true) //浏览器当前窗口文档body的总高度 包括border padding margin