Rumah hujung hadapan web tutorial js jQuery Panduan Bermula untuk Beginners_jquery

jQuery Panduan Bermula untuk Beginners_jquery

May 16, 2016 pm 03:45 PM
jquery bermula

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>

Salin selepas log masuk

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:

Salin kod Kod adalah seperti berikut:

Parameter ver=1.1.4 ditambahkan selepas alamat Perlu diingatkan bahawa kod JavaScript tidak boleh menerima sebarang parameter Parameter ini ditambahkan di sini hanya untuk membolehkan penyemak imbas mendapatkan versi terkini daripada pelayan, kerana Anda mungkin sudah mempunyai fail jquery.min.js dalam cache penyemak imbas anda sebelum ini. Ini hanya untuk mengelakkan caching.
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>

Salin selepas log masuk

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" 的超链接

Salin selepas log masuk

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"); // 选择列表中的第一个元素

Salin selepas log masuk

jQuery sendiri juga mentakrifkan beberapa kaedah pemilih Berikut ialah beberapa contoh:

$(":animated"); // 选择所有正在执行动画效果的元素
$(":button"); // 选择所有按钮元素 (input 或 button)
$(":radio"); // 选择所有单选框元素
$(":checkbox"); // 选择所有复选框元素
$(":checked"); // 选择所有已经在 选定状态 的单选框和复选框
$(":header"); // 选择所有标题元素 (h1, h2, h3, h4 ...)

Salin selepas log masuk

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" 的类 (如果该元素中不存在这个类,则为它加上这个类;如存在,则移除之)

Salin selepas log masuk

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 的类!");
}

Salin selepas log masuk

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

Salin selepas log masuk

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 标签除外

Salin selepas log masuk

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 中的内容将被这行文本替换掉

Salin selepas log masuk

Tambah kandungan dalam elemen:

$("#myElement").append("<p>This is the new content.</p>");
// 保留标签内原有内容,并在末尾处追加新内容

Salin selepas log masuk

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() {
 // 可以在这里写一些代码
 // 当超链接被点击的时候这里的代码将被执行
});

Salin selepas log masuk

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() {
 // 这里可以写一些代码,当元素被隐藏/显示后,这里的代码将被执行
});

Salin selepas log masuk

可以看到,当元素显示或隐藏的时候,是慢慢的渐渐变化的,这是因为上面用到了几个速度参数,如 slow,fast,除此之外还有 normal,数字 1000 表示毫秒数,可以自定义。如果没有设置速度参数,那么元素将直接显示或隐藏,一闪而过,没有任何动画效果。后面的第二个参数是一个 function,用来当显示/隐藏完毕后,再执行一些需要的代码,如果不需要,可省略此参数。

另外还有一种“渐隐渐显”的方法,也是动画效果,使用方法如下:

$("#myElement").fadeOut("slow", function() {
 // 这里的代码在 fade out 完成后执行
});

$("#myElement").fadeIn("slow", function() {
 // 这里的代码在 fade in 完成后执行
});

Salin selepas log masuk

调整元素的透明度:

$("#myElement").fadeTo(2000, 0.4, function() {
 // 这里的代码在在调整透明度完成后执行
});

其中第一个参数是仍然是速度参数,第二个参数是透明度,但三个参数是一个匿名回调函数,当渐变完成后执行。
jQuery 之动画效果

jQuery 可以为 DOM 元素添加上下滑动效果:

$("#myElement").slideDown("fast", function() {
 // .......
});

$("#myElement").slideUp("slow", function() {
 // .......
});

$("#myElement").slideToggle(1000, function() {
 // .......
});

Salin selepas log masuk

jQuery 的动画效果还可以应用在改变 DOM 元素样式的时候,使改变样式的过程以平滑过渡的方式进行,而且可以选择需要速度,示例如下:

$("#myElement").animate({
 opacity: 0.3,
 width: "500px",
 height: "700px"
 }, 
 1000, 
 function() {
 // ......
});

Salin selepas log masuk

总的来说,jQuery 的动画效果很强大,但是也有其怪癖(例如要改变颜色的话,可能需要其它特定的插件)。jQuery 还有其它许多动画效果需要不断地去深入学习和挖掘。

Kenyataan Laman Web ini
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

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.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tutorial Model Penyebaran Bernilai Masa Anda, dari Universiti Purdue Tutorial Model Penyebaran Bernilai Masa Anda, dari Universiti Purdue Apr 07, 2024 am 09:01 AM

Penyebaran bukan sahaja boleh meniru lebih baik, tetapi juga "mencipta". Model resapan (DiffusionModel) ialah model penjanaan imej. Berbanding dengan algoritma yang terkenal seperti GAN dan VAE dalam bidang AI, model resapan mengambil pendekatan yang berbeza. Idea utamanya ialah proses menambah hingar pada imej dan kemudian secara beransur-ansur menolaknya. Cara mengecilkan dan memulihkan imej asal adalah bahagian teras algoritma. Algoritma akhir mampu menghasilkan imej daripada imej bising rawak. Dalam beberapa tahun kebelakangan ini, pertumbuhan luar biasa AI generatif telah membolehkan banyak aplikasi menarik dalam penjanaan teks ke imej, penjanaan video dan banyak lagi. Prinsip asas di sebalik alat generatif ini ialah konsep resapan, mekanisme pensampelan khas yang mengatasi batasan kaedah sebelumnya.

Hasilkan PPT dengan satu klik! Kimi: Biarlah 'pekerja migran PPT' menjadi popular dahulu Hasilkan PPT dengan satu klik! Kimi: Biarlah 'pekerja migran PPT' menjadi popular dahulu Aug 01, 2024 pm 03:28 PM

Kimi: Hanya dalam satu ayat, dalam sepuluh saat sahaja, PPT akan siap. PPT sangat menjengkelkan! Untuk mengadakan mesyuarat, anda perlu mempunyai PPT; untuk menulis laporan mingguan, anda perlu mempunyai PPT untuk membuat pelaburan, anda perlu menunjukkan PPT walaupun anda menuduh seseorang menipu, anda perlu menghantar PPT. Kolej lebih seperti belajar jurusan PPT Anda menonton PPT di dalam kelas dan melakukan PPT selepas kelas. Mungkin, apabila Dennis Austin mencipta PPT 37 tahun lalu, dia tidak menyangka satu hari nanti PPT akan berleluasa. Bercakap tentang pengalaman sukar kami membuat PPT membuatkan kami menitiskan air mata. "Ia mengambil masa tiga bulan untuk membuat PPT lebih daripada 20 muka surat, dan saya menyemaknya berpuluh-puluh kali. Saya rasa ingin muntah apabila saya melihat PPT itu." ialah PPT." Jika anda mengadakan mesyuarat dadakan, anda harus melakukannya

Semua anugerah CVPR 2024 diumumkan! Hampir 10,000 orang menghadiri persidangan itu di luar talian dan seorang penyelidik Cina dari Google memenangi anugerah kertas terbaik Semua anugerah CVPR 2024 diumumkan! Hampir 10,000 orang menghadiri persidangan itu di luar talian dan seorang penyelidik Cina dari Google memenangi anugerah kertas terbaik Jun 20, 2024 pm 05:43 PM

Pada awal pagi 20 Jun, waktu Beijing, CVPR2024, persidangan penglihatan komputer antarabangsa teratas yang diadakan di Seattle, secara rasmi mengumumkan kertas kerja terbaik dan anugerah lain. Pada tahun ini, sebanyak 10 kertas memenangi anugerah, termasuk 2 kertas terbaik dan 2 kertas pelajar terbaik Selain itu, terdapat 2 pencalonan kertas terbaik dan 4 pencalonan kertas pelajar terbaik. Persidangan teratas dalam bidang visi komputer (CV) ialah CVPR, yang menarik sejumlah besar institusi penyelidikan dan universiti setiap tahun. Mengikut statistik, sebanyak 11,532 kertas telah diserahkan tahun ini, 2,719 daripadanya diterima, dengan kadar penerimaan 23.6%. Menurut analisis statistik data CVPR2024 Institut Teknologi Georgia, dari perspektif topik penyelidikan, bilangan kertas terbesar ialah sintesis dan penjanaan imej dan video (Imageandvideosyn

Daripada logam kosong kepada model besar dengan 70 bilion parameter, berikut ialah tutorial dan skrip sedia untuk digunakan Daripada logam kosong kepada model besar dengan 70 bilion parameter, berikut ialah tutorial dan skrip sedia untuk digunakan Jul 24, 2024 pm 08:13 PM

Kami tahu bahawa LLM dilatih pada kelompok komputer berskala besar menggunakan data besar-besaran Tapak ini telah memperkenalkan banyak kaedah dan teknologi yang digunakan untuk membantu dan menambah baik proses latihan LLM. Hari ini, perkara yang ingin kami kongsikan ialah artikel yang mendalami teknologi asas dan memperkenalkan cara menukar sekumpulan "logam kosong" tanpa sistem pengendalian pun menjadi gugusan komputer untuk latihan LLM. Artikel ini datang daripada Imbue, sebuah permulaan AI yang berusaha untuk mencapai kecerdasan am dengan memahami cara mesin berfikir. Sudah tentu, mengubah sekumpulan "logam kosong" tanpa sistem pengendalian menjadi gugusan komputer untuk latihan LLM bukanlah proses yang mudah, penuh dengan penerokaan dan percubaan dan kesilapan, tetapi Imbue akhirnya berjaya melatih LLM dengan 70 bilion parameter proses terkumpul

Mesti dibaca untuk pemula teknikal: Analisis tahap kesukaran bahasa C dan Python Mesti dibaca untuk pemula teknikal: Analisis tahap kesukaran bahasa C dan Python Mar 22, 2024 am 10:21 AM

Tajuk: Wajib dibaca untuk pemula teknikal: Analisis kesukaran bahasa C dan Python, memerlukan contoh kod khusus Dalam era digital hari ini, teknologi pengaturcaraan telah menjadi keupayaan yang semakin penting. Sama ada anda ingin bekerja dalam bidang seperti pembangunan perisian, analisis data, kecerdasan buatan, atau hanya belajar pengaturcaraan kerana minat, memilih bahasa pengaturcaraan yang sesuai ialah langkah pertama. Di antara banyak bahasa pengaturcaraan, bahasa C dan Python adalah dua bahasa pengaturcaraan yang digunakan secara meluas, masing-masing mempunyai ciri tersendiri. Artikel ini akan menganalisis tahap kesukaran bahasa C dan Python

AI sedang digunakan |. AI mencipta vlog kehidupan seorang gadis yang tinggal bersendirian, yang menerima berpuluh ribu suka dalam masa 3 hari AI sedang digunakan |. AI mencipta vlog kehidupan seorang gadis yang tinggal bersendirian, yang menerima berpuluh ribu suka dalam masa 3 hari Aug 07, 2024 pm 10:53 PM

Editor Laporan Kuasa Mesin: Yang Wen Gelombang kecerdasan buatan yang diwakili oleh model besar dan AIGC telah mengubah cara kita hidup dan bekerja secara senyap-senyap, tetapi kebanyakan orang masih tidak tahu cara menggunakannya. Oleh itu, kami telah melancarkan lajur "AI dalam Penggunaan" untuk memperkenalkan secara terperinci cara menggunakan AI melalui kes penggunaan kecerdasan buatan yang intuitif, menarik dan padat serta merangsang pemikiran semua orang. Kami juga mengalu-alukan pembaca untuk menyerahkan kes penggunaan yang inovatif dan praktikal. Pautan video: https://mp.weixin.qq.com/s/2hX_i7li3RqdE4u016yGhQ Baru-baru ini, vlog kehidupan seorang gadis yang tinggal bersendirian menjadi popular di Xiaohongshu. Animasi gaya ilustrasi, ditambah dengan beberapa perkataan penyembuhan, boleh diambil dengan mudah dalam beberapa hari sahaja.

Mengira 12 titik kesakitan RAG, arkitek kanan NVIDIA mengajar penyelesaian Mengira 12 titik kesakitan RAG, arkitek kanan NVIDIA mengajar penyelesaian Jul 11, 2024 pm 01:53 PM

Retrieval-augmented generation (RAG) ialah teknik yang menggunakan perolehan semula untuk meningkatkan model bahasa. Secara khusus, sebelum model bahasa menjana jawapan, ia mendapatkan semula maklumat yang berkaitan daripada pangkalan data dokumen yang luas dan kemudian menggunakan maklumat ini untuk membimbing proses penjanaan. Teknologi ini boleh meningkatkan ketepatan dan perkaitan kandungan dengan banyak, mengurangkan masalah halusinasi dengan berkesan, meningkatkan kelajuan kemas kini pengetahuan, dan meningkatkan kebolehkesanan penjanaan kandungan. RAG sudah pasti salah satu bidang penyelidikan kecerdasan buatan yang paling menarik. Untuk butiran lanjut tentang RAG, sila rujuk artikel lajur di tapak ini "Apakah perkembangan baharu dalam RAG, yang pakar dalam menebus kekurangan model besar?" Ulasan ini menerangkannya dengan jelas." Tetapi RAG tidak sempurna, dan pengguna sering menghadapi beberapa "titik kesakitan" apabila menggunakannya. Baru-baru ini, penyelesaian AI generatif termaju NVIDIA

Panduan Bermula VSCode: Mesti dibaca untuk pemula untuk menguasai kemahiran penggunaan dengan cepat! Panduan Bermula VSCode: Mesti dibaca untuk pemula untuk menguasai kemahiran penggunaan dengan cepat! Mar 26, 2024 am 08:21 AM

VSCode (Visual Studio Code) ialah editor kod sumber terbuka yang dibangunkan oleh Microsoft Ia mempunyai fungsi yang berkuasa dan sokongan pemalam yang kaya, menjadikannya salah satu alat pilihan untuk pembangun. Artikel ini akan menyediakan panduan pengenalan untuk pemula untuk membantu mereka menguasai kemahiran menggunakan VSCode dengan cepat. Dalam artikel ini, kami akan memperkenalkan cara memasang VSCode, operasi penyuntingan asas, kekunci pintasan, pemasangan pemalam, dsb., dan menyediakan contoh kod khusus kepada pembaca. 1. Pasang VSCode dahulu, kita perlu

See all articles