cari

Rumah  >  Artikel  >  hujung hadapan web  >  Contoh kod yang mengubah suai atau melanjutkan kaedah asli jQuery

Contoh kod yang mengubah suai atau melanjutkan kaedah asli jQuery

PHPz
PHPzke hadapan
2016-05-16 16:20:481203semak imbas

Artikel ini terutamanya memperkenalkan contoh kod untuk mengubah suai atau melanjutkan kaedah asli jQuery Artikel ini menggunakan contoh memanjangkan kaedah asli jquery untuk menerangkan cara mengubah suai atau memanjangkan kaedah asli jquery boleh merujuknya

Ubah suai atau lanjutkan contoh kod kaedah jQuery:

Tidak syak lagi bahawa jQuery ialah perpustakaan kelas yang berkuasa dan mudah digunakan.

Aplikasinya yang luas boleh mengesahkan sudut pandangan di atas, tetapi seperti kata pepatah, tiada siapa yang sempurna, dan tiada emas yang sempurna Begitu juga untuk jQuery pada bila-bila masa atau masa, jadi Pada masa hadapan, kaedah asal jQuery perlu dilanjutkan dan diubah suai, tetapi kaedah terbaik masih mempunyai fungsi asal.

Contoh kod:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$.prototype.val = function (base) {
  return function () {
    var s = this;
    var a = "data-property";
    var p = s.attr(a);
    var isset = arguments.length > 0;
    var v = isset ? arguments[0] : null;
         
    if (isset&&typeof(base)=="function") { 
      base.call(s, v); 
    } 
    else { 
      v = base.call(s); 
    }
    if (p) {
      if (isset) { 
        s.attr(p, v); 
        return s 
      }
      else { 
        return s.attr(p) 
      }
    }
    else {
      if (!s.is(":input")){ 
        if (isset) { 
          s.text(v); return s; 
        } 
        else { 
          return s.text(); 
        } 
      }
      else { 
        return isset ? s : v; 
      }
    }
  }
}($.prototype.val);
$(document).ready(function(){
  $("#show").html($("#lbl").val()+"<br>"+$("#txt").val());
})
</script>
</head>
<body>
<span id="lbl">php中文网</span>   
<input type="text" id="txt" value="softwhy.com" />
<input type="checkbox" value="antzone" />
<p id="show"></p>
</body>
</html>
Kod di atas sudah pasti lanjutan daripada kaedah val() jQuery Berikut ialah pengenalan kepada proses pelaksanaannya.

Komen kod:

1 $.prototype.val = fungsi (asas) {}(($.prototype.val), ubah suai kaedah val() asal jQuery, di sini kami menggunakan penutupan Dalam kaedah pakej, parameter yang diluluskan ialah kaedah val() asal untuk mengekalkan fungsi kaedah val() asal 2. mengembalikan fungsi (){}, mengembalikan objek fungsi var s = ini rujukan ini kepada pembolehubah s, di mana ini menunjukkan contoh objek jQuery 4. var a = "data-property", mengisytiharkan pembolehubah dan menetapkan nilai , lebih banyak kandungan tentangnya akan diperkenalkan kemudian 🎜>5. var p = s.attr(a) Sebenarnya, sifat-data adalah atribut tersuai pada label, jadi kod ini adalah untuk mendapatkan nilai atribut ini isset = arguments.length > tentukan sama ada kaedah val() yang diubah suai melepasi parameter

7 var v = isset ? diperoleh, dan yang lain akan diabaikan 8. if (isset&&typeof(base)=="function") { base.call(s, v);}, Jika parameter diluluskan dan parameter asas ialah fungsi, maka fungsi asas dipanggil untuk menetapkan elemen

Di atas adalah keseluruhan kandungan bab ini Untuk lebih banyak tutorial berkaitan, sila lawati

tutorial video jQuery

!
Kenyataan：
Artikel ini dikembalikan pada:jb51.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Gunakan js untuk melukis kemahiran carta pai_javascriptArtikel seterusnya：Gunakan js untuk melukis kemahiran carta pai_javascript

Artikel berkaitan

Lihat lagi