jQuery -- 选择器

来源：互联网发布：开源云服务器软件编辑：程序博客网时间：2024/05/17 22:31

jQuery中选择器是它的基础，大部份操作都与选择器有关系。
在jQuery中最常用的选择器有4种，分别是元素（标签）选择器、id选择器、类选择器和”this”这个特殊的自身选择器。

元素（标签）选择器

元素选择器是基于元素名称来进行选取元素的，元素指的就是html中的标签，例如<p>、<label>等，这是第一类的选择器，操作的是被选择的标签元素。
下面的这段代码用来解释元素选择器的作用：

$("p").click(function(){    $(this).hide();});

$("p")表示选择<p>标签元素；click表示点击（单击）时触发的操作，这个是事件，在后面讲事件的时候再来解释；这段代码的作用是“当用户点击这段文字的时候，就隐藏这个段落”，这里提前使用了“this”这个选择器。

ID选择器

Id选择器是基于标签的id属性来进行元素选择的，id选择器以“#”开头，不同于标签元素选择器直接写标签名称就可以使用，id选择器必须加“#”，否则将会被当作元素选择器来进行。
下面的这段代码用来解释id选择器的作用：

<body><p id="t1">jQuery测试</p><p>jQuery测试2</p></body><script>$(document).ready(function(){    $("#t1").click(function(){        $(this).hide();    });});</script>

$("#t1")表示选择id属性为t1的标签元素，现在只有在点击“jQuery测试”这个段落时会触发隐藏，而点击“jQuery测试2”就不会触发事件。

类选择器

类选择器是基于标签的class属性来进行元素选择的，类选择器以”.”开头，与id选择器相同，类选择器也必须加上前缀“.”后才会被认为是类选择器，否则将会被当作元素选择器来使用。
下面这段代码用来解释类选择器的作用：

<body><p id="t1">jQuery测试</p><p class="tc">jQuery测试2</p></body><script>$(document).ready(function(){    $(".tc").click(function(){        $(this).hide();    });});</script>

$(".tc")表示选择class属性为tc的标签元素，现在只有点击“jQuery测试2”这个段落时会触发隐藏，而点击“jQuery测试”则不会触发事件。

this选择器

this选择器表示对当前的标签元素进行操作，与php中的this很相似，通过以上的示例，也能够充分的说明这个this的作用了，不再赘述。

其它选择器

除了以上4种常用的选择器之外，都归类于其它选择器当中。
这些选择器里，有的是以上4种的组合形式，例如：

$("p.tc")

表示的就是class属性为tc的<p>标签元素，这是元素选择器和类选择器的一种组合形式。

$("p:first")

表示的是“第1个<p>元素，这里的方式与css的伪类选择器相似。

$("ul li:first")

选择第1个<ul>元素的第1个<li>元素。

$("ul li:first-child")

选择所有<ul>元素的第1个<li>元素。

$("[href]")

选择带有href属性的元素，这种方式与css的属性选择器相似。

$("a[target='_blank']")

选择target属性值为_blank的<a>元素。

$("tr:even")

用于表格的操作，选择偶数位置的<tr>元素。

$("tr:odd")

用于表格的操作，选择奇数位置的<tr>元素。

0 0