1、JQuery 名称解释
JQuery是封装了常用JS操作函数的一个库文件
JQuery = Javascript + Query (查询)
Jquery意思即指: 强大的DOM节点查询
2、官网:http://jquery.com/
JQuery2.*不再支持IE6、7、8，上线环境使用压缩版可以省带宽
3、基本选择器
同CSS选择器
<body><div id="test1">id test1</div><div class="test2">class test2</div><div class="test2">class test2</div><p>p1</p><p>p2</p><p>p3</p></body><script>// id选择器$(‘#test1‘).css(‘background‘ , ‘gray‘);// 标签选择器$(‘p‘).css(‘background‘ , ‘blue‘);// 类选择器$(‘.test2‘).css(‘background‘ , ‘green‘);// *$(‘*‘).css(‘background‘,‘pink‘);</script>
4、层次选择器
<p><input type="text" /><span>1</span><span>2</span></p><p><input type="text" /><span>3</span><span>4</span></p><p><input type="text" /><span>5</span><span>6</span></p><div><span>7</span></div><script>// div下的span$(‘div span‘).css(‘background‘ , ‘orange‘);// 每个prev元素之后的1个next元素被选中//$(‘input + span‘).css(‘background‘ , ‘gray‘);// 每个prev元素之后的所有同辈siblings元素$(‘input ~ span‘).css(‘background‘ , ‘gray‘);</script>
5、属性选择器
<body><p>Email:<input type="text" name="email" /></p><p>密码:<input type="text" name="password" /></p><p>重复密码:<input type="text" name="repassword" /></p><p>学号:<input type="text" name="stunum" /></p><p>学分:<input type="text" name="stuscore" /></p></body><script>$(‘input[name="email"]‘).css(‘background‘ , ‘gray‘);$(‘input[name!="email"]‘).css(‘background‘ , ‘blue‘);//找包含password的属性$(‘input[name*="password"]‘).css(‘background‘ , ‘pink‘);//找开头是stu的属性$(‘input[name^="stu"]‘).css(‘background‘ , ‘orange‘);//找以word结尾的属性$(‘input[name$="word"]‘).css(‘background‘ , ‘red‘);</script>
6、基础过滤器(配合选择器使用)
<body><ul><li>导航1</li><li>导航2</li><li>导航3</li><li>导航4</li><li>导航5</li><li>导航6</li></ul></body><script>$(‘li:first‘).css(‘background‘,‘red‘); // 找第1个$(‘li:odd‘).css(‘background‘,‘blue‘); // 找奇数个,从0计数$(‘li:even‘).css(‘background‘,‘blue‘); // 找偶数个,从0计数$(‘li:eq(2)‘).css(‘background‘ , ‘purple‘); // 找第2个,从0计数</script>
7、内容过滤器
<body><table border="1"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张飞</td><td>男</td><td>26</td></tr><tr><td>孙尚香</td><td>女</td><td>23</td></tr><tr><td>赵云</td><td>男</td><td>24</td></tr><tr><td>花木兰</td><td></td><td><span>22</span></td></tr></table><p><br /></p><p>a</p><p></p></body><script>$(‘td:contains("女")‘).css(‘background‘ , ‘blue‘); // 含有"女"的td$(‘td:empty‘).css(‘background‘ , ‘green‘); // 空的td$(‘td:has(span)‘).css(‘background‘ , ‘pink‘); // 含有span的td$(‘p:parent‘).css(‘background‘ , ‘black‘); // 有内容的p标签,(当爹的p标签)</script>JQuery
原文地址：http://www.cnblogs.com/lamp01/p/7538432.html