• 技术文章 >web前端 >js教程

    jquery选择器怎么写

    (*-*)浩(*-*)浩2019-05-22 20:39:56原创854
    jquery是Js的框架,简化了许多js的写法,使其变得更为简单高效,那么jquery的选择器,该怎么写,下面就写几种常用的选择器供大家参考。

    jQuery 选择器

    jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

    jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

    jQuery 中所有选择器都以美元符号开头:$()。

    元素选择器

    jQuery 元素选择器基于元素名选取元素。

    在页面中选取所有 <p> 元素:

    $("p")

    实例

    用户点击按钮后,所有 <p> 元素都隐藏:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>元素选择器</title> 
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide();
      });
    });
    </script>
    </head>
    
    <body>
    <h2>这是一个标题</h2>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <button>点我</button>
    </body>
    </html>

    #id 选择器

    jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

    页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。

    通过 id 选取元素语法如下:

    $("#test")

    实例

    当用户点击按钮后,有 id="test" 属性的元素将被隐藏:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>#id 选择器</title> 
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#test").hide();
      });
    });
    </script>
    </head>
    
    <body>
    <h2>这是一个标题</h2>
    <p>这是一个段落</p>
    <p id="test">这是另外一个段落</p>
    <button>点我</button>
    </body>
    </html>

    .class 选择器

    jQuery 类选择器可以通过指定的 class 查找元素。

    语法如下:

    $(".test")

    实例

    用户点击按钮后所有带有 class="test" 属性的元素都隐藏:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>.class 选择器</title> 
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $(".test").hide();
      });
    });
    </script>
    </head>
    <body>
    
    <h2 class="test">这是一个标题</h2>
    <p class="test">这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <button>点我</button>
    </body>
    </html>

    以上就是jquery选择器怎么写的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:js
    上一篇:压缩后的js怎么格式化? 下一篇:jquery怎么获取表单标签值
    PHP编程就业班

    相关文章推荐

    • js中prototype是什么• jsp中文本框怎么对齐• python的json怎么用• js filter是什么意思

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网