H5选择器之大放异彩仿jquery链式调用 IE8+完美运行

来源：互联网发布：淘宝代购护肤品靠谱吗编辑：程序博客网时间：2024/06/06 19:52

写在前面：

本章主要是关于html5新增选择器和在HMTL5选择器基础上进行仿jquery链式调用,

可在demo里面在线修改代码来查看效果。

这是不使用HTML5选择器下的仿jquery链式调用的demo，能很明显看出html5的简约方便。

原生node Api参考:http://blog.csdn.net/duanshuyong/article/details/7562423

更多HTML5 api参考:http://www.caniuse.com/#index

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>querySelector</title>
</head>

<body>
<div id="div1" class="" data-attr="div1">
div1
</div>
<div data-attr="div1">
<p>p1</p>
</div>
<div data-attr="div1">
<p>p2</p>
<b id="b">我是B</b>
</div>
<script>
//----------------------只能选一个,不是一个集合也没有length属性
//document.querySelector("#div1").style.backgroundColor="red";
//document.querySelector(".div1").style.backgroundColor="red";
//document.querySelector("[data-attr=div1]").style.backgroundColor="red";
//document.querySelector("body div") //不支持多级选择器
//console.log(document.querySelector("[data-attr=div1]").length)//undefined

//----------------------选择多个，是一个集合，有length属性
// var aDiv = document.querySelectorAll('div'); //获取一组元素
// aDiv.style.backgroundColor="blue"; //不能给集合直接设置样式
// for(var i=0;i<aDiv.length;i++){
// aDiv[i].style.backgroundColor="blue";
// }

///-----------------------------------------获取和修改class属性
// console.log(document.querySelector("#div1").classList.length);//1
// document.querySelector("#div1").classList.add("div_add")//添加了个class
//document.querySelector("#div1").classList.remove("div1")//删除现有class，如果没有class也不会报错
//document.querySelector("#div1").classList.toggle("div1")//切换class 如果有就删除没有就添加

//仿jquery 链式调用-----------------

//Xm_base对象等同jquery的$
function Xm_base(elem) {
this.elements = document.querySelectorAll(elem);
};
//设置CSS
Xm_base.prototype.css = function(attr, value) {
for (var i = 0; i < this.elements.length; i++) {
if (arguments.length == 1) {
return getStyle(this.elements[i], attr);
}
this.elements[i].style[attr] = value;
}
return this;
};
//仿jquery find--------------------------

Xm_base.prototype.find = function(elem) {
var childElements = []; //临时数组避免和base.element[]冲突
for (var i = 0; i < this.elements.length; i++) {
var temps = this.elements[i].querySelectorAll(elem);
for (var j = 0; j < temps.length; j++) {
childElements.push(temps[j]);
}

}
this.elements = childElements;
return this;
};
//获取父级别，如果没有返回NULL------------------------
Xm_base.prototype.parents = function(elem) {
var parents = [];
for (var i = 0; i < this.elements.length; i++) {
var x = this.elements[i].parentNode;
while (x.tagName.toLowerCase() != 'body') {
parents.push(x);
x = x.parentNode;
}
}
this.elements = parents;
console.log(this.elements)//是一个节点集合
return this;

}

//获取class
getStyle = function(ele, attr) {
var style = null;

if (window.getComputedStyle) {
style = window.getComputedStyle(ele, null)[attr];
} else {
style = ele.currentStyle[attr];
}
return style;
}

//调用方法,等同$
var SelectorAll = function(elem) {
return new Xm_base(elem);
}

//接下来就能愉快得像使用jquery一样批量修改样式了，啦啦啦啦啦德玛西亚~~--------------------------------------------------
SelectorAll("div").css("background", "red");
SelectorAll("div").find("p").css("color", "#000");
SelectorAll("div").find("#b").css("color", "blue");
console.log(SelectorAll("#b").parents("[data-attr]").css("fontSize","20px"))
</script>
</body>
</html>

0 0

H5选择器之大放异彩 仿jquery链式调用 IE8+完美运行

H5选择器之大放异彩仿jquery链式调用 IE8+完美运行