目錄
操作元素的屬性
獲取元素的屬性值
設定元素的屬性值
洗掉元素的屬性
操作樣式
操作樣式類
獲取或設定元素的高度和寬度
操作HTML代碼
操作文本
操作值
操作元素的固有屬性
jQuery操作頁面元素的屬性
屬性是每個頁面的重要內容，HTML標簽可以有一到若干個屬性，比如id就是元素的常用屬性之一
操作元素的屬性
獲取元素的屬性值
讀取元素屬性的函式時attr(屬性名) 例：$(selector).attr(屬性名)
| 函式名 | attr(屬性名) |
| 作用 | 取得第一個匹配元素的屬性值，通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值，如果元素沒有相應屬性，則回傳undefined |
| 回傳值 | Object |
| 引數 | name(String)：屬性名稱 |
設定元素的屬性值
A、以物件的方式設定屬性值：$(selector).attr({'屬性名':'屬性值'})
B、以key-value的方式設定屬性值：$(selector).attr('屬性名','屬性值')
C、以回呼函式的方式設定屬性值：$(selector).attr('屬性名',function(){
return '值'
})
attr(key,value)函式的原型、作用、回傳值以及包含引數的意義：
| 函式名 | attr(key,fn) |
| 作用 | 為所有匹配的元素設定一個計算的屬性值，不提供值，而是提供一個函式，由這個函式計算的值作為屬性值 |
| 回傳值 | jQuery |
| 引數 | key(String)：屬性名稱； fn (Function)：回傳值的函式 范圍:當前元素, 引數: 當前元素的索引值 |
洗掉元素的屬性
$(selector).removeAttr('屬性名')
操作樣式
(1)獲取樣式屬性的值：$(selector).css('樣式屬性名')
(2)設定樣式屬性的值
A、以傳入物件的方式設定樣式：$(selector).css({'樣式屬性':'值'})
B、以給函式傳值的方式設定樣式：$(selector).css('樣式屬性名','屬性值')
操作樣式類
(1)添加樣式類：$(selector).addClass(樣式類名)
(2)洗掉樣式類：$(selector).removeClass(樣式類名)
(3)判斷元素是否含有給定的樣式類：$(selector).hasClass(樣式類名)
(4)交替添加(洗掉)樣式類：$(selector).toggleClass(樣式類名)
實體：當用戶名為abc時，滑鼠離開會顯示“用戶名可用”，否則顯示“用戶名不可用”
<style>
.ok{ /*兩個類選擇器*/
color:green;
}
.err{
color: red;
}
</style>
<body>
<label>
用戶名：
<input type="text" id="username">
<span id="msg"></span>
</label>
<script>
$(function(){
$('#username').blur(function(){ //給文本框系結失去焦點的事件
var name = $('#username').val() //獲取id為username的input的值
if(name === 'abc'){
$('#msg').html('用戶名可用') //此處的html相當于innerHTML
if($('#msg').hasClass('err')){ //判斷是否存在err樣式
$('#msg').removeClass('err') //存在則移除err樣式
}
$('#msg').addClass('ok')
}else{
$('#msg').html('用戶名不可用')
if($('#msg').hasClass('ok')){
$('#msg').removeClass('ok')
}
$('#msg').addClass('err')
}
})
})
</script>
</body>結果：
強調：使用addClass(class)和removeClass(class)函式可以方便地對頁面元素應用設定好的樣式類，但是，這種需求改變了頁面元素的class屬性，而且其局限性在于必須事先定義好將要使用的CSS樣式類，這樣一來其靈活性就不是很好，
獲取或設定元素的高度和寬度
(1)寬度： $(selector).width() : 獲取寬度
$(selector).width(value) ：設定寬度
(2)高度： $(selector).height() ：獲取高度
$(selector).height(value) : 設定高度
操作HTML代碼
作用類似于innerHTML，html(val)函式用來設定第一個匹配元素的HTML內容，其對XHTML檔案以及HTML檔案的各種標簽元素支持良好，
(1)獲取html代碼：$(selector).html()
(2)設定html代碼：$(selector).html('html代碼')
| 函式名 | html(val) |
| 作用 | 設定第一個匹配元素的html內容，這個函式不能用于XML檔案，但可以用于XHTML檔案， |
| 回傳值 | String |
| 例子 | html頁面代碼：<div></div> jquery代碼：$("div").html("<p>Nice to meet you</p>"); 結果：[ <div><p> Nice to meet you</p></div> ] |
操作文本
作用類似于innerText，除了可以直接操作HTML代碼之外，jQuery還提供了一種可以直接操作指定元素標簽內文本內容的函式，即text()以及text(val)函式，
(1)獲取標簽的文本：$(selector).text()
| 函式名 | text() |
| 作用 | 取得所有匹配元素的內容，結果是由所有匹配元素包含的文本內容組合起來的文本，這個方法對HTML和XML檔案都有效 |
| 回傳 | String |
| 例子 | html頁面代碼：<p><b>Hello</b> fine</p> <p>Thank you!</p> jquery代碼：$("p").text(); 結果：HellofineThankyou! |
(2)設定標簽的文本：$(selector).text('文本')
操作值
(1)獲取元素的value屬性值：$(selector).val()
| 函式名 | val() |
| 作用 | 獲得第一個匹配元素的當前值 |
| 回傳值 | String,Array |
(2)設定元素的value屬性值：$(selector).val(值)
| 函式名 | val(val) |
| 作用 | 設定每一個匹配元素的值， |
| 回傳值 | jQuery |
| 引數 | val(String)：要設定的值 |
| 例子 | html頁面代碼：<input type="text"/> jquery代碼：$("input").val("hello world!"); 結果：hello world! |
操作元素的固有屬性
(1)獲取元素的固有屬性值：$(selector).prop('屬性名')
(2)設定元素的固有屬性值：$(selector).prop('屬性名','屬性值')
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290891.html
標籤：其他