zoukankan      html  css  js  c++  java
  • JQuery选择器

    定义:JQuery选择器允许对HTML元素组或单个元素进行操作

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

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

    一、元素选择器

    基于元素名选取元素 $(“p”)

     $(document).ready(function(){

                $("button").click(function(){

                   $("p").hide();

                });

            });

      

            

    运行结果:点击按钮,p标签隐藏

     二、id选择器

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

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

    语法:$(“#test”)

    实例:

     // 2.id选择器

        $(document).ready(function(){

            $("button").click(function(){

             $("#test").hide();

            });

        });

    三、.class选择器

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

    点击按钮后所有带有class=test”属性的元素都隐藏

    $(document).ready(function(){

          $("button").click(function(){

            $(".test").hide();

          });

        });

    四、更多实例:

    $(“*”)   选取所有元素

    $(this)   选取当前HTML元素

    $(“p.intro”) 选取class intro<p>元素

    $(“p.first”)  选取第一个<p>元素

    $(“ul li:first”) 选取第一个<ul>元素的第一个<li>元素

    $(“ul li:first-child”) 选取每一个<ul>元素的第一个<li>元素

    $(“[href]”)选取带有href属性的元素

    $(“a[target=’_blank’]”)  选取target属性值等于”_blank”<a>元素

    $(“a[target!=’_blank’]”)   选取target属性值不等于”_blank”<a>元素

    $(“:button”)  选取所有type=”button”<input>元素和<button>元素

    $(“tr:even”)  选取偶数位置的<tr>元素

    $(“tr:odd”)   选取奇数位置的<tr>元素

    五、独立文件中使用JQuery函数

    <head>

     <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> 

    <script src="my_jquery_functions.js"></script> 

    </head>

     

     六、通过$(“:button”)可以选取所有type=”button”<input>元素和<button>元素,

            如果去掉冒号,$(“button”)只能获取<button>元素

    代码实例:

        <p id="test1">点进这里测试  <b>button</b></p><p id="test2">点进这里测试 <b>:button</b></p><button>Button 按钮</button><input type="button" value="Input 按钮">

     

    关于:和[]

    : JQuery的过滤选择器,语法类似于css中的伪类选择器,可分为基本过滤(p:first),内容过滤(:empty),子元素过滤(:first-child) 和属性过滤[href]。

    可以理解为种类的意思,如p:first,p的种类为第一个

    [] 属性。如[href]选取带有href属性的元素

    $("#id", ".class")  复合选择器

    $(div p span)       层级选择器 //div下的p元素中的span元素

    $(div>p)            父子选择器 //div下的所有p元素

    $(div+p)            相邻元素选择器 //div后面的p元素(仅一个p)

    $(div~p)            兄弟选择器  //div后面的所有p元素(同级别)

    $(.p:last)          类选择器  过滤选择器  第一个和最后一个(first 或者 last

    $("#mytable td:odd")      层级选择  过滤选择器 奇偶(odd 或者 even

    $("div p:eq(2)")    索引选择器 div下的第三个p元素(索引是从0开始)

    $("a[href='www.baidu.com']")  属性选择器

    $("p:contains(test)")        // 内容过滤选择器,包含text内容的p元素

    $(":emtyp")        //内容过滤选择器,所有空标签(不包含子标签和内容的标签)parent 相反

    $(":hidden")       //所有隐藏元素 visible

    $("input:enabled") //选取所有启用的表单元素

    $(":disabled")     //所有不可用的元素

    $("input:checked") //获取所有选中的复选框单选按钮等

    $("select option:selected") //获取选中的选项元素

  • 相关阅读:
    实验二
    实验一简单的加减乘除
    自我简介
    软件工程——第五次博客作业
    《软件测试》--第四次博客作业
    软件测试 第三次作业
    软件测试 第二次作业
    个人简介
    软件测试 第一次测评
    AE CC 装不上,安装程序检测到计算机重新启动的过程可能暂停。建议退出安装程序,重新启动计算机,然后再重试。
  • 原文地址:https://www.cnblogs.com/maleijiejie/p/13433992.html
Copyright © 2011-2022 走看看