jQuery 选择器允许您对 HTML 元素组或单个元素进行操作
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素
jQuery 中所有选择器都以美元符号开头：$()
元素选择器
根据标签名选择所有该标签的元素
//第一种写法
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","red");
$("div").css("background-color","red");
$("h4").css("background-color","red");
});
});
</script>
<p>极客教程</p>
<div>极客的学习教程</div>
<h4>https:geekes.cn</h4>
<button type="button">点击</button>
//第二种写法
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#b").click(function(){
$("div").addClass("red");
$("p").addClass("red");
$("h4").addClass("red");
});
});
</script>
<style>
.red{
background-color:red;
}
</style>
<p>极客教程</p>
<div>极客的学习教程</div>
<h4>https:geekes.cn</h4>
<button type="button" id="b">点击</button>
id选择器
$("#id")
根据 id 选择元素
id应该是唯一的,如果id重复,则只会选择第一个
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<title></title>
<script>
$(function(){
$("#a").click(function(){
$("#d").addClass("red");
});
});
</script>
</head>
<style>
.red{
background-color:red;
}
</style>
<body>
<button type="button" id="a">d添加颜色</button>
<div id="c">极客教程</div>
<div id="d">极客的学习教程</div>
<div id="h">https:geekes.cn</div>
<div id="j">jquery学习</div>
</body>
</html>
类选择器
$(".className")
根据 class 选择元素
class重复,则会选择多个
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<title></title>
<script>
$(function(){
$("#a").click(function(){
$(".d").addClass("red");
});
});
</script>
</head>
<style>
.red{
background-color:red;
}
</style>
<body>
<button type="button" id="a">d添加颜色</button>
<div class="c">极客教程</div>
<div class="d">极客的学习教程</div>
<div class="h">https:geekes.cn</div>
<div class="j">jquery学习</div>
</body>
</html>
层级选择器
$("selector1 selector2")
选择 selector1下的selector2元素,选择id=d的div下span元素
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<title></title>
<script>
$(function(){
$("#a").click(function(){
$("div#d span").addClass("red");
});
});
</script>
</head>
<style>
.red{
background-color:red;
}
</style>
<body>
<button type="button" id="a">d添加颜色</button>
<div id="c"><span>极客教程</span></div>
<div id="d"><span>极客的学习教程</span></div>
<div id="h"><span>https:geekes.cn</span></div>
<div id="j"><span>jquery学习</span></div>
</body>
</html>
过滤选择器
$(selector:first) 满足选择器条件的第一个元素
$(selector:last) 满足选择器条件的最后一个元素
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#a").click(function(){
$("div:first").addClass("red");
});
$("#b").click(function(){
$("div:last").addClass("red");
});
});
</script>
<style>
.red{
background-color:red;
}
</style>
<button type="button" id="a">第一个添加颜色</button>
<button type="button" id="b">最后一个添加颜色</button>
<div>极客教程</div>
<div>极客的学习教程</div>
<div>https:geekes.cn</div>
<div>jquery学习</div>
可见性选择器
$(selector:hidden) 满足选择器条件的不可见的元素
$(selector:visible) 满足选择器条件的可见的元素
注:div:visible 和div :visible(有空格)是不同的意思
div:visible 表示选中可见的div
div :visible(有空格) 表示选中div下可见的元素
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<head>
<script src="jquery.min.js" "text/javascript"></script>
<title></title>
<script>
$(function(){
$("#a").click(function(){
$("div:visible").hide();
});
$("#b").click(function(){
$("div:hidden").show();
});
});
</script>
</head>
<body>
<button id="a">隐藏</button>
<button id="b">显示</button>
<div>极客教程</div>
<div>极客的学习教程</div>
<div>https:geekes.cn</div>
</body>
</html>
属性选择器
$(selector[attribute]) 满足选择器条件的有某属性的元素
$(selector[attribute=value]) 满足选择器条件的属性等于value的元素
$(selector[attribute!=value]) 满足选择器条件的属性不等于value的元素
$(selector[attribute^=value]) 满足选择器条件的属性以value开头的元素
$(selector[attribute$=value]) 满足选择器条件的属性以value结尾的元素
$(selector[attribute*=value]) 满足选择器条件的属性包含value的元素
注:一般不要使用[class=className] 而应该使用.className
因为使用$("[class='className']") .toggleClass("anotherClassName")
会导致class变成className anotherClassName, 使用 [class=className] 无法选中
而.className没有这个问题
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<title></title>
<script>
$(function(){
$("#a").click(function(){
$("div[id]").toggleClass('border');
});
$("#b").click(function(){
$("div[id!='red']").toggleClass('border');
});
$("#c").click(function(){
$("div[id!='red']").toggleClass('border');
});
$("#d").click(function(){
$("div[id^='r']").toggleClass('border');
});
$("#e").click(function(){
$("div[id$='d']").toggleClass('border');
});
$("#f").click(function(){
$("div[id*='ee']").toggleClass('border');
});
});
</script>
</head>
<style>
.red{
background-color:red;
}
.green{
background-color:green;
}
.border{
border: 1px blue solid;
}
button{
margin-top:10px;
display:block;
}
div{
margin:10px;
}
</style>
<body>
<button id="a">id属性的div切换边框</button>
<button id="b">id=red的div切换边框</button>
<button id="c">id!=red属性的div切换边框</button>
<button id="d">id以r开头的div切换边框</button>
<button id="e">id以d结尾的div切换边框</button>
<button id="f">id包含ee的div切换边框</button>
<div id="red">
id=red的div
</div>
<div id="green">
id=green的div
</div>
<div >
没有id的div
</div>
</body>
</html>
奇偶选择器
$(selector:odd) 满足选择器条件的奇数元素
$(selector:even) 满足选择器条件的偶数元素
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<head>
<script src="jquery.min.js" type="text/javascript"></script> <title></title>
<script>
$(function(){
$("#a").click(function(){
$("div:even").addClass("red");
});
$("#b").click(function(){
$("div:odd").addClass("green");
});
});
</script>
</head>
<style>
.red{
background-color:red;
}
.green{
background-color:green;
}
</style>
<body>
<button type="button" id="a">奇数添加颜色</button> <button type="button" id="b">偶数添加颜色</button>
<div>极客教程</div>
<div>极客的学习教程</div>
<div>https:geekes.cn</div>
<div>jquery学习</div>
</body>
</html>表单对象
表单对象选择器 指的是选中form下会出现的输入元素
:input 会选择所有的输入元素,不仅仅是input标签开始的那些,还包括textarea,select和button
:button 会选择type=button的input元素和button元素
:radio 会选择单选框
:checkbox会选择复选框
:text会选择文本框，但是不会选择文本域
:submit会选择提交按钮
:image会选择图片型提交按钮
:reset会选择重置按钮
$("td[rowspan!=13] 后面有一个空格，表示层级选择器，如果没有就会出错
toggle(500) 表示在显示与隐藏之间来回切换，生效时间是500毫秒
注: :submit会把<button>元素选中,<button>元素的type默认值是submit
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<title></title>
<script>
$(function(){
$(".b").click(function(){
var value = $(this).val();
$("td[rowspan!=13] "+value).toggle(500);
});
});
</script>
</head>
<style>
table{
border-collapse:collapse;
table-layout:fixed;
width:80%;
}
table td{
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
padding-top: 5px;
}
div button{
display:block;
}
</style>
<body>
<table>
<tr>
<td rowspan="13" valign="top" width="150px">
<div >
<button value=":input" class="b">切换所有的:input</button>
<button value=":button" class="b">切换:button</button>
<button value=":radio" class="b">切换:radio</button>
<button value=":checkbox" class="b">切换:checkbox</button>
<button value=":text" class="b">切换:text</button>
<button value=":password" class="b">切换:password</button>
<button value=":file" class="b">切换:file</button>
<button value=":submit" class="b">切换:submit</button>
<button value=":image" class="b">切换:image</button>
<button value=":reset" class="b">切换:reset</button>
</div>
</td>
<td width="120px">说明</td>
<td width="120px">表单对象</td>
<td width="">示例</td>
</tr>
<tr>
<td >input按钮</td>
<td >:button</td>
<td><input type="button" value="input按钮"/></td>
</tr>
<tr>
<td>button按钮</td>
<td >:button</td>
<td><button>Button按钮</button></td>
</tr>
<tr>
<td>单选框</td>
<td >:radio</td>
<td><input type="radio" ></td>
</tr>
<tr>
<td>复选框</td>
<td >:checkbox</td>
<td><input type="checkbox" ></td>
</tr>
<tr>
<td>文本框</td>
<td >:text</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>文本域</td>
<td ></td>
<td><textarea></textarea></td>
</tr>
<tr>
<td>密码框</td>
<td >:password</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>下拉框</td>
<td></td>
<td><select><option>极客教程</option></select></td>
</tr>
<tr>
<td>文件上传</td>
<td >:file</td>
<td> <input type="file" /></td>
</tr>
<tr>
<td>提交按钮</td>
<td >:submit</td>
<td><input type="submit" /></td>
</tr>
<tr>
<td>图片型提交按钮</td>
<td >:image</td>
<td><input type="image" src="http://www.geekes.cn/wp-content/uploads/2019/03/yuxuan_avatar-96x96.jpg" /></td>
</tr>
<tr>
<td>重置按钮</td>
<td >:reset</td>
<td><input type="reset" /></td>
</tr>
</table>
</body>
</html>
表单对象属性
:enabled会选择可用的输入元素 注:输入元素的默认状态都是可用
:disabled会选择不可用的输入元素
:checked会选择被选中的单选框和复选框 注: checked在部分浏览器上(火狐,chrome)也可以选中selected的option
:selected会选择被选中的option元素
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function(){
$(".a").click(function(){
var value = $(this).val();
$("td[rowspan!=13] "+value).toggle(500);
});
$(".b").click(function(){
var value = $(this).val();
var options = $("td[rowspan!=13] "+value);
alert("选中了"+options.length+"条记录！");
});
});
</script>
<style>
table{
border-collapse:collapse;
table-layout:fixed;
width:80%;
}
table td{
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
padding-top: 5px;
}
div button{
display:block;
}
.border{
border: 1px blue solid;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="13" valign="top" width="120">
<div>
<button value=":enabled" class="a">切换:enable</button>
<button value=":disable" class="a">切换:disable</button>
<button value=":checked" class="a">切换:checked</button>
<button value=":selected" class="b">:selected数量</button>
</div>
</td>
<td width="120">说明</td>
<td width="120">表单对象属性</td>
<td width="100px">示例</td>
</tr>
<tr>
<td>enabled按钮</td>
<td>:enabled</td>
<td><input type="button" enabled="enabled" value="enabled按钮"/></td>
</tr>
<tr>
<td>disabled按钮</td>
<td>:disabled</td>
<td><input type="button" disabled="disabled" value="disabled按钮"/></td>
</tr>
<td>选中复选框</td>
<td>:checked</td>
<td>
<input type="radio" checked="checked" ><br>
<input type="radio" ><br>
<input type="checkbox" ><br>
<input type="checkbox" checked="checked" >
</td>
</tr>
<tr>
<td>选择下拉列表</td>
<td>:selected</td>
<td>
<select size="3" multiple="multiple">
<option selected="selected">JAVA</option>
<option>PHP</option>
<option selected="selected">Android</option>
</select>
</td>
</tr>
</table>
</body>
</html>当前元素
监听函数中使用 $(this),则表示触发该事件的组件
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
<button type="button">隐藏</button>
jQuery 选择器总结:
$("#id", ".class") 复合选择器
$(div p span) 层级选择器 //div下的p元素中的span元素
$(div>p) 父子选择器 //div下的所有p元素
$(div+p) 相邻元素选择器 //div后面的p元素(仅一个p)
$(div~p) 兄弟选择器 //div后面的所有p元素(同级别)
$(.p:last) 类选择器 加 过滤选择器 第一个和最后一个（first 或者 last）
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("#mytable td:odd") 层级选择 加 过滤选择器 奇偶（odd 或者 even）
$("div p:eq(2)") 索引选择器 div下的第三个p元素（索引是从0开始）
$("a[href='www.geekes.cn']") 属性选择器
$("p:contains(test)") // 内容过滤选择器，包含text内容的p元素
$(":emtyp") //内容过滤选择器，所有空标签（不包含子标签和内容的标签）parent 相反
$(":hidden") //所有隐藏元素 visible
$("input:enabled") //选取所有启用的表单元素
$(":disabled") //所有不可用的元素
$("input:checked") //获取所有选中的复选框单选按钮等
$("select option:selected") //获取选中的选项元素
3484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
