<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .redbg{

                background: pink;

            }

        </style>

        <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <h1>helloworld</h1>

        <h1>helloworld</h1>

        <script type="text/javascript">

//            document.querySelector('h1').css({backgroud:'pink'})

//

//            $('h1').style.background = 'pink'

//            var $h1 = $('h1')

//            var h1 = document.querySelector('h1')

//            $('h1').addClass('tt').html('hello').addClass('yy')

            //通过this，将上一层对象返回出去，那么将可以实现链式的函数调用

            (function(w){

                w.laochen = function(selector){

                    domObj = document.querySelectorAll(selector)

                    domObj.__proto__.addClass = function(addName){

//                        console.log(this)

                        this.forEach(function(a){

                            a.className = a.className + ' ' + addName

                        })

                        return this

//                    }

//                    domObj.__proto__.html = function(htmlContent){

//                        if(!htmlContent){

//                            return this[0].innerHTML

//                        }else{

//                            this.forEach(function(item){

//                                item.innerHTML = htmlContent

//                            })

//                            return this

//                        }

//                    }

                    return domObj

                }

//                w.$ = w.laochen

//

//            })(window)

        </script>

    </body>

</html>

jquery链式原理.html的更多相关文章

  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. jQuery链式操作[转]

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

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

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

  6. 模拟jquery链式访问

    一直写代码写代码,博客都快荒废了,眼看一月要过完,不能不留下点记忆,嘿嘿,刚研究了下jquery的链式访问,这么好用的技能我赶紧get了下,研究后略微修改,模拟一个简单的链式访问,下面这段代码支持修改 ...

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

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

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

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

  9. jQuery链式编程

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

随机推荐

  1. windows下虚拟环境virtualenv的简单操作

    使用豆瓣源安装(推荐) [推荐] python3.X安装和pip安装方法 pip install -i https://pypi.douban.com/simple XXX 1.安装virtualen ...

  2. Scrapy项目 - 源码工程 - 实现豆瓣 Top250 电影信息爬取的爬虫设计

    一.项目目录结构 spiders文件夹内包含doubanSpider.py文件,对于项目的构建以及结构逻辑,详见环境搭建篇. 二.项目源码 1.doubanSpider.py # -*- coding ...

  3. Cisco路由器基本使用

    作者:小啊博 QQ:762641008 转载请声明URL:https://www.cnblogs.com/-bobo/ 一.路由器命令行使用 router>                    ...

  4. 国庆佳节第四天，谈谈我月收入增加 4K 的故事

    01.起承 在我下定决心改变的这将近 1 年的时间里,遇到了很多很多有故事的人,以及有趣的事.自我的认知改变特别大!尤其是收入,比去年同时期增加了 4K. 4K,可能也就买 100 斤猪肉.但是对于身 ...

  5. python安装及pyCharm使用

    1.官网下载Python https://www.python.org/downloads/

  6. Java基础学习(七) - 异常处理

    1.异常概念 异常指的是程序在执行过程中出现的非正常的情况,导致JVM的非正常停止.在Java中,异常是一个类,产生异常就是创建异常对象并抛出一个异常对象. 异常指的并不是语法错误,语法错误,编译不会 ...

  7. WampServer配置可局域网访问站点

    一 WampServer3.1.7版本 二 需求:项目开发阶段,服务器还未购买,前端需要调用接口进行测试,于是想到了在本地搭设一个站点,可以局域网内访问 三 先为这个项目单独在本地设置一个端口,比如我 ...

  8. SSL证书自签名使用及监控

    前言 证书简介 信息安全越来越受重视,HTTPS已经相当普及,要让我们的HTTP接口支持HTPPS,只需要一个SSL证书就可以啦 全称公钥证书(Public-Key Certificate, PKC) ...

  9. 微信小程序前端样式WXSS书写

    微信小程序前端样式WXSS书写 一. WXSS的简单介绍 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. 与 CSS 相比,WXSS 扩展的特性有: ...

  10. [USACO10NOV]奶牛的图片Cow Photographs

    题目描述 Farmer John希望给他的N(1<=N<=100,000)只奶牛拍照片,这样他就可以向他的朋友炫耀他的奶牛. 这N只奶牛被标号为1..N. 在照相的那一天,奶牛们排成了一排 ...