/* 匿名函数 传入 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. phpstorm+xdebug安装配置

    这个问题也困惑了我好久 烦死了 今天看了qing师傅的博客 跟着安装 运行环境: phpStorm 2018 PHP 5.45 nts VC9 Xdebug 2.4.1 0x01 PHP安装xdebu ...

  2. windows下安装mongodb数据库以及使用数据库

    首先下载mongodb, 链接: https://pan.baidu.com/s/1KyvF7bAqGM8K-ir-hFNhPw 密码: vlc9 双击进行安装 勾选我接受并单击next 选择cust ...

  3. Kafka - SASL认证

    kafka SASL认证配置 1.找到kafka安装根目录,在config文件夹下创建kafka_server_jaas.conf,写入 KafkaServer { org.apache.kafka. ...

  4. java代码连接oracle数据库的方法

    oracle连接数据库的方式和mysql是大同小异的,主要的困难点在于oracle的数据库驱动包和依赖只有官方提供,如果你是用maven添加依赖的话,需要自己从官网下载jar包安装到你本地的maven ...

  5. Linux设备驱动程序 之 get_free_page

    get_free_page 如果模块需要分配大块的内存,使用面向页的分配会有很多优点: 分配页面可使用下面的函数: unsigned long get_zeroed_page(gfp_t gfp_ma ...

  6. pod package 生成 Framework

    pod package 生成 Framework pod package 是 cocoapods 的一个插件,如果没有的话使用以下命令安装: sudo gem install cocoapods-pa ...

  7. map初步(由ABBC--->A2BC)

    1.题目: Given a string containing only 'A' - 'Z', we could encode it using the following method: 1. Ea ...

  8. Windows下MongoDB的安装过程及基本配置

    首先当然是到官网下载 MongoDB 了,点击进入后会看到下载页面,如下图所示: 安装有2种方式: 一种是通过直接点击下载的安装文件进行安装: 另一种是通过命令提示符来安装,下面我将直接通过第一种方式 ...

  9. python实现并发服务器实现方式(多线程/多进程/select/epoll)

    python实现并发服务器实现方式(多线程/多进程/select/epoll)   并发服务器开发 并发服务器开发,使得一个服务器可以近乎同一时刻为多个客户端提供服务.实现并发的方式有多种,下面以多进 ...

  10. C#与C++数据类型对应表(搜集整理一)

    C#与C++数据类型对应表(搜集整理一) C#与C++数据类型对应表   C#调用DLL文件时参数对应表 Wtypes.h 中的非托管类型 非托管 C 语言类型 托管类名 说明 HANDLE void ...