Jquery操作DOM元素方法详解

一、文本输入框: text

1、获取文本值：

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

2、选中文本：

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

3、禁用、启用文本框

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

4、只读、取消只读：

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

二、单选框: radio

男
女

1、得到单选框的选中项的值：

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

2、勾选单选框的项：

$("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");

三、复选框: checkbox

男
女

1、得到所有checked中项的值：

$("input[type=checkbox][name=sex]:checked").each(function(i,n){ //由于复选框一般选中的是多个,所以可以循环输出
   alert($(n).val());
});

2、勾选复选框的项：

$("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、禁用、启用复选框：

$("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

1、获取选择项的值：

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

2、获取选择项的文本：

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

3、选中第二个项：

$("#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、清空项：

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

6、添加项：

$("#sel").append("");  
$("#sel").prepend("");  //为Select插入一个Option(第一个位置)

7、移除选择项：

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

五、多选下拉框 select-multiple

1、获取选择项的值：

$("#selMul").val();//如果多选，返回一个数组val().join(‘,')

2、获取选择项的个数：

$(“#selMul option”).length

3、获取选择项的文本：

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

4、选中第二个项：

$("#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、清空项：

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

7、添加项：

$("#selMul").append("");  
$("#selMul").prepend("");  //为Select插入一个Option(第一个位置)

8、移除选择项：

$("#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);
});

到此这篇关于Jquery操作DOM元素的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。