1. jQuery选择器介绍
什么是jQuery选择器
- jQuery选择器完全继承了CSS风格。利用jQuery选择器，可以非常便捷和快速第找出特定的DOM元素，然后为他们添加相应的行行为，而无需担心浏览器是否支持这一选择器。
jQuery选择器的优势
- 简洁的写法
- 支持CSS1到CSS3
- 完善的处理机制
- 注：jQuery选择器是学习jQuery的基础。可见，jQuery选择器的重要性。
2. jQuery常用选择器
常用的基本选择器
- #id：根据给定的id匹配一个元素
- .classname：根据给定的类名匹配一个元素
- classname：根据给定的元素吗匹配元素
- *：匹配所有的元素
- select1,select1…：将每一个匹配到的元素合并后一起返回
示例代码
<!--jQuery常用基本选择器演示-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的基本选择器</title>
<script src="../scripts/jQuery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//jQuery选择器继承了CSS的风格，支持CSS1-CSS3
var $username = $("#username");
//jQuery对象中包含的元素的个数
alert($username.length); // 1
var $sex = $(".sex");
alert($sex.length); //2
var $input = $("input");
alert($input.length); //6
var temp = $("form, input");
alert(temp.length); //7
})
</script>
</head>
<body>
<form>
用户名：<input id="username" type="text" name="username"><br/>
密 码：<input id="password" type="password" name="password"><br/>
性 别：<input class="sex" type="radio" name="sex" value="male">男
<input class="sex" type="radio" name="sex" value="female">女<br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
常用的层次选择器
- ancestor descendant：选取ancestor元素里的所有descendant元素
- parent->child：获取parent元素下的child元素
- prev+next：选取紧接在prev元素后的next元素
- prev~siblings：选取prev元素之后的所有siblings元素
示例代码：
<!--jQuery常用层次选择器演示-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用层次选择器</title>
<script src="../scripts/jQuery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//只要在第一个选择器对应的元素中即可
var h3 = $("body h3"); //body 下的h3
alert(h3.length); //2
//第一个选择器对应元素的直接的孩子
var h3_1 = $("body>h3"); //body下直接的h3
alert(h3_1.length); //0
var li = $("#huawei+li");
alert(li.text()); //苹果
var li1 = $("li+li");
alert(li1.text()); //一共有9个li
var li2 = $("h3~ul"); //2
alert(li2.length);
})
</script>
</head>
<body>
<div>
<div>
<h3>常用的手机品牌</h3>
<ul>
<li id="huawei">华为</li>
<li>苹果</li>
<li>vivo</li>
<li>小米</li>
</ul>
<ul>
<li>华为</li>
<li>苹果</li>
<li>vivo</li>
<li>小米</li>
</ul>
<h3>销量榜</h3>
<ol>
<li>vivo</li>
<li>华为</li>
<li>苹果</li>
<li>小米</li>
</ol>
</div>
</div>
</body>
</html>
常用的基本过滤器
- :first：根据给定的id匹配一个元素
- :last：根据给定的类名匹配一个元素
- :not(selector)：去除所有与给定选择器匹配的元素
- :even：选取索引值为偶数的所有元素，从0开始计数
- :odd：选取索引值为奇数的所有元素，从0开始计数
- :eq(index)：匹配一个给定索引值元素，从0开始计数
- :gt(index)：匹配大于给定索引值元素，从0开始计数
- :lt(index)：匹配小于给定索引值元素，从0开始
- :header：选择h1, h2, h3一类的标签
- :animated：匹配正执行动画效果的元素
示例代码
<!--jQuery常用基本过滤选择器部分演示-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用基本过滤选择器</title>
<script src="../scripts/jQuery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//过滤选择器：针对选择的结果做筛选
//所有li中过滤出奇数下标的部分，小标从0开始
var li = $("li:odd");
alert(li.text());
//not:去掉一部分
var li2 = $("li:not(li:first)"); //选出12个li，去除第一个
alert(li2.length); //11
//lt:下标小于某个值的， eg:下标等于 gt:下标大于
var li3 = $("li:lt(5)");
alert(li3.text()); //前5个
})
</script>
</head>
<body>
<div>
<div>
<h3>常用的手机品牌</h3>
<ul>
<li id="huawei">华为</li>
<li>苹果</li>
<li>vivo</li>
<li>小米</li>
</ul>
<ul>
<li>华为</li>
<li>苹果</li>
<li>vivo</li>
<li>小米</li>
</ul>
<h3>销量榜</h3>
<ol>
<li>vivo</li>
<li>华为</li>
<li>苹果</li>
<li>小米</li>
</ol>
</div>
</div>
</body>
</html>
常用的内容过滤选择器
- :contains(text)：匹配包含给定文本的元素
- :empty：匹配所有不包含子元素或者文本的空元素
- :has(selector)：匹配含有选择器所匹配元素的元素
- :parent：选取含有子元素或者文本的元素
常用的可见性过滤选择器
- :hidden：选取所有不可见的元素
- :visible：选取所有可见的元素
内容过滤器和可见性过滤器示例代码
<!--jQuery常用内容过滤选择器和可见性过滤选择器演示-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用内容过滤选择器</title>
<script src="../scripts/jQuery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//根据内容来过滤
//内容是否包含指定文本
var li1 = $("li:contains('为')");
alert(li1.length); //3
//里面没有任何文本，子元素
var li2 = $("li:empty");
alert(li2.length); //1
//有文本或者子元素，和 :empty相反
var li3 = $("li:parent");
alert(li3.length); //13
var div = $("div:has(ol)");
alert(div.length); //2（前面两个div包含ol，最后一个不包含）
//根据可见性过滤
//:hidden 隐藏 :visible 可见
var li4 = $("li:hidden");
alert(li4.length); //1
})
</script>
</head>
<body>
<div>
<div>
<h3>常用的手机品牌</h3>
<ul>
<li id="huawei">华为</li>
<li>苹果</li>
<li>vivo</li>
<li hidden="true">小米</li>
<!--内容为空-->
<li></li>
<!--内容不为空，有文本-->
<li>
</li>
</ul>
<ul>
<li>华为</li>
<li>苹果</li>
<li>vivo</li>
<li>小米</li>
</ul>
<h3>销量榜</h3>
<ol>
<li>vivo</li>
<li>华为</li>
<li>苹果</li>
<li>小米</li>
</ol>
<div></div>
</div>
</div>
</body>
</html>
常用的属性过滤选择器
- [attribute]：选取拥有此属性的元素
- [attribute=value]：选取属性值等于value的元素
- [attribute!=value]：选取属性值不等于value的元素
- [attribute^=value]：选取属性值以value开始的元素
- [attribute$=value]：选取属性值以value结束的元素
- [attribute*=value]：选取属性值包含value的元素
- [attribute~=value]：选取属性值包含value且以空格隔开的元素
- [attribute1][attribute2]…：多个属性选择器合并成一个复合属性选择器
示例代码
<!--jQuery常用属性过滤选择器演示-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用属性过滤选择器</title>
<script src="../scripts/jQuery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//根据属性来过滤元素节点
//包含name属性的
var input = $("input[name]");
alert(input.length); //4
//[attribute=value] [attribute!=value]
var input2 = $("input[name=sex]");
alert(input2.length); //2
//[attribute^=value]:以..开始
//[attribute$=value]:以..结束
//[attribute*=value]:包含..
//[attribute~=value]:包含，必须是独立的单词，以空格隔开
var input3 = $("input[value$=le]");
alert(input3.length); //2
var input4 = $("input[value~=置]");
alert(input4.length); //1
var input5 = $("input[id][type]");
alert(input5.length); //2
})
</script>
</head>
<body>
<form>
用户名：<input id="username" type="text" name="username"><br/>
密 码：<input id="password" type="password" name="password"><br/>
性 别：<input class="sex" type="radio" name="sex" value="male">男
<input class="sex" type="radio" name="sex" value="female">女<br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="reset" value="重 置">
</form>
</body>
</html>
常用的子元素过滤选择器
- :first-child：选取每个父元素的第一个子元素
- :first-of-type：选取同名兄妹节点的第一个子元素的所有元素
- :last-child：选取每个父元素的最后一个子元素
- :last-of-type：选取同名兄妹节点的最后一个子元素的所有元素
- :only-child：选取父元素中具有唯一的子元素的所有元素
- :only-of-type：选取前后没有同名兄妹节点的子元素的所有元素
- :nth-child(index|even|odd)：选取每个父元素下的第index个子元素或奇偶元素(index从1开始算起)
- :nth-last-child(index|even|odd)：取每个父元素下的第index个子元素或奇偶元素，从最后一个往第一个数(index从1开始算起)
示例代码
<!--jQuery常用子元素过滤选择器部分演示-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用子元素过滤选择器</title>
<script src="../scripts/jQuery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//看这个元素相对它的父亲的位置
//:first-child 是父亲下的第一个子元素
//:last-child 是父亲下的最后一个子元素
var li = $("li:first-child"); //忽略空白
alert(li.text()); //有3个
//:first-of-type 是父亲下这个类型的第一个
//:last-of-type 是父亲下这个类型的最后一个
var h3 = $("h3:first-of-type");
alert(h3.text()); //常用手机品牌
//:only-child 是父元素下的独生子
var div = $("div:only-child");
alert(div.length); //2 body下只有一个元素div,第一个div下只有一个唯一子元素，第三个不是唯一子元素
//:only-of-type 父亲下这个类型唯一一个
var ol = $("ol:only-of-type");
alert(ol.length); // 1 只有一个ol
var ul = $("ul:only-of-type");
alert(ul.length); //0 有两个ul，所以找不到
//:nth-child(index/even/odd) 是父亲下的第几个或奇数个或偶数个元素
//:nth-last-child(index/even/odd) 从后往前数，从1开始
//注：此时是从1开始的
var li2 = $("#ul1 li:nth-child(odd)");
alert(li2.text()); //华为vivo
})
</script>
</head>
<body>
<div>
<div id>
<h3>常用的手机品牌</h3>
<ul id="ul1">
<li id="huawei">华为</li>
<li>苹果</li>
<li>vivo</li>
<li>小米</li>
</ul>
<ul>
<li>华为</li>
<li>苹果</li>
<li>vivo</li>
<li>小米</li>
</ul>
<h3>销量榜</h3>
<ol>
<li>vivo</li>
<li>华为</li>
<li>苹果</li>
<li>小米</li>
</ol>
<div></div>
</div>
</div>
</body>
</html>
常用的表单选择器
- :input：选取所有,,和元素
- :text：选取所有的单行文本框
- :password：选取所有密码框
- :radio：选取所有单选按钮
- :checkbox：选取所有的复选框
- :submit：选取所有提交按钮
- :image：选取所有图像按钮
- :reset：选取所有重置按钮
- :button：选取所有按钮
- :file：选取所有文件上传域
常用的表单对象属性过滤选择器
- :disabled：选取所有不可用元素
- :enabled：选取所有可用元素
- :checeked：选取所有被选中的元素（单选框和复选框）
- :selected：选取所有被选中的选项元素（下拉列表）
示例代码
<!--jQuery常用表单选择器和常用表单对象过滤选择器演示-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用表单选择器</title>
<script src="../scripts/jQuery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//:input：选取所有<input>,<textarea>,<select>和<button>元素
//:text：选取所有的单行文本框
//:password：选取所有密码框
//:radio：选取所有单选按钮
//:checkbox：选取所有的复选框
//:submit：选取所有提交按钮
//:image：选取所有图像按钮
//:reset：选取所有重置按钮
//:button：选取所有按钮
//:file：选取所有文件上传域
var sub = $(":submit");
alert(sub.length); //1
var btn = $(":button");
alert(btn.length); //2
//:disabled 不可用
//:enabled 可用
//:checked 单选框或多选框是否选中
//:selected 下拉框或列表框 选中项
//找性别选中项
alert($("input[name=sex]:checked").val());
//JS和JQuery对比
//js-->jQuery
//value --> val()
//innerHTML --> html()
//innerText 兼容性问题--> text() 通用的
//空格问题：有空格，是层级选择器， 没有空格，多个同时修饰一个元素
//form[id] form元素，并且包含id属性
//form [id] form下并且包含id属性的元素
})
</script>
</head>
<body>
<form>
用户名：<input id="username" type="text" name="username" disabled><br/>
密 码：<input id="password" type="password" name="password"><br/>
性 别：<input class="sex" type="radio" name="sex" value="male" checked>男
<input class="sex" type="radio" name="sex" value="female">女<br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮1">
<input type="button" value="按钮2">
</form>
</body>
</html>
选择器中含有空格的注意事项
var $t1=$(.test :hidden);
var $t2=$(.test:hidden);
//区别
//第一种写法代表选取class为"test"的元素内的所有隐藏元素
//第二种写法代表选取隐藏的class为"test"的元素
1291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
