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）