使用jQuery:
jQuery 通常被用来优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的中使用css选择器来找到html元素。
jQuery优势：
1、体积小，使用灵巧（只需要引入一个js文件）
2、方便的选择页面元素（模仿CSS选择器更精确、灵活）
3、动态更改页面样式/页面内容（操作DOM，动态、添加、移除样式。）
4、控制响应事件（动态添加响应事件）。
5、提供基本网页特效（提供已封装的网页特效方法）
6、快速实现通信（ajax）。
7、易扩展，插件丰富。
jQuery下载：
官网：http://jquery.com/
如何引入jQuery包
No1.本地引入 <script src = "jquery.js"></script> No2.他站网络引入 <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.js"></script> <script> $(function(){ alert("欢迎使用 jQuery"); }); </script>
1. $ 是 jQuery 的别名，实际就是指 jQuery 对象。
2.上面代码表示页面中所有节点都准备好之后，就可以执行函数了。
$(function(){})与window.onload = function(){}的区别 1. // jq 写法 $(function () { console.log("ready1"); }); $(function() { console.log("ready2"); }); // js 写法 window.onload = function () { console.log('load1'); }; window.onload = function () { console.log('load2'); }
上面的代码运行后的结果为，ready1 ready2 load2 ，根据结果，得出结论：
1.ready 不会覆盖。而load会覆盖。
2.ready在load之前执行。
js中是脚本加载。jq中是节点加载。
$(document).ready(function(){
alert('第一个jQuery程序！');
});
jQuery选择器
类似css中的选择器。使用过滤器的到是具体的元素。
注意的是它选出的结果是集合，即使只有一个元素。so 需要下表访问元素。
1.基本选择器。
2.层级选择器。
3.伪类选择器。
基本选择器
1.ID选择器:($"#id")
2.标签选择器:$("element")
3.类选择器:$(".className")
4.通配选择器:$("*")
5.组选择器:$("selector1,selector,selectorN")特点：无数量限制，以逗号分隔(逐个匹配，结果全部返回)
层级选择器
1.包含选择器:$("a b")在给定的祖先元素下匹配所有后代元素。(不受层级限制)
2.子选择器:$("parent>child")在给定是的父元素下匹配所有的子元素。
3.相邻选择器:$("prev+next")匹配所有紧接在prev元素后的next元素。(紧随其后找一个元素)
4.兄弟选择器:$("prev~siblings")匹配prev元素之后的所有的siblling元素
<div class="main"> <span>1<img src="img/1.jpg"/></span> 2<img src="img/1.jpg"/> </div> 3<img src="img/1.jpg"> 4<img src="img/1.jpg"> <div> 5<img src="img/1.jpg"> </div> <script> //$(".main img").css("border","5px solid red"); //$(".main > img").css("border","5px solid blue"); //$(".main + img").css("border","5px solid blue"); //$(".main ~ img").css("border","5px solid blue"); /*
css() 方法介绍
css() 方法前面必须是jq对象，如果是元素节点的话，会报错
设置style属性
如果修改一个style属性时
$("div").css( "color", "red" );
$("div").css( {"color":"red"} );
如果修改多个style属性时
$("div").css( {"color":"red", "background":"blue"} );
获取style属性
如果获取一个style属性时
$("div").css( "color" );
如果获取多个style属性时
$("div").css( ["color", "background"] );
*/
</script>
利用
$("div").innerHTML = "这是一个div";
js与jq混合写法
$("div").html("这是一个div");
上面的书写效果是一样的。
$(div1).innerHTML = "这是一个div";
语意：将js对象转为jq对象。
伪类选择器
特定位置选择器
1。:first匹配找到的第一个元素
2。:last匹配找到的最后一个元素
3。:eq匹配一个给定索引所有值的元素。
指定范围选择器
1:even匹配所有索引值为偶数的元素
2:odd匹配所有索引值为奇数的元素
3:gt(index)匹配所有大于给定索引值的元素（大于这个下标的所有元素）
4:lt(iudex)匹配所有小于给定索引值的元素（小于这个下标的所有元素）
<ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <script> $("li:first").css("color", "orange"); </script>
排除选择器
1. :not 去除所有与给定选择器匹配的元素 <p>1</p> <p id="mp">2</p> <p class="c1">3</p> <script> $("p:not(.c1,#mp)").css("color", "orange"); </script>
内容选择器
1.:contains匹配包含给定文本的元素 <div>abcd</div> <div>ABcd</div> <div>xxyy</div> <script> console.log($("div:contains('bc')")); </script> 2.:empty匹配所有不包含子元素或者文本的空元素 <table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table> <script> console.log($("td:empty")); </script> 3.:has匹配含有选择器所匹配的元素的元素(用来选择标签的) <div><p>Hello</p></div> <div>Hello again!</div> <script> console.log($("div:has(p)")); </script> 4.:parent匹配含有子元素或者文本的元素 <table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table> <script> console.log($("td:parent")); </script> 5.可见性选择器 1.:hidden匹配所有不可见元素，或者type为hidden的元素。 <table> <tr style = "display:none"><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table> <script> console.log($("tr:hidden")); </script> 2.:visible匹配所有的可见元素 <table> <tr style = "display:none"><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table> <script> console.log($("tr:visible")); </script>
属性: 1.[attribute]匹配包含给定属性的元素(具体某个属性的选取) <div> <p>Hello!</p> </div> <div id="test2"></div> <script> console.log( $("div[id]") ); </script> 2.[attribute=value]匹配给定的属性是某个特定值的元素 <input type="checkbox" name="a" value="1" /> <input type="checkbox" name="a" value="2" /> <input type="checkbox" name="b" value="3" /> <script> $("input[name='a']").attr("checked", true); </script> 3.[attribute!=value]匹配所有不含有指定的属性，或者属性不等于特定值的元素。 <input type="checkbox" name="a" value="1" /> <input type="checkbox" name="a" value="2" /> <input type="checkbox" name="b" value="3" /> <script> $("input[name!='a']").attr("checked", true); </script> 4. [attribute^=value]匹配给定的属性是以某些值开始的元素 <input type="checkbox" name="abc" value="1" /> <input type="checkbox" name="adc" value="2" /> <input type="checkbox" name="b" value="3" /> <script> $("input[name^='a']").attr("checked", true); </script> 5.[attribute$=value]匹配给定的属性是以某些值结尾的元素 <input type="checkbox" name="a" value="1" /> <input type="checkbox" name="a" value="2" /> <input type="checkbox" name="b" value="3" /> <script> $("input[name$='c']").attr("checked", true); </script> 6.[attribute*=value]匹配给定的属性以包含某些值的元素 <input type="checkbox" name="a" value="1" /> <input type="checkbox" name="a" value="2" /> <input type="checkbox" name="b" value="3" /> <script> $("input[name*='d']").attr("checked", true); </script>
jQuery选择器的优化
提高性能、增强语义并简化逻辑。常用的选择器中，ID选择器速度最快，其次是类型选择器。
1.多用ID选择器
2.少直接使用class选择器
3.多用父子关系，少用嵌套关系。
4.缓存jQuery对象。
过滤器
jQuery提供了2种选择文档元素的方式：选择器和过滤器。
1.类过滤器：根据元素的类属性来进行过滤操作。
hasClass(className):判断当前jQuery对象中的某个元素是否包含指定类名，包含返回true，不返回false。有就可以返回true。
$(this).hasClass("d1");
2.下标过滤器：精确选出指定下标元素。
eq(index):获取第N个元素。index是整数值,下标从0开始。
$(this).eq(1)
3.表达式过滤器。
filter():筛选出与指定表达式匹配的元素集合。
expr：选择器表达式
$("div").filter(".d1,.d4,#d3");
4.映射map(callback):将一组元素转换成其他数组。
<div>1</div>
<div>2</div>
<script>
console.log($("div").map(function(){
return this.innerHTML;
}))
</script>
5.清洗not(expr):删除与指定表达式匹配的元素。
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<script>
$("p").not(":eq(2)").css("color","red");
</script>
6截取slice(start,end):选取一个匹配的子集。
$("p").slice(0,1).css("color","red");
$("p").slice(2,4).css("color","red");
$("p").slice(-2).css("color","red");
$("p").slice(0,-2).css("color","red");
$("p").slice(-4,-2).css("color","red");
7.children():取得所有元素的所有子元素集合(子元素)。
<div>
<li>0</li>
<li id="li1">1</li>
<li>3</li>
<li>4</li>
</div>
<script>
$("div").children().css("color","red");
$("div").children(":not(#li1)").css("color","red");
</script>
8.find():搜索所有与指定表达式匹配的元素(所有后代元素中查找)。
console.log($("div").find(":eq(0)"));
9.查找兄弟元素siblings()查找当前元素的兄弟.
//查找id=li1元素的兄弟节点(包含前后兄弟节点)。 $("#li").siblings().css("color","red"); // $("#li1").siblings(".li3,#li0").css("color","red"). // console.log($("p:eq(0)").siblingss("div:eq(1)").children());