欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Jquery操作DOM元素方法詳解

 更新時(shí)間：2023年03月24日 15:03:15   作者：springsnow  
本文詳細(xì)講解了Jquery操作DOM元素的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、文本輸入框: text

<input type="text" value="99.com" size=12 id="input1" />

1、獲取文本值：

$("#input1").val();

2、選中文本：

$("#input1").select();

3、禁用、啟用文本框

$("#input1"].attr("disabled",true);

4、只讀、取消只讀：

$("#input1"].attr("readonly",true);

二、單選框: radio

<intput type="radio" name="sex" value="0"/>男
<intput type="radio" name="sex" value="1"/>女

1、得到單選框的選中項(xiàng)的值：

$("input[type=radio][name=sex]:checked").val();

2、勾選單選框的項(xiàng)：

$("input:radio][name=sex][value=0]).prop("checked",true); 
--或者
$("input:radio][name=sex"]).val(["0"]);

3、判斷是否勾選：

$("input:radio][name=sex][value=0]).prop("checked")==true;

4、禁用、啟用單選框：

$("input:radio][name=sex].prop("disabled",true); 
--或
$("input:radio][name=sex].removeAttr("disabled");

三、復(fù)選框: checkbox

<intput type="checkbox" name="sex" value="0"/>男
<intput type="checkbox" name="sex" value="1"/>女

1、得到所有checked中項(xiàng)的值：

$("input[type=checkbox][name=sex]:checked").each(function(i,n){ //由于復(fù)選框一般選中的是多個(gè),所以可以循環(huán)輸出
   alert($(n).val());
});

2、勾選復(fù)選框的項(xiàng)：

$("input:checkbox][name=sex][value=0]).prop("checked",true); 
--或者
$("input:checkbox][name=sex"]).val(["0"]);

3、判斷是否勾選：

$("input:radio][name=sex][value=0]).prop("checked")==true;

4、禁用、啟用復(fù)選框：

$("input:checkbox][name=sex].prop("disabled",true); 
--或
$("input:checkbox][name=sex].removeAttr("disabled");

5、全選、全不選

$("input:checkbox][name=sex].prop("checked",true); 
--或
$("input:checkbox][name=sex].removeAttr("checked");

6、反選

$("input[type=checkbox][name=sex]").each(function(i,n){  
      $(this).attr('checked',!$(this).attr('checked')==true);
});

四、下拉框 select

<select name="select" id="sel">
 <option value="00">a </option>
 <option value="11">b </option>
 <option value="22">c </option>
</select>

1、 獲取選擇項(xiàng)的值：

$("#sel").val();

2、獲取選擇項(xiàng)的文本：

$("#sel option:selected").text();

3、選中第二個(gè)項(xiàng)：

$("#sel").val("11");
$("#sel").val(["11"]);
$("#sel").val("b");
$("#sel").val(["bb"]);
$("#sel option[value="11"]").attr("selected",true);
$("#sel option:contains('b')").attr("selected",true);

4、禁用、啟用下拉框：

$("#sel"].prop("disabled",true); 
--或
$("#sel").removeAttr("disabled");

5、清空項(xiàng)：

$("#sel").empty();
$("#sel").html('');

6、添加項(xiàng)：

$("#sel").append("<option value='33'>dd</option>");  
$("#sel").prepend("<option value=''>請(qǐng)選擇</option>");  //為Select插入一個(gè)Option(第一個(gè)位置)

7、移除選擇項(xiàng)：

$("#sel option:selected").remove();

五、多選下拉框 select-multiple

<select name="selectMul" id="selMul" size=4 multiple="multiple">//size列表框的高度
 <option value="00">a </option>
 <option value="11">b </option>
 <option value="22">c </option>
</select>

1、 獲取選擇項(xiàng)的值：

$("#selMul").val();//如果多選，返回一個(gè)數(shù)組val().join(‘,')

2、獲取選擇項(xiàng)的個(gè)數(shù)：

$("#selMul option").length

3、獲取選擇項(xiàng)的文本：

$("#selMul option:selected").each(function(i,n){
           $(this).text();
});

4、選中第二個(gè)項(xiàng)：

$("#selMul ").val("11");
$("#selMul ").val(["11","22"]);
$("#selMul ").val("b");
$("#selMul ").val(["aa","bb"]);
$("#selMul option[value="11"]").attr("selected",true);
$("#selMul option:contains('b')").attr("selected",true);

5、禁用、啟用下拉框：

$("#selMul"].prop("disabled",true); 
--或
$("#selMul").removeAttr("disabled");

6、清空項(xiàng)：

$("#selMul").empty();
$("#selMul").html('');

7、添加項(xiàng)：

$("#selMul").append("<option value='33'>dd</option>");  
$("#selMul").prepend("<option value=''>請(qǐng)選擇</option>");  //為Select插入一個(gè)Option(第一個(gè)位置)

8、移除選擇項(xiàng)：

$("#selMul option:selected").remove();

9、全選、全不選

$("#selMul option).attr("selected",true); 
--或
$("("#selMul option).removeAttr("selected");

10、反選

$("#selMul option).each(function(i,n){  
      $(this).attr(‘selected',!$(this).attr(‘selected')==true);
});

到此這篇關(guān)于Jquery操作DOM元素的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論