肉渣教程

jQuery 选择器

上一节 下一节

jQuery选择器是非常重要的,汝好生学习啊啊啊啊!

jQuery选择器

jQuery选择器是基于CSS选择器的方式来搞事的,它可以根据元素的元素名、元素id、元素class类等各种CSS选择器的方式来选择指定元素进行脚本操作。

语法如下:

$( "构成选择器的字符串" ) 


例如选择所有类名为test的div元素:

$( "div.test" )

元素选择器

直接根据元素种类来选择,比如$("p")可选择所有的<p>元素。举例如下:

$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});

运行一下

#id 选择器

jQuery可以根据元素的id名来选择指定元素,id名前加#号就ok啦~
比如,$("#test")指选择id等于test的那个元素,这里test是该元素的id名。(理论上,元素的id名是页面中独一无二的,不会出现同一个id名的不同元素。)

$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});

运行一下

.class 选择器

jQuery可以根据元素的class类名来选择包括该类名的所有元素。诸如,$(".test")选择器可选择所有class类名种包含test的元素。举例如下:

$(document).ready(function(){
    $("button").click(function(){
        $(".test").hide();
    });
});

运行一下

更多关于jQuery选择器的例子

语法 描述
$("*") 选择所有的元素
$(this) 选择当前的这个html元素
$("p.jerk") 选择所有class类名等于jerk的<p>元素
$("p:first") 选择第1个<p>元素
$("ul li:first") 选择第1个<ul>元素中的第1个<li>元素
$("ul li:first-child") 选择所有<ul>元素中的第1个<li>元素
$("[href]") 选择所有带有href属性的元素
$("a[target='_blank']") 选择所有href属性等于_blank的<a>元素
$("a[target!='_blank']") 选择所有href属性不等于_blank的<a>元素
$(":button") 选择所有<button>元素和type属性等于button的<input>元素
$("tr:even") 选择所有排列顺序为偶数的<tr>,即选择所有的偶数行
$("tr:odd") 选择所有排列顺序为奇数的<tr>,即选择所有的奇数行

jQuery 选择器

上一节 下一节