jQuery筛选器过滤

黄良钵

分类: 程序开发 666 0

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <script src="jquery.js"></script>
  8.     <title>jQuery2</title>
  9. </head>
  10. <body>
  11.    <ol>
  12.       <li>第1项</li>
  13.       <li><i>33333333333333333333</i>第2项</li>
  14.       <li>第3项</li>
  15.       <li>第4项</li>
  16.       <li>第5项</li>
  17.       <li>第6项</li>
  18.       <li>第7项</li>
  19.    </ol>
  20.     <ul>
  21.         <li>A</li>
  22.         <li>B</li>
  23.         <li>C</li>
  24.     </ul>
  25.     <script>
  26.         // 1.jQuery对象是一个容器 内部可以有多个标签元素
  27.         // 2.在jQuery对象上调用某些方法时会对jQuery对象中的每个标签元素都起作用
  28.         // 3.jQuery对象的某些方法会返回jQuery对象本身 所以可以链式调用
  29.         // 链式调用的原理:对象方法能返回对象本身
  30.         // 使用筛选器过滤
  31.         // $('li').filter(':nth-child(2n)').css('color','blue')
  32.         // var lis = $('li')
  33.         // var filters = lis.filter(':nth-child(2n)')
  34.         // filters.css('color','blue')
  35.         // $('ul>li').filter(document.querySelectorAll('li:nth-child(2n)')).css('color','red')
  36.         // 包含指定元素
  37.         // $('li').has('i').css('color','blue')
  38.         // 排除掉一部分 not()从匹配元素集合中删除元素
  39.         // $('ol>li:odd,ul>li:odd').not('ol>li').css('color','blue')
  40.         // 切片
  41.         // $('li').slice(3,9).css('color','red')
  42.         // 合并两个jQuery对象 生成jQuery对象
  43.         // $('ol>li:odd').add('ul>li:even').css('color','red')
  44.         // console.log($('ol>li:odd').add('ul>li:even'))
  45.                     //  第3项
  46.         // $('ol>li:nth-child(4)').prev().nextAll(':odd').addBack().css('color','red')
  47.     </script>
  48. </body>
  49. </html>
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
jQuery

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “jQuery筛选器过滤”

Loading...