通過前面的講解jquery選擇器我們已經能夠快速而準確的找到我們想要找的元素了,這時我們就得到了這些元素的乙個jquery物件或jquery物件陣列,我們就可以利用jquery強大的功能來對頁面元素進行各種操作了。
1.操作屬性
①讀取屬性
函式是attr(name) 返回值:object 引數-name:屬性名string 如果沒相應屬性返回undefined
重要的一點是,如果選擇了多個元素,該函式只會"理"第乙個元素的這個屬性值,而忽略其他元素的相同屬性,所以盡量應該保證選擇的元素的準確性。
②修改屬性
函式還是 attr(key,value) 返回值:jquery 引數-key:屬性名string|value:屬性值object
還有種過載attr(key,fn) 返回值:jquery 引數-key:屬性名string|fn:函式名function 被選元素的這個屬性值就是fn函式的返回值
還有種過載attr(properties)可以使用"名/值"形式一下修改多個屬性值 返回值:jquery 引數-properties:名/值陣列map
如 為所有影象設定src和alt屬性
$("img").attr(); 函式引數是乙個json物件,名/值對
重要的一點是,如果選擇了多個元素,這些過載的attr會"理"所有元素的這個屬性值,即所有被選的元素的這個屬性值都會被修改。
③刪除屬性
函式與讀取屬性差不多，不多說了 函式是removeattr(name)
2.操作樣式類
①新增樣式類
函式addclass(class) 返回值:jquery 引數-class:類名string
②移除樣式類
函式removeclass(class) 返回值:jquery 引數-class:類名string
以上兩種函式,如果要操作多個class 要用空格分開
③交替樣式類 返回值:jquery 引數-class:類名string
函式toggleclass(class)
檢查要操作的class如果處於存在狀態則移除,如果處於移除狀態則新增。
3.操作css樣式
操作樣式類必須要依賴於已經定義好的class,現在來學習直接操作與css樣式。
①讀取css樣式
函式css(name) 返回值:string 引數-name:類名string
該函式只會"理"第乙個匹配元素的這個類的值 即便沒有人工設定css類 也會獲得系統預設的設定
alert($("div p").css("color")) 彈出p元素的文字的顏色值
②設定css類
函式css(name,value) 返回值;jquery 引數-name:css屬性名string|value:css屬性值string,number
函式css(properties) 返回值:jquery 引數-properties:css名/css值陣列map
以上兩函式會"理"所有元素的這個css屬性,即所有被選的元素的這個css屬性值都會被修改。
$("#id").css()
將某元素的背景顏色設定為綠色,前景色設定為白色
③獲得元素偏移資訊
該函式獲得某元素距離視窗左上角的偏移量,返回top與left兩個值
函式offset() 返回值:object 此函式只對可見元素有效
alert($("#id").offset().top); 彈出某元素距離視窗上沿的偏移量
補： position()
獲取匹配元素相對父元素的偏移( 使用position()方法時事實上是把該元素當絕對定位來處理，獲取的是該元素相當於最近的乙個擁有絕對或者相對定位的父元素的偏移位置。 使用position()方法時如果其所有的父元素都為預設定位（static）方式，則其處理方式和offset()一樣，是當前視窗的相對偏移。 使用offset()方法不管該元素如何定位，也不管其父元素如何定位，都是獲取的該元素相對於當前視口的偏移 )
④獲得和設定高度和寬度
函式height() 返回值:integer 單位:px
如 $(document).height() $(window).height() 分別獲取文件和視窗的高度
函式height(val) 返回值:jquery 引數-val:高度值string,number
函式width() 返回值:integer 單位:px
如 $(document).width() $(window).width() 分別獲取文件和視窗的寬度
函式width(val) 返回值:jquery 引數-val:高度值string,number
以上函式有引數的為number時單位可以是em 預設是px string時可以加%設定佔百分之幾
小例子: $("#id").height(200).width("80%") 將某元素高度設為200px 寬度設為佔百分之八十
4.操作內容
①操作html**
jquery中的函式html()和html(val)分別來獲取或設定指定元素的html**。這裡的html**不包括xml文件,但包括xhtml文件。
html() 返回值:string 取得第乙個匹配元素的html內容
補:這個html()方法只會取其內容，比如test
$("#test").html() 只會是test
而不是test
html(val) 返回值:string 引數-val:設定html**string 設定第乙個匹配元素的html內容
$("1").html() $("1").html(val) 這個1不要是input等表單元素 應該是div a等元素
②操作文字
text() 返回值:string 返回所有匹配元素裡的文字內容(去掉(x)html標籤)組合起來的字串
text(val) 返回值:string 引數-val:設定文字string 返回所有匹配元素的文字內容
這倆方法都支援xml文件
③操作值
表單元素如文字框、多選框、下拉框等的值可以使用函式val()、val(val)來操作
val() 返回值:string,array 取得第乙個匹配元素的值
val(val) 返回值:jquery 引數-val:設定元素值string 設定所有匹配元素的值
5.查詢與篩選元素
除了使用選擇器對元素進行過濾以外,還可以使用函式在做到
①過濾元素集
filter(expr) 返回值:jquery 引數-expr:表示式
篩選出與表示式匹配的元素集合。如有多個表示式用逗號隔開
其他過濾元素的函式還有
eq(index) filter(fn) hasclass(class) is(expr) not(expr) map(callback) slice(start,[end])
②在元素集中查詢
find(expr) 返回值:jquery 引數-expr:表示式string
如$("1").find("#dd") 在1的子元素中查詢id為dd的元素 這裡以及上面的表示式可以是選擇器之類的
next(expr) 返回值:jquery 引數-expr:表示式string
選擇當前元素集合中的每乙個元素後面的第乙個同級兄弟元素 與$("1+2")選擇器不同之處是 next()不需知道其兄弟元素的任何細節
nextall(expr) 選擇當前元素集合中的每乙個元素後面的多個同級兄弟元素
以上倆函式還可以通過他們的表示式引數 在這些同級兄弟元素中再過濾掉一些同級兄弟元素 如nextall("#dd")等(這也是這類函式所共有的特性,他們都可以在本有的元素集中再通過表示式來過濾)
prev(expr) 與next(expr)相反
prevall(expr) 與nextall(expr)相反
parent(expr) 選擇所有匹配元素集合所共同有的唯一的直接父元素 有時他們共有父元素可能是
parents(expr) 選擇所有匹配元素集合的所有父輩元素
children(expr) 選擇所有匹配元素集合中每乙個元素的直接子元素(不是所有後代元素)
contents() 選擇所有匹配元素集合中的所有子節點(包括文字節點)
siblings(expr) 選擇所有匹配元素集合中每乙個元素的所有同級元素
add(expr) 在已經匹配的元素集合基礎上再新增add(表示式)裡匹配的元素集合形成新的元素集合 lookhere
6.鏈式操作
"鏈式操作"是jquery中最具特色的功能之一。就是把之前需要分多行書寫的**用「.」連成一行進行書寫。如下:
$("tr").mouseover(function()).mouseout(function(){
$(this).removeclass("red");
當滑鼠移到一行時新增一種樣式,當滑鼠移出該行時移除該樣式
對於有些返回值是jquery物件的函式,還有一些特殊的鏈式操作來實現一些特殊效果,如下:
①結束當前操作物件
$("1").next().next().end().addclass("red")
如果不加end() 那麼新增red樣式的是1的next().next() 加了end() 新增red樣式的是1的next()
end()能結束它前乙個返回jquery物件的函式的功能
②新增當前操作物件到先前物件
$("1").next().next().andself().addclass()
新增red樣式的是 1, 1的next(), 1的next().next() 很好理解
jQuery 操作得到的元素
操作屬性 1 讀取屬性 attr name 2 修改屬性 attr key,value 提供值，其中key為屬性名，value為屬性值 attr key,fn 提供函式，其中key為屬性名，fn為計算得到屬性值的函式 attr properties 將乙個 名 值 形式的物件設定為所有匹配的元素的屬...
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...