Panduan Pembelajaran Asas jQuery_jquery

Buka halaman web Jika HTML belum dimuatkan sepenuhnya, adalah tidak selamat untuk mengendalikan elemen pada halaman Tetapi bagaimana dengan memantau sama ada HTML telah dimuatkan? jQuery menyediakan kaedah $(document).ready() Sebarang kod dalam ready tidak akan dilaksanakan sehingga HTML dimuatkan sepenuhnya.

$(document).ready(function() {
  console.log('ready!');
});

Selain itu, ia mempunyai singkatan

$(function() {
  console.log('ready!');
});

$(document).ready() bukan sahaja melaksanakan kaedah tanpa nama, tetapi juga melaksanakan kaedah bernama:

function readyFn() {
  // code to run when the document is ready
}


$(document).ready(readyFn);

Pilih elemen

Konsep jQuery yang paling asas ialah "pilih beberapa elemen dan kemudian lakukan sesuatu dengannya". jQuery menyokong kebanyakan pemilih CSS3, serta beberapa pemilih bukan standard Untuk butiran, lihat http://api.jquery.com/category/selectors/ Berikut ialah penggunaan beberapa pemilih biasa:

$('#myId');         // 此 ID 在页面中必须唯一
$('div.myClass');      // 如果指定了元素类型，那么性能会有所提升
$('input[name=first_name]'); // 速度有点慢，尽量避免这种用法
$('#contents ul.people li');

$('a.external:first');
$('tr:odd');
$('#myForm :input');     // 选择表单中的所有 input 类元素
$('div:visible');
$('div:gt(2)');       // 页面中除了前 3 个 DIV 之外的所有 DIV
$('div:animated');      // 所有正在执行动画的 DIV

Perkara yang perlu diperhatikan

Apabila menggunakan pseudo-selectors seperti :visible dan :hidden, jQuery sebenarnya mengesan sama ada ia kelihatan pada halaman, bukan nilai paparan dalam css mereka. Maksudnya, apabila lebar dan ketinggian fizikal elemen pada halaman kedua-duanya lebih besar daripada 0, maka ia boleh dilihat. Walau bagaimanapun, adalah satu pengecualian.

Untuk pelaksanaan khusus jQuery, sila rujuk kod:

jQuery.expr.filters.hidden = function( elem ) {
  var width = elem.offsetWidth, height = elem.offsetHeight,
    skip = elem.nodeName.toLowerCase() === "tr";

  // does the element have 0 height, 0 width,
  // and it's not a <tr>&#63;
  return width === 0 && height === 0 && !skip &#63;

    // then it must be hidden
    true :

    // but if it has width and height
    // and it's not a <tr>
    width > 0 && height > 0 && !skip &#63;

      // then it must be visible
      false :

      // if we get here, the element has width
      // and height, but it's also a <tr>,
      // so check its display property to
      // decide whether it's hidden
      jQuery.curCSS(elem, "display") === "none";
};

jQuery.expr.filters.visible = function( elem ) {
  return !jQuery.expr.filters.hidden( elem );
};

Sama ada set hasil pemilih mengandungi elemen

Selepas melaksanakan pemilih, bagaimana untuk menentukan sama ada pemilih telah memilih elemen Anda boleh mengambil mudah dan menulis:

if ($('div.foo')) { ... }

Sebenarnya, ini adalah salah untuk menulis, kerana tidak kira sama ada pemilih memilih elemen atau tidak, ia akan mengembalikan objek, dan nilai Boolean objek mestilah benar, jadi kaedah ini tidak akan berfungsi. Sebenarnya, terdapat atribut panjang dalam objek yang dikembalikan oleh pemilih Melalui atribut ini, anda boleh menentukan berapa banyak elemen yang terdapat dalam pemilih Jika tiada elemen dipilih, 0-false akan dikembalikan. bilangan elemen sebenar dikembalikan.

if ($('div.foo').length) { ... }

Cache pemilih

Setiap kali anda membuat pemilih, jQuery perlu melaksanakan banyak kod Jika anda perlu menggunakan pemilih yang sama beberapa kali, sebaiknya cache pemilih untuk mengelak daripada melaksanakan pemilih berulang kali.

var $divs = $('div');

Ambil perhatian bahawa nama pembolehubah yang digunakan sebagai pembolehubah cache dalam kod ini bermula dengan $ Tanda dolar ini hanyalah aksara biasa dalam JavaScript dan tidak mempunyai makna istimewa lain wajib.

Sebaik sahaja pemilih dicache dalam pembolehubah, anda boleh memanggil kaedah jQuery pada pembolehubah, sama seperti memanggil pemilih.

Perlu diingatkan bahawa pemilih hanya boleh memilih elemen yang ada pada halaman tersebut Jika elemen ditambahkan pada halaman selepas pemilih dilaksanakan, elemen yang ditambahkan lusa tidak disertakan dalam pemilih sebelumnya pemilih dilaksanakan semula selepas menambah elemen pada halaman.
Pemilih dengan fungsi penapis

Kadang-kadang selepas melaksanakan pemilih, tidak semua elemen dalam set hasil adalah apa yang kita mahu, jadi kita perlu menapis set hasil sekali lagi:

$('div.foo').has('p');     // 所有包含有 <p> 的 div.foo
$('h1').not('.bar');      // 没有被标记 bar 这个类的 h1 元素
$('ul li').filter('.current'); // 带有类 current 的无序列表
$('ul li').first();       // 无序列表中的第一个元素
$('ul li').eq(5);        // 第六个

Pilih elemen borang

jQuery menyediakan beberapa pemilih pseudo untuk memilih elemen bentuk, yang sangat berguna.

• :butang pilih butang
• :kotak semak pilih berbilang kotak pilihan
• :ditanda memilih elemen borang yang dipilih
• :dilumpuhkan memilih elemen borang yang dilumpuhkan
• :enabled memilih elemen borang yang didayakan
• :fail memilih elemen borang dengan type="file"
• :imej memilih elemen bentuk dengan type="imej"
• … …

$('#myForm :input'); // 选择所有可输入的表单元素

Cara menggunakan pemilih

Selepas melaksanakan pemilih, anda boleh memanggil kaedah dalam pemilih. Kaedah ini dibahagikan kepada dua kategori: getter dan setter Getter mengembalikan sifat elemen pertama dalam set hasil, dan setter boleh menetapkan sifat semua elemen dalam set hasil.
Operasi rantai

Kebanyakan kaedah dalam pemilih jQuery akan mengembalikan objek jQuery itu sendiri, jadi selepas memanggil kaedah, anda boleh terus memanggil kaedah lain pada kaedah ini, sama seperti kombo:

$('#content').find('h3').eq(2).html('new text for the third h3!');

Untuk operasi berantai, adalah penting untuk memastikan kod boleh dibaca:

$('#content')
  .find('h3')
  .eq(2)
  .html('new text for the third h3!');

Jika elemen dalam pemilih berubah semasa operasi rantaian, anda boleh menggunakan kaedah $.fn.end untuk kembali ke set hasil asal:

$('#content')
  .find('h3')
  .eq(2)
    .html('new text for the third h3!')
  .end() // 返回最初的结果集
  .eq(0)
    .html('new text for the first h3!');

链式操作非常好用，以至于现在很多其它 JavaScript 库都加入了类似特性。但是对于链式操作也要小心使用，过长的链式操作会给代码的修改和调试带来困难。对于链式操作的长度没有硬性规定 — 只要你觉得能 Hold 住。

jQuery 对有些方法进行了“重载”，所有对某元素赋值或取值的时候所用的方法名是一样的，只是参数列表不同。当用 jQuery 方法对元素赋值的时候，它称为 setter，取值的时候称为 getter。setter 会对选择器中的所有所有元素赋值，getter 只取得选择器中第一个元素的值。

$('h1').html('hello world'); // setter
var str = $('h1').html();  // getter

setter 返回的是 jQuery 对象，可以继续在这个对象上调用 jQuery 方法（链式操作），getter 仅放回我们想要的值，返回值不是 jQuery 对象，所以不能继续链式操作了。
jQuery 操作 CSS

jQuery 可以很方便的设置或取得元素的 CSS 属性。

CSS 属性如果要想在 JavaScript 中使用，多要转换成骆驼命名法（camel cased），例如 CSS 中的 font-size 属性，在 JavaScript 中对应的是 fontSize，但是 jQuery 的 $.fn.css 方法对此做了特殊处理，无论使用哪种写法都可以。

例如：

var strsize1 = $('h1').css('fontSize'); // 返回 "19px"
var strsize2 = $('h1').css('font-size'); // 同上

$('h1').css('fontSize', '100px');   // 给单个属性赋值
$('h1').css({ 'fontSize' : '100px', 'color' : 'red' }); // 给多个属性赋值

上面可以看到，一次性给多个属性赋值的时候，实际上传入的是一个对象，这个对象中包含了一些可以表示 CSS 属性的键-值对，在 jQuery 的很多 setter 方法中都有类似用法。
jQuery 操作元素的 class 属性

作为一个 getter，$.fn.css 确实很好用，但是应该尽量避免将其作为 setter 使用，因为一般不建议在 JavaScript 代码中包含太多的样式代码。比较靠谱的方法是把样式规则单独分开写成类（class），然后用 JavaScript 将类应用到元素上即可：

var $h1 = $('h1');

$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');

if ($h1.hasClass('big')) { ... }

尺寸

jQuery 中有很多方法可以用来获取或者修改元素的尺寸或者位置信息。

$('h1').width('50px');  // 设置所有 h1 元素的宽度
$('h1').width();     // 得到第一个 h1 元素的宽度

$('h1').height('50px'); // 设置所有 h1 元素的高度
$('h1').height();    // 得到第一个 h1 元素的高度

$('h1').position();   // 返回第一个 h1 元素
             // 的位置信息，此返回值是一个对象
             // 此位置是相对其父元素的位置的偏移量

这里只是对 jQuery 操纵元素大小及位置信息的简单举例。