jquery選擇元素和屬性操作

2021-08-21 20:54:07 字數 2068 閱讀 4546

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

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

$("#myid") // 選擇id為myid的網頁元素


$(".myclass")// 選擇class為myclass的元素


$("li") // 選擇所有的li標籤元素


$("#ul1 li span") // 選擇id為ul1元素下的所有li下的span


$("input[name=fisrt]") // 選擇name屬性等於first的input元素
$("div").has("p") // 選擇包含p元素的div元素, has裡面過濾條件是標籤元素,不能是選擇器.


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


$("div").not("#bb") //選擇沒有id為bb的div元素. not過濾條件的是選擇器.
注意: 這裡的同級元素都只針對於在同一父元素下

$(


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

alert($("#div1").length)// 彈出1


alert($("#div2").length)// 彈出0,此時沒有找到元素


......


這是乙個div標籤div>
jquery操作思想二:同乙個函式完成取值和賦值

// 獲取div元素的樣式


$("div").css("width");


// 設定div的樣式


$("div").css("width", "30px");


$("div").css();
注意:選擇器獲取多個元素時, 獲採樣式資訊獲取的是第乙個元素的樣式資訊

$("#div01").addclass("divclass01")// 為id為div01的物件追加div樣式divclass01


$("#div01").removeclass("divclass01")// 移除id為div01的物件的class名為divclass01的樣式


$("#div01").removeclass("divclass01 divclass02")// 移除多個樣式


$("#div01").toggleclass("anotherclass")// 重複切換anotherclass樣式
// 獲取某個屬性的值


var $id = $("div").prop("id");


var $src = $("#img1").prop("src");


$("#img1").prop();
// 取出html內容


var $html = $("#div1").html();


// 設定html內容


$("#div1").html("新增文字");

jQuery操作元素屬性

返回或設定被選元素的屬性和值 當返回屬性值時，則返回第乙個匹配元素的值 當設定屬性值時，則為匹配元素集合設定乙個或多個屬性 值對 語法格式 返回屬性的值 selector prop property 設定屬性和值 selector prop property,value 使用函式設定屬性和值 sel...

Jquery操作元素屬性

1.獲取元素的屬性 btn attr property property可以使元素的樣式屬性，如style或value等 2.0設定元素的屬性 btn attr 屬性名稱 屬性值 btn attr type text 2.1.設定元素的多個屬性 btn attr 屬性名稱 屬性值 btn attr ...

使用jQuery操作元素屬性

在jquery中,提供了attr函式來操作元素屬性,具體如下 函式名 說明例子 attr name 取得第乙個匹配元素的屬性值.input attr value attr property 將乙個 名 值 形式的物件設定為所有匹配元素的屬性 input attr attr key,value 為所有...