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去做前端,因为它太好用了,我们以前做的东西大 ...
随机推荐
- css让元素居中显示
通常在absolute之后, 想让元素居中,都会采用margin-top:-[元素高度的一半]和 margin-left:-[元素宽度的一半] , 但是当我们的元素宽高不是固定的时候, 这就难办了, ...
- css3 2D动画的基本用法和介绍
<style> body{height:400px;border:1px solid #000;} .box{width:90px;height:30px;border:1px solid ...
- Combination Sum II Combinations
https://leetcode.com/problems/combination-sum-ii/ 题目跟前面几道题很类似,直接写代码: class Solution { public: vector ...
- 使用Glyph Designer创建位图字体
使用Glyph Designer创建位图字体 转http://book.2cto.com/201210/6610.html <iOS 5 cocos2d游戏开发实战(第2版)>将引导 ...
- 【细说Java】关于main方法的一些细节
Public static void main(String[] args) public :main方法是jvm运行的入口,所以必须是public来供外部调用 static :main方法无需生成对 ...
- Alice and Bob（2013年山东省第四届ACM大学生程序设计竞赛）
Alice and Bob Time Limit: 1000ms Memory limit: 65536K 题目描述 Alice and Bob like playing games very m ...
- Software Testing Lab1
Junit和Hamcrest的安装需要先把两个jar文件下载到本地,具体取得方式多种多样,我是直接从同学那要的.新建一个java项目,在新建时直接在库中导入这两个包即可. 这次编程内容是一个测试三角形 ...
- JavaScript 基础第一天
一.前言 如果将前端比喻成一人,那么Html就是这个人的骨骼脉络,CSS则是这个人的身上的装饰,JavaScript则是这个人的行为.作为一种脚本语言JavasSript具有着弱类型等特点.(在这里我 ...
- HTTP笔记整理（2）
四. http协议之请求 1.http请求由三部分组成,分别是:请求行(request line).请求报头(request header).请求正文(body) (1). 请求行:用来说明请求类 ...
- java 多线程--- Thread Runnable Executors
java 实现多线程的整理: Thread实现多线程的两种方式: (1)继承 Thread类,同时重载 run 方法: class PrimeThread extends Thread { long ...