模拟jquery链式访问
一直写代码写代码，博客都快荒废了，眼看一月要过完，不能不留下点记忆，嘿嘿，刚研究了下jquery的链式访问，这么好用的技能我赶紧get了下，研究后略微修改，模拟一个简单的链式访问，下面这段代码支持修改css，获取css属性值，显示和隐藏等小功能，打算抽空把自己的js小框架全改成链式访问。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="wmlink.js"></script>
<style type="text/css">
#box {
color: red;
}
</style>
</head>
<body>
<div id="box">模拟链式访问</div>
<div class="box">模拟链式访问</div>
<div class="box">模拟链式访问</div>
<div class="box">模拟链式访问</div> <script type="text/javascript">
(function(win){
var WM = function(selector) {
this.element = [];//接收dom元素
return this.all(selector);// 返回id的dom元素
}
var $ = function(selector) {
return new WM(selector);
}
WM.prototype = {
all:function(selector) {
this.element = document.querySelectorAll(selector);
return this;
},
hide: function(){
for (var i = 0; i < this.element.length; i++) {
this.element[i].style.display = 'none';
}
return this;
},
show: function(){
for (var i = 0; i < this.element.length; i++) {
this.element[i].style.display = 'block';
}
return this;
},
css: function(key, value) {
var doms = this.element;
// 根据参数个数实现方法重载
if (doms.length) {
for (var i = 0; i < doms.length; i++) {
if (value) {
this.setStyle(doms[i], key, value);
} else {
return this.getStyle(doms[0], key);
}
}
} else {
if (value) { this.setStyle(doms, key, value);
} else {
return this.getStyle(doms, key);
}
};
},
getStyle: function(dom, key) {
if (dom.currentStyle) {
return dom.currentStyle[key];
} else {
return window.getComputedStyle(dom, null)[key];
}
},
setStyle: function(dom, key, value) {
dom.style[key] = value;
},
}
var demo =$('#box').css('color'); // 通过对象的引用调用
console.log(demo);// 获得属性值
$('.box').css('color','yellow')
})(window)
</script>
</body>
</html>
模拟jquery链式访问的更多相关文章
- jQuery链式操作
讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...
- jQuery链式语法演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQUERY链式操作实例分析
本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...
- ruby中的链式访问和方法嵌套
先看一道题,这道题是codewars上的一道题,我很早就看到了,但是不会写.等到又看到这道题的时候,我刚看完元编程那本书,觉得是可以搞定它的时候了.废话不多说,先看这道题,题目最开始是为JavaScr ...
- jQuery链式操作[转]
用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...
- Jquery链式编程及Index()详解
Jquery中的方法基本 上都可以返回一个Jquery对象, 如: <body> <div class="divcontent"> <p>中国& ...
- jQuery——链式编程与隐式迭代
链式编程 1.原理:return this; 2.通常情况下,只有设置操作才能把链式编程延续下去.因为获取操作的时候,会返回获取到的相应的值,无法返回 this. 3.end():结束当前链最近的一次 ...
- jQuery链式操作如何返回上一级DOM
有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...
- jQuery链式编程
链式编程 多行代码合并成一行代码,前提要认清此行代码返回的是不是对象.是对象才能进行链式编程 .html(‘val’).text(‘val’).css()链式编程,隐式迭代 链式编程注意:$(‘div ...
随机推荐
- ReentrantLock实现原理
以下是本篇文章的大纲 1 synchronized和lock 1.1 synchronized的局限性 1.2 Lock简介 2 AQS 3 lock()与unlock()实现原理 3.1 基础知识 ...
- ABP文档 - Quartz 集成
文档目录 本节内容: 简介 安装 创建工作 调度工作 更多 简介 Quartz 是一个功能完整的开源工作调度系统,可用于最小的应用到一个大型的企业系统.Abp.Quartz 包简单地把Quartz集成 ...
- Asp.Net Core 项目实战之权限管理系统（8） 功能菜单的动态加载
0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...
- HTML5发展史
2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿. 在互联网的早期,对用户而言,能打开浏览器接入到互联网世界就是一个神奇的事情,但互联网发展到200 ...
- python3 annotations
引文与描述: Adding arbitrary metadata annotations to Python functions and variables 说说我的体会: 类似编译的作用,能够帮助你 ...
- show_you_my_codes 001
program 001 第 0001 题:做为 Apple Store App 独立开发者,你要搞限时促销,为你的应用生成激活码(或者优惠券), 使用 Python 如何生成 200 个激活码(或者优 ...
- cura-engine学习（1）
cura-engine为开源3D打印软件cura的核心引擎代码,详细介绍参看github主页.现在学习的是一个简单版的https://github.com/repetier/CuraEngine,最新 ...
- Kettle 5.0源码编译
下载源码请参考上一篇博文Kettle4.4.2源码分析 Kettle 5.0以前的库文件通过ant管理,5.0+的库文件通过ant+ivy管理.Eclipse一般都是安装ant插件,不安装ivy插件, ...
- JavaScript基础——兼容性、错误处理
JavaScript基础-错误处理Throw.Try.Catch try语句执行可能出错的代码 catch语句处理捕捉到的错误 throw语句创建自定义错误语句 发生的常见的错误类型 可能是语法错误, ...
- 移动OA日程支持费用及评论
业务介绍 AIO7系统最新更新版本在移动OA的日程管理进行改进,增加了创建费用的功能,且在日程批注上也可查看:在日程个人界面和批注界面都支持了评论功能.移动OA上日程对费用及评论的支持,方便用户外出时 ...