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> ]
版权声明：本文博主原创文章，博客，未经同意不得转载。
更多相关文章
- Jquery禁用/启用按钮与文本框代码
- 使用数字作为javascript对象元素的名称
- 推荐web 前端代码的编辑分享平台——RunJS
- 想要改进我的jQuery代码，做我想要的，太丑了，IMO
- JQuery的一些基本功能代码(CH1&2)
- 如何让代码等待好/取消按钮选择？
- 使用类似$（“。someClass”）的JQuery确定元素集合是否可见
- 创建一个未排序的数组，其中包含重复元素和唯一元素的总和
- jQuery在元素内部检测mousedown，然后在元素外部进行mouseup