Jquery(07)Jquery 操作DOM元素
一、文本输入框: 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、得到单选框的选中项的值:
$("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
<intput type=”checkbox” name=”sex” value=”0”/>男 <intput type=”checkbox” name=”sex” value=”1”/>女
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
<select name="select" id="sel"> <option value="00">a </option> <option value="11">b </option> <option value="22">c </option> </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("<option value='33'>dd</option>"); $("#sel").prepend("<option value=''>请选择</option>"); //为Select插入一个Option(第一个位置)
7、移除选择项:
$("#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、 获取选择项的值:
$("#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("<option value='33'>dd</option>"); $("#selMul").prepend("<option value=''>请选择</option>"); //为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); });
posted on 2018-08-12 00:29 springsnow 阅读(174) 评论(0) 编辑 收藏 举报