<!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. windows下监测tomcat7内存使用情况

    在conf里面的server-user文件里添加 <tomcat-users> <role rolename="admin-gui"/> <user ...

  2. 异常:System.Data.EvaluateException: 未找到列[District].

    异常:System.Data.EvaluateException: 未找到列[District]. 这里存在的问题不一定是说,数据源表没有该字段.此问题在于数据库字段包含空格字符.

  3. wait() notify()搭配synchronize的使用

    一直以为自己动多线程,使用过好像就懂了原理一样,其实是按部就班的写自己不知道原理的代码而已. 一些概念: 监视器:将监视器比作一个建筑,建筑里面有个特别的房间,房间中有一些数据,这些数据在同一个时间只 ...

  4. flask_日期和时间

    不知道大家有没有发现,在我们学习flask的过程中,post的timestamp字段添加时间时一直用的是datetime.utcnow()来获取时间,但是它获取的时间跟本地时间不一样,下面我们来测试一 ...

  5. svn不能添加.a文件的解决方法

    上次说用svn add命令添加.a文件,下面是另外的一种解决办法: 修改~/.subversion/config文件,增加一条 # global-ignores = *.o *.lo *.la *.a ...

  6. （混合背包 多重背包+完全背包）The Fewest Coins （poj 3260）

    http://poj.org/problem?id=3260   Description Farmer John has gone to town to buy some farm supplies. ...

  7. CSDDN特约专稿：个性化推荐技术漫谈

    本文引自http://i.cnblogs.com/EditPosts.aspx?opt=1 如果说过去的十年是搜索技术大行其道的十年,那么个性化推荐技术将成为未来十年中最重要的革新之一.目前几乎所有大 ...

  8. 基于Linux的WebSphere性能调优与故障诊断

    一.关于was数据源等问题的配置 (1)关于was数据源连接池的最大.最小配置多大合适?怎样去计算? (2)关于JVM的配置,64位系统,64位WAS,最值小和最大配置多大最优?怎样去计算? (3)应 ...

  9. springmvc和struts2的差别

    springmvc和struts2的区别相关内容   1.spring mvc的入口是servlet,而struts2是filter filter功能:用户可以改变一个request和修改一个resp ...

  10. linux-13基础命令之-touch,mkdir

    1.  touch 命令 用于创建空白文件与修改文件时间,格式:touch[选项][文件]: linux 下文件时间有三种 @1.更改时间(mtime):内容修改时间: @2.更改权限(ctime): ...