• 当前标签:jQuery筛选器

程序开发 jQuery DOM、jQuery 对象、jQuery筛选器

jQuery DOM <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>jquery DOM</title>     <style>          .red-div{              background-color: red;              color: white;              padding: 10px;          }     </style> </head> <body>    <div id="box" name="boxName" class="red-div"></div>    <div></div>    <script src="jquery.js"></script>    <script>     //    得到的是HTMLElement对象     //    var box = document.getElementById('box')     //    box.innerText  ='getElementById'     //    jQuery对象是一个标签元素的盒子 是一个类似数组的对象     // $相当于jQuery     //    jQuery('#box').text('jQuery #ID')         //  box.innerText = '111'         // 不使用getElementById就可以直接使用id变量         // 得到HTMLCollection         // var boxTag = document.getElementsByTagName('div')[0]         // console.log(boxTag)         // 得到jquery对象         //  $('div').text('jquery div')         //  得到的是NodeList对象         //  boxTag = document.querySelectorAll('div')[0]             // getElementsClassName         //    $('.red-div')   得到的是jquery对象         //   getElementsByName         // $('[name=boxName]')  得到的是Jquery对象         // HTMLAllCollection         //    var all = document.all         // //    NodeList         //    all = document.querySelectorAll('*')         // //    得到的是jQuery对象         //    all = $('*')         // console.log($('div')[1])    </script> </body> </html> jQuery 对象 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <script src="jquery.js"></script>     <title>jquery 对象</title>     <style>        li{            font-size: 2rem;            color: blue;        }        .ul li{            font-size: 1.5rem;            color: red;        }     </style> </head> <body>     <ul>         <li>1</li>         <li>2</li>         <li>3</li>         <li>4</li>     </ul>     <ul class="ul">         <li>21</li>         <li>22</li>         <li>23</li>         <li id="ff">24</li>     </ul>     <script>         // $('筛选器')是最常用的jQuery对象的方法         // $()创建一个没有标签元素的jquery对象         // console.dir($())         // 会将两个筛选器合并         // console.log($('li','.ul',document.body))         // 將标签元素转换成jQuery对象         // var li = document.querySelector('li')         // console.dir($(li).text())         // 将NodeList\HTMLCollection 转换成jquery对象         // var li = document.querySelectorAll('li')         // console.log($(li).text())         // jquery对象的大部分方法会在内部循环处理每一个元素 少部分只处理         // jQuery对象中的第一个元素         // jQuery对象的属性         // console.log($('li').size()) 已被废弃         //  console.log($('li').length)         //  console.log($('li:nth-child(2)').length)          console.log($('li:gt(1)').get(0))          var li3 = $('li:nth-child(3)')         //  得到的是jquery对象        var a =  li3.get(0)          console.log(a)         //  得到的是标签元素         console.log($('li:gt(1)').index(a))         // jQuery对象是jQuery('筛选器')方法的返回值         // 这个返回值是一个对象         // jQuery对象相当于一个容器或盒子         // 内部存放的时候通过筛选器找到的标签元素         // 它是一个【类似数组的结构】         // jQuery对象提供了循环处理内部每一个标签元素的方法         // .each方法规定为每个匹配元素规定运行的函数         $('li:odd').each(function(i){             console.log(i)             console.log($(this).text())         })     </script> </body> </html> jQuery筛选器 <body>     <ul>         <li>第1项</li>         <li>第2项</li>         <li>第3项</li>         <li>第4项</li>         <li>第5项</li>         <li>第6项</li>         <li>第7项</li>     </ul>     <hr>     <ol>         <li>HTML</li>         <li>CSS</li>         <li>JavaScript</li>     </ol>    <script src="jquery.js"></script>    <script>     //    整个页面上第一个li标签     //    $('li:first').css({'color':'blue','font-size':'24px'})      // 全局索引是偶数     //  $('li:even').css('color','red')     //  // 全局索引是奇数     //  $('li:odd').css('color','blue')     //   全局索引大于3     //  $('li:gt(3)').css('color','yellow')         //  索引值为4 从0开始        $('li:eq(4)').css('color','red')         // 任意标签的倒数第x个子标签        $('li:nth-last-child(1)').css('color','blue')    </script> </body>

2017-08-14 19:48:26 44 0 0
阅读详情
  • 1
前往