cari

Rumah  >  Artikel  >  hujung hadapan web  >  Contoh tutorial tentang mengatasi kaedah objek jQuery dalam JavaScript_jquery

Contoh tutorial tentang mengatasi kaedah objek jQuery dalam JavaScript_jquery

WBOY
WBOYasal
2016-05-16 16:38:451207semak imbas

jQuery ialah perpustakaan kelas yang sangat baik Ia menyelesaikan banyak pengaturcaraan pihak pelanggan untuk kami, tetapi tiada yang maha kuasa Apabila ia tidak dapat memenuhi keperluan kami, kami perlu menulis semula pada masa yang sama Jangan menjejaskan atau mengubah suai fungsi asalnya; sebagai contoh, kebanyakan interaksi data dalam aplikasi web semasa saya diselesaikan melalui Ajax, supaya beberapa data medan tersembunyi boleh disimpan dalam tag HTML Dalam atribut, jumlah kod dalam tag HTML dikurangkan, seperti : ID, Cap Masa, dsb. Medan ini yang tidak memerlukan input pengguna tetapi perlu diserahkan diserahkan melalui borang 

<input name="ID" value="343" type="hidden" />

Simpan nilai ID dalam teg tersembunyi dan serahkannya bersama borang.

Kod adalah seperti berikut: 

<div>
<label data-field="id" data-property="data-id" data-id="343">First Name</label><input type="text" data-field="FirstName" />
</div>

Sila jangan terlalu memberi perhatian kepada bahagian biru nama atribut ini Anda boleh memilih beberapa nama yang lebih ringkas Sekarang mari tulis semula kaedah val jQuery untuk membaca dan menetapkan nilai id data kepada $.prototype mentakrifkan semula fungsi dan lulus dalam fungsi kelas asas dalam bentuk penutupan supaya ia boleh dipanggil dalam fungsi baharu Lihat kod berikut: 

<script>
    $.prototype.val = function (base) {
      return function () {
        var s = this, a = "data-property", p = s.attr(a), isset = arguments.length > 0, v = isset &#63; 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 &#63; s : v; }
        }
        
      }
　　　　　　//在这里传入基类方法
    }($.prototype.val);
</script>

Selepas penulisan semula ini, apabila atribut data-property ditentukan dalam teg, memanggil val() pada objek jQuery adalah bersamaan dengan memanggil attr("data-property"), tetapi tiada data-property ditentukan, iaitu lalai , jika ia adalah elemen bukan bentuk, val() adalah bersamaan dengan text(), jika ia adalah elemen bentuk, fungsi asal dikekalkan, iaitu membaca dan menulis nilai atribut nilai, jadi anda boleh menggunakan kaedah ini: $("[data-field= 'id']").val(345) dan $("[data-field='id']").val() membaca atau menetapkan nilainya, Atribut "data-field" akan dipetakan ke Dalam medan jenis yang sepadan pada pelayan, ini ialah kaedah menulis semula jQuery dalam JavaScript Penulisan semula kaedah lain mempunyai kesan yang sama, jadi anda boleh membuat inferens daripada satu contoh.

Semua kod adalah seperti berikut: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>在JavaScript中重写对象的方法</title>
  <script src="Scripts/jquery-1.8.2.min.js"></script>
  <script src="Scripts/jquery-ui-1.8.24.min.js"></script>
  <script>
    $.prototype.val = function (base) {
      return function () {
        var s = this, a = "data-property", p = s.attr(a), isset = arguments.length > 0, v = isset &#63; 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 &#63; s : v; }
        }
      }
    }($.prototype.val);
  </script>
</head>
<body>
  <span id="lbl">Hello world!</span>
  <input type="text" id="txt" value="hello world" />
  <input type="checkbox" value="哈哈哈。。。" />
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk bahagian hadapan web semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js padam penggunaan (padam atribut dan pembolehubah objek)_kemahiran javascriptArtikel seterusnya：js padam penggunaan (padam atribut dan pembolehubah objek)_kemahiran javascript

Artikel berkaitan

Lihat lagi