1. jquery選擇器

1.1. jquery用法思想一

選擇某個頁面元素, 然後對它進行某種操作.

1.2. jquery選擇器

jquery選擇可以快速地選擇元素, 選擇規則和css樣式相同, 可以使用length屬性判斷是否選擇成功.

$("#myId") // 選擇id為myId的網頁元素
$(".myClass")// 選擇class為myClass的元素
$("li") // 選擇所有的li標籤元素
$("#ul1 li span") // 選擇id為ul1元素下的所有li下的span
$("input[name=fisrt]") // 選擇name屬性等於first的input元素

1.3. 選擇集過濾

$("div").has("p") // 選擇包含p元素的div元素
$("div").eq("5") // 選擇第6個div元素, 注意:這裡的索引排序為同一父元素下的同級元素.

1.4. 選擇集轉移

注意: 這裡的同級元素都只針對於在同一父元素下

$("#box").prev() // 選擇id是box的元素前面緊挨的同級元素
$("#box").prevAll // 選擇id是box的元素前面所有的同級元素
$("#box").next() // 選擇id是box的元素後面緊挨的同級元素
$("#box").nextAll // 選擇id是box的元素後面所有的同級元素
$("#box").siblings() // 選擇id是box的元素的同級元素
$("#box").children() // 選擇id是box的元素的所有子元素
$("#box").parent() // 選擇id是box的元素的父元素
$("#box").find(".myClass")// 選擇id是box的元素內的class等於myClass的元素
 

1.5. length屬性判斷是否選擇到了元素

jquery有容錯機制, 即使沒有找到元素, 也不會報錯(此時length等於0), 可以用length屬性來判斷是否找到了這個元素. length的值就是我們找到的元素數.

alert($("#div1").length) // 彈出1
alert($("#div2").length) // 彈出0,此時沒有找到元素
......
<div id="div1">這是一個div標籤</div>

2. jquery樣式操作

jquery操作思想二:同一個函式完成取值和賦值

2.1. 操作行間樣式

// 獲取div元素的樣式
$("div").css("width");

// 設定div的樣式
$("div").css("width", "30px");
$("div").css({"height":"30px", "color":"red"});
 

注意:選擇器獲取多個元素時, 獲取樣式資訊獲取的是第一個元素的樣式資訊

2.2. 操作樣式類名

$("#div01").addClass("divClass01")// 為id為div01的物件追加div樣式divClass01
$("#div01").removeClass("divClass01")// 移除id為div01的物件的class名為divclass01的樣式
$("#div01").removeClass("divClass01 divClass02")// 移除多個樣式
$("#div01").toggleClass("anotherClass")// 重複切換anotherclass樣式