标签：style c class blog code java
新QuerySelector方法
querySelector()：根据指定的选择规则，返回在页面中找到的第一匹配元素
querySelectorAll()：根据指定规则返回页面中所有相匹配的元素
实例：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 4 <title>Selectors API Example</title> 5 <style> 6 .green{background-color:green; } 7 </style> 8 </head> 9 <body> 10 <div id="d1"> 11 <p><a href="http://www.sina.com.cn">SINA</a></p> 12 <input type=‘text‘ value=‘lingyibin‘ id=‘test‘/> 13 <input type=‘text‘ value=‘jasonling‘ id=‘test2‘ disabled /> 14 <span class=‘testSpan‘> 这里是span的地盘！ </span> 15 <ul> 16 <li>111</li> 17 <li class=‘2‘>222</li> 18 <li>333</li> 19 </ul> 20 <span><label>label000</label></span> 21 <label>label111</label> 22 </div> 23 <label>label222</label></br> 24 <label>label333</label></br> 25 <label>label444</label></br> 26 27 <script type="text/javascript"> 28 //alert(document.querySelector(‘div a‘)); // -> http://www.sina.com.cn/ 29 //alert(document.querySelector(‘div a‘).innerHTML); // -> SINA 30 //alert(document.querySelectorAll(‘div a‘).length); // -> 1 31 //alert(document.querySelectorAll(‘div a‘)[0]); // -> http://www.sina.com.cn/ 32 //alert(document.querySelector(‘#test‘).value); // -> lingyibin 33 //alert(document.querySelector(‘input:disabled‘).value); // -> jasonling 34 //alert(document.querySelector(‘span:not(label)‘).innerHTML); // -> jasonling 35 //alert(document.querySelectorAll(‘input[id^=test]‘)[1].value); // -> jasonling //以test开头的 36 //alert(document.querySelectorAll(‘input[id$=t2]‘).length); // -> 1 //以test结尾的，注意，id$=2就会错，不能以数字开头 37 //alert(document.querySelectorAll(‘input[id*=est]‘).length); // -> 2 //模糊匹配 38 //alert(document.querySelector(‘.testSpan‘).innerHTML); // -> 这里是span的地盘！ 39 //alert(document.querySelector(‘ul li:nth-child(2)‘).innerHTML); // -> 222 40 //alert(document.querySelectorAll(‘ul li:nth-child(3n)‘)[0].innerHTML); // -> 333 41 //alert(document.querySelectorAll(‘ul li:nth-child(odd)‘)[1].innerHTML); // -> 333 42 //alert(document.querySelector(‘ul li:first-child‘).innerHTML); // -> 111 43 //alert(document.querySelector(‘ul li:last-child‘).innerHTML); // -> 333 44 //alert(document.querySelectorAll(‘li[class]‘)[0].innerHTML); // -> 222 //有class属性的li 45 //alert(document.querySelectorAll(‘div label‘)[0].innerHTML); // -> label000 //得到div里面所有的label 46 //alert(document.querySelectorAll(‘div > label‘)[0].innerHTML); // -> label111 //得到div里面的直接label，在本例中只有一个 47 //alert(document.querySelectorAll(‘div + label‘)[0].innerHTML); // -> label222 //注意，这里只能得到一个label 48 //alert(document.querySelectorAll(‘div ~ label‘)[1].innerHTML); // -> label333 49 </script> 50 51 </body> 52 </html>
Html5 Selectors API,布布扣,bubuko.com
标签：style c class blog code java
原文地址：http://www.cnblogs.com/linhui/p/3752758.html
