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,
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>? return width === 0 && height === 0 && !skip ? // then it must be hidden true : // but if it has width and height // and it's not a <tr> width > 0 && height > 0 && !skip ? // 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 操纵元素大小及位置信息的简单举例。

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
