jQuery怎麼使用？ jQuery選擇器有哪些？
- 青灯夜游轉載
- 2018-11-13 10:39:032142瀏覽
本篇文章帶給大家的內容是介紹jQuery怎麼使用？ jQuery選擇器有哪些？讓大家了解jQuery檔案庫的使用，基本語法的使用，jQuery選擇器。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
1. 使用方法
jQuery 函式庫位於一個 JavaScript 檔案中，其中包含了所有的 jQuery 函數。
網頁需要使用到 jQuery 時，需要先在網頁中引入 jQuery 的 js檔案。
76c82f278ac045591c9159d381de2c57 100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e 6cee78a5815e1ea034fd9f5df4179a0c b2386ffb911b14667cb8f0f91ea547a7My Test JQuery6e916e0f7d1e588d4f442bf645aedb2f 9b264bb87e5a392a4202120e2b17019f2cacc6d41bbb37262a98f745aa00fbf0 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e
2. jQuery 語法
jQuery 語法是透過選取 HTML 元素，並對選取的元素執行某些動作。 【相關影片教學推薦：jQuery教學】
#基礎語法形式：
$(selector).action()
範例：
$("p").hide() // 隐藏所有 <p> 元素
$("#myInfo").hide() // 隐藏所有 id="myInfo" 的元素寫法：
所有jQuery 函數位於一個document.ready 的函數中。如下圖。
這是為了防止文件在完全載入（就緒）之前執行 jQuery 程式碼，也就是在 DOM 載入完成後才可以對 DOM 進行操作。
如果在文件沒有完全載入之前就執行函數，操作可能會失敗。
$(document).ready(function(){
// 代码部分写在这里
});
也可以簡寫成下面這樣：
$(function(){
// 这里写代码
});
範例：
76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
6cee78a5815e1ea034fd9f5df4179a0c
b2386ffb911b14667cb8f0f91ea547a7My Test JQuery6e916e0f7d1e588d4f442bf645aedb2f
9b264bb87e5a392a4202120e2b17019f2cacc6d41bbb37262a98f745aa00fbf0
ea1aab715d1b735c8b112b6fff119ca8
$(function(){
$("button").click(function(){
$("#myDiv1").html("Hello JQuery World");
$("#myDiv1").css("background-color","green");
});
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
285f2ee1e472a25f04d29214b2020631点击65281c5ac262bf6d81768915a4a77ac0
78a54985854ba9d1968e744276530244Hello16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
3.基本選擇器
(1) 元素選擇器: jQuery 元素選擇器是基於元素名稱選取元素。
範例：使用元素選擇器選擇所有e388a4556c0f65e1904146cc1a846bee元素，將其隱藏。
76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
6cee78a5815e1ea034fd9f5df4179a0c
b2386ffb911b14667cb8f0f91ea547a7My Test JQuery6e916e0f7d1e588d4f442bf645aedb2f
9b264bb87e5a392a4202120e2b17019f2cacc6d41bbb37262a98f745aa00fbf0
ea1aab715d1b735c8b112b6fff119ca8
$(function(){
$("button").click(function(){
$("p").hide();
});
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
285f2ee1e472a25f04d29214b2020631点击65281c5ac262bf6d81768915a4a77ac0
e388a4556c0f65e1904146cc1a846beep元素194b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beep元素294b3e26ee717c64999d7867364b1b4a3
78a54985854ba9d1968e744276530244Hello16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
(2) #id 選擇器：jQuery #id 選擇器透過 HTML 元素的 id 屬性選取指定的元素。
頁面中元素的id 應該是唯一的，所以您要在頁面中選取唯一的元素需要透過#id 選擇器
舉例：使用#id 選擇器選擇id="myDiv1 "的元素，將其隱藏。
76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
6cee78a5815e1ea034fd9f5df4179a0c
b2386ffb911b14667cb8f0f91ea547a7My Test JQuery6e916e0f7d1e588d4f442bf645aedb2f
9b264bb87e5a392a4202120e2b17019f2cacc6d41bbb37262a98f745aa00fbf0
ea1aab715d1b735c8b112b6fff119ca8
$(function(){
$("button").click(function(){
$("#myDiv1").hide();
});
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
285f2ee1e472a25f04d29214b2020631点击65281c5ac262bf6d81768915a4a77ac0
e388a4556c0f65e1904146cc1a846beep元素194b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beep元素294b3e26ee717c64999d7867364b1b4a3
78a54985854ba9d1968e744276530244Hello16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
(3) .class 選擇器：jQuery 類別選擇器可以透過指定的 class 來尋找元素。
舉例：使用類別選擇器選擇Class=「myClass1」的元素，將其隱藏。
76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
6cee78a5815e1ea034fd9f5df4179a0c
b2386ffb911b14667cb8f0f91ea547a7My Test JQuery6e916e0f7d1e588d4f442bf645aedb2f
9b264bb87e5a392a4202120e2b17019f2cacc6d41bbb37262a98f745aa00fbf0
ea1aab715d1b735c8b112b6fff119ca8
$(function(){
$("button").click(function(){
$(".myClass1").hide();
});
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
285f2ee1e472a25f04d29214b2020631点击65281c5ac262bf6d81768915a4a77ac0
e388a4556c0f65e1904146cc1a846beep元素194b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beep元素294b3e26ee717c64999d7867364b1b4a3
78a54985854ba9d1968e744276530244Hello16b28748ea4df4d9c2150843fecfba68
690022410a1995d4625bdc4d50bc75bc你好16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。
以上是jQuery怎麼使用？ jQuery選擇器有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：cnblogs.com。如有侵權，請聯絡admin@php.cn刪除