美文网首页跨平台
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对象

    获取 筛选器 基本筛选器 内容筛选器 可见性筛选选择器 属性筛选器 子元素筛选器 表单元素筛选器 表单对象属性筛选选择器

  • 我的小JQuery兄弟

    我的小JQuery兄弟 [TOC] 由JQuery对象转为DOM对象 获取一个JQuery对象 JQuery对象是...

  • JQuery 对象 和 DOM对象的转换方法

    JQuery对象与DOM对象JQuery:在JQuery库中,可以通过本身自带的方法获取页面DOM 元素的对象叫做...

  • 锋利的jQuery笔记1

    标签: 我的笔记 认识jQuery jQuery对象和DOM对象 DOM对象可以通过javascript获取。 j...

  • jQuery设计思想

    1 jQuery 如何获取元素 jQuery获取选择器对应的元素对象,返回可操作对象. 利用操作对象的原型对象上...

  • jQuery选择器

    一、获取jQuery对象的核心方法 1、jQuery(expression,[context]): (1)expr...

  • 02-JQuery操作DOM

    一、JS获取DOM元素和JQuery获取DOM元素的区别 JavaScript获取的是DOM对象,而Jquery获...

  • vue 点击操作当前的DOM

    jQuery中多个元素之间,想要获取当前点击的对象时,jQuery提供了$(this),来获取当前的对象.使开发者...

  • jQuery选择器总结

    jQuery选择器完全继承了css的风格 常用的css选择器 jQuery选择器获取的是jQuery对象,即使获取...

  • jQuery常用操作

    jQuery常用方法 .eq(index),.get([index])获取到指定index的jQuery对象例如:...

网友评论

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

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