一直写代码写代码，博客都快荒废了，眼看一月要过完，不能不留下点记忆，嘿嘿，刚研究了下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. [Android] "Failed to find Java version for 'C:\Windows\system32\java.exe"

    Impossible to install SDK r17 on win 7 x64 "Failed to find Java version for 'C:\Windows\system3 ...

  2. devexpress表格控件gridcontrol特殊应用（一）——实现禁用特定行（附源代码）

    一些特殊的项目中会存在一些特殊需求,如需要禁用特定行.这时候gridcontrol的一般属性是实现不了的,就需要做一些更改.这时候你就需要去devexpress官网中找寻些资料(官网https://w ...

  3. BZOJ 2424: [HAOI2010]订货（费用流）

    裸的费用流了= =从源点向每个点连费用为di，从汇点向每个点连流量为ui，每个点向下一个点连费用为m，流量为s的边就行了 CODE： #include<cstdio>#include< ...

  4. ios常用资源网址链接

    M了个J博客 http://www.cnblogs.com/mjios/tag/objective-c/  Cocoa China http://www.cocoachina.com  git网 ht ...

  5. 最常用的UML工具介绍

    最常用的UML工具介绍 1.Rational Rose.大名鼎鼎,史上最有名.最无可替代的UML产品,以至于,大多数将之等同于UML工具,正如将可乐等同于可口可乐.需要指出的是,自从 Rational ...

  6. 每天一个linux命令(32)--/etc/group文件详解

    Linux /etc/group 文件与 /etc/passwd 和/etc/shadow 文件都是有关于系统管理员对用户和用户组管理时相关的文件.Linux /etc/group 文件是有关于系统管 ...

  7. HP DL388 gen9服务器安装RHEL 6.5系统

    测试: 1.默认UEFI模式,F10下智能安装,如果选择自己划分分区,进入该选项后会看到系统自动就帮我们创建了一个/efi 的500M分区,一开始我就是被这个分区坑了的,要知道服务每次重启都要等很久的 ...

  8. ABP入门系列（13）——Redis缓存用起来

    ABP入门系列目录--学习Abp框架之实操演练 源码路径:Github-LearningMpaAbp 1. 引言 创建任务时我们需要指定分配给谁,Demo中我们使用一个下拉列表用来显示当前系统的所有用 ...

  9. Eclipse插件的各种安装方法

    这篇文章我们总结下安装Eclipse的各种方法,首先一下的步骤都是在版本为“Kepler Service Release 1”的Eclipse下完成的.如果你的Eclipse版本不是"Kep ...

  10. <context:property-placeholder/>元素

    <context:property-placeholder/>元素 PropertyPlaceholderConfigurer实现了BeanFactoryPostProcessor接口,它 ...