jQuery选择器

jQuery选择器

1.jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

2.jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

3.jQuery 中所有选择器都以美元符号开头：$()。

#id选择器

基于元素id选取元素,如果是id需要加"#"

<p id="pid"></p>
$(“#id”)

.class选择器

基于元素class名选取元素,如果是类需要加"."

<p class=“stand”></p>
$(“.stand”)

标签选择器

基于html标签名选取元素

<p></p>
$(“p”)

类型选择器

基于html标签元素类型，下面代码，会得到所有类型为button的input标签对象

type类型：text、password、radioi、checkbox、submit、reset、file、image

<input type="button"  />
$(“:button”)

类型选择器

基于html标签元素类型，下面代码，会得到所有类型为button的input标签对象

<input type="button"  />
$(“:button”)

属性选择器

基于html标签属性的选择器

<input type="button"  name="button"  />
$(“[name='value']”) //取到所有name=‘value’标签
$(“[name”) //取到所有拥有name属性的标签

:fitst、:last选择器

<div>
        <p> </p>
         <p></p>
         <p></p>
</div>
$("div p:first")   //得到div中第一个p标签
$("div p:last")   //得到div中最后一个p标签

:even、:odd选择器

<table>
	<tr><td></td></tr>
	<tr><td></td></tr>
	<tr><td></td></tr>
	<tr><td></td></tr>
</table>
$("tr:even")   //得到所有偶数<tr>元素
$("tr:odd")   //得到所有奇数<tr>元素

:eq、:gt、:lt选择器

<table>
	<tr><td></td></tr>
	<tr><td></td></tr>
	<tr><td></td></tr>
	<tr><td></td></tr>
</table>
$("tr:eq(3)")   //得到中第四个tr元素（index从0开始）
$("tr:gt(1)")   //得到index大于1的tr元素
$("tr:lt(1)”)   //得到index小于1的tr元素

父子选择器

<table>
	<tr id="tf">
			<td></td> 
			<td></td>
	</tr>
	<tr>
			<td></td>
			<td></td>
	</tr>
	<tr>
			<td id=“flag”> <p id="pf" > </p></td>
			<td></td>
	</tr>
</table>
$("td#flag").parent()//找到id='flag'的td上一级父元素tr
$("p#pf").parents("tr") //找到id='flag'的p最近的一个父类tr
$("tr#tf").children("td:first")//找到id=“tf”的tr下第一个子类td

总结

1.jQuery选择器的用法与html标签中样式属性的用法相似。
2.标签选择器可以组合使用，能够轻易的取到所需的html元素标签
3.学习推荐网址：
(https://www.runoob.com/jquery/jquery-tutorial.html)