jQuery式的方法链核心部分是三点:
1)jquery的包装器函数(也就是jQuery(),以此来构建包装器对象),以此构造函数可以产生饱含了原生DOM对象的包装器对象。
它大概是这个样子的…(当然跟官方库的规模跟功能以及实现方式都差很多,我只是写了个大概的实现方式):
呃…………我的失误,请大家如果有兴趣尝试下代码记得不要引入jQuery库,命名冲突了
[url=http://www.1sucai.cn/index.html]</p>
</div>
<hr/>
<div id="content" class="news">
<p id="content1" class="topic">
node1
</p>
<p id="content2" class="topic">
node2
</p>
<p id="content3" class="topic">
<a href="http://www.1sucai.cn/index.html">node3</a>
</p>
</div>
<hr/>
<div id="foot">
<p id="foot1" class="entrance"></p>
</div>
</body>
</html>
输入:
var f=$(‘#header').elements[0];
consoles.write("nodeName: "+f.nodeName+"==> Id:"+f.id)
/*自定义的代替alert的一个调试面板工具,由于在用的这个是照搬的某本书上的有点bug而且功能和操作性都不太好,过两天可能我会修改一下在放上来,自己调试可以用alert代替*/
输出:
[url=http://www.1sucai.cn/upload/201012/20101203190248732.png][img]http://files.jb51.net/upload/201012/20101203190248179.png[/img]
[/url]
输入:
[url=http://www.1sucai.cn/upload/201012/20101203190248149.png][img]http://files.jb51.net/upload/201012/20101203190248449.png[/img]
[/url]
虽然整合了dom对象查找的几个方法,但是还是可以看到每次都使用循环语句来操作dom对象是一件十分烦躁的事情,并且接下来还会以此包装器为基础引入很多针对此包装器对象的方法比如上面的addEvent方法等等,这些方法的引入最终是为了操作对象中包装的原生dom对象,所以每一个方法中又必须引入for或者while语句,这个引出第二个核心函数==> jQuery.each(){}; 太晚了…明天再总结
本文使用到的工具函数(都是很有用的函数):
//className:类名 tag:在此标签名范围内寻找 parent:在此父节点内寻找
function getElementsByClassName(className, tag, parent){
parent = parent || document; //缺省默认为document
var tag = tag || '*'; //缺省默认为查找所有标签
var elements = new Array();
var re = new RegExp('(^|\\s)' + className + '(\\s|$)');
var allList = parent.getElementsByTagName(tag);
var element;
for (var i = 0; i < allList.length; i++) {
element = allList[i];
if (element.className.match(re)) {
elements.push(element);
}
}
return elements;
}
if (!String.prototype.trim) {//去除首尾空格
String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g, '');
}
}
if (!Array.prototype.merge) {
Array.prototype.merge = function(arr){ //使得数组有类似set的特性 相同的对象无法放入同一个数组不要鄙视偶算法的问题只是阐述下原理
for (var i = 0; i < arr.length; i++) {
var signals=false;
for (var j = 0; j < this.length; j++) {
if (arr[i] == this[j])
signals=true;
}
if (!signals) this.push(arr[i]);
}
return this;
}
}