jQuery 对象、基本选择器、筛选选择器

source 发布于2019-08-21 11:51 / 540人阅读

摘要：代表的上下文对象是一个的上下文对象，可以调用的方法和属性值特殊选择器点击测试通过原生处理点击测试通过原生处理直接通过的方法改变颜色通过包装成对象改变颜色

DOM对象转化成jQuery对象

如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象




    
    
    


元素一
元素二
元素三

jQuery基本选择器 id选择器

id选择器：一个用来查找的ID，即元素的id属性：$("#id")

注：id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的




    
    
    
    

   
     
        id="aaron"
        选中
    
    
        id="imooc"
        jQuery选中
    
    
        id="imooc"
        jQuery未选中

类选择器

类选择器，通过class样式类名来获取节点：$( ".class" )

类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选




    
    
    
    

   
     
        class="aaron"
        选中
       
     
        class="aaron"
        选中
    

    
        class="imooc"
        jQuery选中
    
    
        class="imooc"
        jQuery选中

元素选择器

元素选择器，根据给定(html)标记名称选择所有的元素：$( "element" )





    
    
    
    


    
        class="aaron"
        选中
    
    
        class="aaron"
        选中
    
    
        class="imooc"
        jQuery选中
    
    
        class="imooc"
        jQuery选中

全选择器（*选择器）

传递*选择器来选中文档页面中的元素：$( " * " )





    
    
    
    


    
        class="aaron"
        选中
    
    
        class="aaron"
        选中
    
    
        class="imooc"
        jQuery选中
    
    
        class="imooc"
        jQuery选中

层级选择器

选择器中的层级选择器就是用来处理以下关系：

子元素 后代元素 兄弟元素 相邻元素

层级选择器之间的相似点与不同点：

层级选择器都有一个参考节点

后代选择器包含子选择器的选择的内容

一般兄弟选择器包含相邻兄弟选择的内容

相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下





    
    
    
    



    子选择器与后代选择器
    
        
            div下的第一个p元素
        
        
            div下的第一个p元素
        
    
    
        
            
                div下的article下的p元素
            
        
        
            
                div下的article下的p元素
            
        
    

    

    


    相邻兄弟选择器与一般兄弟选择器
    
        兄弟节点div, +~选择器不能向前选择
        选择器span元素
        span后第一个兄弟节点div
        兄弟节点div
            子元素div
        
        兄弟节点span,不可选
        兄弟节点div

jQuery筛选选择器 基本筛选选择器

筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头，如下是基本筛选器的描述：

注意事项：

:eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引

gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始





    
    
    
    



    基本筛选器
    :first/:last/:even/:odd
    
        
            div:first
            :even
        
        
            :odd
        
        
            :even
        
        
            :odd
        
        
            :even
        
        
            div:last
            :odd
        
    
    
    
    
    
    
    
    
    
    
    :eq/:gt/:lt
    
        
            :lt(3)
        
        
            :lt(3)
        
        
            :eq(2)
        
        
        
        
            :gt(3)
        
        
            :gt(3)
        
    
    
http://img.mukewang.com/57cd1df2000146de06020498.jpg    
    
    
     
    
    :not
    
        
            
            Aaron
        
        
            
            慕课
        
        
            
            其他

内容筛选选择器

基本筛选选择器针对的都是元素DOM节点，如果要通过内容来过滤，使用内容筛选选择器，其规则体现在它所包含的子元素或者文本内容上，内容过滤器描述如下表：

注意事项：

:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。

:parent与:empty是相反的，两者所涉及的子元素，包括文本节点





    
    
    
    



    内容筛选器
    :contains/:has
    
        
            :contains
        
        
            :contains
        
        
            
                :has
            
        
        
            :contains
        
    

    

    


    :parent/:empty
    
        
            :parent
        
        
            :parent
        
        
            :parent

可见性筛选选择器

元素有显示状态与隐藏状态，jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden。描述如下：

:hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等

隐藏元素有如下的方法：

CSS display的值是none

type=" hidden "的表单元素

宽度和高度都显式设置为0

一个祖先元素是隐藏的，该元素是不会在页面上显示

CSS visibility的值是hidden

CSS opacity的指是0

如果元素中占据文档中一定的空间,元素被认为是可见的。可见元素的宽度或高度，是大于零。元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局

可见性筛选选择器

:visible/:hidden

display

width height

width/height

visibility opacity

visibility

属性筛选选择器

属性选择器可以基于属性来定位一个元素。只需指定该元素的某个属性，那么所有使用该属性且不考虑其属性值的元素都将被定位，也可更加明确并定位在这些属性上使用特定值的元素

其中，[attr="value"]和[attr*="value"]最为实用：

[attr="value"]能定位不同类型的元素，特别是表单form元素的操作，比如input[type="text"],input[type="checkbox"]等

[attr*="value"]能在网站中帮助我们匹配不同类型的文件

$(selector)中selector有三种形式:
①字符串：用于元素的选取；②DOM元素：封装Dom元素，提供一系列jquery方法；③function 就是初始化时的$(fn)形式
$("div[data=pmx]")括号里可以是单引号，也可以是双引号。目的是表示$(selector)里面的参数是个字符串。[attribute = value]这种形式中value可以不加引号，如果要加引号，需要参照selector。如果selector是单引号，那么value必须是双引号





    
    
    
    



    属性筛选选择器
    [att=val]、[att]、[att|=val]、[att~=val]
    
        
            [att=val]
        
        
            [att]
        
        
            [att|=val]
        
        
            [att~=val]
        
    

    

    

    

    


    [att^=val]、[att*=val]、[att$=val]、[att!=val]
    
        
            [att^=val]
        
        
            [att$=val]
        
        
            [att*=val]
        
        
            [att!=val]

子元素筛选选择器

子元素筛选选择器不常使用，其筛选规则比起其它的选择器稍微要复杂点

子元素筛选选择器描述表：

注意事项：

:first只匹配一个多带带的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

:last 只匹配一个多带带的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素

如果子元素只有一个的话，:first-child与:last-child是同一个

:only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配

jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的

nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算





    
    
    
    



    子元素筛选选择器
    :first-child、:last-child、:only-child
    
        
            :first-child
            第二个元素
            :last-child
        
        
            :first-child
        
        
            :first-child
            第二个元素
            :last-child
        
    

    

    

    


    :nth-child、:nth-last-child
    
        
            :first-child
            第二个元素
            第三个元素
            :last-child
        
        
            :first-child
            第二个元素
        
        
            :first-child
            第二个元素
            第三个元素
            :last-child

表单元素选择器

表单选择器的具体方法描述：




    
    
    
    
    



    子元素筛选选择器
    input、text、password、radio、checkbox
    submit、image、reset、button、file

选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器

在某些浏览器中，选择器:checked可能会错误选取到

特殊选择器this

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。$(this),代表的上下文对象是一个jQuery的上下文对象，可以调用jQuery的方法和属性值

特殊选择器this

点击测试：通过原生DOM处理

点击测试：通过原生jQuery处理

GPU云服务器云服务器基本选择器 jquery常用选择器 jquery过滤选择器 jquery双向选择器

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

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

JQuery基础修炼-样式篇

摘要：具有相同的父元素，并匹配过滤选择器子选择器选择所有指定元素中指定的的直接子元素。可见元素的宽度或高度，是大于零。元素的或被认为是可见的，因为他们仍然占用空间布局。 jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery...

_Dreams 2019-08-02 15:55 评论0 收藏0
JQuery基础修炼-样式篇

摘要：具有相同的父元素，并匹配过滤选择器子选择器选择所有指定元素中指定的的直接子元素。可见元素的宽度或高度，是大于零。元素的或被认为是可见的，因为他们仍然占用空间布局。 jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery...

luck 2019-08-19 18:24 评论0 收藏0
纯干货！一切关于jquery选择器

摘要：本人的两篇原创文章纯干货一切关于选择器和纯干货之操作解析，发布不到个月，就被博客园某账号认领为他的原创，并且他还精心地将慕课网原创文章的版权声明和文章中关于我的点点滴滴，删除地干干净净，很专业。　　本人的两篇原创文章纯干货！一切关于jquery选择器和纯干货！jQuery之DOM操作解析，发布不到1个月，就被博客园某账号认领为他的原创，并且他还精心地将慕课网原创文章的版权声明和文...

gecko23 2019-08-21 11:16 评论0 收藏0
jQuery入门笔记之（一）选择器引擎

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

charles_paul 2019-08-19 17:17 评论0 收藏0
jQuery DOM节点的遍历

摘要：只要符合，不管是儿子辈，孙子辈都可以与其他的树遍历方法不同，选择器表达式对于是必需的参数。方法以选定的元素为中心，往内查找可以通过方法。要一个一个给合集中每一个设置颜色，这里方法就是方法就是一个循环的迭代器，它会迭代对象合集中的每一个元素。 children()方法 jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.c...

Elle 2019-08-21 11:56 评论0 收藏0