jQuery学习教程，写更少的代码,做更多的事情
Posted IT_Holmes
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery学习教程，写更少的代码,做更多的事情相关的知识，希望对你有一定的参考价值。
1.基础过滤
1> 正在执行动画效果的元素
:animated Selector
语法：
$(":animated")
描述：
选择所有正在执行动画效果的元素。
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="source/jquery-3.6.0.js"></script>
</head>
<style type="text/css">
div{
width:100px;
height: 100px;
background-color: skyblue;
float: left;
border: 1px solid yellow;
margin: 0 5px;
}
.d2{
background-color: black;
}
</style>
<body>
<button id="run">运行</button>
<div></div>
<div id="move"></div>
<div></div>
<script type="text/javascript">
$(function(){
$("#run").click(function(){
$("div:animated").toggleClass('d2');
})
// 创建一个函数，实现一个滑动的动画效果。
function animatedIt(){
// slideToggle方法是滑动显示或隐藏元素。
$("#move").slideToggle("slow",animatedIt);
}
animatedIt();
})
</script>
</body>
</html>
2> 选择索引值为index的元素
:eq()Selector
语法：
（1）$(":eq(index)") //index：要匹配元素的索引值（从0开始计数）
（2）$(":eq(-index)") //-index：要匹配元素的索引值（从0开始计数），从最后一个元素开始倒计数。
3> 选择奇偶数索引来匹配
:even Selector 或者 :odd Selector
语法：
$(":even") or $(":odd")
注意：这是基于0的索引，所以:even选择器是选择第一个元素，第三个元素依次类推匹配。
4> 选择第一个元素
:first Selector
语法：
$(":first")
描述：选择第一个匹配的元素。
5> 获得当前焦点的元素
:focus Selector
语法：
$(":focus")
描述：
选择当前获取焦点的元素。
例如：注意下面的tabindex属性和delegate方法
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="source/jquery-3.6.0.js"></script>
</head>
<style type="text/css">
.focused{
background-color: blue;
}
</style>
<body>
<div id="content">
<!-- 可以设置tab键在控件中的移动顺序。
如果tabindex的值为负数，使用tab键移动时会自动跳过这个元素。
当使用tab键控制移动顺序时，光标会首先移动到具有最小的tabindex属性值的元素上
（0除外，值为0时排在所有的正值之后）。-->
<input type="" name="" tabindex="1">
<input type="" name="" tabindex="2">
<select tabindex="3">
<option>select menu</option>
</select>
<div tabindex="4">
welcome the world。
</div>
</div>
<script type="text/javascript">
$(function(){
//delegate方法，给指定的元素添加一个或多个事件。
$("#content").delegate("*","focus blur",function(event){
var e = $(this);
setTimeout(function(){
e.toggleClass("focused",e.is(":focus"));
},0);
})
})
</script>
</body>
</html>
想要了解全部的事件，可以查询一下这里事件。
6> 选择所有标题元素
:header Selector
语法：
$(":header")
描述：
选择所有标题元素，像h1，h2，h3等。
7> 选择最后一个匹配元素
语法：
last Selector
描述：
选择最后一个匹配的元素。
8> 所有大于给定index（索引值）的元素
gt就是greater than 大于的意思。
:gt()Selector
语法：
$(":gt(index)") or$(":gt(-index)")
描述：
选择匹配集合中所有大于给定index(索引值)的元素。
9> 所有小于给定index（索引值）的元素
lt就是less than小于的意思。
:lt()Selector //这里是L不是i
语法：
$(":lt(index)")or$(":lt(-index)")
描述：
选择匹配集合中所有索引值小于给定index参数的元素
注意：这里的索引值不包括自身的！
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="source/jquery-3.6.0.js"></script>
</head>
<body>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script type="text/javascript">
$(function(){
//这里的索引值不包括自身的
$("td:lt(4)").css("color","blue");
})
</script>
</body>
</html>
10>出去不匹配给定的选择器的元素
语法：
$(":not(selector)")
描述：
选择所有元素去除不匹配给定的选择器的元素
2.子元素过滤
1> 选择所有父级元素的第一个子元素
语法：
(":first-child")
描述：
选择所有父级元素下的第一个子元素。
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
</head>
<style type="text/css">
.g{
background-color:green;
}
</style>
<body>
<div>
<span>111</span>
<span>222</span>
<span>333</span>
</div>
<div>
<span>111</span>
<span>222</span>
<span>333</span>
</div>
<div>
<span>111</span>
<span>222</span>
<span>333</span>
</div>
<script type="text/javascript">
$(function(){
$("div span:first-child").css("text-decoration","underline").hover(function(){
$(this).addClass("g"); //增加类
},function(){
$(this).removeClass("g");//移除类
});
})
</script>
</body>
</html>
2> 选择所有父级元素的最后一个子元素
语法：
(":last-child")
描述：
选择所有父级元素下的最后一个子元素。
3> 选择所有相同的元素名称的第一个兄弟元素
语法：
(":first-of-type")
描述：
选择所有相同的元素名称的第一个兄弟元素。
4> 选择所有元素之间具有相同元素名称的最后一个兄弟元素
语法：
(":last-of-type")
描述：
选择的所有元素之间具有相同元素名称的最后一个兄弟元素。
5> 选择他们所有父元素的第n个子元素
语法：
(":nth-child(index/even/odd/equation)")
描述：
选择的他们所有父元素的第n个子元素。
3.内容过滤
1> 选择所有包含指定文本的元素
语法：
(":contains(text)")
描述：
选择所有包含指定文本的元素。
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div>jQuery 是一个 JavaScript 库。</div>
<div>jQuery 极大地简化了 JavaScript 编程。</div>
<div>jQuery 很容易学习。</div>
<div>学，习</div>
<script type="text/javascript">
$(function(){
$("div:contains('学习')").css("text-decoration","underline");
})
</script>
</body>
</html>
2> 选择所有没有子元素的元素
语法：
(":empty")
描述：
选择所有没有子元素的元素（包括文本节点）。
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<table border="1">
<tr><td>1</td><td></td></tr>
<tr><td></td><td>2</td></tr>
<tr><td>3</td><td></td></tr>
</table>
<script type="text/javascript">
$(function(){
$("td:empty").text("这是空的！").css("background-color","skyblue");
})
</script>
</body>
</html>
3> 选择元素其中至少包含指定选择器匹配的一种元素
语法：
(":has(selector)")
描述：
选择元素其中至少包含指定选择器匹配的的一种元素。
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
</head>
<style type="text/css">
.t{
border: 2px solid skyblue;
}
</style>
<body>
<div><a>hello ， 老铁。</a></div>
<div>hello , 靓仔。</div>
<script type="text/javascript">
$(function(){
$("div:has(a)").css("background-color","red").addClass("t");
})
</script>
</body>
</html>
4> 选择所有含有子元素或者文本的父级元素
语法：
(":parent")
描述：
选择所有含有子元素或者文本的父级元素。
以上是关于jQuery学习教程，写更少的代码,做更多的事情的主要内容，如果未能解决你的问题，请参考以下文章