Contoh kod yang mengubah suai atau melanjutkan kaedah asli jQuery-tutorial js-php.cn

Contoh kod yang mengubah suai atau melanjutkan kaedah asli jQuery

PHPz

Lepaskan： 2018-09-29 17:29:58

ke hadapan

1236 orang telah melayarinya

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>

Salin selepas log masuk

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