jquery 插件擴展編寫jquery擴展插件

時間 2019-12-06

原文原文鏈接

編寫jquery擴展插件

第一步：建立一個js文件javascript

第二步：編寫有關代碼html

jQuery.fn.extend({
    ///這個函數是所有選擇全部的元素
    check: function() {
        return this.each(function() { this.checked = true; }); //必須return回一個jquery對象
    },
    uncheck: function() {
        return this.each(function() { this.checked = false; });
    }
}); java

第三步：在頁面中使用該擴展方法jquery

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %> 瀏覽器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 函數

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script type="text/javascript" src="jquery-1.3.2-vsdoc.js"></script>
    <script type="text/javascript" src="Myjqueryplunin.js"></script>
    <script language="javascript" type="text/javascript"> post

        function CheckAll() {
            $("input:checkbox").check();
        } 測試

        function UnCheckAll() {
            $("input:checkbox").uncheck();
        }
    </script>
</head>
<body> this

    <div>
    <button onclick="CheckAll();">選擇所有</button>
    <button onclick="UnCheckAll();">清除所有</button>
    <hr />
    <input type="checkbox" id="c1" /><label for="c1">測試</label><br />
    <input type="checkbox" id="Checkbox1" /><label for="c1">測試</label><br />
    <input type="checkbox" id="Checkbox2" /><label for="c1">測試</label><br />
    <input type="checkbox" id="Checkbox3" /><label for="c1">測試</label><br />
    <input type="checkbox" id="Checkbox4" /><label for="c1">測試</label><br />
    <input type="checkbox" id="Checkbox5" /><label for="c1">測試</label><br />
    <input type="checkbox" id="Checkbox6" /><label for="c1">測試</label><br />
    </div>
</body>
</html> url

這裏有一個細節：div是不能夠放在runat=server的form裏面的

第四步：在瀏覽器中查看效果

下面這個博客也提供了另一些介紹 http://ioryioryzhan.javaeye.com/blog/232971

jQuery爲開發插件提拱了兩個方法，分別是：

jQuery.fn.extend(object);

jQuery.extend(object);

jQuery.extend(object); 爲擴展jQuery類自己.爲類添加新的方法。

jQuery.fn.extend(object);給jQuery對象添加方法。

fn 是什麼東西呢。查看jQuery代碼，就不難發現。

jQuery.fn = jQuery.prototype = {

　　　init: function( selector, context ) {//....　

　　　//......