jQuery 选择器的特点
- jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合,因此 jQuery 选择器允许对 HTML 的单个或多个元素进行操作。
- jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素,并且所有选择器都以美元符号开头:$()。
- jQuery 中除了基于已经存在的 CSS 选择器,它还有一些自定义的选择器。
jQuery 基本选择器
选择器 | 描述 |
---|---|
$("*") |
选择全部 |
$(this) |
选择当前 |
$("#id") |
ID选择器 |
$("div") |
元素选择器,基于元素名选取元素 |
$(".classname") $("p.classname") |
类选择器,通过指定的 class 查找元素 |
$(".classname,.classname1,#id1") |
组合选择器 |
$("p").hide()
:选择标签为<p>
的元素,并隐藏。
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(); /* 隐藏 p 标签*/
});
});
</script>
$("*").hide()
:隐藏 HTML 页面所有元素。
<script>
$(document).ready(function(){
$("button").click(function(){
$("*").hide(); /* 隐藏所有元素*/
});
});
</script>
$(this).hide()
:隐藏当前的元素。
<html>
<head>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>btn</button> <!--点击消失-->
</body>
</html>
$(".head_firstpage").animate({height:"100px"})
一个简易的下拉列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<style>
/**{border: 1px sliid black;margin: 0;}*/
.head,.head_open{
position: fixed;
top: 0;
background: lavender;
}
.head_open{
top: 30px;
}
.head img,.head_open img{width: 200px;height: 100px;}
.head ul{
height: 20px;
padding: 5px 0;
font-size: small;
text-align: center;
}
.head ul:hover{background: whitesmoke;}
.head_firstpage li{display: none;width: 100%;padding: 5px 0;text-align: center;}
.head_special li{display: none;width: 100%;padding: 5px 0;text-align: center;}
.head_new li{display: none;width: 100%;padding: 5px 0;text-align: center;}
.head ul li:hover{background: red;}
.head ul li a{text-decoration: none;color: black;font-size: 10px;}
</style>
</head>
<body>
<div class="head">
<img src="img/ratate_img (3).png"/>
<ul class="head_firstpage">首页:渐变打开,渐变关闭
<li><a href="#">门户</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">内网</a></li>
</ul>
<ul class="head_special">特色商品:瞬间打开,瞬间关闭
<li><a href="#">论坛活动</a></li>
<li><a href="#">节日礼物</a></li>
<li><a href="#">积分兑换</a></li>
</ul>
<ul class="head_new">最新上架:瞬间打开,渐变关闭
<li><a href="#">总部出品</a></li>
<li><a href="#">联合出品</a></li>
</ul>
</div>
</body>
<script>
$(document).ready(function(){
/* 点击展开 首页列表*/
$(".head_firstpage").click(function(){
$(".head_firstpage").animate({height:"100px"})
/* 在此处使用 jQuery css() 方法更改背景色,
* 此时,在 style 中设置的 :hover 已经失效
$(".head_firstpage").css("background","lightgray")*/
$(".head_firstpage li").css("display","block")
})
$(".head_firstpage").mouseleave(function(){
$(".head_firstpage").animate({height:"20px"},"slow")
/* css 的 :hover 效果无法从 jQuery 方法中获取,
* 因此,如果在jQuery中改变了背景色,将会使其在 css 中设置的 :hover 失效
$(".head_firstpage").css("background","red")
$(".head ul:hover").css("background","whitesmoke")*/
$(".head_firstpage li").css("display","none")
})
/* 点击展开 特色商品 列表*/
$(".head_special").click(function(){
$(".head_special").animate({height:"100%"},"slow")
$(".head_special li").css("display","block")
})
$(".head_special").mouseleave(function(){
$(".head_special").animate({height:"100%"})
$(".head_special li").css("display","none")
})
/* 点击展开 最新上架 列表*/
$(".head_new").click(function(){
/* animate() 效果方法,当变化的属性是 100% 时,表现为瞬间的效果*/
$(".head_new").animate({height:"100%"})
$(".head_new li").css("display","block")
})
$(".head_new").mouseleave(function(){
/* animate() 效果方法,当变化的属性是具体的长度,而不是百分号时,表现为渐变的效果*/
$(".head_new").animate({height:"20px"})
$(".head_new li").css("display","none")
})
})
</script>
</html>
$("p.intro").hide()
:隐藏class为 intro 的 <p>
元素。
<script>
$(document).ready(function(){
$("button").click(function(){
$("p.intro").hide();
});
});
</script>
<body>
<h2 class="intro">这是一个标题</h2>
<p class="intro">这是一个段落</p> <!--点击按钮隐藏-->
<p>这是另一个段落</p>
<button>点我</button>
</body>
$("#stop").click(function(){div.clearQueue();});
动画的手动播放与暂停
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>queue(),dequeue(),clearQueue()</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
var div = $(".div");
$("#start").click(function(){
div.animate({height:60},"slow");
div.animate({width:60},"slow");
div.queue("utf",function () {
div.animate({width:200},"slow");
});
div.queue("utf2",function () {
div.animate({width:80},"slow");
div.css("background","red");
});
div.dequeue("utf");
div.dequeue("utf2");
div.animate({height:20},"slow");
div.animate({width:20},"slow");
$( ".box" ).queue( "steps", function( next ) {
console.log( "Will never log because we clear the queue" );
$(this).animate({height:40},"slow");
next();
} ).clearQueue( "steps" ).dequeue( "steps" )
});
$("#stop").click(function(){
div.clearQueue();
});
});
</script>
</head>
<body>
<p>queue() 方法允许你创建一个队列功能区执行被选中的元素。 </p>
<p>dequeue() 方法顺序执行它们。 </p>
<p><button id="start">开始动画</button><button id="stop">停止动画</button></p>
<div class="div" style="background:blue;height:20px;width:20px;"></div>
<hr />
<div class="box" style="background:blue;height:20px;width:20px;"></div>
</body>
</html>
jQuery 过滤选择器
下标索引值从 0 开始,第一个元素是偶数 (0),第二个元素是奇数 (1),以此类推。
选择器 | 描述 |
---|---|
$("li:first") |
第一个li |
$("li:last") ` |
最后一个li |
$("li:even") |
挑选下标为偶数的li |
$("li:odd") |
挑选下标为奇数的li |
$("li:eq(4)") |
下标等于 4 的li(第五个 li 元素) |
$("li:gt(2)") |
下标大于 2 的li |
$("li:lt(2)") |
下标小于 2 的li |
$("li:not(#runoob)") |
挑选除 id=“runoob” 以外的所有li |
$("li:has(.runoob)") |
挑选包含 class=“runoob” 所有li |
$("p:first-child") |
在body内的元素中查找,选择子元素顺序是第一个的,且元素类型是 <p> 的 元素 |
$("p:first-of-type") |
某个父元素的,指定是 <p> 元素列的第一个 <p> 元素 |
$("div:contains('sex')") |
包含 sex 文本的 <div> 元素 |
$("td:empty") |
不包含子元素或者内容为空的 <td> 元素 |
$("td:parent") |
选取所有带有子元素或包含文本的 <td> 元素 |
可见性 | |
$("input:hidden") |
选中被隐藏的<input> 元素,或type为hidden的input元素 |
$("input:visible") |
选中可见的<input> 元素 |
状态过滤 | |
$("input:enabled") |
匹配可用的 input |
$("input:disabled") |
匹配不可用的 input |
$("input:checked") |
匹配选中的 input |
$("option:selected") |
匹配选中的 option |
属性过滤 | |
$("div[id]") |
所有含有 id 属性的 div 元素 |
$("div[id='num']") |
选择 id 属性为 num 的 div 元素 |
$("div[id!='num']") |
选择 id 属性不是 num 的 div 元素 |
$("div[id^='head']") |
选择 id 属性以 head 开头的 div 元素 |
$("div[id$='ctx']") |
选择 id 以 ctx 结尾的 div 元素 |
$("div[id*='apt']") |
选择 id 值包含 apt 的 div 元素 |
$("input[id][name$='man']") |
含有 id 属性且 name 值以 man结尾的元素 |
$("p:first-child")
选取属于某个的父元素中的第一个子元素,且具体元素是 <p>
标签的元素
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:first-child").css("background-color","yellow");
});
</script>
</head>
<body>
<!--父元素是 body,第 1 个子元素,标签为 p ,当选-->
<p>The first paragraph in body.</p>
<div style="border:1px solid;">
<!--父元素是div,第 1 个子元素,标签为 p ,单选-->
<p>The first paragraph in div.</p>
<!--父元素是div,第 2 个,也是最后一个子元素,不选-->
<p>The last paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<span>This is a span element.</span>
<!--父元素是div,第 2 个子元素,不选-->
<p>The first paragraph in another div.</p>
<!--父元素是div,第 3 个,最后一个子元素,不选-->
<p>The last paragraph in another div.</p>
</div>
<!--父元素是 body,最后一个子元素, 不选-->
<p>The last paragraph in body.</p>
</body>
</html>
$("p:first-of-type")
某个父元素的,指定是 <p>
元素列的第一个 <p>
元素
<script>
$(document).ready(function(){
/* 将上面的 first-child 改成 first-of-type*/
$("p:first-of-type").css("background-color","yellow");
});
</script>
$("p:first").hide()
:隐藏第一个 <p>
元素。
<script>
$(document).ready(function(){
$("button").click(function(){
$("p:first").hide();
});
});
</script>
$("td:parent")
选取所有带有子元素或包含文本的 <td>
元素
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$("td:parent").css("background-color","yellow");
});
</script>
</head>
<body>
<table border="1">
<tr> <th>序号</th> <th>站点名</th> <th>网址</th>
</tr>
<tr> <td>1</td> <td>Google</td> <td></td>
</tr>
<tr> <td>2</td> <td>Runoob</td> <td>runoob.com</td>
</tr>
<tr> <td>3</td> <td>Taobao</td> <td>taobao.com</td>
</tr>
<tr> <td>4</td> <td></td> <td>baidu.com</td>
</tr>
<tr> <td>5</td> <td>Sina</td> <td>sina.com.cn</td>
</tr>
<tr> <td>6</td> <td>Facebook</td> <td></td>
</tr>
<tr> <td>7</td> <td>twitter</td> <td>twitter.com</td>
</tr>
</html>
jQuery 层级选择器
选择器 | 描述 |
---|---|
$("#id>.classname ") |
子元素选择器 |
$("#id .classname ") |
后代元素选择器 |
$("div+p") |
选择紧邻 div 元素的,且就是 div 元素下一个的,标签为 <p> 的元素 |
$("#id ~ .classname ") |
兄弟元素选择器 |
子元素选择器 $("div ul li ul")
与后代元素选择器 $("div>ul>li>ul")
的区别
$("div>ul")
只选择 div 下一级里面的 ul 元素$("div ul")
选择 div 内所包含的所有 ul 元素$("div>ul")
比$("div ul")
限定更严格,必须后面的元素只比前面的低一个级别
$("div+p")
选择紧邻 div 元素的 p 元素,非子元素
<html>
<head> <meta charset="utf-8" />
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div+p").css("background-color","yellow");
});
</script>
</head>
<body>
<h2>$("div+p") 会选取什么元素?</h2>
<div style="border:1px solid black;padding:10px;">这个是 div 元素</div>
<p>这个 p 元素是 div 的下一个元素</p>
<p>这是另外一个 p 元素</p>
<div style="border:1px solid black;padding:10px;">
<p>这是在 div 中的 p 元素</p>
</div>
<h2>这是 在 div 元素后的标题</h2>
<p>这是一个 p 元素(这个 p 元素不会被选取,因为以上的 h2 元素是 div 的下一个元素)。</p>
</body>
</html>
$("div~p")
选取与 <div>
元素同级的所有 <p>
元素
<html>
<head> <meta charset="utf-8" />
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div~p").css("background-color","yellow");
});
</script>
</head>
<body>
<h2>$("div~p") 会选取什么?</h2>
<p>这是一个 p 元素 (不会被选取)。</p>
<div style="border:1px solid black;padding:10px;">这是一个 div 元素</div>
<p>这是一个 p 元素</p>
<p>这是另外一个 p 元素</p>
<div style="border:1px solid black;padding:10px;">
<p>这个 p 元素在 div 内(不会被选取).</p>
</div>
<h2>这是一个标题</h2>
<p>这是一个 p 元素</p>
</body>
</html>
jQuery 表单选择器
选择器 | 描述 |
---|---|
$(":input") | 所有 input 元素 |
$(":text") | 所有带有 type=“text” 的 input 元素 |
$(":password") | 所有带有 type=“password” 的 input 元素 |
$(":radio") | 所有带有 type=“radio” 的 input 元素 |
$(":checkbox") | 所有带有 type=“checkbox” 的 input 元素 |
$(":submit") | 所有带有 type=“submit” 的 input 元素 |
$(":reset") | 所有带有 type=“reset” 的 input 元素 |
$(":button") | 所有带有 type=“button” 的 input 元素 |
$(":image") | 所有带有 type=“image” 的 input 元素 |
$(":file") | 所有带有 type=“file” 的 input 元素 |
$(":enabled") | 所有启用的元素 |
$(":disabled") | 所有禁用的元素 |
$(":selected") | 所有选定的下拉列表元素 |
$(":checked") | 所有选中的复选框选项 |
$(":enable")
选择所有可以使用的表单元素,如果不能设置此属性,则无效,例如 p 标签无效
<html>
<head> <meta charset="utf-8" />
<script src="js/jquery-3.3.1.js">
</script>
<script>
$(document).ready(function(){
$(":enabled").css("background-color","red");
});
</script>
</head>
<body>
<form action="">
用户名: <input type="text" name="user"><br>
ID:<input type="text" name="id" disabled="disabled">
年龄:
<select disabled="disabled">
<option>20-30</option>
<option>30-50</option>
<option>50+</option>
</select>
<input type="submit">
</form>
<p>红色是可以使用的部分,白色是禁用的部分</p>
</body>
</html>
$(":button")
和 $("button")
的区别
$(":button")
为 jQuery 中表单选择器,旨在选择所有的按钮,所以会找到 、 元素;而 $(“button”) 则为基本选择器,旨在选择为 <button>
的标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery 的隐藏功能</title>
<!--导入 jQuery-->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h1 id="h1">标题</h1>
<p class="p1">第一行内容</p>
<p class="p2">第二行内容</p>
<p class="p3">第三行内容</p>
<button id="press">press</button>
<input type="button" id="btn" value="btn"></input>
</body>
<script>
$(document).ready(function(){
$("#press").click(function(){
$(":button").hide();
});
$("#btn").click(function(){
$("button").hide()
})
})
</script>
</html>
Reference
利用 :target 选择器突出显示活动的 HTML 锚
后代选择器和子元素选择器的区别
jQuery 选择器(:has(selector))详解
jQuery 选择器测试
jQuery 选择器教材