javascript 仿jQuery的无new构造函数
/* 匿名函数 传入 window 值全局变量成为局部变量 */
(function(window,undefined) {
/* 申明一个名为jQuery 的函数*/
function jQuery(selector) {
/* 返回 jQuery 实例 */
return new jQuery.prototype.init(selector);
}
/* 为jQuery函数原型添加一个初始化 init 方法 */
jQuery.prototype.init=function (selector) {
this.el=document.querySelectorAll(selector)[0];
};
/* 为jQuery函数原型添加一个 html 方法 */
jQuery.prototype.html=function(str){
if(str){
this.el.innerHTML=str;
}else {
return this.el.innerHTML;
}
return this;
};
/* 为jQuery函数原型添加一个 color 方法 */
jQuery.prototype.color=function(rgb){
if(rgb){
this.el.style.color=rgb;
}
return this;
};
/* 将jQuery的原型 赋值给初始化方法的原型*/
jQuery.prototype.init.prototype = jQuery.prototype;
/* 设置jQuery函数的别名 $ 并设置为window全局对象的属性 */
window.$=window.jQuery=jQuery;
})(window,undefined); <!-- html -->
<div id="div1">123</div> <!-- js -->
$("#div1").html('<h1>helang.love@qq.com</h1>').color("#ff0000");
运行效果:
javascript 仿jQuery的无new构造函数的更多相关文章
- 编写自己的javascript功能库之Ajax(仿jquery方式)
本人学习的是php,所以就用php跟js来演示代码了,主要是锻炼自己写js的能力,练练手而已. 下面这是我编写的操作ajax的代码功能,勉强让我称之为库吧.. js代码实例(tool.ajax.js) ...
- jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...
- jquery源码学习笔记(一)jQuery的无new构建
本人是一名.net程序员..... 你一个.net coder 看什么jQuery 源码啊? 原因吗,很简单.技多不压身吗(麻蛋,前端工作好高...羡慕). 我一直都很喜欢JavaScript,废话不 ...
- Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别
官网的英文解释: javascript和jQuery有点关系,js是一种脚本语言,主要用于客户端,现在主要用于实现一些网页效果. jquery是js的一个库,你可以认为是对js的补充,提供了很多方便易 ...
- 实例详解jQuery的无new构建
jQuery的无new构建 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作. 回想一下使用 jQuery 的时候,实例化一个 jQuery 对象的方法: // 无 new 构造 $( ...
- javascript仿天猫加入购物车动画效果
javascript仿天猫加入购物车动画效果 注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...
- JavaScript、Jquery选择题
尚学堂Java EE软件工程师认证考试 试题库-选择题 一. 选择题(包括单选和双选) 1.B 在JavaScript中,以下变量命名非法的是( )(选择一项) A. numb_1 ...
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下 ...
- 通过javascript库JQuery实现页面跳转功能代码
通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...
随机推荐
- Apache Flink - 分布式运行环境
1.任务和操作链 下面的数据流图有5个子任务执行,因此有五个并行线程. 2.Job Managers, Task Managers, Clients Job Managers:协调分布式运行,他们安排 ...
- mac使用技巧汇总
1.在屏幕锁屏的时候,加入提示信息 sudo defaults write /Library/Preferences/com.apple.loginwindow LoginwindowText &qu ...
- mysql 常见面试题
附录: https://mp.weixin.qq.com/s/pC0_Y7M7BkoUmlRwneZZdA 一.为什么用自增列作为主键 1.如果我们定义了主键(PRIMARY KEY),那么InnoD ...
- 第二章 c语言概述
一.#include指令和头文件 1.#include C预处理指令,C编译器在编译前对源代码做一些准备工作 2.stdio.h标准输入输出头文件,提供了关于输入输出的信息供编译器使用 头文件包含了建 ...
- Java 线程概述
1 进程与线程基本概念 1.1 进程:执行中的程序 每个进程都有独立的代码和数据空间(进程上下文),进程空间切换会有较大的开销,一个进程包含1-n个线程.进程是资源分配的最小单位. 1.2 线程:进程 ...
- Flink简介
Flink简介 Flink的核心是一个流式的数据流执行引擎,其针对数据流的分布式计算提供了数据分布,数据通信以及容错机制等功能.基于流执行引擎,Flink提供了诸多更高抽象层的API以方便用户编写分布 ...
- SqlServer2008数据库的备份与还原
1.先是备份数据 1.1.登录sql server management studio 1.2.选中需要备份数据库,右击鼠标,如下图: 1.3.点击备份之后,如下图; 2.数据还原准备 ps: 在开始 ...
- C++ STL copy copy_backward
#include <iostream>#include <algorithm>#include <vector>#include <functional> ...
- computer5 environment
luo@luo-All-Series:~/MyFile/Anaconda3$ luo@luo-All-Series:~/MyFile/Anaconda3$ luo@luo-All-Series:~/M ...
- ubuntu tensorflow cpu faster-rcnn 测试自己训练的模型
(flappbird) luo@luo-All-Series:~/MyFile/tf-faster-rcnn_box$ (flappbird) luo@luo-All-Series:~/MyFile/ ...