2. 程式人生 > >如何封裝一個最簡單的jquery外掛

如何封裝一個最簡單的jquery外掛

阿新 • • 發佈：2019-02-07

一個完整的jquery當然不可能這麼簡單，以下案例提供的是一種封裝外掛的思路

在此之前你最好有一定的js基礎，並且懂得自呼叫匿名函式的基本使用，廢話少說，直接上程式碼：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js封裝簡易jquery</title></head>
<body>
    <h2>js封裝簡易jquery</h2>
    <div id="h"
 
>hello world</div>
    <div id="box">我是一個帶有class屬性的標籤</div>
    <script src="../js/demo2.js"></script>
</body>
</html>

js部分

;(function (win) {
    var jQuery = function (selecter) {
        this.version = '1.0.1'; //版本號
        this.selecter = selecter;
        return
 
 this;
    };
    jQuery.prototype.getElement = function () {
        this.elem = document.getElementById(this.selecter);
        return this;
    };
    jQuery.prototype.html = function (val) {
        var elem = this.elem;
        if (val) {
            elem.innerHTML = val;
            return this
 
;
        } else {
            return elem.innerHTML;
        }
    };
    jQuery.prototype.on = function (type, Fn) {
        var elem = this.elem;
        elem.addEventListener(type, Fn);
        return this;
    };
    jQuery.init = function (selecter) {
        return new this(selecter);
    };
    win['$jQuery'] = jQuery;
})(window);

function $(selecter) {
    var test = $jQuery.init(selecter);
    return test.getElement(selecter);
}
function jQuery(selecter) {
    var test = $jQuery.init(selecter);
    return test.getElement(selecter);
}

//不妨測試一下，來個點選事件
jQuery('h').html('hello girl').on('click', function () {
    console.log('hello boy');
});
//或者來個賦值操作
$('box').html('hello baby');
console.log($().version);

最後，你開心就好，謝謝點贊哦！！！

相關推薦

如何封裝一個最簡單的jquery外掛

一個完整的jquery當然不可能這麼簡單，以下案例提供的是一種封裝外掛的思路 在此之前你最好有一定的js基礎，並且懂得自呼叫匿名函式的基本使用，廢話少說，直接上程式碼： HTML部分 <!DOCTYPE html> <html lan

php+jquery+ajax+json的一個最簡單實例

text serial OS .com min TP content meta 姓名 //網站 http://www.cnblogs.com/hjxcode/p/6029781.html<html><head><meta http-equiv=

idea外掛開發(01)---最簡單的helloworld版,不需要知道原理,先跟我做一個最簡單的彈框外掛

前言 用了那麼多idea外掛,也想自己做一個外掛,下面就是入門版本 你不需要先知道所有的概念,先跟著我的步驟做一個小;例子,後面再說原理 本次以windos系統為例 開始 1.你得安裝一個環境,供idea外掛的開發 2.開啟idea,新建一個idea外掛開發的

寫一個最簡單的gulp 實例

今天 blog png ruby 官網 base 1.0 pat fault 今天寫了一個簡單的gulp 實例 分享給大家！ 比較適合gulp 初學者 首選： 看看gulp官網了解一些基本的定義 　　　官網地址 ： http://www.gulpjs.com.cn/ 搭建n

javaWeb之寫一個最簡單的servlet

tran oid w3c write 分享 瀏覽器 servle code mapping 1. 創建一個類servletTest2 繼承HttpServlet類。 public class servletTest2 extends HttpServlet {

Go語言建立一個最簡單的服務端點

一個 nds Coding port struct pac quest com handler handlers/handlers.go package handlers import ( "encoding/json" "net/http" )

一個最簡單的cell按鈕點擊回調

eight property sin font 簡單的 cell 舉例 定義 ont 在cell.h定義 @property(nonatomic,strong)void(^pushType)(NSInteger); 在cell.m按鈕點擊時 _pushType(1)；(舉

搭建一個最簡單的node服務器

node string str console 參數 地址 param color json 搭建一個最簡單的node服務器 　　1、創建一個Http服務並監聽8888端口 　　2、使用url模塊 獲取請求的路由和請求參數 var http = require(‘

2018.3.29學習總結之如何運行一個最簡單的Servlet程序

ati get png aid 父類 eclips 網上 自己 nco 1，我編寫了我的第一個Servlet程序。HelloServlet 繼承自HttpServlet。因此需要導入javax.servlet開頭的一系列包，那麽這些包來自哪裏呢？答案是Tomcat安裝目錄下

PHP分頁初探 一個最簡單的PHP分頁代碼的簡單實現

too 查詢 use img 多少 contain 網站 實現 ice PHP分頁代碼在各種程序開發中都是必須要用到的，在網站開發中更是必選的一項。 要想寫出分頁代碼，首先你要理解SQL查詢語句：select * from goods limit 2,7。PHP分頁代碼核心

300行ABAP代碼實現一個最簡單的區塊鏈原型

指向 repo 方法調用 輸入參數 transacti ui控件 挖礦 太多的 work 不知從什麽時候起，區塊鏈在網上一下子就火了。 這裏Jerry就不班門弄斧了，網上有太多的區塊鏈介紹文章。我的這篇文章沒有任何高大上的術語，就是300行ABAP代碼，實現一個最簡單的區

vue2 + iview-admin 1.3 + django 2.0 一個最簡單的增刪改查例子

iview-admin axios django 前後端分離 api 以下為利用iview-admin + django 做的一個最基本的增刪改查例子。 前端iview-admin git clone https://github.com/iview/iview-admin.git cd

java實現一個最簡單的tomcat服務

連接數 accep print tex soc ins udp web服務 reply 1.如何啟動？ main方法是程序的入口，tomcat也不例外，查看tomcat源碼，發現main是在Bootstrap 類中的； 2.如何建立連接？ 要通訊，必須要建議so

IDEA新建一個最簡單的Maven的JavaWeb項目

png conf onf 創建 edi 點擊 location 技術 lod 1.項目環境 IDEA：2016.2 JDK：1.8.0_76 Maven：3.2.5 2.File-->New-->Project-->Maven 3.選擇Proje

使用Django建立一個最簡單的服務器

pytho eight 工程 django inf 新工程 加載 qlite sqlit Django作為python一個靈活性很強的網絡框架，在搭建服務器方面非常的方便，通過以下幾步就可以建立一個屬於自己的web服務器： 1.新建一個文件夾（盡量不要選擇在系統盤，在搭建虛

一文秒懂如何搭建一個最簡單的充值系統

數據 一起 表示 存在 除了 社會 index 原因 必須 ? ???閱讀完本文大概需要5分鐘。 目錄 移動支付 微信支付 支付寶支付 充值體系 最基礎的架構 生產環境應用 總結 參考 ? ???一切都是生意。“天下熙熙皆為利來,天下攘攘皆為利往”。不知

Linux下一個最簡單的不依賴第三庫的的C程式（1）

如下程式碼是一段彙編程式碼，雖然標題中使用了C語言這個詞語，但下面確實是一段彙編程式碼，弄清楚了這個程式碼，後續的知識點才會展開。 #PURPOSE: Simple program that exits and returns a # status code back to the Lin

VC++6.0下用60行程式寫成一個最簡單的WEB伺服器

文章目錄 一個最簡單的WEB伺服器 HTTP 工作原理概述 HTTP協議通訊過程 源程式分析 過程 原始碼分析 原始碼60行（simplehttpserver.cpp） 編碼過程和

JS寫一個最簡單的無縫輪播圖

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

一個最簡單的程式讓你理解多徑通道

原文地址：https://wenku.baidu.com/view/f4bb76fe941ea76e58fa044d.html 時變、多徑是無線通道的特點，相信很多人在看了很多書之後，對無線通道感覺還是一頭霧水。為什麼多徑導致頻率選擇性？為什麼多普勒頻移反映了通道的時變性？對這些問題感覺困惑的肯