原生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>

时间： 2024-10-14 07:17:35

原生javaScript仿写jQuery的例子的相关文章

原生javascript实现类似jquery on方法的行为监听

原生javascript有addEventListener和attachEvent方法来注册事件,但有时候我们需要判断某一行为甚至某一函数是否被执行了,并且能够获取前一行为的参数,这个时候就需要其他方法来实现了. 项目中的原始场景是有若干个tab切换,tab组件当然是已经写好的,现在需要每次点击后保存localstorage等其他操作,需要监听tab是否被点击.下面是简单的实现事件监听方法: <!DOCTYPE html> <html lang="en"> &l

使用原生js仿写win10时钟

学习web前端已经一月了,突然就像做一点什么,于是就仿写了一个win10时钟(农历计算准确度太差,于是就忽略不写了~~) 一.HTML布局 1 <div class="wrap"> 2 <div class="time-present"> 3 <div class="time-local"> 4 <span id="hours">13</span><span&g

仅用原生JavaScript手写DOM事件模型

前言 前段时间博客园里有篇很火的帖子2016十家公司前端面试小记,主要讲作者的前端求职面试经历,其中提到了面试官会考察手写一个简单的事件模型: "如果上述都ok的话,那么极有可能要求让你[实现事件模型],即写一个类或是一个模块,有两个函数,一个bind一个trigger,分别实现绑定事件和触发事件,核心需求就是可以对某一个事件名称绑定多个事件响应函数,然后触发这个事件名称时,依次按绑定顺序触发相应的响应函数." 如果了解观察者模式,那么事件模型应该不算太难.本着深入钻研的精神,我试着来

纯原生javascript仿网易轮播图

第一次有自己的关于代码的博客,感到诚惶诚恐.这可能是我第一次以程序猿,或者连初级程序猿都不是的身份下开通的个人“技术”(胡写乱写)博客园地.闲言碎语不要讲,咱今天就写一点关于js的代码吧.网易首页大家肯定都去过,在首页左侧部分有个轮播图,效果很好,构思精巧,非常诱人.注,此demo非本人原创,在这里进行个人解读,力求通俗易懂(主要是让我自己明白!). 那么如何实现相关技术,进而实现如图效果呢?下面的进度条是用JQuery写的,这里暂不考虑.下面从三个方面讨论网一轮播图. 一.HTML部分 1 <

你可能不需要 jQuery！使用原生 JavaScript 进行开发

jquery 转原生js 的一些方法 / jq转js / jquery与js. 很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 Web 应用. 然而,另一方面,作为前端开发的基础框架,jQuery 包含大量的兼容性代码和扩展功能,其中有很多在你的整个项目中可能都不会用到.其实如果你只是针对现代浏览器,很多功能使用原生的 JavaScript 就可以实

为什么原生 JavaScript 开发越来越多受欢迎？是否应该跟风用原生JavaScript代替 jQuery等库？

本文标签:  jQuery的作用 原生JavaScript优势 jQuery官网 jQuery处理DOM和跨浏览器 JavaScript新特性 互联网杂谈 随着 JavaScript 本身的完善,越来越多的人开始喜欢使用原生 JavaScript 开发代替各种库,其中不少人发出了用原生 JavaScript 代替 jQuery 的声音.这并不是什么坏事,但也不见得就是好事.如果你真的想把 jQuery从前端依赖库中移除掉,我建议你慎重考虑. 首先 jQuery 是一个第三方库.库存在的价值之一在

四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现

虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们的需求,下面我简单介绍一些 常见的四种提示弹出框(success,loading,error,warning),我分别用原生JavaScript和jQuery来介绍分享给各位博友! 一.首先介绍原生JavaScript来实现四种提示弹出框: 第一步:先看看html的建立 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

原生js仿jquery一些常用方法

原生js仿jquery一些常用方法 下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 最近迷上了原生js,能不用jquery等框架的情况都会手写一些js方法,记得刚接触前端的时候为了选择器而使用jquery...现在利用扩展原型的方法实现一些jquery函数: 1.显示/隐藏 //hide() Object.prototype.hide = function(){ this.style.displa

为什么要用原生 JavaScript 代替 jQuery？

随着 JavaScript 本身的完善,越来越多的人开始喜欢使用原生 JavaScript 开发代替各种库,其中不少人发出了用原生 JavaScript 代替 jQuery 的声音.这并不是什么坏事,但也不见得就是好事.如果你真的想把 jQuery 从前端依赖库中移除掉,我建议你慎重考虑. 首先 jQuery 是一个第三方库.库存在的价值之一在于它能极大地简化开发.一般情况下,第三方库都是由原生语言特性和基础 API 库实现的.因此,理论上来说,任何库第三方库都是可以用原生语言特性代替的,问题在