jQuery Panduan Bermula untuk Beginners_jquery-tutorial js-php.cn

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 还有其它许多动画效果需要不断地去深入学习和挖掘。