• jQuery中常用的选择器


    层次选择器:

    $('div p');//选取div下的所有的p元素

    $('div>p').css('border','1px solid red');//只选取div下的直接子元素

    //相邻的元素

    $('div ~ p).css('border','1px solid red');$('div').nextAll('p')等价;//表示div后面的

    所有p兄弟元素

    $('div ~ *').css('border','1px solid red');//表示div后面的所有兄弟元素

    $('div +p').css('border','1px solid red');$('div').next('p')等价//这种写法表示div

    只找紧挨着的第一个兄弟元素,并且该元素是p

        

    获得兄弟元素的方法:

        next(); //当前元素之后的紧邻着的第一个兄弟元素(下一个)

    nextAll();//当前元素之后的所有兄弟元素

    prev();//当前元素之前的紧邻着的兄弟元素(上一个)

    prevAll();//当前元素之前的所有兄弟元素

    siblings();//当前元素的所有兄弟元素

     

     

    基本过滤选择器:

     $('p:first')$('p').first()是等价的。获取所有p元素中的第一个P元素

     $('p:last')$('p').last()

     $('p:eq(2)')在所有的p元素中找到索引为2的元素

     $('p:even')选取所有奇数的p标签

     $('p:odd')选取所有偶数的p标签

     $('p:not(.tst)').css();选取所有的不应用.tst这种样式的p元素not后面写一个选择器名称

     $('p:gt(1)')选取所有索引值大于1p元素

     $('p:lt(3)')选取所有索引值小于3p元素。

     $(':header')选取页面上所有的h1-h6的元素。(如果这样写的话,中间绝对不能有空格。)

     

    属性过滤选择器:

        $("div[id]")选取有id属性的<div>

    $("div[title=test]")选取title属性为“test”的<div>jQuery中没有对getElementsByName        

        进行封装,用$("input[name=abc]")

        $("div[title!=test]")选取title属性不为“test”的<div>

          还可以选择开头【name^=值】、结束【 name$=值】、包含【 name*=值】等,条件还  

          可以复合。【[属性1=a][属性2=b]…】(*

          表单对象属性选择器(过滤器):

        $("#form1 :enabled")选取idform1的表单内所有启用的元素

        $("#form1 :disabled")选取idform1的表单内所有禁用的元素

        $(input:checked)选取所有选中的元素(RadioCheckBox,这个中间不能加空格.

        $("select :selected")选取所有选中的选项元素(下拉列表)

     

    表单滤选择器:

        $('#form1:enabled');//这个表示能够启用的且idform1的标签

        $('#form1  :enabled')//这个表示能够启用的且idform1下的所有启用的元素。

        $('input:checked')

        $('input:disabled')

        $ ('select:selected')

    $(:input")选取所有<input><textarea><select><button>元素。和$("input")不一样,     

    $("input")只获得<input>

    $(":text")选取所有单行文本框,等价于    

    $("input[type=text]"),$(input[type=text]),$(:text);

        $(:password)选取所有密码框。

     

    内容过滤选择器:

        :contains(text):过滤出包含给定文本的元素。

        :empty包含没有子元素的或者是内容为空的元素。

        :has(selecttor)

        :parent  获得有子元素的元素。 

     

    可见性过滤器:

       :hidden

         选取所有不可见元素包括:(如果直接写:hidden则会包含head\title\script\style.)

          1.表单元素type=hidden

          2.设置cssdisplay:none

          3.高度和宽度明确设置为0的元素。

          4.父元素时隐藏的,所以子元素也是隐藏的

          visibility: hidden opacity0不算,因为还占位所以不认为是hidden.(与之前版本    

          jQuery不太一样,1.3.2之前)

      :visible

       选取所有可见元素

     

     

    子元素过滤选择器:

    first-child  first的区别:first只能选取第一个,而first-child,则能选取每个子元素的第一个元素。

    last-child

    only-child:匹配当前父元素中只有一个子元素的元素。

    nth-child:对比eq()来理解,eq()值匹配一个,nth-child()为每个父元素都要匹配一个子元素。

    nth-child(index),index1开始

    nth-child(even)

    nth-child(odd)

    nth-child(3n),选取3的倍数的元素

    nth-child(3n+1)满足3的倍数+1的元素

     

     

    注意:

         1.通过jQuery选择器选择的对象本身就是一个jQuery对象,选择器具有隐式迭代     的作用,例如: 

         $('p').click(function(){

        alert(this.innerText);

         });

         是为所有的p都注释了click事件。

    2.无论选择器选择了几个元素返回的一个元素都是一个集合对象,如果没有找到相应的元素,则这个集合对象的length值为0,如果选择到了元素,这个length的元素就是选择的元素的索引值。所以也根据这个属性来判断元素是否存在。例如:

         Iif($('#div').length>0)//判断元素是否存在

    3.在事件中this还是表示当前触发事件的元素的对象,但是这里的thisdom对象而不是jQuery对象。如果需要执行jQuery中的方法或属性时,应该把this转换为jQuery对象

    转换方式为:$(this);

     

             

  • 相关阅读:
    3.nginx反向代理服务器+负载均衡
    2.nginx整合PHP
    nginx-location rewrite
    Nginx(一):安装
    修改host文件原理 localhost,127.0.0.1之间有什么区别
    一个IP绑定多个域名
    私有IP
    转:Hadoop和Spark的异同
    C#中Trim()、TrimStart()、TrimEnd()的用法
    Java操作redis
  • 原文地址:https://www.cnblogs.com/hanwenhuazuibang/p/2981771.html
Copyright © 2020-2023  润新知