jQuery 入门教程(2): Selectors

最新推荐文章于 2020-01-13 10:54:29 发布

a393931948

最新推荐文章于 2020-01-13 10:54:29 发布

阅读量320

点赞数

分类专栏： jQuery JavaScript 教程文章标签： JavaScript jQuery

jQuery JavaScript 教程专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery Selector 是jQuery库中非常重要的一个组成部分。

jQuery Selector 用来选择某个HTML元素，其基本语句和CSS的选择器（Selector）是一样的，所有jQuery selector 都是以$()开始。

选择HTML标记

选择某个HTML元素的方法是直接使用该元素的标记名称，比如选择所有<p>元素

$("p")

下面的例子当用户点击一个按钮时，隐藏所有的<p>元素

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

#id 选择

jQuery #id 选择器用来选择定义了id 属性的元素，网页上元素的id应保证是唯一的，你可以使用id来选择单个唯一的元素。

比如下面的例子，当点击按钮时，只会隐藏id为test 的元素。

<html>  
<head>  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">  
</script>  
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("#test").hide();  
  });  
});  
</script>  
</head>  
  
<body>  
<h2>This is a heading</h2>  
<p>This is a paragraph.</p>  
<p id="test">This is another paragraph.</p>  
<button>Click me</button>  
</body>  
  
</html>

.class 选择器

jQuery .class 选择器选择所有定义了class属性为制定值的所有元素，比如下面的例子隐藏所有类名称为test的元素：

<html>  
<head>  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">  
</script>  
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $(".test").hide();  
  });  
});  
</script>  
</head>  
<body>  
  
<h2 class="test">This is a heading</h2>  
<p class="test">This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button>Click me</button>  
</body>  
</html>

更多的例子

语法	说明
$(“*”)	选择所以元素
$(this)	选择当前元素
$(“p.intro”)	选项所有class=intro的p元素
$(“p:first”)	选择第一个p元素
$(“ul li:first”)	选择第一个<ul>元素的第一个<li>元素
$(“ul li:first-child”)	选择每个<ul>的第一个元素
$(“[href]“)	选择所有带href的元素
$(“a[target='_blank']“)	选择所有target=_blank的a元素
$(“a[target!='_blank']“)	选择所有target！=_blank的a元素
$(“:button”)	选择所有button元素及input类型为button的元素
$(“tr:even”)	选择所有偶数行<tr>元素
$(“tr:odd”)	选择所有单数行<tr>元素