jQuery之DOM操作二

接著上一節，介紹幾個常用的jquery的dom操作方法

test

input radio1
radio2

1、html()：獲取或者修改指定元素的html內容，類似於js原生的innerhtml屬性

alert($("p").html());//獲取p標籤的html內容並輸出test$("p").html("title");//修改p標籤的html內容

p標籤變為：
title

2、text()：獲取或者修改指定元素的文字內容，類似於js原生的innertext屬性

alert($("p").text());//獲取p標籤的文字內容並輸出test

$("p").text("update title");//修改p標籤的文字內容
p標籤變為：
update title

3、val()：獲取指定文字框、下拉框、核取方塊、單選框等的value值，類似於js原生的value屬性

var value = $(":input[name=textinput]").val();//獲取文字框的value

alert(value);//輸出value值hello
$(":input[name=textinput]").val("文字框");//設定文字框的value
變為：input
var radiovalue = $(":input[name=radioinput]:checked").val();//獲取單選框選中的value 
alert(radiovalue);//輸出radiovalue值2
$(":input[name=radioinput]").val(["1"]);//選中值為1的單選框，注意是用陣列的方式

1、children()：獲取指定元素的一級子節點集合，不包括一級子節點下面的子節點

alert($("body").children().length);//輸出1

alert($("div").children().length);//輸出6
alert($("div:first").children().length);//輸出3
alert($("p").children().length);//輸出1
或者遍歷指定元素的指定一級子節點
$("div").children("input").length;//輸出3

2、next()：獲取指定元素後面緊鄰的同輩元素（緊鄰的第乙個）

nextall()：獲取指定元素後面緊鄰的所有同輩元素

var pnext = $('p').next();

input
radio1
radio2

3、prev()：獲取指定元素前面緊鄰的同輩元素（緊鄰的第乙個）

prevall()：獲取指定元素前面所有的同輩元素

var divprev = $("div:eq(1)").prev();

test

4、siblings()：獲取指定元素前後的所有同輩元素

var h3_siblings = $("h3").siblings();

test
input
radio1
radio2

5、closest()：獲取離指定位置最近的匹配元素。這個方法會首先檢查當前元素，如果匹配則返回元素本身，否則向上查詢父元素，直到找到匹配的元素並返回；如果沒有匹配到則返回乙個空的jquery物件

$(document).click(function(e))

//設定h3標籤的字型大小為2.0em

$("h3").css("font-size","28px");
//輸出h3標籤的字型大小樣式
alert($("h3").css("font-size"));//輸出28px

如果要同時設定多個樣式，則可以將引數寫成鍵值對的樣式

//同時設定h3標籤的字型大小、樣式、顏色

$("h3").css();

2、offset()：獲取指定元素在當前視窗的相對偏移，返回乙個物件，該方法只對可見元素有效

var h3_offset = $("h3").offset();

var offset_top = h3_offset.top;
var offset_left = h3_offset.left;
alert("top:"+offset_top+",left:"+offset_left);

3、position()：獲取指定元素相對於最近的乙個position為relative、absolute的祖父節點的相對偏移，返回乙個物件

var h3_position = $("h3").position();

var position_top = h3_position.top;
var position_left = h3_position.left;
alert("top:"+position_top+",left:"+position_left);

4、scrolltop()、scrollleft()：分別獲取指定元素的滾動條距離頂部、左側的距離

var scroll_top = $("h3").scrolltop();

var scroll_left = $("h3").scrollleft();
alert("scroll--top:"+scroll_top+",left:"+scroll_left);

jQuery學習筆記 二 DOM操作

dom操作是對dom樹進行插入，刪除，修改。1.建立新元素可以有三種方法 1 var newelement 通過 函式建立 2 var newelement old clone 通過已有的元素進行複製，clone 可以傳遞true，這樣複製的元素也會複製已有元素的事件處理函式以及關聯資料 data ...

jQuery例項方法 DOM操作 二

html text size html innerhtml 取值 ul html string型別 ul li html 只得到第乙個li的內容 賦值 ul html abc ul li html 9 賦值全能成功 var arrname 趙 錢 孫 李 ul li html function in...

jQuery之dom操作 遍歷節點

jquery之dom操作 遍歷節點 children children selector 只考慮子元素，不考慮其他後代元素 next next selector 下乙個兄弟節點 prev prev selector 上乙個兄弟節點 siblings siblings selector 其他兄弟節點 ...