原生javaScript仿写jQuery的例子
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生javaScript仿写jQuery的例子相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生javascript仿写jQuery</title>
</head>
<body>
<div>
<div class="wrap">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="wrap">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="wrap">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
<div>
<div class="wrap">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="wrap">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="wrap">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
<div>
<div class="wrap">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="wrap">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="wrap">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
<script type="text/javascript">
//参数分三种情况：
//1.字符串：选择器
//2.function：ready方法
//3.原生对象：原生对象转JQ对象
//==================
//原生对象转JQ
function JQ(arg) {
//用来放原生对象的数组
this.elements = [];
switch(typeof arg) {
case "string":
this.elements = getEle(arg);
break;
case "function":
ready(arg);
break;
case "object":
this.elements.push(arg);
break;
}
}
//JQ对象转原生,取操作
JQ.prototype.get = function(index) {
//return this.elements[index];//原生JS对象
return new JQ(this.elements[index]); // JQ对象
}
//$("div").eq(2);
//eq：从JQ对象中取出某一个原生对象,再转成新的JQ对象
JQ.prototype.eq = function(index) {
return new JQ(this.elements[index]);
}
//$("div").eq(2).css()
//==================
// $("input").css().css()....
//function css(){
// return this;
// }
//==================
function ready(fn) {
//DOMContentLoaded DOM加载完成之后浏览器发出的通知
if(window.addEventListener) {
window.addEventListener("DOMContentLoaded", fn, false);
} else {
//defer表示当DOM加载完成之后再去加载script标签
//IE8之前，了解即可
var script = document.createElement("script");
script.defer = true;
var head = document.getElementsByTagName("head")[0];
//head.appendChild(script);
script.onreadystatechange = function() {
if(script.readyState == "complete") {
fn();
}
}
}
return window;
}
//===========================
// $("xx xx xxx")多级选择器情况
function getEle(selecter) {
var reg = /^\s+|\s+$/g;
selecter = selecter.replace(reg, "");
//arr = [xx,xx,xx];
var arr = selecter.split(" ");
var parents = [document];
var children = [];
//义$("div .wrap input")为例
//第一次循环：arr[i]是div，parents是document,children里是当前文档里所有的div
//第二次循环：arr[i]是.wrap，parents是所有的div,children里是所有的div.wrap
//第三次循环：arr[i]是input，parents是所有的div.wrap,children里是所有的div.wrap里的input
for(var i = 0; i < arr.length; i++) {
children = [];
for(var j = 0; j < parents.length; j++) {
//查找class
if(/^\./.test(arr[i])) {
var nodes = getEleByClass(parents[j], arr[i].substr(1));
//console.log(nodes);
// for(var k = 0; k < nodes.length; k++) {
// children.push(nodes[k]);
// }
children = nodes;
//查找id
} else if(/^#/.test(arr[i])) {
var nodes = parens[j].getElementById(arr[i].substr(1));
children.push(nodes);
//查找tagName
} else {
var nodes = parents[j].getElementsByTagName(arr[i]);
//console.log(nodes);
console.log(nodes);
// for(var k = 0; k < nodes.length; k++) {
// children.push(nodes[k]);
// }
children = nodes;
}
}
parents = children;
}
return children;
}
getEle("div .wrap input"); //=== === === === === === ===
//$("div")当JQ的参数只有一级选择器的时候
// function getEle(selecter) {
// //1.去掉首尾空格
// var reg = /^\s+|\s+$/g;
// selecter.replace(reg, "");
// //2.判断选择器类型
// if(/^#/.test(selecter)) {
// //id 选择器
// return document.getElementById(selecter);
// } else if(/^./.test(selecter)) {
// //class选择器
// return getEleByClass(selecter);
// } else {
// return document.getElementsByTagName(selecter);
// }
// }
//=== === === === === === ===
//因为getElementsByClassname存在兼容性，所以单独处理
// function getEleByClass(selecter) {
// //现代浏览器
// if(document.getElementsByClassName) {
// return document.getElementsByClassName(selecter)
// } else {
// //ie 不支持直接根据classname查找，所以需要一个一个遍历
// var nodes = document.getElementsByTagName("*");
// var arr = [];
// for(var i = 0; i < nodes.length; i++) {
// if(nodes[i].className == selecter) {
// arr.push(nodes[i]);
// }
// }
// return arr;
// }
// }
function getEleByClass(parentobj, selecter) {
//现代浏览器
if(parentobj.getElementsByClassName) {
return parentobj.getElementsByClassName(selecter)
//兼容ie8以下版本浏览器
} else {
var nodes = parentobj.getElementsByTagName("*")
var arr = [];
for(var i = 0; i < nodes.length; i++) {
if(nodes[i].className == selecter) {
arr.push(nodes[i])
}
}
return arr
}
}
//============================
//console.log(typeof this);
//*********事件****************
//两个参数
//1.事件名
//2.回调函数
JQ.prototype.on = function(eventName, fn) {
for(var i = 0; i < this.elements.length; i++) {
addEvent(eventName, this.elements[i], fn);
}
}
//因为addeventListner存在兼容性问题，ie8之前用attachEvent
function addEvent(eventName, obj, fn) {
if(obj.addEventListener) {
obj.addEventListener(eventName, fn, false)
} else {
//ie8以下
obj.attachEvent("on" + eventName, fn)
}
}
// JQ.prototype.click = function() {
// for(var i = 0; i < this.elements.length; i++) {
// addEvent("click", this.elements[i], fn);
// }
// }
//*************css***************
JQ.prototype.css = function() {
//css使用时参数有两种情况
//1.一个参数时有两种情况
//1）字符串$("div").css("color");表示取值
//2）对象$("div").css({color:"red"}),表示给样式赋值
//2.两个参数为直接给一个样式赋值$("div").css("color","red")
switch(arguments.length) {
case 1:
//$("div").css({
// color: "red",
// width: "100",
//})
if((typeof arguments[0]) == "object") {
//给样式赋值
for(prop in arguments[0]) {
for(var i = 0; i < this.elements.length; i++) {
setStyle(this.elements[i], prop, arguments[0][prop]);
}
}
} else {
//从样式取值
/*可能jq对象中有多个原生对象，只取第一个样式*/
return getStyle(this.elements[0], arguments[0]);
}
break;
case 2:
for(var i = 0; i < this.elements.length; i++) {
//例如：$("div").css("color","red")
setStyle(this.elements[i], arguments[0], arguments[1]);
}
break;
}
}
//获取样式
/*
1.要获取样式的对象
2.样式名*/
function getStyle(obj, styleName) {
if(window.getComputedStyle) {
return window.getComputedStyle(obj, null)[styleName];
} else {
//ie8
return obj.currentStyle(styleName);
}
}
//设置样式
/*
1.要赋值的对象
2.样式名
3.样式的值*/
function setStyle(obj, styleName, styleValue) {
var arr = ["left", "right", "width", "height"];
for(var i = 0; i < arr.length; i++) {
//如果要设置的样式在数组的范围内，表示需要带“px”
if(arr[i] == styleName) {
//如果值中没有“px”的话，添加“px”
if(!/px/.test(styleValue)) {
styleValue = styleValue + "px";
}
}
}
obj.style[styleName] = styleValue;
}
function $(arg) {
return new JQ(arg);
}
//console.log(getEle("div .wrap input"));
//测试
//console.log($("div .wrap input"));
// $("div").on("click", function() {
// alert("不约");
// event.cancelBubble = true;
//
// })
// $(".wrap").css("backgroundColor", "red");
// $("div").css({
// backgroundColor: "yellow",
// })
$(function() {
//alert("Hello World");
console.log("Hello javaScript");
//$("input").eq(0).css("backgroundColor", "red");
$("input").css("backgroundColor", "red");
//$("input").get(5).style.backgroundColor = "blue";
$("input").get(9).css("backgroundColor", "yellow");
});
</script>
</body>
</html>
以上是关于原生javaScript仿写jQuery的例子的主要内容，如果未能解决你的问题，请参考以下文章