美文网首页跨平台
jQuery篇之获取jQuery对象

jQuery篇之获取jQuery对象

作者: 平安喜乐698 | 来源:发表于2019-10-07 10:46 被阅读0次
    目录
        1. 获取
        2. 筛选器
    
    1. 获取
    id为myId的jQuery对象(id 应该是唯一的,即使有相同时只会选择第一个)
        $("#myId")      
    
    所有class为myClass的jQuery对象,类似getElementsByClassName
        $(".myClass")   
    
    所有元素的 jQuery对象
        $("*")  
    
    所有元素类型为p的jQuery对象,类似getElementsByTagName
        $("p") 
    
    当前元素的 jQuery对象
        $(this)         
    
    class为myClass且myClass2
        $(".myClass.myClass2")
    
    id为myId的元素的子孙类class为myClass
        $("#myId .myClass")    
    div元素的直接子元素为p
        $('div > p')
    div元素后的相邻兄弟元素为p
        $("div + p")
    div元素后的兄弟元素为p
        $("div ~ p")
    
    p元素中class为myClass
        $("p.myClass")
    p元素中id为myId
        $("p#myId")    
    
    p元素中id为myId的元素的子孙类class为myClass
        $("p#myId .myClass")    
    
    1. 筛选器

    基本筛选器

    第一个p元素
        $("p:first")
    最后一个p元素
        $("p:last")
    所有偶数tr元素
        $("tr:even")
    所有奇数tr元素
        $("tr:odd")
    
    第四个li元素
        $("ul li:eq(3)")
    index大于3的所有li元素
        $("ul li:gt(3)")
    index小于3的所有li元素
        $("ul li:lt(3)")
    

    内容筛选器

    包含指定字符串的所有p元素
        $("p:contains('hello world')")
    包含span元素的所有div元素
        $("div:has(span)")
    包含子元素或文本的所有a元素
        $("a:parent")
    不包含子元素和文本的所有a元素
        $("a:empty")
    

    可见性筛选选择器

    所有隐藏的p元素
        $("p:hidden")
        // 以下条件下不可见
        display="none"
        宽度和高度都为0
        type="hidden"的表单元素
        祖先元素是隐藏的
        // 注意:以下被认为是可见的,因为他们仍然占用空间布局。
        visibility="hidden"
        opacity="0"
    
    所有可见的p元素
        $("p:visible")
    

    属性筛选器

    所有带有属性href的元素
        $("[href]")
    
    所有带有属性href=#的元素
        $("[href='#']")
    所有带有属性href!=#的元素
        $("[href!='#']")
    所有带有属性name包含test字符串的元素
        $('div[name*="test"]')
    所有带有属性name以test字符串结尾的元素(区分大小写)
        $('div[name$=test]')
    所有带有属性name以test字符串开头的元素(区分大小写)
        $('div[name^=test]')
    所有带有属性name用空格分隔且有a字符串的元素
        $('div[name~="a"]')
    所有拥有所有指定属性的元素
        $("[style][id]")
    
    【浏览器兼容】
        [att=val]、[att]、[att|=val]、[att~=val]  属于CSS 2.1规范
        [ns|attr]、[att^=val]、[att*=val]、[att$=val] 属于CSS3规范
        [name!="value"]  属于jQuery 扩展的选择器
        无论CSS2.1版本还是CSS3版本,IE7和IE8都支持,webkit、Gecko核心及Opera也都支持,只有IE6以下浏览器才不支持
    

    子元素筛选器

    所有p元素下的第一个a元素
        $('p a:first-child')
    所有p元素下的最后一个a元素
        $('p a:last-child')
    所有p元素下的只有一个子元素的a元素
        $('p a:only-child')
    所有p元素下的第一个a元素
        $('p a:nth-child(1)')
    所有p元素下的倒数第一个a元素
        $('p a:nth-last-child(1)')
    

    表单元素筛选器

    所有 <input> 元素(所有 input, textarea, select 和 button 元素)
        $(":input")
    所有 type="text" 的 <input> 元素
        $(":text")
    所有 type="password" 的 <input> 元素
        $(":password")
    所有 type="radio" 的 <input> 元素
        $(":radio")
    所有 type="checkbox" 的 <input> 元素
        $(":checkbox")
    所有 type="submit" 的 <input> 元素
        $(":submit")
    所有 type="reset" 的 <input> 元素
        $(":reset")
    所有 type="button" 的 <input> 元素
        $(":button")
    所有 type="image" 的 <input> 元素
        $(":image")
    所有 type="file" 的 <input> 元素
        $(":file")
    
    
    所有不为空的 input 元素
        $("input:not(:empty)")
    未选中input元素
        $("input:not(:checked)")
    

    表单对象属性筛选选择器

    所有激活的 input 元素
        $(":enabled")
    所有禁用的 input 元素
        $(":disabled")
    所有被选取的 input 元素
        $(":selected")
    所有被选中的 input 元素
        $(":checked")
    

    相关文章

      网友评论

        本文标题:jQuery篇之获取jQuery对象

        本文链接:https://www.haomeiwen.com/subject/gbzspctx.html