1.表单对象属性过滤选择器
(1):enabled用法$("input:enabled")
(2):disabled用法$("input:disabled")
(3):checked用法$("input:checked")匹配所有被选中元素(复选框,单选框,不包括select中的option)
(4):selected用法$("select option:selected")
2.表单对象属性过滤选择器实例
(1)利用jQuery对象的val()改变表单内可用<input>元素的值
方法一:
$("input[type='text']:enabled").each(function(index,domEle){
$(domEle).val("xxxxx");
});
方法二:要求是集合设置值一致时
$("input[type='text']:enabled").val("xxxxx");
(2)利用jQuery对象的val()改变表单内不可用<input>元素的值
$("input[type='text']:disabled").each(function(index,domEle){
$(domEle).val("yyyyy");
});
注释$("input[type='text']:disabled")相当于集合
(3)利用jQuery对象的length属性获取多选框选中的个数
$("input[tpye='checkbox']:checked").length
利用jQuery对象的length属性获取多选框选中的元素的值
$.each($("input[type='checkbox']:checked"),function(index,domEle){
alert($(domEle).val());
});
(4)利用jQuery对象的text()获得下拉框选中的内容
$.each($("select option:selected"),function(index,domEle){
alert($(domEle).text());
});
3.jQuery操作DOM: append,appendTo是元素内部插入,before aftere insertBefore inseAfter是元素外部插入
(1)选中的从左侧移动到右侧
$("#add").click(function(){
$("#second").append($("#first option:selected"));
});
(2)全部的从左端移动到右端
$("#addAll").click(function(){
$.each("#first",function(index,domEle){
$("#second").append($(domEle));
}
$("#add").click(function(){
$("#second").append($("#first option"));
});
(3)双击从左端移动到右端
$("#first").dbclick(function(){
$("#second").append($("#first option:selected"));
});
});