原生jQuery代码
function myJquery(selector){
if(typeof selector=="string") {
if (selector.charAt(0) == "<" && selector.slice(-1) == ">") {
var ele = selector.slice(1,-1);
this[0] = document.createElement(ele);
this.length = 1;
} else {
var all=document.querySelectorAll(selector);
for (var i = 0; i < all.length; i++) {
this[i] = all[i];
}
this.length = all.length;
}
}else if(typeof selector=="undefined"){
return this;
}else if(typeof selector=="function"){
this.ready(selector);
}else if(selector.nodeType==1){
this[0]=selector;
this.length=1;
}
}
myJquery.prototype={
each:function(callback){
for (var i=0;i<this.length;i++){
callback(i,this[i]);
}
},
html:function(val){
this.each(function(index,obj){
obj.innerHTML=val
});
return this;
},
css:function(attr,val){
this.each(function(index,obj){
if (typeof attr=="object"){
for (var i in attr){
if (i=="width"||i=="height"||i=="margin"||i=="fontSize"){
obj.style[i]=parseInt(attr[i])+"px";
}
obj.style[i]=attr[i];
}
}else{
obj.style[attr]=val;
}
})
return this;
},
ready:function(callback){
document.addEventListener("DOMContentLoaded",function(){
callback();
})
},
click:function(callback){
this.each(function(index,obj){
obj.onclick=function(){
callback.call(obj);
}
})
return this;
},
appendTo:function(dom){
if (typeof dom=="string"){
var all=document.querySelectorAll(dom)
var ele=this[0]
for (var i=0;i<all.length;i++){
this[i]=ele.cloneNode(true)
all[i].appendChild(this[i])
this.length=all.length
}
}else{
dom.appendChild(this[0])
}
// document.querySelector(dom).appendChild(this[0]);
return this;
}
}
function $(selector){
return new myJquery(selector);
}
原生jQuery代码的更多相关文章
- 原生 JavaScript 代码和Jquery实现对比
下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能.如果你打算自己开发一个小的基础框架,可以好好参考一下这些代码的实现. 本文转载:http ...
- JavaScript之事件委托(附原生js和jQuery代码)
事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...
- 如何书写高质量的jQuery代码
想必大家对于jQuery这个最流行的javascript类库都不陌生,而且只要是前端开发人员肯定或多或少的使用或者接触过,在今天的这篇文章中,参考了一些资料及实际使用效率,将介绍一些书写高质量jQue ...
- 如何编写高效的jQuery代码
jQuery的编写原则: 一.不要过度使用jQuery 1. jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大.所以有原生方法可以使用的场 ...
- 如何书写高质量的jQuery代码(转)
想必大家对于jQuery这个最流行的javascript类库都不陌 生,而且只要是前端开发人员肯定或多或少的使用或者接触过,在今天的这篇文章中,参考了一些资料及实际使用效率,将介绍一些书写高质量jQu ...
- 怎么书写高质量jQuery代码
众所周知,jQuery现在已经非常流行,百度新首页中也已经开始使用jQuery,今天总结下怎么书写更好的jQuery代码使jQuery代码更好.更快的执行,希望本篇jQuery教程一改大家以前不合理的 ...
- js原生 + jQuery实现页面滚动字幕
js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...
- 编写高效的jQuery代码
http://www.css88.com/jqapi-1.9/ 编写高效的jQuery代码 最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升.本文我计划总结一些网上 ...
- 记录下项目中常用到的JavaScript/JQuery代码二(大量实例)
记录下项目中常用到的JavaScript/JQuery代码一(大量实例) 1.input输入框监听变化 <input type="text" style="widt ...
随机推荐
- Mybatis之旅第六篇-关联查询
一.引言 通过动态SQL我们可以进行复杂SQL的编写,但之前的例子都是单表查询,在实际开发中,当然不可能都是单表,很多时候我们需要进行关联多表查询(有些公司为了性能还是尽量的使用单表查询),表与表之间 ...
- .net core 程序退出事件
平滑关闭,关闭事件 //捕获Ctrl+C事件 Console.CancelKeyPress += Console_CancelKeyPress; //进程退出事件 AppDomain.CurrentD ...
- C#净化版WebApi框架
前言 我们都知道WebApi是依赖于Asp.Net MVC的HttpRouteCollection进行路由 . 但WebApi和MVC之间是没有依赖关系的, WebApi的基类ApiControlle ...
- 网页设计(CSS&JS)
实验一 简单静态网页设计 一. 实验目的: 复习使用记事本编辑网页的方法. 熟悉不同表单控件类型的应用. 练习使用记事本在网页中添加表单与表单元素. 二. 实验内容: 根据提供的素材设计在线调查问卷 ...
- SAP MM 标准采购组织的分配对于寄售采购订单收货的影响
SAP MM 标准采购组织的分配对于寄售采购订单收货的影响 PO 4100004022 是一个寄售的采购订单, 采购组织是CSAS, 工厂代码SZSP.采购信息记录也是有的, MIGO试图对该采购订单 ...
- Android远程桌面助手(B1413)
ARDC(B1413) 1.解决Android9显示黑屏问题;2.解决向导菜单显示异常问题;3.解决部分手机无法正常连接的问题;4.切换到WiFi连接时,增加显示NetworkID;5.更新图片压缩的 ...
- centos7下报错: import requests ImportError: No module named requests
在网上扒了一个python脚本,在centos7上执行的时候报错: import requestsImportError: No module named requests 原因是:requests是 ...
- 深入理解 call,apply 和 bind
在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这 ...
- 【工具篇】Sublime Text 2 安装汉化破解、插件包安装教程详解
Sublime Text概述: Sublime Text是一个代码编辑器,也是HTML和散文先进的文本编辑器. 漂亮的用户界面和非凡的功能,例如:迷你地图,多选择,Python插件,代码段等等. 完全 ...
- Ocelot.JwtAuthorize:一个基于网关的Jwt验证包
Ocelot作为基于.net core的API方关,有一个功能是统一验证,它的作用是把没有访问权限的请求挡在API网关外面,而不是到达API网关事端的API时才去验证:之前我有一篇博文https:// ...