jQuery核心技术-----------------------------------------------------（）
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="daiqingyun">
<title>JQuery的无new创建以及链式调用</title>
</head> <body>
<div class="demo">
<span>哈哈</span>
</div>
<div class="demo">哈哈哈</div>
<button type="button" name="button" id="btn">点击</button>
<script type="text/javascript">
(function(window, undefined) {
var jQuery = function(selector, context) {
//返回一个__proto__指向jQuery.fn.init.prototype的实例。
return new jQuery.fn.init(selector, context);
}
//隐藏prototype
jQuery.fn = jQuery.prototype = {
init: function(selector, context) {
var nodeList = document.querySelectorAll(selector);
this.length = nodeList.length;
for(var i = 0; i < this.length; i++) {
this[i] = nodeList[i];
}
return this;
},
//遍历器
each: function(fn) {
var length = this.length;
for(var i = 0; i < length; i++) {
fn.call(this[i], i, this[i]);
}
return this;
},
hide: function() {
this.each(function() {
this.style.display = 'none';
});
return this;
},
red: function() {
this.each(function() {
this.style.backgroundColor = "red";
});
return this;
},
font: function() {
this.each(function() {
this.style.color = "white";
});
return this;
}
}
//将实例的__proto__指向jQuery.prototype
jQuery.fn.init.prototype = jQuery.prototype;
window.$ = jQuery;
})(window);
$('#btn')[0].onclick = function() {
$('div').red().font();
}
</script>
</body> </html>
jQuery核心技术-----------------------------------------------------（）的更多相关文章
- jQuery高级编程
jquery高级编程1.jquery入门2.Javascript基础3.jQuery核心技术 3.1 jQuery脚本的结构 3.2 非侵扰事JavaScript 3.3 jQuery框架的结构 3. ...
- jquery高级编程学习
jquery高级编程 第1章.jQuery入门 类型检查 对象 类型检查表达式 String typeof object === "string" Number typeof ob ...
- javaWeb核心技术第五篇之jQuery
- 概述 - jQuery是一个优秀的javascript框架(js类库),兼容css3和各大浏览器,提供dom,events,animate,ajax等简易的操作.并且jQuery有非常丰富的插件, ...
- 堆糖瀑布流完整解决方案(jQuery)
2010年堆糖创办以来,网站界面经历过3-5次重大改版,logo也曾更换过两次,早期蓝红相间三个圈的logo恐怕很少有人记得了.与此同时,前端 js 框架也在默默的更新换代.最早堆糖上线时,js 采用 ...
- 大量Javascript/JQuery学习教程电子书合集
［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人 不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pd ...
- ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
- 【推荐分享】大量JavaScript/jQuery电子书籍教程pdf合集下载
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
- 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
随机推荐
- 前端js 判断输入的必须是数字,判断金钱
//输入的必须是数字 $(".xzjl").on("keyup", ".num", function () { var v = $(this ...
- 【洛谷P1196】银河英雄传说
有特殊意义的一道题-- 加权并查集,我们增加cnt.deep数组 分别表示i点所在链共有多少个点,以及路径压缩之前点i在链中的深度 每次合并时直接修改cnt,路径压缩的同时更新deep 因为每次查询之 ...
- 根据用户IP获得所在城市
运行以下代码即可<html> <head> <meta http-equiv="Content-Type" content="text/ht ...
- SIGGRAPH2016【转】
本文摘自:http://blog.selfshadow.com/ Open Access SIGGRAPH 2016 Conference Content (for a limited time) R ...
- Python Charts库的使用
博客园格式不太好看,可以去本人CSDN博客 http://blog.csdn.net/ashic/article/details/52598664 http://nbviewer.jupyter.or ...
- Python基于pandas的数据处理（一）
import pandas as pd, numpy as np dates = pd.date_range(', periods=6) df = pd.DataFrame(np.random.ran ...
- xshell传输文件到Centos
Reference: [1] http://www.myhack58.com/Article/sort099/sort0102/2015/61154.htm [2] http://www.cnblog ...
- oracle 读书笔记
1 动态sql即拼接字符串的sql,使用变量代替具体值,10万条语句可以被hash陈一个SQL_ID,可以只解析一次 for i in 1..100000 loop execute immediate ...
- 网上搜集了点资料，学web的人互相分享共同进步吧（php编码的好习惯必须养成）
网上搜集了点资料,学web的人互相分享共同进步吧 一.优秀的代码应该是什么样的? 优秀的PHP代码应该是结构化的.大段的代码应该被分割整理成一个个函数或方法,而那些不起眼的小段代码则应该加上注释,以便 ...
- 混合模式程序集是针对“v2.0.50727”版的运行时生成的，在没有配置其他信息的情况下，无法在 4.0 运行时中加载该程序集。
在调用部分三方库时,由于三方库是基于.NET2.0的.所以在4.0的程序中无法加载.解决方案如下: 在配置文件中添加以下配置 <?xml version="1.0"?> ...