首页 > 代码库 > Html5新增的属性-querySelector
Html5新增的属性-querySelector
<!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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。