模拟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链式访问的更多相关文章
- jQuery链式操作
讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...
- jQuery链式语法演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQUERY链式操作实例分析
本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...
- ruby中的链式访问和方法嵌套
先看一道题,这道题是codewars上的一道题,我很早就看到了,但是不会写.等到又看到这道题的时候,我刚看完元编程那本书,觉得是可以搞定它的时候了.废话不多说,先看这道题,题目最开始是为JavaScr ...
- jQuery链式操作[转]
用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...
- Jquery链式编程及Index()详解
Jquery中的方法基本 上都可以返回一个Jquery对象, 如: <body> <div class="divcontent"> <p>中国& ...
- jQuery——链式编程与隐式迭代
链式编程 1.原理:return this; 2.通常情况下,只有设置操作才能把链式编程延续下去.因为获取操作的时候,会返回获取到的相应的值,无法返回 this. 3.end():结束当前链最近的一次 ...
- jQuery链式操作如何返回上一级DOM
有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...
- jQuery链式编程
链式编程 多行代码合并成一行代码,前提要认清此行代码返回的是不是对象.是对象才能进行链式编程 .html(‘val’).text(‘val’).css()链式编程,隐式迭代 链式编程注意:$(‘div ...
随机推荐
- [MongoDB] - Shell基本命令
在这里,我简单的记录一下MongoDB在shell客户端中使用的基本命令,比如创建/显示数据库,创建集合,删除集合等. 一.启动MongoDB并连接shell客户端 使用mongod.exe和mong ...
- JavaScript中国象棋程序（7） - 置换表
"JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第2节. 这一系列共有9个部分: 0.JavaScript中国象 ...
- 学习git的使用--在当地的简单命令--01
<----------git安装完成后操作-----------------> git config --global user.name "scy"添加用户名git ...
- 【转】搜索引擎选择： Elasticsearch与Solr
原文地址:http://i.zhcy.tk/blog/elasticsearchyu-solr/ Elasticsearch简介 Elasticsearch是一个实时的分布式搜索和分析引擎.它可以帮助 ...
- .Net小白的第一篇博客
2016年8月8日,经过了一周的纠结.我决定放弃了,原来学了六年并且工作两年的学前教育,走上了开发的道路.我认为生活就应该这样,就应该充满挑战,而不是每天在重复相同的工作!作为插班生的我,于2016年 ...
- UI培训自学能学好吗
近年来UI设计师愈来愈红,成为行业热门,越来越多的人开始专注UI培训,也有一部分人在考虑,培训班一般价格不菲,我自学怎么样呢? UI设计是指人机交互过程中的一个界面设计,常用到的有 ps和ai两个工具 ...
- Spring框架---IOC装配Bean
IOC装配Bean (1)Spring框架Bean实例化的方式提供了三种方式实例化Bean 构造方法实例化(默认无参数,用的最多) 静态工厂实例化 实例工厂实例化 下面先写这三种方法的applicat ...
- python性能优化
注意:本文除非特殊指明,”python“都是代表CPython,即C语言实现的标准python,且本文所讨论的是版本为2.7的CPython. python为什么性能差: 当我们提到一门编程语言的 ...
- http-server 命令行
安装 (全局安装加 -g) : npm install http-server (npm install --global http-server) 在站点目录下开启命令行输入 http server ...
- .NET 发布网站步骤
本文章分为三个部分: web网站发布.IIS6 安装方法.ASP.NET v4.0 安装方法 一.web网站发布 1.打开 Visual Studio 2013 编译环境 2.在其解决方案上右击弹出重 ...