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 >

输出如下：

猜你喜欢