1.1 基础选择器
原生S获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery给我们做了封装,使获取元素统一标准
(选择器”)∥里面选择器直接写CSS选择器即可,但是要加引号
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | s("#id") | 获取指定D的元素 |
| 全选选择器 | s(*) | 匹配所有元素 |
| 类选择器 | s(".class") | 获取同一类 |
| class的元素标签选择器 | (“div”) | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”) | 选取多个元素 |
| 交集选择器 | $(“li.current”) | 交集元素 |
1.2 层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | s(“ul>li”); | 使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素 |
| 后代选择器 | s(“ul li”); | 使用空格,代表后代选择器,获取u下的所有l元素,包括孙子等 |
案例:
html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/html" title=jquery>jquery-3.5.1.min.js"></script>
</head>
<body>
<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ol>
<li>我是ol的</li>
<li>我是ol的</li>
<li>我是ol的</li>
<li>我是ol的</li>
</ol>
<ul>
<li>我是ul</li>
<li>我是ul</li>
<li>我是ul</li>
<li>我是ul</li>
</ul>
<script>
$(function () {
$('.nav')
$('ul li')
})
</script>
</body>
</html>
1.3 筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $(‘li:first’) | 获取第一个li元素 |
| :last | $(‘li:last’) | 获取最后一个li元素 |
| :eq(index) | $(‘li:eq(2)’) | 获取到的元素中索引号为2的 |
| :odd | $(‘li:odd’) | 获取索引号为奇数的元素 |
| :even | $(‘li:even’) | 获取索引号为偶数的元素 |
html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/html" title=jquery>jquery-3.5.1.min.js"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ol>
<li>1+5</li>
<li>2+5</li>
<li>3+5</li>
<li>4+5</li>
<li>5+5</li>
</ol>
<script>
$(function () {
$('ul li:first').html" title=css>css('color','red');
$('ul li:last').html" title=css>css('color','pink');
$('ul li:eq(1)').html" title=css>css('color','skyblue');
$('ol li:even').html" title=css>css('color','orange');
$('ol li:odd').html" title=css>css('color','green');})
</script>
</body>
</html>
效果:
1.4 筛选方法
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $(“li”).parent(); | 查找父级 |
| children(selector) | $(“ul”). children("") | 相当于s(ul>1i”),最近一级(亲儿子) |
| find(selector) | $(“ul”). find(“li”); | 相当于ul li后代选择器 |
| siblings(selector) | $(". first").siblings(li"); | 查找兄弟节点,不包括自己本身 |
| nextAll([expr]) | $(". first"). nextAll() | 查找当前元素之后所有的同辈元素 |
| prevtAll([expr]) | $(".last"). prevAll() | 查找当前元素之前所有的同辈元素 |
| hasclass(class) | $(‘div’). hasclass(“protected”) | 检查当前的元素是否含有某个特定的类,如果有,则返回true |
| eq(index) | $(“li”).eq(2); | 相当于$(li:eq(2)), index从0开始 |
案例:
html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/html" title=jquery>jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
<div class="nav">
<p>p</p>
<div>
<p>pp</p>
</div>
</div>
<script>
$(function () {
// father
$('.son').parent().html" title=css>css('color','yellow');
// one_son
$('.nav').children('p').html" title=css>css('color','red');
// all sons
$('.nav').find('p').html" title=css>css('color','purple');
})
</script>
</body>
</html>
效果:
案例2,html" title=jquery>jquery下拉菜单:
html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/html" title=jquery>jquery-3.5.1.min.js"></script>
<style>html" title=css>css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.nav {
display: flex;
width: 30%;
height: 80px;
flex-direction: row;
}
.nav>li {
flex: 1;
display: flex;
flex-direction: column;
}
.nav>li>ul {
display: none;
width: 100%;
height: 240px;
flex-direction: column;
}
.nav>li>ul>li {
flex: 1;
background-color: pink;
border:1px solid red;
text-align: center;
line-height: 80px;
}
.nav>li>a{
height: 100%;
background-color: skyblue;
text-decoration: transparent;
text-align: center;
line-height: 80px;
border: 1px solid red;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
</body>
<script>
$(function () {
// 鼠标经过
$(".nav>li").mouseover(function () {
// $(this) //当前元素
$(this).children('ul').html" title=css>css('display', 'flex');
})
$(".nav>li").mouseleave(function () {
// $(this) //当前元素
$(this).children('ul').hide();
})
})
</script>
</html>
好处显而易见,不需要用循环迭代(因为内部已经实现)
