个人中心
Erlo

day29-JQuery02

2022-12-04 16:30:43 发布   280 浏览  
页面报错/反馈
已收藏 点赞

JQuery02

4.jQuery选择器02

4.3过滤选择器

4.3.1基础过滤选择器

$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

基础过滤选择器介绍：

  1. :first用法：$("tr:first");，返回值：单个元素的组成的集合

    说明：匹配找到的第一个元素

  2. :last用法：$("tr:last");，返回值：集合元素

    说明：匹配找到的最后一个元素

  3. :not(selector)用法：$("input:not(:checked)");，返回值：集合元素

    说明：取出所有与给定选择器匹配的元素，有点类似于“非”，这里的例子为没有选择的input(input的type=“checkbox”)

  4. :even用法：$("tr:even");，返回值：集合元素

    说明：匹配所有索引值为偶数的元素，从0开始计数。js的数据都是从0开始计数的，所以第一个选中的元素下标为0

  5. :odd用法：$("tr:odd");，返回值：集合元素

    说明：匹配所有索引值为奇数的元素，从0开始计数。

  6. :eq(index)用法：$("tr:eq(0)");，返回值：集合元素

    说明：匹配一个给定索引值的元素。eq(0)就是获取第一个tr元素，括号里面的是索引值

  7. :gt(index)用法：$("tr:gt(0)");，返回值：集合元素

    说明：匹配所有大于给定索引值的元素。

  8. :lt(index)用法：$("tr:lt(2)");，返回值：集合元素

    说明：匹配所有小于给定索引值的元素。

  9. :header（固定写法）用法：$(":header").css("background","#EEE");，返回值：集合元素

    说明：匹配如h1，h2，h3之类的标题元素，是专门用来获取标题元素的

  10. :animated（固定写法），返回值：集合元素

    说明：匹配所有正在执行动画效果的元素

基础过滤选择器-应用实例

  1. 改变第一个 div 元素的背景色为 #0000FF
  2. 改变最后一个 div 元素的背景色为 #0000FF
  3. 改变 class 不为 one 的所有 div 元素的背景色为 #0000FF
  4. 改变索引值为偶数的 div 元素的背景色为 #0000FF
  5. 改变索引值为奇数的 div 元素的背景色为 #0000FF
  6. 改变索引值为大于 3 的 div 元素的背景色为 #0000FF
  7. 改变索引值为等于 3 的 div 元素的背景色为 #0000FF
  8. 改变索引值为小于 3 的 div 元素的背景色为 #0000FF
  9. 改变所有的标题元素的背景色为 #0000FF



    
    基础过滤选择器-应用实例
    
    
    



H1 标题


H2 标题


H3 标题














    div id 为 one




    div id 为 two
    

        id two01
    

    

        id two02
    





    div id 为 three class one
    

        id three01

4.3.2内容过滤选择器

$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上：

  1. :contains(text)用法：$("div:contains('Hello')")返回值：集合元素

    说明：匹配包含给定文本的元素。这个选择器比较有用，当我们要选择的不是dom标签元素时，它就派上了用场，它的作用是查找被标签围起来的文本内容是否符合指定的内容的。

  2. :empty用法：$("td:empty")返回值：集合元素

    说明：匹配所有不包含子元素或者文本的空元素

  3. :has(selector)用法：$("div:has(p)").addClass("test")返回值：集合元素

    说明：匹配含有选择器所匹配的元素的元素。这里的例子是：给所有包含p元素的div标签加上class="test"

  4. :parent用法：$("td:parent")返回值：集合元素

    说明：匹配含有子元素或者文本的元素，和上面empty相反。

内容过滤选择器-应用实例

  1. 改变含有文本 'di' 的 div 元素的背景色为 #0000FF
  2. 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 pink
  3. 改变含有 class 为 mini 元素的 div 元素的背景色为 green
  4. 改变含有子元素(或者文本元素)的div元素的背景色为 yellow
  5. 改变不含有文本 'di' 的div元素的背景色为 pink



    
    内容过滤选择器应用实例
    
    
    











    

        div id 为 one
    





    div id 为 two
    

        id two01
    

    

        id two02
    





    div id 为 three class one
    

        id three01
    





    XXXXXXXXXX






    执行动画

4.3.3可见性过滤选择器

$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

  1. :hidden用法：$("tr:hidden")返回值：集合元素

    说明：匹配所有的不可见元素，input元素的type属性为"hidden"的话也会被匹配到，意思是css中display:none和input type="hidden"的都会被匹配到

  2. :visible用法：$("tr:visible")返回值：集合元素

    说明：匹配所有的可见元素

应用实例

  1. 改变所有可见的div元素的背景色为 #0000FF
  2. 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF
  3. 选取所有的文本隐藏域, 并打印它们的值



    
    可见性过滤选择器-应用实例
    
    
    


 


 


 










    div id 为 one




    div id 为 two




    div id 为 three

4.3.4属性过滤选择器

image-20221202184409638 
$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

  1. [attribute]用法：$("div[id]")返回值：集合元素

    说明：匹配包含给定属性的元素。例子中是选取所有带id 属性的 div 元素

  2. [attribute=value]用法：$("div[id='one']")返回值：集合元素

    说明：匹配给定属性是某个特定值的元素。例子中是选取id 属性的值为one的 div 元素

  3. [attribute!=value]用法：$("input[name!='newsletter']返回值：集合元素

    说明：匹配所有不含有指定的属性，或者属性不等于特定值的元素。此选择器等价于:not([attr=value])，即含有特定属性但该属性不含有指定值的元素。

  4. [attribute^=value]用法：$("input[name^='news']")返回值：集合元素

    说明：匹配给定的属性值是以某些值开始的元素

  5. [attribute$=value]用法：$("input[name$='letter']")返回值：集合元素

    说明：匹配给定的属性值是以某些值结尾的元素

  6. [attribute*=value]用法：$("input[name*='man']")返回值：集合元素

    说明：匹配给定的属性是包含某些值的元素

  7. [attr1][attr2][attrN]用法：$("input[id][name$='man']")返回值：集合元素

    说明：多属性选过滤，同时满足两个属性的条件的元素

应用实例

选取下列元素,改变其背景色为 #0000FF

  1. 含有属性title 的div元素.
  2. 属性title值等于"test"的div元素.
  3. 属性title值不等于"test"的div元素(没有属性title的也将被选中).
  4. 属性title值 以"te"开始 的div元素.
  5. 属性title值 以"est"结束 的div元素.
  6. 属性title值 含有"es"的div元素.
  7. 选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素.



    
    属性过滤选择器-应用实例
    
    
    





















    div id 为 one test




    div id 为 one-1 texxx




    div id 为 one-2 xxxest




    div id 为 one-3 xxxesxxxxxt




    div id 为 two




    div id 为 three

4.3.5子元素过滤选择器

  1. :nth-child(index/even/odd/equation)用法：$("ul li:nth-child(2)")返回值：集合元素

    说明：匹配其父元素下的第N个子或奇偶元素。这个选择器和之前说过的基础过滤(Bade Filters)中的eq()有些类似，不同的地方就是前者是从0开始，后者是从1开始。

  2. :first-child用法：$("ul li:first-child")返回值：集合元素

    说明：匹配第一个子元素。':first'只匹配一个元素，而此选择符将为每个父元素匹配其第一个子元素，这里需要区分

  3. :last-child用法：$("ul li:last-child")返回值：集合元素

    说明：匹配最后一个子元素。':last'只匹配一个元素，而此选择符将为每个父元素匹配其最后一个子元素，这里需要区分

  4. :only-child用法：$("ul li:only-child")返回值：集合元素

    说明：如果某个元素是父元素中唯一的子元素，那将会被匹配

  5. nth-child() 选择器详解如下：

    (1):nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素

    (2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素

    (3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素

    (4):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1 的元素

应用例子

选取下列元素,改变其背景色为 #0000FF

  1. 每个class为one的div父元素下的第2个子元素.
  2. 每个class为one的div父元素下的第一个子元素
  3. 每个class为one的div父元素下的最后一个子元素
  4. 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素



    
    子元素过滤选择器示例
    
    
    
















    

        XXXXXXXXX id=one
    

    

        XXXXXXXXX id=two
    

    

        XXXXXXXXX id=three
    

    

        XXXXXXXXX id=four
    





    

        XXXXXXXXX id=five

4.3.6表单属性过滤选择器

此选择器主要对所选择的表单元素进行过滤

  1. :enabled用法：$("input:enabled")返回值：集合元素

    说明：匹配所有可用元素，意思是查找所有input中不带有disabled=“disabled”的input

  2. :disabled用法：$("input:disabled")返回值：集合元素

    说明：匹配所有不可用元素

  3. :checked用法：$("input:checked")返回值：集合元素

    说明：匹配所有选中的被选中元素(复选框，单选框等，不包括select中的option)

  4. :selected用法：$("select option:selected")返回值：集合元素

    说明：匹配所有选中的option元素

应用实例

  1. 利用 jQuery 对象的 val() 方法改变表单内可用 元素的值
  2. 利用 jQuery 对象的 val() 方法改变表单内不可用 元素的值
  3. 利用 jQuery 对象的 length 属性获取多选框选中的个数
  4. 利用 jQuery 对象的 text() 方法获取下拉框选中的内容



    
    表单对象属性过滤选择器
    
    
    























选择你的爱好

爱好 1
爱好 2
爱好 3
爱好 4



选项如下:

登录查看全部

参与评论

昵称 登录
发布评论

评论留言

还没有评论留言，赶紧来抢楼吧~~

@2024 by 唯宠科技 蜀ICP备18000267号
浏览 2965.20 万次 点击这里给我发消息

手机查看

 返回顶部

给这篇文章打个标签吧~

棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认