jquery选择器（selector）& 事件处理
太叔马鲁
一、选择器（selector）
可以通过选择器获得某个或某些元素对象。通过jQuery函数结合选择器获得某个或某些元素对象的jquery对 象。
1. 基本选择器
id选择器
<html lang="en">
<head>
<title>Document</title>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function(){
alert($("#text1").val());
});
</script>
</head>
<body>
<input type="text" id="text1" value="111">
<input type="text" value="222">
<input type="text" value="333">
</body>
</html>类选择器
<html lang="en">
<head>
<title>Document</title>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function(){
alert("ok");
$(".text1").val("000");
});
</script>
</head>
<body>
<input type="text" id="text1" value="111">
<input type="text" class="text1" value="222">
<input type="text" class="text1" value="333">
</body>
</html>html元素选择器
<html lang="en">
<head>
<title>Document</title>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function(){
alert("ok");
$("input").val("000");
});
</script>
</head>
<body>
<input type="text" id="text1" value="111">
<input type="text" class="text1" value="222">
<input type="text" class="text1" value="333">
</body>
</html>
选择器合并
<html lang="en">
<head>
<title>Document</title>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function(){
alert("ok");
$("#text1,.text1").val("000");
});
</script>
</head>
<body>
<input type="text" id="text1" value="111">
<input type="text" class="text1" value="222">
<input type="text" value="333">
</body>
</html>
2. 层级选择器
有层级关系时，例如子元素、后代元素、兄弟元素的选择时。
查找后代元素
ancestor descendant
<html lang="en">
<head>
<title>Document</title>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function(){
alert("ok");
$("form input").val("000");
});
</script>
</head>
<body>
<form>
<input type="text" id="text1" value="111">
<div>
<input type="text" class="text1" value="222">
</div>
</form>
<input type="text" value="333">
</body>
</html>
获得子元素的选择器
parent > child
<html lang="en">
<head>
<title>Document</title>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function(){
alert("ok");
$("form>input").val("000");
});
</script>
</head>
<body>
<form>
<input type="text" id="text1" value="111">
<div>
<input type="text" class="text1" value="222">
</div>
</form>
<input type="text" value="333">
</body>
</html>获得下一个兄弟元素
prev + next
<html lang="en">
<head>
<title>Document</title>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function(){
alert("ok");
$("label+input").val("000");
});
</script>
</head>
<body>
<form>
<label>姓名：</label>
<input type="text" id="text1" value="111">
<div>
<label>年龄：</label>
<input type="text" class="text1" value="222">
<input type="text" value="333">
</div>
</form>
</body>
</html>
获得后面的所有兄弟元素
prev ~ siblings
<html lang="en">
<head>
<title>Document</title>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function(){
alert("ok");
$("label~input").val("000");
});
</script>
</head>
<body>
<form>
<label>姓名：</label>
<input type="text" id="text1" value="111">
<div>
<input type="text" value="444">
<label>年龄：</label>
<input type="text" class="text1" value="222">
<input type="text" value="333">
</div>
</form>
</body>
</html>
3. 基本过滤选择器
通过数量过滤出选择的元素，包括:first 、:last 、:eq(index) 、:gt(index)、:lt(index) 、:even 、:odd
4. 属性过滤选择器
通过元素的属性进行过滤 [属性] 或 [属性=‘值’] 或 [属性!='值']
<html lang="en">
<head>
<title>Document</title>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function(){
alert("ok");
//输入框的值设置为000
//$("label~input[type='text']").val("000");
//输入框内容为空的 设置为000
//$("input[value='']").val("000");
});
</script>
</head>
<body>
<form>
<label>姓名：</label>
<input type="text" id="text1" value="111">
<div>
<label>年龄：</label>
<input type="text" class="text1" value="222">
<input type="text" value=''>
<input type="button" value="确定">
</div>
</form>
</body>
</html>
5. 内容过滤选择器
过滤元素 开始标记和结束标记之间的 文本内容的
: contains
:empty
:has
:parent
6. 表单选择器
:text
:checkbox
:radio 等
二、事件处理
jquery对象提供了一些绑定事件的函数
<script>
$(function(){
$("#p").change(function(){
});
$("#p").click(function(){
});
});
</script>
jquery提供了一个bind函数，能同时绑定多个事件
<script>
$(function(){
$("#p").bind({
change:function(){
},
click:function(){
}
});
});
</script>
合成事件：事件的切换
1. hover：鼠标悬停和鼠标移开的合成事件
2. toggle：click的合成事件，切换toggle中的函数
类似资料：