一直写代码写代码，博客都快荒废了，眼看一月要过完，不能不留下点记忆，嘿嘿，刚研究了下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. 简易封装手机浏览器touch事件

    做手机开发时候,简单想用一些动作,如touchLeft,touchRight等, 使用其他库文件就要加载很多不必要的东西,流量的浪费 今天简单写了封装touch的库,简单的监听一些逻辑 onTouch ...

  2. Xamarin开发IOS系列教程一：安装黑苹果

    经过一番思想挣扎和斗争之后,最终还是选择采用Xamarin来开发跨平台移动应用,好处和优点大家可以搜索其它博文,因为家里面穷加上谈了恋爱,就不买苹果了,开发阶段在Windows上面直接搞定哈,时候不早 ...

  3. IOS缓存管理之PINCache使用

    前言: 今年重点在于公司iOS架构的梳理工作,上周整理了http请求接口管理与解耦,接下来准备整理一下项目中的缓存处理,目前项目中使用的是PINCache,去年加入这个开源框架时并没有对这个框架进行了 ...

  4. [Hadoop] - Win7下提交job到集群上去

    一般我们采用win开发+linux hadoop集群的方式进行开发,使用插件:hadoop-***-eclipse-plugin. 运行程序的时候,我们一般采用run as application或者 ...

  5. jMeter入门实例

    在大家开始看的时候先声明这篇文章不是我写的我只是照着他讲的安装好了,我觉得很有用就想保留下来.分享给大家. 人们对从认识事物都有一个具体到抽象的过程,学习Jmeter也不例外,通过一个实例来进行学习, ...

  6. android学习6——canvas的save,restore作用

    先看如下代码 public class SaveRestoreActivity extends Activity { @Override public void onCreate(Bundle sav ...

  7. 字符串查找算法总结（暴力匹配、KMP 算法、Boyer-Moore 算法和 Sunday 算法）

    字符串匹配是字符串的一种基本操作:给定一个长度为 M 的文本和一个长度为 N 的模式串,在文本中找到一个和该模式相符的子字符串,并返回该字字符串在文本中的位置. KMP 算法,全称是 Knuth-Mo ...

  8. CSS 3 过渡效果之jquery 的fadeIn ,fadeOut

    .div { visibility: hidden; opacity: 0; transition: visibility 0s linear 0.5s,opacity 0.5s linear; } ...

  9. 每天一个linux命令(49)--diff命令

    diff 命令是 Linux 上非常重要的工具,用于比较文件的内容,特别是比较两个版本不同的文件以找到改动的地方.diff 在命令行中打印每一个行的改动.最新版本的diff还支持二进制文件,diff ...

  10. Swift 包管理器命令行使用

    1.swift -version //swift 版本查看 2.swift build //swift工程编译 3.swift package generate-xcodeproj //创建Xcode ...