模拟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 ...
随机推荐
- PrintWriter用法简析
public class PrintWriterextends Writer 向文本输出流打印对象的格式化表示形式.此类实现在 PrintStream 中的所有 print 方法.它不包含用于写入原始 ...
- phpcms基础知识和配置
一.设置界面 1.站点设置:相当于服务器上的站点 (1)站点修改:“关键词”和“描述”的修改,便于网络优化和搜索引擎对本网站的搜索. (2)模板的修改,可以自己加模板,引用自己模板 2.基本设置:所有 ...
- Javascript—②函数
新手Perfect教程之Javascript②教程-函数 前言:上回我们是从hello world开始的,本期将会讲"函数" 在学自定义函数之前,先了解几个已经定义好的函数: 1 ...
- BZOJ 3083: 遥远的国度(树链剖分+DFS序)
可以很显而易见的看出，修改就是树链剖分，而询问就是在dfs出的线段树里查询最小值，但由于这道题会修改根节点，所以在查询的时候需判断x是否为root的祖先，如果不是就直接做，是的话应该查询从1-st[y ...
- 每天一个linux命令(44)--ss命令
ss 是 socket statistics 的缩写.顾名思义,ss 命令可以用来获取socket 统计信息,它可以显示和netstat 类似的内容.但 ss 的优势在于它能够显示更多更详细的有关TC ...
- JavaScript代码规范和性能整理
性能 Js在性能方面有多要注意的地方: 避免全局查找 Js性能优化最重要的就是注意全局查找,因为作用域的查找是先找局部作用域在没有找到之后在去上一级作用域查找直到全局作用域,所以全局作用域查找的性能消 ...
- Cesium原理篇：3D Tiles（1）渲染调度
Cesium在2016年3月份左右推出3D Tiles数据规范,在glTF基础上提供了LOD能力,定位就是Web环境下海量三维模型数据.虽然目前3D Tiles还是Beta阶段,有不少硬伤,但3D T ...
- perl open函数
open(DATA, "<file.txt"); # <只读打开file.txt ,DATA作为句柄 open(DATA, ">file.txt&quo ...
- 关于hession 随笔
今天遇到一个问题,纠结了很久也没有解决,情况是这样的, 我这个项目使用的是 hession 通信.我做的业务很简单,只是新加了一个接口 ,这 个接口是广告那一块的,数据库在之前的项目里面都没有使用到 ...
- 《Shell脚本学习指南》学习笔记之变量、判断和流程控制
变量 定义变量 可以使用export和readonly来设置变量,export用于修改或打印环境变量,readonly则使得变量不得修改.语法: export name[=word] ... read ...