模拟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链式访问相关推荐

【C语言】函数 ---- 函数的嵌套调用和链式访问、函数的声明和定义、变量的声明和定义、函数递归与迭代、递归时的栈溢出问题
函数一.函数的嵌套调用和链式访问 1.嵌套调用 2.链式访问 2.1strlen()函数 2.2printf()函数二.函数的声明和定义 1.函数声明和定义的介绍 2.函数声明和定义的使用三.变 ...
【C语言函数】 - 库函数、自定义函数、函数参数、函数调用、嵌套调用链式访问、递归与迭代、缓冲区
目录一.函数是什么二.C语言中函数的分类 1.如何学会使用库函数 1.1.strcpy 1.2.memset 2.自定义函数 2.1.与库函数的区别 2.2.写一个函数可以找出两个整数的最大值 2 ...
C语言函数（库函数 · 自定义函数 · 函数参数 · 函数调用 · 嵌套调用链式访问 · 递归）
文章目录: 一.函数是什么? 二.库函数 2.1 为什么要有库函数? 2.2 如何学习库函数? 2.3 我们就以 strcpy( ) 函数,来参照文档自学一下: 2.4 总结: 三.自定义函数 3.1 ...
jquery链式写法 java_jQuery链式操作
两个问题 1.jQuery的链式操作是如何实现的? 2.为什么要用链式操作? 大家认为这两个问题哪个好回答一点呢? 链式操作原理相信百度一下一大把,实际上链式操作仅仅是通过对象上的方法最后 retu ...
仿Jquery链式操作的xml操作类
经常需要对xml文件进行操作,参考了Jquery的链式操作后实现了xmlHelper类. 代码 using System; using System.Data; using System.Config ...
jQuery链式操作[转]
用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...
JQuery链式操作简单的菜单列表
看到这个简单的菜单demo,也是为了再看看JQuery对DOM的操作,一直都记不牢,特别是siblings()这个总是想不起来. 这次再过一遍JQuery,不管简单的还是复杂的demo 还是坚持练习一 ...
函数详解：包括库函数和自定义函数，函数的参数及调用，声明及定义，嵌套使用和链式访问
009_jQuery链式编程
1. jQuery方法链接 1.1. 有一种名为链接(chaining)的技术, 允许我们在相同的元素上运行多条jQuery命令, 一条接着另一条. 1.2. 这样的话, 浏览器就不必多次查找相同的元 ...

模拟jquery链式访问

模拟jquery链式访问相关推荐

最新文章

热门文章