第83天:jQuery中操作form表單
操作form表單
1、 屬性操作
設置屬性:
// 第一個參數表示:要設置的屬性名稱
// 第二個參數表示:該屬性名稱對應的值
$(selector).attr(“title”, “傳智播客”);
獲取屬性:
// 參數為:要獲取的屬性的名稱,改操作會返回指定屬性對應的值
$(selector).attr(“title”);
此時,返回指定屬性的值
移除屬性:
// 參數為:要移除的屬性的名稱
$(selector).removeAttr(“title”);
注意:checked、selected、disabled要使用.prop()方法。
prop方法通常用來影響DOM元素的動態狀態,而不是改變的HTML屬性。例如:input和button的disabled特性,以及checkbox的checked特性。
細節參考:http://api.jquery.com/prop/
2、 值和內容
val()方法:
作用:設置或返回表單元素的值,例如:input,select,textarea的值
// 獲取匹配元素的值,只匹配第一個元素
$(selector).val();
// 設置所有匹配到的元素的值
$(selector).val(“具體值”);
text() 方法:
作用:設置或獲取匹配元素的文本內容
//獲取操作不帶參數(注意:這時候會把所有匹配到的元素內容拼接為一個字符串,不同于其他獲取操作!)
$(selector).text();
//設置操作帶參數,參數表示要設置的文本內容
// 如果設置的內容包含html標簽(<span>我要動態創建span,這時候行嗎?</span>),那么text這個方法會把他們當作文本內容輸出,而不會創建元素。這個text()和html()方的主要區別
$(selector).text(“我是內容”);
3、val()、text()和html()的區別
1 <script> 2 $(function(){ 3 //val() 4 alert($("input").val());//val(),獲取標簽中的value值的內容 5 $("input").val("我是剛剛賦值的input"); 6 //text() 7 alert($("div").text());//獲取雙閉合標簽中的文本,不識別標簽 8 $("div").text("我是剛剛賦值的div"); 9 //html() 10 alert($("div").html());//獲取雙閉合標簽中的文本值,識別標簽 11 $("div").html("<li>我是html賦值的</li>") 12 13 }) 14 </script>