本文已参与「新人创作礼」活动,一起开启掘金创作之路。
function test01(){
var $sexArr = $(":checkbox");
for(var i =0;i<$sexArr.length;i++){
var dom = $sexArr[i];
// alert(dom.value); // 使用DOM对象获取值
alert($(dom).val()) // 使用JQ对象获取值
}
}
过滤器
jQuery对象中存储的DOM对象顺序与页面标签声明位置关系(即:HTML创建的顺序和获取后数组中的顺序是一致的)
<div>1</div>
<div>2</div>
<div>3</div>
$("div") 得到的数组等同于
[dom1, dom2, dom3]
过滤器就是过滤条件,对已经定位到数组中DOM对象进行过滤筛选,过滤条件不能独立出现在jquery函数,如果使用只能出现在选择器后面
选择第一个first,保留数组中第一个DOM对象
语法:$("选择器:first")
选择最后一个last,保留数组中最后的DOM对象
语法:$("选择器:last")
选择数组中指定对象
语法:$("选择器:eq(数组索引)")
选择数组中小于指定索引的所有DOM对象
语法:$("选择器:lt(数组索引)")
选择数组中大于指定索引的所有DOM对象
语法:$("选择器:gt(数组索引)")
$("#btn3").click(function(){
var obj1 = $("div:first"); //获取标签选择器dov中第一个DOM对象
obj1.css("background","green")
});
$("#btn4").click(function(){
var obj1 = $("div:eq(2)"); // 下标等于2的DOM对象
obj1.css("background","blue")
});
表单属性过滤器
根据表单中dom对象的状态情况,定位dom对象
选择可用的文本框
语法:$(":text:enabled")
选择不可用的文本框
语法:$(":text:disabled")
复选框选中的元素
语法:$(":checkbox:checked")
事件
- 定位元素监听事件
- on()绑定事件
定位元素监听事件
语法:$(选择器).监听事件名称(处理函数)
说明:监听事件名称是js事件中去掉on后的内容,js中的onclick的监听事件名称是click
// 实例一
$("button").click(func1(){
alert("按钮被单击了")
})
// 实例二
$("tr").mouseover(func2)
// 其他
比如JS中的onLoad()相当于JQ中的$(document).ready(func1) 当页面中的dom对象加载成功后,会执行ready()
中的函数
on()绑定事件
语法:$(选择器).on(事件名称,事件的处理函数) 事件名称:就是js中去掉on的部分,例如js中onclick,这里就是click 事件的处理函数:function定义