一直写代码写代码,博客都快荒废了,眼看一月要过完,不能不留下点记忆,嘿嘿,刚研究了下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链式访问的更多相关文章

  1. jQuery链式操作

    讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...

  2. jQuery链式语法演示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. JQUERY链式操作实例分析

    本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...

  4. ruby中的链式访问和方法嵌套

    先看一道题,这道题是codewars上的一道题,我很早就看到了,但是不会写.等到又看到这道题的时候,我刚看完元编程那本书,觉得是可以搞定它的时候了.废话不多说,先看这道题,题目最开始是为JavaScr ...

  5. jQuery链式操作[转]

    用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...

  6. Jquery链式编程及Index()详解

    Jquery中的方法基本 上都可以返回一个Jquery对象, 如: <body> <div class="divcontent"> <p>中国& ...

  7. jQuery——链式编程与隐式迭代

    链式编程 1.原理:return this; 2.通常情况下,只有设置操作才能把链式编程延续下去.因为获取操作的时候,会返回获取到的相应的值,无法返回 this. 3.end():结束当前链最近的一次 ...

  8. jQuery链式操作如何返回上一级DOM

    有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...

  9. jQuery链式编程

    链式编程 多行代码合并成一行代码,前提要认清此行代码返回的是不是对象.是对象才能进行链式编程 .html(‘val’).text(‘val’).css()链式编程,隐式迭代 链式编程注意:$(‘div ...

随机推荐

  1. 通过配置http拦截器,来进行ajax请求验证用户登录的页面跳转

    在.NET中验证用户是否登录或者是否过期,若需要登录时则将请求转向至登录页面. 这个流程在进行页面请求时是没问题的,能正确进行页面跳转. 然而在使用xmlhttprequest时,或者jq的getJs ...

  2. Cocos引擎开发者指南(1-5)

    Cocos引擎开发者指南 英文原版:http://www.cocos2d-x.org/docs/programmers-guide/1/ 中午翻译:http://www.cocos.com/doc/t ...

  3. 【leetcode】Swap Nodes in Pairs (middle)

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  4. hdu 5396 Expression(区间dp)

    Problem Description Teacher Mai has n numbers a1,a2,⋯,anand n−1 operators("+", "-&quo ...

  5. JQ表格隔行换色

    <style type="text/css"> html, body { margin: 0; padding: 0; font-size: 15px; font-fa ...

  6. [模板]KMP算法

    昨天晚上一直在调KMP(模板传送门),因为先学了hash[关于hash的内容会在随后进行更(gu)新(gu)]于是想从1开始读...结果写出来之后一直死循环,最后我还是改回从0读入字符串了. [预先定 ...

  7. IOS语法

    2017-07-15 NSDictionary里要用到的类型转换   [NSNumber numberWithInt: 89] 2017-12-10 定义一个Block的写法 typedef void ...

  8. python知识合集

    python安装包管理  http://www.cnblogs.com/wilber2013/p/4769467.html python pip安装源管理:pypi官网的源不太好,网速慢,容易造成包下 ...

  9. CentOS 7 上安装(LAMP)服务 Linux,Apache,MySQL,PHP

    介绍 LAMP 是现在非常流行的 WEB 环境, 是 Linux,Apache,MySQL,PHP 的缩写.数据存储在 MySQL 中,动态内容由 PHP 处理. 在本指南中,我们将演示如何在 Cen ...

  10. Django之前端插件定制之表头

    什么是插件? 插件只是辅助,是开发过程中的一个阶段.一般项目一期会用各种插件,迅速将功能.界面搭出来,二期时就改成自己的代码了.大点的公司都有自己的js库,自己开发类似jquery的库. 那接下来就写 ...