简单的原生js 模拟jquery方法

仓促的模拟敲一下就上传来保存了。

Object.prototype.fadeIn = function(speed) {
var that = this;
setTimeout(function() {
that.style.display = "block"
}, speed)
return that;
}

//原生模拟jq中 fadeOut()方法;
Object.prototype.fadeOut = function(speed) {
var that = this;
setTimeout(function() {
that.style.display = "none"
}, speed)
return that;
}

//原生模拟jq中 hasClass()方法;
Object.prototype.hasClass = function(str) {
var obj = this;
if(str == "" || obj === null || obj.length === 0) {
return false;
}
if(obj.length > 1) {
return obj[0].classList.contains(str);
} else {
return obj.classList.contains(str);
}
}

//原生模拟jq中 addClass()方法;
Object.prototype.addClass = function(className) {
var obj = this;
if(className == "" || obj === null || obj.length === 0) {
return false;
}
if(obj.length > 1) {
[].forEach.call(obj, function(v, i) {
v.classList.add(className);
})
} else {
obj.classList.add(className);
}

return obj;
}

//原生模拟jq中 removeClass()方法;
Object.prototype.removeClass = function(className) {
var obj = this;
if(className == "" || obj === null || obj.length === 0) {
return false;
}
if(obj.length > 1) {
[].forEach.call(obj, function(v, i) {
v.classList.remove(className);
})
} else {
obj.classList.remove(className);
}

return obj;
}

//原生模拟jq中 $符号;
function $(str) {
if(typeof(str) !== "string" && (str === window || str === document)) {
return str;
}
if(str.trim() === "") {
return false;
}
if(str.trim().substr(0, 1) == "#") {
return document.getElementById(str.replace(/#/, ""));
} else {
return [].map.call(document.querySelectorAll(str), function(v, i) {
return v;
})
}
}

有什么差漏或不足,请指正下!

时间: 2024-08-27 03:37:34

简单的原生js 模拟jquery方法的相关文章

原生JS模拟JQuery封装Ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

绑定弹窗事件最好的方法,原生JS和JQuery方法

使用jQuery ui = { $close: $('.close') , $pop: $('.pop') , $topopBtn: $('.topop-btn') , $popbtnArea: $('.popbtn-area') }; // 绑定打开弹窗 ui.$popbtnArea.on('click','.topop-btn',function(){ ui.$pop.eq($(this).index()).show(); }) // 关闭弹窗 ui.$close.on('click',fu

原生JS添加节点方法与JQuery添加节点方法的比较及总结

一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="div2">div2 <span id="span1">span1</span> <span id="span2">span2</span> </div> <div id="div

【JS】怎样用原生JS实现jQuery的ready方法

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window.onload()方法是必须等到页面内包含图片的全部元素载入完成后才干运行. $(document).ready()是DOM结构绘制完成后就运行,不必等到载入完成.   详细一些.能够从下面几方面对照它们的差别: 1.运行时间 window.onload必须等到页面内包含图片的全部元素载入完成后才干运

【JS】如何用原生JS实现jQuery的ready方法

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 总的来说,window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕.   具体一些,可以从以下几方面对比它们的区别: 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行

【前端性能】必须要掌握的原生JS实现JQuery

很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西,考虑通用性必然会导致性能的损耗. 当然,我不是提倡写代码纯用原生JS实现,我记得淘宝玉伯曾经说的一句话“框架能够让我们走的更快,但只有了解原生的JS才能让我们走的更远”. 一些感(fei)想(hua): 1.原生的js,好比全真教的武功,一步步从基础开始(先练气再御剑),很长一段时间内

原生JS与jQuery操作DOM有什么异同点?

本文和大家分享的主要是原生JS与jQuery操作DOM相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 一.创建元素节点 1.1 原生 JS 创建元素节点 document.createElement("p"); 1.2 jQuery 创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 document.createTextNode("Text Content"); 通常创建文

原生js和Jquery操作DOM

原生javascript和jQuery操作DOM的对比总结 目录: DOM元素节点:1)文档节点:2)元素节点:3)属性节点:4)文本节点:5)注释节点 1)创建节点 2)选择(访问)节点 3)操作: 1)节点操作 1)添加节点 2)删除节点 3)修改内容: 1)文本[text] 2)html 3)表单val 4)改变事件 2)CSS操作 3)动画 下文转自:http://www.jb51.net/article/103583.htm 这篇文章主要给大家介绍了原生JS和jQuery操作DOM的一

【第2章第300回】原生JS与jQuery对AJAX的实现

一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).AJAX 不是新的编程语言,而是一种使用现有标准的新方法.AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 就是利用JS来无刷新与后端交互,通过get和post方式把数据发送到后端,或者请求后端的数据,然后根据请求的数据进行改变DOM节点等操作,从而取消掉用form的submit方式一提交就会跳转页面的情况