一、jQuery的DOM属性
1、.addClass(className)：为每个匹配的元素添加指定的样式类名
2、.attr(attributeName)：获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性。
//给 a 标签添加属性，用对象的方式可以添加多条属性
$("a").attr("herf","https://www.cnblogs.com/nnadd/");
3、.hasClass(className)：确定任何一个匹配元素是否有被分配给定的(样式)类。
4、.html()：获取集合中第一个匹配元素的HTML内容 ()里添加或重置每一个匹配元素的html内容。
5、.prop(propertyName)：获取匹配的元素集中一个元素的属性(property)值为匹配的元素设置一个或多个属性(properties)。()内有两个值则是修改属性值。只能选中默认属性。
6、.removeAttr(attributeName)：为匹配的元素集合中的每个元素中移除一个属性(attribute)。
7、.removeClass([className])：移除集合中每个匹配元素上一个,多个或全部样式。
8、.removeProp(propertyName)：为集合中匹配的元素删除一个属性 (property)。
9、.toggleClass()：在匹配的元索集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类。
10、.val()：获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值。
二、jQuery的DOM操作
1.CDN
CDN的全称是Content Delivery Network ,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络, CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决Internet网络拥挤的状况,提高用户访问网站的响应速度。
2.DOM插入并包裹现有内容
●.wrap(wrappingElement)：在每个匹配的元素外层包上一个html元素。
●.unwrap()：将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。
●.wrapAll(wrappingElement)：在所有匹配元素外面包一层HTML结构。
●.wrapInner(wrappingElement)：在匹配元素里的内容外包一层结构。
3.DOM插入现有元素内
●.append()：在每个匹配元素里面的末尾处插入参数内容。
将原有的元素移动到标签里面
<body>
<span>荆润娜</span>
<p>闭月羞花</p>
<p>沉鱼落雁</p>
</body>
<script>
$(function(){
$("p").append($("span"));
})
</script>
●.appendTo()：将匹配的元素插入到目标元素的最后面(译者注:内部插入)。
$("<p>荆润娜</p>").appendTo($("p"));
●.html()：获取集合中第一个匹配元素的HTML内容 设置每一个匹配元素的html内容。
●.prepend()：将参数内容插入到每个匹配元素的前面(元素内部)。
●.prependTo()：将所有元素插入到目标前面(元素内)。
●.text()：得到匹配元素集合中每个元素的合并文本,包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。
4.复制元素
●.clone()：创建一个匹配的元素集合的深度拷贝副本。该方法没有参数。
$("span").clone().appendTo($("p"));
5.插入现有元素外
●.after(): 在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点。
●.before(): 根据参数设定,在匹配元索的前面插入内容(译者注:外部插入)
●.insertAfter(): 在目标元素后面插入集合中每个匹配的元素(注:插入的元素作为目标元素的兄弟元素)。
●.insertBefore(): 在目标元素前面插入集合中每个匹配的元素(注:插入的元素作为目标元素的兄弟元素)。
6.DOM移除
●.detach(): 从DOM中去掉所有匹配的元素。
●.empty(): 从DOM中移除集合中匹配元素的所有子节点。该方法没有参数。
●.remove(): 将匹配元素集合从DOM中删除。( 注:同时移除元素上的事件及jQuery数据。)
●.unwrap(): 将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。
7.DOM替换
●.replaceAll(): 用集合的匹配元素替换每个目标元素。
●.replaceWith(): 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
8.CSS属性
●.css():获取匹配元素集合中的第一个元素的样式属性的值，设置每个匹配元素的一个或多个CSS属性。
●.height():获取匹配元素集合中的第一个元素的当前计算高度值。设置每一个匹配元素的高度值。
●.width():为匹配的元素集合中获取第一个元素的当前计算宽度值。给每个匹配的元素设置CSS宽度。
●.innerHeight():为匹配的元素集合中获取第一个元素的当前计算高度值, 包括padding ,但是不包括border。该方法没有参数。
●.innerWidth():为匹配的元素集合中获取第一个元素的当前计算宽度值，包括padding ,但是不包括border。该方法没有参数。
●.offset():在匹配的元素集合中,获取的第一个元素的当前坐标 ,坐标相对于文档。设置匹配的元素集合中每一个元素的坐标，坐标相对于文档。
●.outerHeight():获取元素集合中第一个元素的当前计算高度值,包括padding , border和选择性的margin。返回一个整数(不包含"px" ) 表示的值, 或如果在一个空集合上调用该方法,则会返回null。参数为Boolean类型，默认为false，不包括margin。
●.outerWidth():获取元素集合中第一个元素的当前计算宽度值, 包括padding , border和选择性的margin。(注 :返回一个整数(不包含"px” ) 表示的值,或如果在一个空集合 上调用该方法,则会返回null。)参数为Boolean类型，默认为false，不包括margin。
●.position():获取匹配元素中第一个元素的当前坐标 ,相对于offset parent的坐标。( 译者注: offset parent指离该元素最近的而且被定位过的祖先元素)
●.scrollLeft():获取匹配的元素集合中第一个元素的当前水平滚动条的位置。 设置每个匹配元素的水平滚动条位置。
●.scrollTop():获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置。设置每个匹配元素的垂直滚动条位置
overflow:auto;设置滚动条
三、jQuery 树遍历
●.children() :获得匹配元素集合中每个元素的直接子元素, 选择器选择性筛选。
●.closest():从元素本身开始,在DOM树上逐级向上级元素匹配,并返回最先匹配的父元素。
●.find():通过一个选择器,jQuery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代。
●.next():取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 如果提供一个选择器 ,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素。
●.nextAll():获得每个匹配元素集合中所有下面的同辈元素,选择性筛选的选择器。
●.nextUntil() :通过选择器, DOM节点,或jQuery对象得到每个元素之后的所有兄弟元素,但不包括匹配的元素。一个参数表示直到这个参数为止，触发事件，不包括首尾。两个参数表示要停止的位置和筛选的元素，不包括尾。
●.parent():取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器。
●.parents():获得集合中每个匹配元素的祖先元素,可以提供一个可选的选择器作为参数。
●.offsetParent():取得离指定元素最近的含有定位信息的祖先元素。含有定位信息的元素指的是,CSS的position属性是relative, absolute,或fixed的元素。该方法没有参数。
●.parentsUntil():查找当前元素的所有的前辈元素,直到遇到选择器，DOM节点或jQuery对象匹的元素为止,但不包括这元素。
●.prev():取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。选择性筛选的选择器。
点击按钮，让分红区域往左走
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<style>
div{
40px;
height: 40px;
margin-left: 10px;
float: left;
border: 1px solid green;
}
button{
margin-left: 10px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="start"></div>
<div></div>
<button>go to prev</button>
<script>
$(function(){
var start = $("#start");
start.css("background-color","#f99");
$("button").click(function(){
start = start.prev();
$("div").css("background-color","");
start.css("background-color","#f99");
})
})
</script>
</body>
</html>
●.prevAll():获得集合中每个匹配元素的所有前面的兄弟元素,选择性筛选的选择器。
●.prevUntil():获取每个元素但不包括选择器, DOM节点,或者jQuery对象匹配的元素的所有前面的兄弟元素。
●.siblings():获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器。
四、jQuery特效
1.隐藏与显示
<body>
<div>闭月羞花荆润娜</div>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">隐藏/显示</button>
<script>
$(function(){
//点击按钮隐藏,执行时间 1s
$("#hide").click(function(){
$("div").hide(1000);
})
//点击按钮显示,执行时间 1s
$("#show").click(function(){
$("div").show(1000);
})
//点击按钮隐藏/显示,执行时间 1s
$("#toggle").click(function(){
$("div").toggle(1000);
})
})
</script>
</body>
点击方块，让其消失
<style>
div{
40px;
height: 40px;
background-color: aquamarine;
margin-left: 10px;
float: left;
}
</style>
for(var i=0;i<5;i++){
$("<div>").appendTo(document.body);
}
$("div").click(function(){
$(this).hide(2000,function(){
$(this).remove();
});
})
2.淡入与淡出
淡入：
fadeIn(执行时间,"透明度");//透明度：0～1
淡出：
fadeOut(执行时间,"透明度");
淡入/淡出
fadeToggle(执行时间,"透明度");
3.滑动
滑出
slideDown(执行时间);
滑入
slideUp(执行时间);
两个方法可写在一起
4.回调
$("div").click(function(){
//方法的回调
$(this).hide(2000,function(){
$(this).remove();
});
})
5.自定义特效
每一个特效要用分号隔开
（1）.animate():根据一组CSS属性，执行自定义动画
.animate({css属性和值的对象},执行时间,"动画的执行类型",回调函数)
动画执行类型：
"linear" 线性
"swing" 曲线性
css属性中的宽高值可以设置动画执行类型
[100,"swing"]
（2）.clearQueue():从列队中移除所有未执行的项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<style>
div{
200px;
height: 200px;
background-color: pink;
position: absolute;
}
button{
position: absolute;
}
</style>
</head>
<body>
<div></div>
<button>停止动画</button>
<script>
$(function(){
var div = $("div");
div.click(function(){
$(this).animate({
500,opacity:0.5,left:200
},3000,"linear");
$(this).animate({
200,opacity:1,left:8
},2000,"swing",function(){
alert("动画执行完成！");
})
});
$("button").click(function(){
div.clearQueue();//参数可以为动画名称
})
})
</script>
</body>
</html>
（3）.delay():设置一个延时来推迟执行队列中后续的项。
延迟五秒再执行后面的动画
$(this).animate({
500,opacity:0.5,left:200
},3000,"linear").delay(5000);