jQuery.fn.extend()方法用法示例介绍 _前端开发

【jQuery.fn.extend()方法用法示例介绍】这个jQuery.fn.extend()方法用于将对象的内容合并到jQuery原型上, 以提供新的jQuery实例方法。
语法如下：

jQuery.fn.extend( object )

参数：此方法接受上述和以下描述的单个参数：

目的：此参数保存要合并到jQuery原型上的对象。

返回值：合并后返回对象。
以下示例说明了jQuery.fn.extend()方法的用法：
范例1：在此示例中, jQuery.fn.extend()方法用于将两种方法添加到jQuery原型对象, 然后使用其中一种。

< !DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title > jQuery.fn.extend() method< / title > < script src = "https://code.jquery.com/jquery-3.4.1.js" > < / script > < / head > < body style = "text-align:center; " > < h1 style = "color: green" > srcmini < / h1 > < h3 > jQuery.fn.extend() method< / h3 > < p > Add two methods to the jQuery prototype object < br > and then use one of them. < / p > < p > < input type = "radio" name = "Geek_1" > Geek_1< / p > < p > < input type = "radio" name = "Geek_2" > Geek_2< / p > < script > jQuery.fn.extend({ Gfg1: function () { return this.each(function () { this.checked = true; }); }, Gfg2: function () { return this.each(function () { this.checked = false; }); } }); // Use the newly created .Gfg1() method $("input[type='radio']").Gfg1(); < / script > < / body > < / html >

输出如下：

文章图片
范例2：在此示例中, jQuery.fn.extend()方法用于将更多方法合并到jQuery原型对象。

< !DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title > jQuery.fn.extend() method< / title > < script src = "https://code.jquery.com/jquery-3.4.1.js" > < / script > < / head > < body style = "text-align:center; " > < h1 style = "color: green" > srcmini < / h1 > < h3 > jQuery.fn.extend() method< / h3 > < p > Add two methods to the jQuery prototype object < br > and then use one of them. < / p > < p > < input type = "checkbox" name = "Geek_1" > Geek_1< / p > < p > < input type = "checkbox" name = "Geek_2" > Geek_2< / p > < p > < input type = "checkbox" name = "Geek_3" > Geek_3< / p > < p > < input type = "checkbox" name = "Geek_4" > Geek_4< / p > < script > jQuery.fn.extend({ Gfg1: function () { return this.each(function () { this.checked = true; }); }, Gfg2: function () { return this.each(function () { this.checked = false; }); } }); // Use the newly created .Gfg1() method $("input[type='checkbox']").Gfg1(); < / script > < / body > < / html >

输出如下：