首先,这个方法不考虑ie9以及同等浏览器以下的兼容问题.....
对了,安卓版本实在低的浏览器也不考虑~(像什么安卓2.3之类的......)
本菜鸡没ios设备,没办法知道兼容情况......
这是废话
讲真的,写querySelector/querySelectorAll写得我不知道多烦躁...
虽然hb或者sublime有文本提示功能...
但是代码量讲真的也是有点大的啊...
好了,废话说了这么多~
来点干的了吧~
先直接上代码...
各位大神献丑了....
document.find = function(selector){
return this.querySelector(selector);
}
document.findAll = function(selector){
return this.querySelectorAll(selector);
}
HTMLElement.prototype.find = function(selector){
return this.querySelector(selector);
};
HTMLElement.prototype.findAll = function(selector){
return this.querySelectorAll(selector);
}
好了.献丑讲下那几个方法的说明吧~~
document.find和document.findAll
js里可以用点(.)来给对象添加方法/属性,没毛病吧~
function里的this指向的就是被添加方法/属性的那个对象~
HTMLElement.prototype.find和HTMLElement.prototype.findAll
HTMLElement是个啥?
我自己通俗的理解就是页面上的像body啊,div啊,p啊...之类的标签在js中的表达方式~
(讲得不对还请大神指正)
具体的点我看W3C的解释吧
prototype又是个啥?
它是js中所有对象都带有的一个属性(不过document和window就没,不知道为啥,还请大神指点),
这个属性可以向对象添加属性/方法
详细的prototype解释看这里
function里的内容见document.find和document.findAll
来点实际的应用吧~
DEMO
这是部分html代码如下(默认已经把上述js代码保存到script.js中)
<div class="wrap">
<p class="conetent">这是第一段文字</p>
</div>
<div class="wrap">
<p class="conetent">这是第二段文字</p>
</div>
<script src="./js/script.js"></script>
这是部分js代码
var wrap = document.find('.wrap'),
//或者直接document.find('.content'),
//我这里写warp.find('.content')是因为有个现成的wrap
content = wrap.find('.content'),
allWrap = document.findAll('.wrap'),
allContent = document.findAll('.conetent');
输出结果
输出结果是啥??
输出结果自己试试吧~
