原生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 ...
随机推荐
- 从壹开始 [ Id4 ] 之二║ 基础知识集合 & 项目搭建一
前言 哈喽大家又见面啦,感觉好久没更新了,这几天看了一本书<解忧杂货铺>,嗯挺好的,推荐一下
- ES6--浅析Promise内部结构
首发地址:sau交流学习社区 一.前言 什么是promise?promsie的核心是什么?promise如何解决回调地狱的?等问题 1.什么是promise?promise是表示异步操作的最终结果:可 ...
- 小步快跑的公司可以最简化操作直接通过log4net将日志写入ElasticSearch
很多小步快跑的公司,开发人员多则3-4个,面对巨大业务压力,日连夜的赶着上线,快速试错,自然就没时间搭建一些基础设施,比如说logCenter,但初期 项目不稳定,bug又多,每次都跑到生产去找日志 ...
- vue安装jquery和配置(不需要在页面引入直接可以使用)
首先在命令行工具上输入 npm install jquery --save-dev 安装完成之后在build文件夹下的webpack.base.conf.js进行配置,在顶部添加:const webp ...
- Django Admin管理入门
Django最强大的部分之一是自动管理界面.它从模型中读取元数据,以提供快速,以模型为中心的界面,受信任的用户可以在其中管理您网站上的内容.管理员的推荐用途仅限于组织的内部管理工具.它不是用于构建整个 ...
- 一起学Android之Menu
概述 菜单(Menu)在Android开发中,是一种常见的用户界面组件,通过使用菜单Api可以给用户提供常见的一致的体验.本文主要讲解三种菜单的相关内容. 菜单的分类 选项菜单(OptionsMenu ...
- 4. VIM 系列 - 认识VIM的缓冲区、窗口、标签页
目录 1. 缓冲区 2. 窗口 3. 标签页 4. 设置一下热键 1. 缓冲区 文件和缓冲区的区别 vim 打开一个文件时,其实是从磁盘中读取文件到内存中,vim的一些操作其实是在操作缓冲区, 当使用 ...
- Java笔试题库之选题题篇【1-70题】
1.下面中哪两个可以在A的子类中使用:( ) class A { protected int method1 (int a, int b) { return 0; } } A. public int ...
- 【Netty】(3)—源码NioEventLoopGroup
netty(3)-源码NioEventLoopGroup 一.概念 NioEventLoopGroup对象可以理解为一个线程池,内部维护了一组线程,每个线程负责处理多个Channel上的事件,而一个C ...
- 【朝花夕拾】Android安全之(一)权限篇
前言 从Android6.0开始,Android系统对权限的处理产生了很大的变化.如果APP运行的设备系统版本为Android6.0或更高,并且target在23或更高,那么danger ...