JQuery学习笔记(二)---选择器

Jul 25, 2016


选择器介绍


选择器在JQuery中以$("selector")样式呈现, 其作用是可以通过选择器选取一个或一类元素(DOM)对象. 选择器的种类有:

  • 元素选择器: 表示通过HTML标签来获取元素.

  • 属性选择器: 表示通过HTML标签的属性来获取元素.

  • css选择器: 用于选取或者改变HTML元素的css属性.

同时选择器中可以添加一些模式用于限制查找的结果. 如XXX:last表示返回符合XXX要求的元素序列中最后一个元素.


元素选择器


元素选择器是根据HTML元素的名称来选择的模式, 例如:

$("p")选择<p>元素.
$("p.intro")选择<p>元素中class="intro"的元素.
$("p#intro")选择<p>元素中id=intro的元素.
$("p.intro.demo")选择<p>元素中class="intro demo"的元素.
$("p, tr, td")选择<p><tr><td>元素.


属性选择器


属性选择器是使用XPATH表达式来作为匹配模式, 选择符合模式的元素内容, 例如:

$("[href]")选择所有带有href属性的元素.
$("[XPATH='#']")选择所有属性href='#'的元素.
$("[XPATH!='#']")选择所有属性href!='#'的元素. $("[XPATH$=".JPG"]")选择所有包含属性href且其值以JPG结尾的元素.


CSS选择器


CSS选择器用于获取或者设置HTML指定元素的指定CSS值. 例如:

$("p").css("background-color")用于获取<p>元素的background-color值.
$("p").css("background-color", "red")用于将<p>元素的background-color值设置为red.


其他常用示例


语法 描述
$(this) 当前调用此程序的HTML元素
$(".intro") class="intro"的HTML元素
$("ul li") <ul>元素中的所有<li>元素
$("ul li:first") <ul>元素中的第一个<li>元素

选择器 实例 描述
* $("*") 所有元素
#id $("#jquery") id=jquery的元素
.class $(".intro") class='intro'的元素
element $("p") 所有的<p>元素
.class.class $(".c1.c2") 所有的class='c1'&&class='c2'的元素
     
:first $("p:first") 第一个<p>元素
:last $("p:last") 最后一个<p>元素
:even $("li:even") 序数为偶数的<li>元素
:odd $("li:odd") 序数为奇数的<li>元素
     
:contain(text) $("table:contain("father")") 所有包含father字符串的<table>元素
:empty $(":empty") 所有不具有子元素的元素
:hidden $("p:hidden") 所有处于隐藏状态的<p>元素
:visible $("table:visible") 所有处于显示状态的<table>元素
     
:eq(index) $("tr td:eq(3)") 每个<tr>元素中第4个<td>元素(index从0开始)
:gt(index) $("ul li:gt(3)") 每个<ul>元素中index>3<li>元素
:lt(index) $("ul li:lt(3)") 每个<ul>元素中index<3<li>元素
:not(selector) $("input:not(:empty)") 所有的值不为空的<input>元素
     
:header $(":header") 每个标题元素<h1>-<h6>
s1,s2,s3 $("#demo, .test, tr") 所有id="demo"class="test"<tr>元素.(使用’,’分隔的各选择器之间是或的关系)
     
[attribute] $("[href]") 所有带有href属性的元素
[attribute=value] $("[href='#']") 所有href属性等于#的元素
[attribute!=value] $("[href!='#']") 所有href属性不等于#的元素
[attribute$=value] $("[href$='.jpg']") 所有href属性的值以.jpg结尾的元素
     
:input $(":input") 所有的<input>元素
:text $(":text") 所有的type='text'<input>元素
:password $(":password") 所有的type="password"<input>元素
:radio $(":radio") 所有的type="radio"<input>元素
:checkbox $(":checkbox") 所有的type="checkbox"<input>元素
:submit $(":submit") 所有的type="submit"<input>元素
:reset $(":reset") 所有的type="reset"<input>元素
:button $(":button") 所有的type="button"<input>元素
:image $(":image") 所有的type="image"<input>元素
:file $(":file") 所有的type="file"<input>元素
     
:enabled $(":enabled") 所有激活的<input>元素
:disabled $(":disabled") 所有被禁用的<input>元素
:selected $("option:selected") 所有被选中的<option>元素.(如果:selected前面没有其他的限制, 默认为<input>元素)
:checked $("option:checked") 所有被命中的<option>元素.(如果:checked前面没有其他的限制, 默认为<input>元素)

参考文献



上一篇博客:JQuery学习笔记(一)---概述
下一篇博客:JQuery学习笔记(三)---事件函数