jQuery DOM、jQuery 对象、jQuery筛选器

黄良钵

分类: 程序开发 743 0

jQuery DOM

  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.     <title>jquery DOM</title>
  8.     <style>
  9.          .red-div{
  10.              background-color: red;
  11.              color: white;
  12.              padding: 10px;
  13.          }
  14.     </style>
  15. </head>
  16. <body>
  17.    <div id="box" name="boxName" class="red-div"></div>
  18.    <div></div>
  19.    <script src="jquery.js"></script>
  20.    <script>
  21.     //    得到的是HTMLElement对象
  22.     //    var box = document.getElementById('box')
  23.     //    box.innerText  ='getElementById'
  24.     //    jQuery对象是一个标签元素的盒子 是一个类似数组的对象
  25.     // $相当于jQuery
  26.     //    jQuery('#box').text('jQuery #ID')
  27.         //  box.innerText = '111'
  28.         // 不使用getElementById就可以直接使用id变量
  29.         // 得到HTMLCollection
  30.         // var boxTag = document.getElementsByTagName('div')[0]
  31.         // console.log(boxTag)
  32.         // 得到jquery对象
  33.         //  $('div').text('jquery div')
  34.         //  得到的是NodeList对象
  35.         //  boxTag = document.querySelectorAll('div')[0]
  36.             // getElementsClassName
  37.         //    $('.red-div')   得到的是jquery对象
  38.         //   getElementsByName
  39.         // $('[name=boxName]')  得到的是Jquery对象
  40.         // HTMLAllCollection
  41.         //    var all = document.all
  42.         // //    NodeList
  43.         //    all = document.querySelectorAll('*')
  44.         // //    得到的是jQuery对象
  45.         //    all = $('*')
  46.         // console.log($('div')[1])
  47.    </script>
  48. </body>
  49. </html>

jQuery 对象

  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>jquery 对象</title>
  9.     <style>
  10.        li{
  11.            font-size: 2rem;
  12.            color: blue;
  13.        }
  14.        .ul li{
  15.            font-size: 1.5rem;
  16.            color: red;
  17.        }
  18.     </style>
  19. </head>
  20. <body>
  21.     <ul>
  22.         <li>1</li>
  23.         <li>2</li>
  24.         <li>3</li>
  25.         <li>4</li>
  26.     </ul>
  27.     <ul class="ul">
  28.         <li>21</li>
  29.         <li>22</li>
  30.         <li>23</li>
  31.         <li id="ff">24</li>
  32.     </ul>
  33.     <script>
  34.         // $('筛选器')是最常用的jQuery对象的方法
  35.         // $()创建一个没有标签元素的jquery对象
  36.         // console.dir($())
  37.         // 会将两个筛选器合并
  38.         // console.log($('li','.ul',document.body))
  39.         // 將标签元素转换成jQuery对象
  40.         // var li = document.querySelector('li')
  41.         // console.dir($(li).text())
  42.         // 将NodeList\HTMLCollection 转换成jquery对象
  43.         // var li = document.querySelectorAll('li')
  44.         // console.log($(li).text())
  45.         // jquery对象的大部分方法会在内部循环处理每一个元素 少部分只处理
  46.         // jQuery对象中的第一个元素
  47.         // jQuery对象的属性
  48.         // console.log($('li').size()) 已被废弃
  49.         //  console.log($('li').length)
  50.         //  console.log($('li:nth-child(2)').length)
  51.          console.log($('li:gt(1)').get(0))
  52.          var li3 = $('li:nth-child(3)')
  53.         //  得到的是jquery对象
  54.        var a =  li3.get(0)
  55.          console.log(a)
  56.         //  得到的是标签元素
  57.         console.log($('li:gt(1)').index(a))
  58.         // jQuery对象是jQuery('筛选器')方法的返回值
  59.         // 这个返回值是一个对象
  60.         // jQuery对象相当于一个容器或盒子
  61.         // 内部存放的时候通过筛选器找到的标签元素
  62.         // 它是一个【类似数组的结构】
  63.         // jQuery对象提供了循环处理内部每一个标签元素的方法
  64.         // .each方法规定为每个匹配元素规定运行的函数
  65.         $('li:odd').each(function(i){
  66.             console.log(i)
  67.             console.log($(this).text())
  68.         })
  69.     </script>
  70. </body>
  71. </html>

jQuery筛选器

  1. <body>
  2.     <ul>
  3.         <li>第1项</li>
  4.         <li>第2项</li>
  5.         <li>第3项</li>
  6.         <li>第4项</li>
  7.         <li>第5项</li>
  8.         <li>第6项</li>
  9.         <li>第7项</li>
  10.     </ul>
  11.     <hr>
  12.     <ol>
  13.         <li>HTML</li>
  14.         <li>CSS</li>
  15.         <li>JavaScript</li>
  16.     </ol>
  17.    <script src="jquery.js"></script>
  18.    <script>
  19.     //    整个页面上第一个li标签
  20.     //    $('li:first').css({'color':'blue','font-size':'24px'})
  21.      // 全局索引是偶数
  22.     //  $('li:even').css('color','red')
  23.     //  // 全局索引是奇数
  24.     //  $('li:odd').css('color','blue')
  25.     //   全局索引大于3
  26.     //  $('li:gt(3)').css('color','yellow')
  27.         //  索引值为4 从0开始
  28.        $('li:eq(4)').css('color','red')
  29.         // 任意标签的倒数第x个子标签
  30.        $('li:nth-last-child(1)').css('color','blue')
  31.    </script>
  32. </body>
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
jQuery、jQuery DOM、jQuery 对象、jQuery筛选器

作者简介: 黄良钵

打赏

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

共 0 条评论关于 “jQuery DOM、jQuery 对象、jQuery筛选器”

Loading...