<!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核心技术-----------------------------------------------------()的更多相关文章

  1. jQuery高级编程

    jquery高级编程1.jquery入门2.Javascript基础3.jQuery核心技术 3.1 jQuery脚本的结构 3.2 非侵扰事JavaScript 3.3 jQuery框架的结构 3. ...

  2. jquery高级编程学习

    jquery高级编程 第1章.jQuery入门 类型检查 对象 类型检查表达式 String typeof object === "string" Number typeof ob ...

  3. javaWeb核心技术第五篇之jQuery

    - 概述 - jQuery是一个优秀的javascript框架(js类库),兼容css3和各大浏览器,提供dom,events,animate,ajax等简易的操作.并且jQuery有非常丰富的插件, ...

  4. 堆糖瀑布流完整解决方案(jQuery)

    2010年堆糖创办以来,网站界面经历过3-5次重大改版,logo也曾更换过两次,早期蓝红相间三个圈的logo恐怕很少有人记得了.与此同时,前端 js 框架也在默默的更新换代.最早堆糖上线时,js 采用 ...

  5. 大量Javascript/JQuery学习教程电子书合集

    [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  6. [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  7. 【推荐分享】大量JavaScript/jQuery电子书籍教程pdf合集下载

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  8. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  9. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

随机推荐

  1. 使用Application Insights 做分析

    Application Insights on Windows Desktop apps, services and worker roles : https://azure.microsoft.co ...

  2. PBX 评测二

    //由于诸事繁多,结果评测一拖再拖. 博客园的优化还行啊,PBX220搜索, 第一页,第四个就是上一篇的评测文章. 配置没有什么说的(按照说明/还有这篇无线迷你IPPBX-PBX220). 以下是在公 ...

  3. Codevs 1021 (玛丽卡)

    题目描述 Description 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们 ...

  4. Python垃圾回收机制

    引用计数Python默认的垃圾收集机制是“引用计数”,每个对象维护了一个ob_ref字段.它的优点是机制简单,当新的引用指向该对象时,引用计数 引用计数 Python默认的垃圾收集机制是“引用计数”, ...

  5. 联想Phab2 Pro Tango手机测评

    评分:8分 优点:创新的AR应用手机,可以当成一个游戏机了 缺点:还没找到 评语:打开新世界的大门,现实与虚拟结合,枯燥的生活添加一点幻想,走进童话般的梦幻王国,丰富多彩 包装 外形 打开主界面 最主 ...

  6. SQL操作大全

    下列语句部分是Mssql语句,不可以在access中使用.   SQL分类:  DDL-数据定义语言(CREATE,ALTER,DROP,DECLARE)  DML-数据操纵语言(SELECT,DEL ...

  7. hdu 2896 AC自动机

    // hdu 2896 AC自动机 // // 题目大意: // // 给你n个短串,然后给你q串长字符串,要求每个长字符串中 // 是否出现短串,出现的短串各是什么 // // 解题思路: // / ...

  8. 使用Maven自动部署Tomcat 6和Tomcat 7下Web应用

    使用Maven自动部署Tomcat 6和Tomcat 7下Web应用 开启Tomcat远程管理权限 在tomcat的config目录下的tomcat-users.xml文件, <role rol ...

  9. Android中Button、ImageButton、ImageView背景设置区别

    Button与ImageButton实际两者无关,Button继承自TextView,不支持src;ImageButton继承自ImageView.同一张图片在不设置大小,默认显示时,使用Button ...

  10. eclipse执行上一次结果

    eclipse执行上一次结果,解决方法:Project-clean