/* 匿名函数 传入 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构造函数的更多相关文章

  1. 编写自己的javascript功能库之Ajax(仿jquery方式)

    本人学习的是php,所以就用php跟js来演示代码了,主要是锻炼自己写js的能力,练练手而已. 下面这是我编写的操作ajax的代码功能,勉强让我称之为库吧.. js代码实例(tool.ajax.js) ...

  2. jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  3. jquery源码学习笔记(一)jQuery的无new构建

    本人是一名.net程序员..... 你一个.net coder 看什么jQuery 源码啊? 原因吗,很简单.技多不压身吗(麻蛋,前端工作好高...羡慕). 我一直都很喜欢JavaScript,废话不 ...

  4. Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别

    官网的英文解释: javascript和jQuery有点关系,js是一种脚本语言,主要用于客户端,现在主要用于实现一些网页效果. jquery是js的一个库,你可以认为是对js的补充,提供了很多方便易 ...

  5. 实例详解jQuery的无new构建

    jQuery的无new构建 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作. 回想一下使用 jQuery 的时候,实例化一个 jQuery 对象的方法: // 无 new 构造 $( ...

  6. javascript仿天猫加入购物车动画效果

    javascript仿天猫加入购物车动画效果   注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...

  7. JavaScript、Jquery选择题

    尚学堂Java EE软件工程师认证考试 试题库-选择题     一.    选择题(包括单选和双选) 1.B 在JavaScript中,以下变量命名非法的是(   )(选择一项) A. numb_1 ...

  8. js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

    最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下 ...

  9. 通过javascript库JQuery实现页面跳转功能代码

    通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...

随机推荐

  1. linux安装maven简易步骤

    版本要求maven3.6.1 软件下载 wget http://mirror.bit.edu.cn/apache/maven/maven-3/3.6.1/binaries/apache-maven-3 ...

  2. Flask 四种响应类型

    1 直接返回字符串 可以返回状态码 @app.route('/testresponse', methods=['GET', 'POST']) def testresponse(): return &q ...

  3. gdb常用的调试命令

    首先将源代码编译.链接生成debug版本的可执行文件,然后通过‘gdb  debug版本的可执行文件名’进入调试模式. a) 单进程.单线程基础调试命令 l    显示main函数所在的文件的源代码 ...

  4. 黑马vue---37-38、vue实例的生命周期

    黑马vue---37-38.vue实例的生命周期 一.总结 一句话总结: created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板 moun ...

  5. vue开发(一)安装

    1.安装nodejshttps://nodejs.org/zh-cn/ 2.vs2019  工具-获取工具和功能 勾选nodejs开发并安装 3.新建基于vuejs web应用程序 4.右键项目在此处 ...

  6. java基于jcifs.smb实现远程发送文件到服务器

    1.服务器指定共享文件夹 1.1.验证服务器共享文件夹本地可以访问: 2.导入依赖的相关jar包         jcifs-1.3.**.jar: <dependency> <gr ...

  7. C++ STL nth_element

    #include <iostream>#include <algorithm>#include <deque> using namespace std; int m ...

  8. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_7.RabbitMQ研究-工作模式-工作队列模式

    RabbitMQ有以下几种工作模式 : 1.Work queues 2.Publish/Subscribe 3.Routing 4.Topics 5.Header 6.RPC 1.Work queue ...

  9. JAVA 基础编程练习题21 【程序 21 求阶乘】

    21 [程序 21 求阶乘] 题目:求 1+2!+3!+...+20!的和 程序分析:此程序只是把累加变成了累乘. package cskaoyan; public class cskaoyan21 ...

  10. Jenkins创建镜像后无法推送到harbor的问题

    https://blog.csdn.net/mydeman/article/details/79042848 1.先切换到root账号,用root登录harbor,就可以push $ sudo pas ...