jQuery 入门教程(3): Selectors

川长思鸟来 2023-10-16 19:04 86阅读 0赞



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

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

选择HTML标记

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

元素

[javascript] view plain copy print ?

  1. $(“p”)
  2. $(“p”)

下面的例子当用户点击一个按钮时,隐藏所有的

元素

[javascript] view plain copy print ?

  1. $(document).ready(function(){
  2. $(“button”).click(function(){
  3. $(“p”).hide();
  4. });
  5. });
  6. $(document).ready(function(){
    $(“button”).click(function(){

    1. $("p").hide();

    });
    });

#id 选择

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

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

[html] view plain copy print ?

  1. <!DOCTYPE html>
  2. This is a heading

  3. This is a paragraph.

  4. This is another paragraph.

  5. <!DOCTYPE html>








    This is a heading


    This is a paragraph.


    This is another paragraph.





.class 选择器

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

[html] view plain copy print ?

  1. <!DOCTYPE html>
  2. This is a heading

  3. This is a paragraph.

  4. This is another paragraph.

  5. <!DOCTYPE html>








    This is a heading


    This is a paragraph.


    This is another paragraph.




更多的例子
























































语法 说明
$(“*”) 选择所以元素
$(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>元素

发表评论

表情:
评论列表 (有 0 条评论,86人围观)

还没有评论,来说两句吧...

相关阅读

    相关 jQuery 入门教程(4): Events

     学习了jQuery的选择器,就可以针对选择的HMTL标记或是元素添加事件处理,事件包括按键,鼠标,单击按钮等。 下面为常见的DOM事件: <table style=