jquery选择器

属性选择E[attr]：$("[title]").click()... $("div[title]").click()....

选择所有元素内属性带有title的元素
即：<li class="aaaa" title="ttt">li-1</li>
选择所有div标签（指定标签）下的所有带title的元素

即：<div class="aaaa" title="ttt">li-1</div>

属性值选择E[@attr=val]
$("div[title='ttt']").click().....

选择div下所有title属性等于ttt的元素
即
<div class="aaaa" title="ttt">li-1</div>

如果是 $("[title='ttt']").click().....
所有元素下属性title等于ttt的元素
<li class="aaaa" title="ttt">li-1</li>
<div class="aaaa" title="ttt">li-1</div>

属性值开始字母选择E[attr^=val]
$("div[title^='t']").click().....
所有div元素下所有属性title值是以t为开头的元素

属性值结尾字母选择E[@attr$=val]
$("div[title$='t']").click()................

所有div元素下所有属性title值是以t为结尾的元素

属性值包含字母选择E[@attr*=val]
$("div[title*='t']").click().......
所有div元素下所有属性title值是包含t的所有元素

多个属性选择E[attr=val][attr=val]
$("div[title='ttt'][class='aaaa']").click().......
所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素

获取父级元素：

parent([expr]):

获取指定元素的所有父级元素

 1 <div id="par_div">
 2 　    <a id="href_fir" href="#">href_fir</a>
 3         <a id="href_sec" href="#">href_sec</a>
 4         <a id="href_thr" href="#">href_thr</a></div>
 5         <span id="par_span">
 6             <a id="href_fiv" href="#">href_fiv</a>
 7         </span>
 8 </div>
 9 $(document).ready(function(){
10 $("a").parent().addClass('a_par');
11 });

View Code

获取同级元素：next([expr])：

获取指定元素的下一个同级元素。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <script type="text/javascript" src="/jquery/jquery.js"></script>
 5 </head>
 6 
 7 <body>
 8 <ul>
 9    <li>list item 1</li>
10    <li>list item 2</li>
11    <li class="third-item">list item 3</li>
12    <li>list item 4</li>
13    <li>list item 5</li>
14 </ul>
15 
16 <script>
17 $('li.third-item').next().css('background-color', 'red');
18 </script>
19 
20 </body>
21 </html>

这个例子的结果是，只有list item 4背景色变为红色

nextAll([expr]):获取指定元素后边的所有同级元素

andSelf():获取指定元素后边的所有同级元素，之后加上指定的元素

即：自己及其之后的所有同级元素

prev()：获取指定元素的上一个同级元素（是上一个哦）。

prevAll()：获取指定元素的前边所有的同级元素。

获取子元素

1、查找子元素方式1：>

例如：var aNods = $("ul > a");查找ul下的所有a标签

2、查找子元素方式2：children()

3、查找子元素方式3：find()

这里再简单介绍以下children()和find()的异同：

1> children及find方法都用是用来获得element的子elements的，两者都不会返回 text node，就像大多数的jQuery方法一样。
2> children方法获得的仅仅是元素一下级的子元素，即：immediate children。
3> find方法获得所有下级元素，即：descendants of these elements in the DOM tree
4> children方法的参数selector 是可选的（optionally），用来过滤子元素，但find方法的参数selector方法是必选的。

5> find方法事实上可以通过使用 jQuery( selector, context )来实现。即$('li.item-ii').find('li')等同于$('li', 'li.item-ii').

例：

 1 <ul class="level-1">
 2   <li class="item-i">I</li>
 3   <li class="item-ii">II
 4     <ul class="level-2">
 5       <li class="item-a">A</li>
 6       <li class="item-b">B
 7         <ul class="level-3">
 8           <li class="item-1">1</li>
 9           <li class="item-2">2</li>
10           <li class="item-3">3</li>
11         </ul>
12       </li>
13       <li class="item-c">C</li>
14     </ul>
15   </li>
16   <li class="item-iii">III</li>
17 </ul>

使用：$('ul.level-2').children().css('border', '1px solid green'); 的效果是：

使用 $('ul.level-2').find('li').css('border', '1px solid green'); 的效果是：

下面还有一些：

1 :first :last

$('div:first');
$('div:last');
获取所有div元素的第一个元素和最后一个元素

2 :even :odd$('div:even');

匹配所有div对象中的偶数元素
$('div:odd'):
匹配所有div对象中的奇数元素

3 eq(index)

$('div:eq(2)')
匹配第二个div对象
这个参数是数字，所以在获取某些对象时也比较灵活.

4 :gt(index) :lt(index)

$('div:gt(1)')
匹配小于下标的所有元素
$('div:lt(2)')
匹配大于下标的所有元素

5 :contains(text)

$('div:contains("txt")');
匹配内部包含有文本txt元素的对象

6 :empty

$('div:empty')
匹配所有没有子元素的对象

7 :has(selector)

$('div:has("#abc")')
返回含有#abc子元素的div对象

8 :hidden :visible

$('div:hidden')
匹配所有隐藏对象
$('div:visible')
匹配所有可见的对象

$("div[id]")                查找所有含有 id 属性的div元素。
$("div[id='ajaxa']")        查找 id 为 ajaxa 的 div 元素。
$("div[id!='ajaxa']")       查找 id 不为 ajaxa 的 div 元素。
$("div[id^='ajaxa']")       查找 id 以 ajaxa 开头的 div 元素。
$("div[id$='ajaxa']")       查找 id 以 ajaxa 结尾的 div 元素。
$("div[id*='ajaxa']")       查找 id 含 ajaxa 的 div 元素。
$("div[id][class='ajaxa']") 查找存在id属性并且类为ajaxa的 div 元素。

jquery 获得tagName 的方法：$('#id').attr("tagName");jquery把tagName 当成属性了。