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") //获取选中的选项元素

  • 相关阅读:
    Effective C++_笔记_条款00_基本术语
    SVM(三)—Kernels(核函数)
    SVM(支持向量机)(二)—Lagrange Duality(拉格朗日对偶问题)
    Logistic Regression(逻辑回归)(二)—深入理解
    java程序验证用户名密码和验证码登录的小例子
    java连接MySQL数据库并读取内容
    一个简单的模板了解css+div网页布局
    HTML文件中css样式的引用
    慕课笔记利用css进行布局【混合布局练习】
    慕课笔记利用css进行布局【混合布局】
  • 原文地址:https://www.cnblogs.com/maleijiejie/p/13433992.html
Copyright © 2011-2022 走看看