jQuery 操作得到的元素

2022-08-19 12:09:14 字數 3463 閱讀 4868

操作屬性

1、讀取屬性

attr(name)

2、修改屬性

attr(key,value) 提供值,其中key為屬性名,value為屬性值

attr(key,fn) 提供函式,其中key為屬性名,fn為計算得到屬性值的函式

attr(properties)

將乙個「名/值」形式的物件設定為所有匹配的元素的屬性

引數properties(map)作為屬性的「名/值」物件

3、刪除屬性

removeattr(name)

操作樣式表

1、新增樣式

addclass(class) class為css中的樣式類別,正如前面所設定的red green等。

2、去除樣式類

removeclass(class)

3、交替樣式類

toggleclass(class) 如果存在就刪除樣式類,如果不存在就新增樣式類

操作css

1、讀取css

css(name) 呼叫方式:$("#content p".css("color"));將顯示指定段落的rgb值

2、修改css

css(key,value) 提供值,其中key為屬性名,value為屬性值

呼叫方式: $("#content p".css("color","red"));

attr(properties)

將乙個「名/值」形式的物件設定為所有匹配的元素的屬性

引數properties(map)作為屬性的「名/值」物件

呼叫方式:

$("#content p#second").css();

3、獲取元素偏移資訊

offset() 返回的物件包括兩個整體屬性,object(top,left)

呼叫方式如下:

var left=$("#content p#second").offset().left;//

取得座標左位置

var top=$("#content p#second").offset().left;//

取得座標右位置

4、獲得和設定高度

height() 返回高度的整型值

呼叫方式如下:

$("#content p#second").height();//返回元素塊的高度

取得文件的高度

$(window).height();

設定高度 height(val)

5、獲得和設定寬度

獲取width();設定width(val)

6、操作頁面元素的內容

操作html**

html();

呼叫方式$("div #first").html();//彈出對話方塊顯示元素內的html內容

html(val) 使用者設定html內容的值

7、操作文字

text(),只顯示其中的文字內容

text(val) 設定元素內容的文字

8、操作值

val()獲取第乙個匹配元素的值

呼叫方式為:$("#username").val();

val(val)

呼叫方式:

$("username").val("jquery");

$("multiple").val(["青島","西安"]);

對於多選框的操作是將引數以陣列的形式傳入

9、查詢與篩選元素

過濾篩選元素

filter(expr)

篩選出與指定表示式匹配的元素集合,和整個方法使用者縮小匹配的範圍,用逗號分隔多個表示式

hasclass(class);

呼叫方式如下:

$("p").each(

function()}

);

其中each函式用於遍歷頁面上所有的標籤元素

is(expr)函式和hasclass(class)一樣,其返回值均為布林型。就本例而言,

還可以使用另乙個jquery的過濾元素集函式來實現:not(expr)

jquery過濾元素集函式列表

eq(index)、filter(expr)、filter(fn)、hasclass()、is(expr)、not(expr)

map(callback) callback給每個元素執行的函式,建立乙個列表

slice(start,[end]) 選取乙個匹配的子集,end可選

查詢元素

find(expr) 被用來搜尋所有與指定表示式相匹配的元素,常用於查詢元素的後代元素

呼叫方式:$("form").find("#firstname").addclass("green");

如果把上述呼叫**改寫成:

$("input").find("#firstname").addclass("green");

將不會得到預期結果

next(expr) 用於取得乙個匹配的元素集合中每個元素緊鄰的後面同輩元素的元素集合,其實現

效果為只有乙個元素匹配到。

nextall(expr) 查詢當前元素之後所有的同輩元素,可用於表示式過濾

呼叫方式為:$("input#firstname").nextall("#city").addclass("green");

jquery用於在元素集中查詢子元素集以及子元素的函式還有很多,如下面

add(expr)、children([expr])只檢查子元素,不檢查其所有後代元素

contents()、parent([expr]) 取得乙個包含所有匹配元素的唯一父元素

parents([expr]) 取得乙個包含所有匹配元素的祖先元素的元素集合

prev([expr]) 用於篩選前乙個同輩元素

prev([expr]) 查詢當前元素之前所有的同輩元素

sliblings([expr]) 取得乙個包含匹配的元素集合中每乙個元素的所有唯一同輩元素的元素集合。

可以用可選表示式進行篩選

10、鏈式操作

將多句jquery語句用「.」合併成一句,

原來:

$(document).ready(function

());

$("tr").mouseout(

function

());

現在:

$(document).ready(function

()).mouseout(

function

());

end()函式將運算元回滾到最近的乙個「破壞性」運算元之前,也就是說將匹配的元素列表變為前一次的狀態

呼叫方式:$("tr#first").next().end().addclass("trhover");

新增當前操作物件到先前物件

andself() 將先前所匹配的元素加入到當前元素中

呼叫方式:$("tr#first").next().andself().addclass("trhover");

jQuery操作得到的元素

通過前面的講解jquery選擇器我們已經能夠快速而準確的找到我們想要找的元素了,這時我們就得到了這些元素的乙個jquery物件或jquery物件陣列,我們就可以利用jquery強大的功能來對頁面元素進行各種操作了。1.操作屬性 讀取屬性 函式是attr name 返回值 object 引數 name...

jQuery操作元素

對於元素屬性的操作 attr 屬性名 獲得屬性 如 a attr href 獲得鏈結的內容 removeattr 屬性名 刪除此屬性 如 a removeattr href 移除href屬性 2.對於元素內容的操作 dd html 獲得元素的html內容 dd html 哈哈哈 設定元素的html內...

jQuery操作元素

獲取內容 test text test html test val 獲取屬性 test attr href 設定或者修改屬性 attr disabled disabled removeattr checked input select在value值變化時可以呼叫不同的函式 change functi...