JQuery学习笔记系列----选择器详解
Posted 子非鱼220
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery学习笔记系列----选择器详解相关的知识，希望对你有一定的参考价值。
笔者好长时间没有更新过博客园的笔记了，一部分原因是去年刚刚开始工作一段时间忙碌的加班，体会了一种每天加班到凌晨的充实感，之后闲暇时间了也因为自己懒惰没有坚持记笔记的习惯，现在重新拾起来。
借用古人的一段话与诸君共勉：
人之为学,不日进则日退,独学无友,则孤陋而难成；久处一方,则习染而不自觉.不幸而在穷僻之域,无车马之资,犹当博学审问, 古人与稽,以求其是非之所在.庶几可得十之五六.若既不出户,又不读书,则是面墙之士,虽子羔、原宪之贤,终无济于天下.
翻译为：人们求学（或做学问）,不能天天上进,就要天天后退.孤独地学习,而不和朋友（互相交流启发）,就必然学识浅薄难以成功；长久住在一个地方, 就会不知不觉地沾染上某种习气.不幸住在穷乡僻壤,而又没有（雇用）车马的盘费,还应当广博地学习、详细地考究,与古人相合,来探求学习里边哪是对的哪是 不对的,这样差不多能得到十分之五六（的收获）.如果既不出门（拜师友）,又不读书,那就是不学无术的人,即使（你有）像子羔、原宪那样的贤能,也终究无 济于社会.
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
#basic 基本选择器
$(‘code‘) 使用标签名，eg：$(‘div‘)
$(‘.class‘) 使用标签class属性的值，eg：<div class="test"> $(‘.test‘)使用的就是对应的div块
$(‘#id‘) 使用标签id属性的值，eg：<div class="test"> $(‘#test‘)使用的就是对应的div块
$(‘*‘) 包括所有的标签，包括body等等
$(‘code,.class,#id‘) 把上面三种选择器结合使用
#hierarchy 层级选择器
<body> <div class ="ss"> <div class="test"> <div class="first">1</div> <div id="even1">2</div> <div id="test">3</div> <div id="even3">4</div> <div id="even4">5</div> </div> <div id="test">10</div> </div> <div class="test">No.2</div> <div id="test">No.3</div> <button>Click Me</button> </body>
$(‘div code‘) 选择指定的父选择器下面的子选择器，包括间接继承,eg:$(‘.ss div‘)是选择class属性是ss下面的所有div标签
$(‘li > ui‘) 选择指定的父选择器下面的子选择器，不包括间接继承，eg:$(‘.ss > #id‘),只会选择<div id="test">10</div>这个div
$(‘strong + em‘) 选择指定选择器的妹妹，只选择第一个匹配的，eg:$(‘#even1 + div‘),会选择 <div id="test">3</div>这个div
$(‘strong ~ em‘) 选择指定选择器的所有妹妹，eg：$(‘#even1 + div‘),会选择<div id="test">3</div><div id="even3">4</div><div id="even4">5</div>这三个div
#Filters 过滤器
<body> <ul> <li>No.1</li> <li>No.2</li> <li>No.3</li> <li>No.4</li> <li>No.5</li> <li>No.6</li> <li>No.7</li> <li>No.8</li> <li>No.9</li> <li>No.10</li> </ul> <ol> <li>not in ul</li> </ol> <button>Click Me</button> </body>
$(‘li:first‘) 选择标签li的第一个，<li>No.1</li>，index=0
$(‘li:last‘) 选择标签li的最后一个，<li>not in ul</li>，index=10
$(‘li:not()‘) 选择标签li满足not方法的，eg:$(‘li:not(ul li)‘),选择不是ul标签下面的li，实际选择的是<li>not in ul</li>
$(‘li:even‘) 选择标签li下标是偶数的，下标从0开始
$(‘li:odd‘) 选择标签li下标是奇数的，下标从0开始
$(‘li:eq(2)‘) 选择标签li下标等于2的，<li>No.3</li>
$(‘li:gt(2)‘) 选择标签li下标大于2的
$(‘li:lt(2)‘) 选择标签li下标小于2的
#content 内容
<body> <table> <tr><td>hello world!</td></tr> <tr><td>This is a test of html</td></tr> <tr><td><p></p></td></tr> <tr><td></td></tr> <tr><td>The world is beautiful</td></tr> </table> <input type="button" value="带有world单词的会变红色" id="btn1"> <input type="button" value="带有is单词的会变蓝色" id="btn2"> <input type="button" value="td里面为空的会变黑色" id="btn4"> <input type="button" value="td里面嵌套p的会变绿" id="btn5"> <input type="button" value="清除背景色" id="btn3"> </body> <script type="text/javascript"> jQuery(function(){ $(‘#btn1‘).click(function(){ $(‘td:contains("world")‘).css("background-color","red"); }); $(‘#btn2‘).click(function(){ $(‘td:contains("is")‘).css("background-color","blue"); }); $(‘#btn3‘).click(function(){ $(‘td‘).css("background-color","white"); }); $(‘#btn4‘).click(function(){ $("td:empty").css("background-color","black"); }); $(‘#btn5‘).click(function(){ $("td:has(p)").css("background-color","green"); }); }); </script>
内容里面有汉字的话也是可以识别出来的
$(‘td:contains("world")‘): :contains的作用是查找到包含world的td标签
$("td:empty")： :empty的作用是查找到没有子元素或内容的td标签
$("td:has(p)")： :has(p)的作用是查找到里面嵌套标签p的td标签
JQuery还有其他一些选择器，像表单选择器这些的不是常用到的我就不介绍了，想要深入的研究的朋友可以看一下jquery的中文api
2016-06-21 10:10:01
以上是关于JQuery学习笔记系列----选择器详解的主要内容，如果未能解决你的问题，请参考以下文章
CSS常用选择器伪元素选择器伪类选择器大全——响应式Web系列学习笔记