资讯专栏INFORMATION COLUMN

jquery梳理之常用选择器

Raaabbit / 1695人阅读

摘要:基于规范选择元素选择器选择器相当于原生元素选择器直接传入标签相当于原生通配符选择器相当于原生层级选择器选择节点下的节点,节点只能是直接节点,如果是下的节点则获取不到选择节点下的所有节点选择与节点同级的下一个节点有且仅有一个选择与节点同级的所

基于CSS规范选择元素 id选择器
    $("#id")
class选择器
$(".class")
//相当于原生:document.getElementsByClassName("class")
元素选择器(直接传入html标签)
$(div | p | span | input ...)
//相当于原生:document.getElementsByTagName("div");
通配符选择器
$("*")
//相当于原生:document.getElementsByTagName("*");
层级选择器
$("parent > child")
//选择parent节点下的child节点,child节点只能是直接节点,如果是child下的child节点则获取不到

$("parent child")
//选择parent节点下的所有child节点

$("current + dom")
//选择与current节点同级的下一个dom节点(有且仅有一个)

$("current ~ other")
//选择与current节点同级的所有other节点
基于DOM进行选择元素
    $("div:first")    //匹配第一个元素
    $("div:last")    //匹配最后一个元素
    $("div:not(selector)")    //匹配所有,但不匹配selector
    $("div:eq(index)")    //返回指定index元素的jquery对象
    $("div:lt|gt(index)")    //返回小于或大于指定index元素的集合
    $("div:[ odd | even ]")    //返回索引为 奇数 或者 偶数 的元素集合
    $("div:header")    //返回所有h1 ~ h6的集合
    $("div:root")    //返回根节点元素
    $("div:animated")    //返回所有动画元素
    $("div:has(span)")    //返回div下包含的所有span元素
    $("div:parent")    //返回div下所有包含子元素或者文本节点的元素
    $("div:empty")    //返回div下所有没子元素或者文本节点的元素
基于内容选择元素
$("div:contains(匹配的文本)")
基于隐藏或显示状态的元素
$("dom:visible")    //返回所有显示的元素
$("dom:hidden")    //返回所有隐藏的元素,其中包含display=none,visibility=show,opacity=0,隐藏表单
表单选择器
$(":input")    //匹配所有input radio checkbox textarea button select元素
$(":text")    //匹配所有文本框元素
$(":password")    //匹配所有密码框元素
$(":radio")    //匹配所有单选框元素
$(":checkbox")    //匹配所有复选框元素
$(":image")    //匹配所有图像域
$(":submit")    //匹配所有提交按钮
$(":reset")    //匹配所有重置按钮
$(":file")    //匹配所有文本域
$("dom:enabled")    //匹配所有可用元素
$("dom:disabled")    //匹配所有禁用元素
$("dom:checked")    //匹配所有选中的input元素
$("dom:selected")    //匹配所有选中的option元素

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88604.html

相关文章

  • jquery梳理属性操作

    摘要:与元素属性原生对于元素的属性有三种方法来操作为元素添加属性名和属性值获取元素属性值删除元素属性而则将以上三个操作简化为和对应对应对应上述的为属性名,为属性值对于需要设置多个属性时,采用的方式是在方法传入属性配置对象元素值属性三个方法都 attr与removeAttr - 元素属性 JS原生对于元素的属性有三种方法来操作 dom.setAttribute(name , value) //...

    silencezwm 评论0 收藏0
  • 前端开发知识点整理

    摘要:前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理,涵盖前端理论与前端实践两方面。 前言:本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS。 初衷...

    Blackjun 评论0 收藏0
  • 前端开发知识点整理

    摘要:前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理,涵盖前端理论与前端实践两方面。 前言:本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS。 初衷...

    Sike 评论0 收藏0
  • 前端开发知识点整理

    摘要:前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理,涵盖前端理论与前端实践两方面。 前言:本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS。 初衷...

    tracy 评论0 收藏0
  • jQuery入门笔记(一)选择引擎

    摘要:选择器,若未作特别说明,获取的都是元素集合。过滤器名语法说明选取所有不可见元素选取所有可见元素注意过滤器一般是包含的内容为样式为表单类型为和的元素。四子元素过滤器子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。 转自个人博客本来是单独整理了一个CSS选择器的,但是在jQuery中基本都有对应的,所以就不发了。 jQuery选择器,若未作特别说明,获取的都是元素集合。...

    charles_paul 评论0 收藏0

发表评论

0条评论

Raaabbit

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<