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去做前端,因为它太好用了,我们以前做的东西大 ...
随机推荐
- ArcGIS Server 10 Java 版的Rest服务手动配置方法
Java版的Manager中发布的服务默认只发布了该服务的SOAP接口,而REST接口需要用户在信息服务器,如Tomcat. Apache.WebLogic等中手工配置.由于在Java版的Server ...
- 使用dom4j创建和解析xml文件
使用dom4j创建和解析xml文件 在项目开发中,我们经常会遇到xml文件的创建和解析从别人接口得到的xml文件,而我们最常使用的组件是dom4j. 下面我就以代码来讲解一下如何使用dom4j来创建x ...
- shell循环
for循环 for循环一般格式为: for 变量 in 列表 do command1 command2 ... commandN done 列表是一组值(数字.字符串等)组成的序列,每个值通过空格分隔 ...
- [LeetCode] 423 Reconstruct Original Digits from English
Given a non-empty string containing an out-of-order English representation of digits 0-9, output the ...
- mentohust 你让我如何说你是好呢？
最近换了ubuntu系统结果热了不少的麻烦, 借此机会唠叨一下, 首先是你这个ubuntu16.4 你这个bug 太让人郁闷了吧,或许主要是应该怪我菜,装个看家的软件eclipse.还热除了一堆的麻 ...
- 安卓模拟器的报错This AVD's configuration is missing a kernel file!!
安卓模拟器的报错: 可能的原因是target设置问题:
- LightHttpd源码分析
源码:https://github.com/EZLippi/Tinyhttpd 要在Linux中编译,无需像代码注释所说那样: /* This program compiles for Sparc S ...
- 使用Statement操作数据库
i import java.sql.Connection;import java.sql.DriverManager;import java.sql.ResultSet;import java.sql ...
- [置顶]PADS PCB功能使用技巧系列之NO.006- 如何实现OrCAD与PADS Layout同步？
很多同仁都喜欢用OrCAD画原理图,而PCB Layout则用PADS/PowerPCB,这两者被有些人誉为“黄金组合”,但由于两者并非一套软件,因此如何实现同步亦是需要急待解决的问题... (未完待 ...
- TreeMap源码分析
MapClassDiagram