<!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>