js新增类jq的选择器---好用
2017-01-26 本文已影响49人
麦壳儿UIandFE2
序：
w3c对DOM主要的两个扩展是selectorAPI和HTML5；selectorAPI致力于让浏览器原生支持css查询。就像jq那样。selectorAPI核心是2个方法： querySelector（）和querySelectorAll（）；兼容性性上从IE8+；现阶段开发基本都是兼容到ie8就ok了，所以这个方法基本可以大胆使用。jq中两大特色是选择器简洁好用，兼容性不用考虑。这个selectorAPI的出现顶的过jq小半边天的地位，毕竟原生支持的要比库的性能更优些吧，毕竟不用引包了。
1. querySelector（）
示例：
html:
<div class="showBox">
</div>
js:
var oShowBox = document.querySelector('.showBox');
--------------------------------------------------
获取了showBox
注意：
页面要是有一堆的类名叫showBox也只会获取第一个。如果没有，就返回一个null.
2. querySelectorAll（）
示例：
html:
<ul id="smallBoxBot">
<li></li>
<li></li>
<li></li>
</ul>
js:
var oGps = document.querySelectorAll('#smallBoxBot img');
--------------------------------------------------
获取了smallBoxBot里的所有img标签
注意：
- querySelectorAll获取的是一组元素。同时会获取到与这个元素（对象）下的所有属性和方法。
小结：
- 这两个都是方法，不是属性，书写时不要忘记加括号，且要传参数（css选择器写法一致）。
- 让浏览器原生支持css查询;底层都是会有一个基础的css解析器做支撑的。这两种方法接受的是css选择符。
3. 扩展---children选择器
选择的是谁的子级。是属性不加括号的。
示例：
html:
<ul class="smallBoxBot">
<li></li>
<li></li>
<li></li>
</ul>
js:
//导航小图所有
var oGps = document.querySelector('.smallBoxBot ').children;
--------------------------------------------------
获取了smallBoxBot里的所有img标签
//导航小图第一张
var oGps = document.querySelector('.smallBoxBot ').children[0];
--------------------------------------------------
获取了smallBoxBot里的第一个img标签
4. 对比传统的DOM选择器
---又臭又长--一不留神就写错了。幸好那时有一个children选择器相助，否则真是欲哭无泪啊。你必须一级一级的获取，而selectorAPI按照需要获取。
示例：
html:
-------------------------------------------------
<div class="smallBox">
<div class="smallBoxTop">
<span></span>
</div>
<ul class="smallBoxBot">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="showBox">
</div>
js:传统选择器写法
-------------------------------------------------
var oSpan = document.getElementsByTagName('span')[0];
var oSmallBoxTop = document.getElementsByClassName('smallBoxTop')[0];
var oSmallImg = oSmallBoxTop.children[0];
var oShowBox = document.getElementsByClassName('showBox')[0];
var oBigImg = oShowBox.children[0];
var oGps = document.getElementsByClassName('smallBoxBot')[0].children;
js:selectorAPI选择器写法
-------------------------------------------------
var oSpan = document.querySelector('.smallBoxTop span');
var oSmallBoxTop = document.querySelector('.smallBoxTop');
var oSmallImg = oSmallBoxTop.children[0];
var oShowBox = document.querySelector('.showBox');
var oBigImg = oShowBox.children[0];
var oGps = document.querySelectorAll('.smallBoxBot img');
----------------------------------------------------喜欢就动动小手哈。------------------------------------------------------
--------------------------------------你的支持是洒家-麦壳-macrolam前进的动力--------------------------------------
