cari
Rumahhujung hadapan webtutorial jsPanduan 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 操纵元素大小及位置信息的简单举例。


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
JavaScript in Action: Contoh dan projek dunia nyataJavaScript in Action: Contoh dan projek dunia nyataApr 19, 2025 am 12:13 AM

Aplikasi JavaScript di dunia nyata termasuk pembangunan depan dan back-end. 1) Memaparkan aplikasi front-end dengan membina aplikasi senarai TODO, yang melibatkan operasi DOM dan pemprosesan acara. 2) Membina Restfulapi melalui Node.js dan menyatakan untuk menunjukkan aplikasi back-end.

JavaScript dan Web: Fungsi teras dan kes penggunaanJavaScript dan Web: Fungsi teras dan kes penggunaanApr 18, 2025 am 12:19 AM

Penggunaan utama JavaScript dalam pembangunan web termasuk interaksi klien, pengesahan bentuk dan komunikasi tak segerak. 1) kemas kini kandungan dinamik dan interaksi pengguna melalui operasi DOM; 2) pengesahan pelanggan dijalankan sebelum pengguna mengemukakan data untuk meningkatkan pengalaman pengguna; 3) Komunikasi yang tidak bersesuaian dengan pelayan dicapai melalui teknologi Ajax.

Memahami Enjin JavaScript: Butiran PelaksanaanMemahami Enjin JavaScript: Butiran PelaksanaanApr 17, 2025 am 12:05 AM

Memahami bagaimana enjin JavaScript berfungsi secara dalaman adalah penting kepada pemaju kerana ia membantu menulis kod yang lebih cekap dan memahami kesesakan prestasi dan strategi pengoptimuman. 1) aliran kerja enjin termasuk tiga peringkat: parsing, penyusun dan pelaksanaan; 2) Semasa proses pelaksanaan, enjin akan melakukan pengoptimuman dinamik, seperti cache dalam talian dan kelas tersembunyi; 3) Amalan terbaik termasuk mengelakkan pembolehubah global, mengoptimumkan gelung, menggunakan const dan membiarkan, dan mengelakkan penggunaan penutupan yang berlebihan.

Python vs JavaScript: Keluk Pembelajaran dan Kemudahan PenggunaanPython vs JavaScript: Keluk Pembelajaran dan Kemudahan PenggunaanApr 16, 2025 am 12:12 AM

Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.

Python vs JavaScript: Komuniti, Perpustakaan, dan SumberPython vs JavaScript: Komuniti, Perpustakaan, dan SumberApr 15, 2025 am 12:16 AM

Python dan JavaScript mempunyai kelebihan dan kekurangan mereka sendiri dari segi komuniti, perpustakaan dan sumber. 1) Komuniti Python mesra dan sesuai untuk pemula, tetapi sumber pembangunan depan tidak kaya dengan JavaScript. 2) Python berkuasa dalam bidang sains data dan perpustakaan pembelajaran mesin, sementara JavaScript lebih baik dalam perpustakaan pembangunan dan kerangka pembangunan depan. 3) Kedua -duanya mempunyai sumber pembelajaran yang kaya, tetapi Python sesuai untuk memulakan dengan dokumen rasmi, sementara JavaScript lebih baik dengan MDNWebDocs. Pilihan harus berdasarkan keperluan projek dan kepentingan peribadi.

Dari C/C ke JavaScript: Bagaimana semuanya berfungsiDari C/C ke JavaScript: Bagaimana semuanya berfungsiApr 14, 2025 am 12:05 AM

Peralihan dari C/C ke JavaScript memerlukan menyesuaikan diri dengan menaip dinamik, pengumpulan sampah dan pengaturcaraan asynchronous. 1) C/C adalah bahasa yang ditaip secara statik yang memerlukan pengurusan memori manual, manakala JavaScript ditaip secara dinamik dan pengumpulan sampah diproses secara automatik. 2) C/C perlu dikumpulkan ke dalam kod mesin, manakala JavaScript adalah bahasa yang ditafsirkan. 3) JavaScript memperkenalkan konsep seperti penutupan, rantaian prototaip dan janji, yang meningkatkan keupayaan pengaturcaraan fleksibiliti dan asynchronous.

Enjin JavaScript: Membandingkan PelaksanaanEnjin JavaScript: Membandingkan PelaksanaanApr 13, 2025 am 12:05 AM

Enjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.

Beyond the Browser: JavaScript di dunia nyataBeyond the Browser: JavaScript di dunia nyataApr 12, 2025 am 12:06 AM

Aplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa