Html5新增的屬性-querySelector
阿新 • • 發佈：2017-05-13
em1 query right java fun javascrip otto pan head
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>querySelector/querySelectorAll</title> </head> <body> <div> <ul> <li class="item">item1</li> <li class="item">item2</li> <li class="item">item3</li> <li class="item">item4</li> <li class="item">item5</li> <li class="item">item6</li> <li class="item">item7</li> <li class="item">item8</li> <li class="item">item9</li> <li class="item">item10</li> </ul> </div> <script src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> (function(){ /*返回第一個滿足選擇器條件元素 一個dom對象*/ var first_item =document.querySelector(‘.item‘); console.log(first_item);/*返回所有滿足條件的元素 一個元素類型時一個dom類型的數組*/ var items = document.querySelectorAll(‘.item‘); console.log(items); /* for(var i=0;i<items.length; i++){ items[i].addEventListener(‘click‘,function(e){ alert("這是qs選擇器"); }) }*/ /*$(‘.item‘)返回一個jQuery對象(實際上是dom元素的數組) * 本質上jQuery方式和qs方式都是獲取dom數組，只不過jQuery會多一些其他成員 * dom數組的每個成員註冊事件不能像jQuery一樣直接註冊，必須分別給每個元素註冊 * */ var $items = $(‘.item‘); console.log($items); $items.on(‘click‘,function(){ alert("這是jq選擇器"); }) })(); </script> </body> </html>
Html5新增的屬性-querySelector