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 ...
随机推荐
- python爬虫-爬坑之路
背景简介 爬取外国的某两个网站的数据,网站都没有被墙,爬取三种数据. A: 爬取页面并存储到数据库 B: 爬取页面内的表格内数据并存储到数据库 C: 爬取页面,分析页面并将页面的所有数据分类存入数据库 ...
- Java 类加载
类的生命周期 类的生命周期是从class文件到类加载 开始.类卸载结束. https://gitbook.cn/books/5cb844a55f75cc777e4c2320/index.html
- Leetcode题目292.Nim游戏(脑筋急转弯)
题目描述: 你和你的朋友,两个人一起玩 Nim 游戏:桌子上有一堆石头,每次你们轮流拿掉 1 - 3 块石头. 拿掉最后一块石头的人就是获胜者.你作为先手. 你们是聪明人,每一步都是最优解. 编写一个 ...
- MD5介绍
md5介绍 1. md5简介 md5的全称是md5信息摘要算法(英文:MD5 Message-Digest Algorithm ),一种被广泛使用的密码散列函数,可以产生一个128位(16字节,1字节 ...
- 配置连接远程ip的Redis
1.修改redis服务器的配置文件redis.windows.conf 注释绑定的主机地址 # bind 127.0.0.1 修改redis的守护进程为no,不启用 daemonize "n ...
- Linux发行版的选择
1,需要稳定的服务器,选择CentOS 或 RHEL 2,需要自己定制的桌面系统,选择Ubuntu 3,摸索linux 各方面的知识,选择Gentoo 4,需要稳定性高的系统,选择FreeBSD 5, ...
- spaCy 第二篇:语言模型
spaCy处理文本的过程是模块化的,当调用nlp处理文本时,spaCy首先将文本标记化以生成Doc对象,然后,依次在几个不同的组件中处理Doc,这也称为处理管道.语言模型默认的处理管道依次是:tagg ...
- Flutter实现TabBarView切换页面时每个页面只initState一次
在 TabBarView 组件中切换页面时,子页面每次均会重新 initState 一次,导致每次都切换页面均会重绘,如下图 如果需要只在第一次进页面 initState 一次,后面再进入 ...
- 《Flutter 实战》开源电子书
<Flutter 实战>开源电子书 转 https://blog.csdn.net/OQjya206rsQ71/article/details/86619630 关于 Flutter ...
- 绿色版plsql安装和安装包
转: 绿色版plsql安装和安装包 2018年08月07日 19:53:15 YoungLee16 阅读数 4890 最近在使用数据库的时候,或多或少的会出现一些问题,下面总结下如何安装ORACL ...
