jQuery 取DOM方法汇总----选择符

最近整理了下jquery,总结了下：

标签名：$('p') 取得文档中所有的段落

ID：$('#some-id') 取文档中具有对应的some-id ID的一个元素

类：$('.some-class') 取文档中所有带有some-class类的所有元素

范围：$('#some-id>some-class') 即表示查找Id为some-id的元素（#some-id）的子元素(>)中的所有的列表项(some-class).

$('#some-id some-class:not(.className)')表示查找ID为some-id的元素下的子元素some-class且样式不是className的。

属性选择符：类似于正则表达式(^)开始、($)结尾、(*)字符串中任意位置。

自定义选择符： :eq(num)，如：${'some-class:eq(num)'}, 表示查找some-class元素中的第1行

:odd奇数，如：${'some-class:odd'} 表示查找some-class元素中的奇数行

:even偶数，如：${'some-class:even} 表示查找some-class元素中的偶数行

:contains 包含，如${'some-class:("you want")'},表示查找some-class元素中包含you want这部分的元素行

注：Javascript本身的从0开始的编号方式

（版权所有，如需转载，请注明原出处http://blog.csdn.net/y6300023290）

例子1：

<ul id='selected-plays'>
<li>Comedies
<ul>
<li>
<a href="http://www.mysite.com/asyouliekit/">
As You Like It
</a>
</li>
<li> All's Well That Ends Well</li>
<li>A Midsummer Night's Dream</li>
<li>Twelfth Night</li>
</ul>
</li>
<li>Tragedies
<ul>
<li><a href="hamlet.pdf">Hamlet</a></li>
<li>Macbeth</li>
<li>Romeo and Juliet</li>
</ul>
</li>
<li>Histories
<ul>
<li>Henry IV(<a href="mailto:henryiv@king.co.uk">email</a>)
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
<li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
<li>Richard II</li>
</ul>
</li>
</ul>

效果：



（版权所有，如需转载，请注明原出处http://blog.csdn.net/y6300023290）

此刻添加样式：

.horizontal{
float:left;
list-style:none;
margin:10px;
}

.sub-level{background-color:#ffc;}

添加js代码：

$('#selected-plays>li').addClass('horizontal');
$('#selected-plays li:not(.horizontal)').addClass('sub-level');

效果：



此刻证明我们要添加ID为selected-plays下为li标签的样式成功，且添加ID为selected-plays下标签为li且样式不为horizontal的背景颜色亦成功。

（版权所有，如需转载，请注明原出处http://blog.csdn.net/y6300023290）

接着我们继续来使用属性选择符

添加样式：

a{
color:#00f;
}
a.mailto{
color:#f00;
}
a.pdflink{
color:#090;
}
a.mysite{
text-decoration:none;
border-bottom:1px dotted #00f;
}

添加js代码：

$('a[href^="mailto:"]').addClass('mailto');//表示取A标签中href开头为mailto:的元素
$('a[href$=".pdf"]').addClass('pdflink');//表示取A标签中href结尾为.pdf的元素
$('a[href*="mysite.com"]').addClass('mysite');//表示取A标签中某段有mysite,com的元素

此刻效果：



--------------------------------------------------------------------------------------------------------------------------------------

例子2：

<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Henry IV,Part I</td>
<td>History</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
</tr>
</table>

其效果为：



好的，现在我们来对应的加入CSS样式：

.odd{
background-color:#ffc;/*奇数行的背景颜色为浅黄色*/
}
.even{
background-color:#cef;/*偶数行背景色为浅蓝色*/
}

（版权所有，如需转载，请注明原出处http://blog.csdn.net/y6300023290）

加入js代码：

$('tr:odd').addClass('odd');
$('tr:even').addClass('even');

效果为：



我们想为td中内容有Henry的行进行特别标注出来，那么，

添加css：

.highlight{
font-weight:bold;
color:#f00;
}

添加JS代码：

$('td:contains("Henry")').addClass('highlight');

其呈现出的效果：



注：此例子在jquery-1.10.2中亲测有效，某些版本中可能需要加入#来对应的找如：$('a[#href^="mailto:"]')。

总结：诚然，不适用jquery（或任何客户端编程语言）也可以通过其他方式实现这种突出的显示效果。然而，jquery加css，在内容由程序动态生成，而我们又无权改动HTML和服务器端代码的情况下，对这种样式化操作提供了优秀的替换方案。

（版权所有，如需转载，请注明原出处http://blog.csdn.net/y6300023290）