Jquery简介选择的

前言

Jquery一个js相框（程序代码相结合）这是一个程序开发过程中的半成品；分类似该框架EXTJS。

依赖库：jquery-XXX.js

语法：$()

正文

5择器

id选择器

$("#id值")

样例：$(#span1).css("color","red");

标签选择器

$("标签名称")

Class选择器

$(".class的值")

群组选择器

$("标签名称1，标签名称2")

包括选择器

$("标签名称1  标签名称2")

表单选择器

$(":input")全部的Input标签

$(":text")选出的Input标签中type为text的全部标签；类似的有：password，：button；：radio；：Reset；：checkbox；：hidden；：submit。：image；：File

演示样例：

$(":input").css("cursor","wait");

 

条件限定选择器

基本条件限定

:first   :last  :lt :gt  :odd（奇数） :even(偶数)   ：not

样例：

$("span:first").css("background-color","red");

$("span:lt(3)").css("background-color","red");

$("span:odd").css("background-color","red");

$("span:not(span:eq(2))").css("background-color","red");

内容限定

 

1.:contains(字符)  选中含有某个字符的标签

查找全部包括 "John" 的 div 元素

HTML 代码

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn

jQuery 代码:

$("div:contains('John')")

结果:

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

2.:empty

匹配全部不包括子元素或者文本的空元素

HTML 代码:
<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>
jQuery 代码:
$("td:empty")
结果:
[ <td></td>, <td></td> ]

3.:parent   返回值:Array<Element(s)>

匹配含有子元素或者文本的元素

 

描写叙述:

查找全部含有子元素或者文本的 td 元素

HTML 代码:
<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>
jQuery 代码:
$("td:parent")

结果:
[ <td>Value 1</td>, <td>Value 2</td> ]4.:has(selector)返回值:Array<Element(s)>匹配含有选择器所匹配的元素的元素一个用于筛选的选择器演示样例描写叙述:给全部包括 p 元素的 div 元素加入一个 text 类HTML 代码:<div><p>Hello</p></div>
<div>Hello again!</div>jQuery 代码:$("div:has(p)").addClass("test");结果:[ <div class="test"><p>Hello</p></div> ]
 

属性限定

1.[attribute]

匹配包括给定属性的元素。注意，在jQuery 1.3中。前导的@符号已经被废除！假设想要兼容最新版本号，仅仅须要简单去掉@符号就可以。

參数

attribute String

属性名

演示样例

描写叙述:

查找全部含有 id 属性的 div 元素

HTML 代码:
<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>
jQuery 代码:
$("div[id]")
结果:
[ <div id="test2"></div> ]
 

2.[attribute=value]   返回值:Array<Element(s)>

概述

匹配给定的属性是某个特定值的元素

參数

attribute   String

属性名

value String  

属性值。

引號在大多数情况下是可选的。但在遇到诸如属性值包括"]"时，用以避免冲突。

演示样例

描写叙述:

查找全部 name 属性是 newsletter 的 input 元素

HTML 代码:
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代码:
$("input[name='newsletter']").attr("checked", true);
结果:
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]
 

可见性限定

1. ：hidden   匹配全部不可见元素。或者type为hidden的元素

演示样例

描写叙述:查找隐藏的 tr

HTML 代码:
<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:hidden")
结果:
[ <tr style="display:none"><td>Value 1</td></tr> ]
描写叙述:匹配type为hidden的元素

HTML 代码:
<form>
  <input type="text" name="email" />
  <input type="hidden" name="id" />
</form>
jQuery 代码:
$("input:hidden")
结果:
[ <input type="hidden" name="id" /> ]
 

2.：visible    匹配全部的可见元素

演示样例描写叙述:查找全部可见的 tr 元素

HTML 代码:
<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:visible")
结果:
[ <tr><td>Value 2</td></tr> ] 

选中限定

表单对象属性

•:enabled    返回值:Array<Element(s)>    匹配全部可用元素

演示样例描写叙述:查找全部可用的input元素

HTML 代码:
<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>
jQuery 代码:
$("input:enabled")
结果:
[ <input name="id" /> ]
•:disabled 返回值:Array<Element(s)>   匹配全部不可用元素

演示样例描写叙述:查找全部不可用的input元素

HTML 代码:
<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>
jQuery 代码:
$("input:disabled")
结果:
[ <input name="email" disabled="disabled" /> ]
•:checked  匹配全部选中的被选中元素(复选框、单选框等。不包含select中的option；varc = ops[e.selectedIndex].value;通过获取当前訪问的option对象在数组中的位置。来获取option的值)

演示样例描写叙述:查找全部选中的复选框元素

HTML 代码:
<form>
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>
jQuery 代码:
$("input:checked")
结果:
[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]
 

•:selected匹配全部选中的option元素

演示样例:查找全部选中的选项元素

HTML 代码:
<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select>
jQuery 代码:
$("select option:selected")
结果:
[ <option value="2" selected="selected">Gardens</option> ] 

子标签的限定

:nth-child 返回值:Array<Element(s)>  匹配其父元素下的第N个子或奇偶元素 

':eq(index)' 仅仅匹配一个元素，而这个将为每个父元素匹配子元素。

:nth-child从1開始的，而:eq()是从0算起的。能够使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)

參数
index Number    要匹配元素的序号。从1開始
演示样例:在每一个 ul 查找第 2 个li

HTML 代码:
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
jQuery 代码:
$("ul li:nth-child(2)")
结果:
[ <li>Karl</li>,   <li>Tane</li> ]

:first-child

 匹配第一个子元素

':first' 仅仅匹配一个元素。而此选择符将为每一个父元素匹配一个子元素

演示样例描写叙述:在每一个 ul 中查找第一个 li

HTML 代码:
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
jQuery 代码:
$("ul li:first-child")
结果:
[ <li>John</li>, <li>Glen</li> ]
 

:last-child 返回值:Array<Element(s)>:  匹配最后一个子元素

':last'仅仅匹配一个元素，而此选择符将为每一个父元素匹配一个子元素

演示样例描写叙述:在每一个 ul 中查找最后一个 li

HTML 代码:
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
jQuery 代码:
$("ul li:last-child")
结果:
[ <li>Brandon</li>, <li>Ralph</li> ]
 

:only-child 返回值:Array<Element(s) >  假设某个元素是父元素中唯一的子元素，那将会被匹配

假设父元素中含有其它元素，那将不会被匹配。

演示样例描写叙述:在 ul 中查找是唯一子元素的 li

HTML 代码:

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
</ul>
jQuery 代码:

$("ul li:only-child")
结果:

[ <li>Glen</li> ]
 

版权声明：本文博主原创文章，博客，未经同意不得转载。