跨平台

jQuery篇之获取jQuery对象

2019-10-07  本文已影响0人  平安喜乐698
目录
    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")
上一篇 下一篇

猜你喜欢

热点阅读