一、 each的三种遍历
1、选择器+遍历
$('div').each(function (i){
i就是索引值
this 表示获取遍历每一个dom对象
});
2、选择器+遍历
$('div').each(function (index,domEle){
index就是索引值
domEle 表示获取遍历每一个dom对象
});
3、更适用的遍历方法
1)先获取某个集合对象
2)遍历集合对象的每一个元素
var d=$("div");
$.each(d,function (index,domEle){
d是要遍历的集合
index就是索引值
domEle 表示获取遍历每一个dom对
});
二、各种选择器
$("input[type=text]:disabled");
$('input[type=text]:enabled');
$('input[type=checkbox]:checked');
$('select option:selected');
三、select的各种jquery操作
<select class="selector"></select>
1、设置value为pxx的项选中
$(".selector").val("pxx");
2、设置text为pxx的项选中
$(".selector").find("option[text='pxx']").attr("selected",true);
这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。
3、获取当前选中项的value
$(".selector").val();
$(".selector").children('option:selected').val();
4、获取当前选中项的text
$(".selector").find("option:selected").text();
select的change事件:
$(".selector").change(function(){
// 先清空第二个
$(".selector2").empty();
// 实际的应用中,这里的option一般都是用循环生成多个了
var option = $("<option>").val(1).text("pxx");
$(".selector2").append(option);
});
$("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text var checkValue=$("#select_id").val(); //获取Select选择的Value var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
jQuery设置Select选择的 Text和Value:
语法解释:
$("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 $("#select_id ").val(4); // 设置Select的Value值为4的项选中 $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中
jQuery添加/删除Select的Option项:
语法解释:
$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置) $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
四、checkbox的相关用法
<input type="checkbox" id="gps_open_close" />
用attr("checked")结果是undefied,要用prop获取checked状态。
var checked = $("#gps_open_close").prop('checked');
$("#gps_open_close").attr('checked',true);
$("#gps_open_close").change(function(){
var checked = $(this).prop('checked');
if($("#gps_open_close").is(":checked")){
$("#gps_open_close").attr("checked",false);
}
});
var item = $('input[name=items][checked]').val();
获 取select被选中项的文本
var item = $("select[name=items] option[selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[name=items]').get(1).checked = true;
获取值:
文本框,文本区域:$("#txt").attr("value");
多选框 checkbox:$("#checkbox_id").attr("value");
单选组radio: $("input[type=radio][checked]").val();
下拉框select: $('#sel').val();
控制表单元素:
文本框,文本区域:$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容
多选框checkbox: $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')== undefined) //判断是否已经打勾
单选组 radio: $("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框 select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框
五、class属性
$("p").attr("class"); //获取p元素的class
$("p").attr("'class", "high"); //设置p元素的class为 "high"
attr是将原来的class替换为新的class,而不是在原来的基础上追加新的class
$("#p").addClass("another");
$("#p").addClass("another blue");
添加多个class, 多个class之间用 空格隔开。1、如果给一个元素添加了多个class值,那么就相当于合并了它们的样式。
2、如果有不同的class设定了同一样式属性,则后者覆盖前者。
$("p").removeClass("high"); //移除p元素中值为"high"的class
要把p元素的两个class都删除,就要使用两次removeClass()方法,代码如下:
$("p").removeClass("high").removeClass("another");
Query提供了更简单的方法。可以以空格的方式删除多个class名,代码如下:
$("p").removeClass("high another");
外,还可以利用removeClass()方法的一个特性来完成同样的效果。当它不带参数时,就会将class的值全部删除,JQuery代码如下:
$("p").removeClass(); //移除p元素的所有class
$("p").toggleClass("another"); //重复切换类名“another”
判断是否含有某个样式 hasClass()可以用来判断元素中是甭含有某个class,如果有,则返回true,否则返false。
$("p").hasClass("another");