Apakah itu jQuery dan apa yang boleh dilakukannya untuk kita? Jika anda seorang pembangun web dan telah menulis program JavaScript, maka anda mungkin menggunakan jQuery Jika anda belum mencubanya, anda sekurang-kurangnya pernah mendengarnya, sebenarnya, jQuery boleh dikatakan sebagai perpustakaan JavaScript yang paling popular pentas. Menurut statistik daripada jabatan yang berkaitan, kira-kira 28% tapak web di seluruh dunia menggunakan jQuery Nombor ini mungkin agak dibesar-besarkan, tetapi ia menunjukkan populariti jQuery. Artikel ini hanya memberikan pengenalan ringkas kepada penggunaan jQuery dan berfungsi sebagai tutorial pengenalan.
Muat turun kod jQuery dan muatkannya pada halaman
Mula-mula anda perlu memuat turun kod jQuery terkini dari laman web rasmi jQuery secara rasminya jQuery menyediakan dua versi, satu dimampatkan dan satu lagi tidak dimampatkan Jika anda tidak bercadang untuk membaca atau menganalisis Untuk Kod sumber jQuery, adalah disyorkan untuk memuat turun versi termampat kerana ia lebih kecil. Selepas muat turun selesai, muatkan ia dalam kod HTML anda Kaedah pemuatan adalah seperti berikut:
<html> <head> <title>jQuery tutorial</title> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> </head> <body> jQuery tutorial </body> </html>
Sudah tentu, disebabkan populariti semasa jQuery, banyak tapak web juga menyediakan API jQuery dalam talian, seperti API Google, jadi kami boleh memuatkan jQuery melalui kaedah berikut:
Cara kod jQuery dilaksanakan
Apabila belajar menulis kod jQuery, perkara pertama yang anda perlu sentuh ialah mekanisme pemprosesan acara sedia dokumen Hampir semua kod jQuery anda mesti ditulis dalam acara ini. Benda ni ada dua fungsi utama:
Pastikan kod jQuery dilaksanakan hanya selepas halaman web dimuatkan sepenuhnya. Kerana jika terdapat elemen DOM dalam halaman web yang belum dimuatkan sepenuhnya, menggunakan kod jQuery untuk mengakses atau memanipulasi elemen DOM akan menyebabkan ralat.
Bezakan kod jQuery daripada kod lain ke tahap tertentu.
Kod biasanya ditulis seperti berikut:
<script type="text/javascript">
$(document).ready(function() {
// 所有的 jQuery 代码都写在这里
});
</script>
Pilih elemen DOM menggunakan pemilih jQuery
jQuery merangkum fungsi $("") yang membolehkan kami memilih elemen DOM dalam dokumen HTML dengan mudah. Berikut ialah beberapa cara mudah untuk menggunakannya.
$("div"); // 选择当前 HTML 文档中的所有 DIV 元素
$("#myElement"); // 选择当前 HTML 文档中 ID 为 "myElement" 的元素
$(".myClass"); // 选择当前 HTML 文档中 class 为 "myClass" 的元素
$("p#myElement"); // 选择当前 HTML 中 ID 为 "myElement" 的段落 P 标签元素
$("ul li a.navigation"); // 选择列表元素中 class 为 "navigation" 的超链接
jQuery menyokong hampir semua kaedah pemilih CSS
$("p > a"); // 选择所有 P 标签中的超链接 A 元素
$("input[type=text]"); // 选择 input 元素中 type 为 text 的元素
$("a:first"); // 选择当前页面中的第一个超链接 A 元素
$("p:odd"); // 选择当前页面中序数为奇数的段落 P 元素
$("li:first-child"); // 选择列表中的第一个元素
jQuery sendiri juga mentakrifkan beberapa kaedah pemilih Berikut ialah beberapa contoh:
$(":animated"); // 选择所有正在执行动画效果的元素
$(":button"); // 选择所有按钮元素 （input 或 button）
$(":radio"); // 选择所有单选框元素
$(":checkbox"); // 选择所有复选框元素
$(":checked"); // 选择所有已经在 选定状态 的单选框和复选框
$(":header"); // 选择所有标题元素 （h1, h2, h3, h4 ...）
Memanipulasi dan mengakses nama kelas dalam CSS
Menggunakan jQuery, anda boleh menambah dan mengalih keluar nama kelas untuk elemen DOM, dan ia sangat mudah digunakan. Berikut ialah beberapa kaedah penggunaan biasa:
$("div").addClass("content"); // 为所有 <div> 元素添加名为 "content" 的类
$("div").removeClass("content"); // 移除所有 <div> 元素中，名为 "content" 的类
$("div").toggleClass("content"); // 交替所有 <div> 元素中，名为 "content" 的类 （如果该元素中不存在这个类，则为它加上这个类；如存在，则移除之）
Sudah tentu, anda juga boleh menggunakan jQuery untuk mengesan sama ada kelas tertentu sedang digunakan dalam elemen Kod adalah seperti berikut
if ($("#myElement").hasClass("content")) {
alert("存在名为 content 的类！");
}
else {
alert("不存在名为 content 的类！");
}
Gunakan jQuery untuk memanipulasi gaya dalam CSS
Anda boleh menambahkan gaya CSS pada elemen DOM dengan mudah menggunakan jQuery Berikut ialah beberapa contoh:
$("p").css("width", "400px"); // 为所有段落添加一个宽度
$("#myElement").css("color", "blue") // 将所有 ID 为 #myElement 的元素中文本颜色变为蓝色
$("ul").css("border", "solid 1px #ccc") // 为所有无序列表添加实线边框，且边框颜色为 #ccc
Tambah, alih keluar dan tambah elemen atau kandungan DOM pada halaman web
jQuery juga menyediakan banyak kaedah untuk memanipulasi elemen DOM, seperti menukar teks dalam teg operasi. . . Beberapa contoh adalah seperti berikut:
var myElementHTML = $("#myElement").html();
// 获取 ID 为 myElement 的元素中的所有内容，包括文本和 HTML 标签
// 这种方法类似于传统 JavaScript 中的 innerHTML
var myElementHTML = $("#myElement").text();
// 获取 ID 为 myElement 的元素中的文本，仅包括文本，HTML 标签除外
Sama seperti dua kaedah di atas, anda juga boleh menukar HTML atau teks dalam elemen DOM:
$("#myElement").html("<p>This is the new content.</p>");
// #myElement 中的内容将被这个段落替换掉
$("#myElement").text("This is the new content.");
// #myElement 中的内容将被这行文本替换掉
Tambah kandungan dalam elemen:
$("#myElement").append("<p>This is the new content.</p>");
// 保留标签内原有内容，并在末尾处追加新内容
Untuk menambahkan kandungan pada elemen, jQuery mempunyai beberapa kegunaan lain, seperti: appendTo(), prepend(), prependTo(), before(), insertBefore(), after(), insertAfter(), masing-masing mempunyai Ciri-cirinya, tetapi penggunaannya serupa dengan append().
Pengendalian acara jQuery
Sesetengah pengendali acara tertentu boleh dilaksanakan menggunakan kaedah berikut:
$("a").click(function() {
// 可以在这里写一些代码
// 当超链接被点击的时候这里的代码将被执行
});
Apabila hiperpautan diklik, kod dalam function() akan dilaksanakan. Terdapat acara lain yang boleh digunakan dengan cara yang sama, seperti: kabur, fokus, tuding, kekunci bawah, muatkan, gerakkan tetikus, ubah saiz, tatal, serahkan, pilih.
Sembunyikan atau tunjukkan elemen dengan jQuery
jQuery juga boleh menunjukkan atau menyembunyikan elemen DOM dengan sangat mudah Kod sampel adalah seperti berikut:
$("#myElement").hide("slow", function() {
// 这里可以写一些代码，当元素被隐藏后，这里的代码将被执行
});
$("#myElement").show("fast", function() {
// 这里可以写一些代码，当元素被隐藏后，这里的代码将被执行
});
$("#myElement").toggle(1000, function() {
// 这里可以写一些代码，当元素被隐藏/显示后，这里的代码将被执行
});
可以看到，当元素显示或隐藏的时候，是慢慢的渐渐变化的，这是因为上面用到了几个速度参数，如 slow，fast，除此之外还有 normal，数字 1000 表示毫秒数，可以自定义。如果没有设置速度参数，那么元素将直接显示或隐藏，一闪而过，没有任何动画效果。后面的第二个参数是一个 function，用来当显示/隐藏完毕后，再执行一些需要的代码，如果不需要，可省略此参数。
另外还有一种“渐隐渐显”的方法，也是动画效果，使用方法如下：
$("#myElement").fadeOut("slow", function() {
// 这里的代码在 fade out 完成后执行
});
$("#myElement").fadeIn("slow", function() {
// 这里的代码在 fade in 完成后执行
});
调整元素的透明度：
$("#myElement").fadeTo(2000, 0.4, function() {
// 这里的代码在在调整透明度完成后执行
});
其中第一个参数是仍然是速度参数，第二个参数是透明度，但三个参数是一个匿名回调函数，当渐变完成后执行。
jQuery 之动画效果
jQuery 可以为 DOM 元素添加上下滑动效果：
$("#myElement").slideDown("fast", function() {
// .......
});
$("#myElement").slideUp("slow", function() {
// .......
});
$("#myElement").slideToggle(1000, function() {
// .......
});
jQuery 的动画效果还可以应用在改变 DOM 元素样式的时候，使改变样式的过程以平滑过渡的方式进行，而且可以选择需要速度，示例如下：
$("#myElement").animate({
opacity: 0.3,
width: "500px",
height: "700px"
},
1000,
function() {
// ......
});
总的来说，jQuery 的动画效果很强大，但是也有其怪癖（例如要改变颜色的话，可能需要其它特定的插件）。jQuery 还有其它许多动画效果需要不断地去深入学习和挖掘。
Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)Apr 11, 2025 am 08:23 AMSaya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing
Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)Apr 11, 2025 am 08:22 AMArtikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi dasar peranan
JavaScript: meneroka serba boleh bahasa webApr 11, 2025 am 12:01 AMJavaScript adalah bahasa utama pembangunan web moden dan digunakan secara meluas untuk kepelbagaian dan fleksibiliti. 1) Pembangunan front-end: Membina laman web dinamik dan aplikasi satu halaman melalui operasi DOM dan kerangka moden (seperti React, Vue.js, sudut). 2) Pembangunan sisi pelayan: Node.js menggunakan model I/O yang tidak menyekat untuk mengendalikan aplikasi konkurensi tinggi dan masa nyata. 3) Pembangunan aplikasi mudah alih dan desktop: Pembangunan silang platform direalisasikan melalui reaktnatif dan elektron untuk meningkatkan kecekapan pembangunan.
Evolusi JavaScript: Trend Semasa dan Prospek Masa DepanApr 10, 2025 am 09:33 AMTrend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.
Demystifying JavaScript: Apa yang berlaku dan mengapa pentingApr 09, 2025 am 12:07 AMJavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.
Adakah Python atau JavaScript lebih baik?Apr 06, 2025 am 12:14 AMPython lebih sesuai untuk sains data dan pembelajaran mesin, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python terkenal dengan sintaks ringkas dan ekosistem perpustakaan yang kaya, dan sesuai untuk analisis data dan pembangunan web. 2. JavaScript adalah teras pembangunan front-end. Node.js menyokong pengaturcaraan sisi pelayan dan sesuai untuk pembangunan stack penuh.
Bagaimana saya memasang javascript?Apr 05, 2025 am 12:16 AMJavaScript tidak memerlukan pemasangan kerana ia sudah dibina dalam pelayar moden. Anda hanya memerlukan editor teks dan penyemak imbas untuk memulakan. 1) Dalam persekitaran penyemak imbas, jalankan dengan memasukkan fail HTML melalui tag. 2) Dalam persekitaran Node.js, selepas memuat turun dan memasang node.js, jalankan fail JavaScript melalui baris arahan.
Bagaimana cara menghantar pemberitahuan sebelum tugas bermula di kuarza?Apr 04, 2025 pm 09:24 PMCara Menghantar Pemberitahuan Tugas di Quartz terlebih dahulu Apabila menggunakan pemasa kuarza untuk menjadualkan tugas, masa pelaksanaan tugas ditetapkan oleh ekspresi cron. Sekarang ...
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
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.
Dreamweaver Mac版
Alat pembangunan web visual
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
