目录
一、jQuery的筛选
1.过滤
first() | 获取匹配的第一个元素 |
last() | 获取匹配的最后一个元素 |
eq(N) | 获取匹配的第N或N个元素 |
filter() | 筛选出与指定表达式匹配的元素集合 |
has() | 筛选出包含特定特点的元素集合 |
not() | 筛选出不包含特定特点的元素集合 |
接下来就是代码展示
<ul>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li class="aa">哈哈哈</li>
<li class="aa">哈哈哈</li>
<li>哈哈哈</li>
<li id="l1">哈哈哈</li>
<li><p class="bb">哈哈哈</p></li>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
</ul>
<script src="js/jquery-3.5.1.js"></script>
<script>
//拿第一个元素
console.log($("li").first())
console.log($("li:first()"))
//拿最后一个元素
console.log($("li").last())
console.log($("li:last()"))
//拿指定的元素
console.log($("li").eq(0)) //$对象
console.log($("li").get(0)) //js对象
//筛选出含有aa属性的元素
console.log($("li").filter(".aa"))
//拿到有p标签的li
$("li").has("p")
//拿到有class属性为bb的li
$("li").has(".bb")
//筛选出没有aa属性的元素
$("li").not(".aa")
</script>
2.查找
children() | 查找子标签 |
find() | 查找后代 |
parent() | 父标签 |
prevAll() | 前面所有的兄弟 |
nextAll() | 后面所有的兄弟 |
siblings() | 前后面所有的兄弟 |
代码展示如下:
<ul>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li class="aa">哈哈哈</li>
<li class="aa">哈哈哈</li>
<li>哈哈哈</li>
<li id="l1">哈哈哈</li>
<li><p class="bb">哈哈哈</p></li>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
</ul>
<script src="js/jquery-3.5.1.js"></script>
<script>
//拿出ul中所有的子标签
console.log($("ul").children())
//拿出ul中带aa属性的子标签
console.log($("ul").children(".aa"))
//拿出ul里面的p标签
console.log($("ul").find("p"))
//find不仅限于子代
//拿父元素
console.log($(".aa").parent()) //ul
//parents可以拿出所有的父元素,指定后拿指定的父元素
console.log($(".aa").parents()) // ul body html
console.log($(".aa").parents("body")) //body
//拿出前面所有的兄弟标签
console.log($("#l1").prevAll())
//拿出后面所有的兄弟标签
console.log($("#l1").nextAll())
//拿出前后所有的兄弟标签
console.log($("#l1").siblings())
</script>
find不仅限于子代,还可以拿孙子代。
parent只能拿相近的父代(上一级),parents可以拿出所有的父元素,指定后拿指定的父元素
二、jQuery的文档处理
1.增加
·内部插入
append() | 将内容添加到指定的元素后面 |
appendTo() | 和append()颠倒 |
prepend() | 将内容添加到指定的元素前面 |
prependTo() | 和prepend()颠倒 |
编写一个p标签,来给5px的绿色边框
<style>
p{
border: 5px solid seagreen;
}
</style>
<p></p>
//在p标签内追加内容
$("p").append("Hello World")
$("p").append("<b>你好 世界</b>")
使用js创建标签并添加
// 创建标签
let i=document.createElement("i")
// 给i标签设置内容
i.textContent="哈哈哈"
// 将i标签加入到p标签中
$("p").append(i)
使用jQuery创建标签并添加
//创建标签
let j=$("<u>")
//给j标签设置内容
j.text("哈哈ha")
//将j标签加入到p标签中
$("p").append(j) //后面
cloneNode(true) 复制 cloneNode是js的函数,j是jQuery元素,需转换后才能使用
$("p").prepend(j.get(0).cloneNode(true)) //将j复制后添加到前面
j.get(0) 将jQuery元素转换成js元素
$(u) 将js元素转换成jQuery元素
let u=document.getElementsByTagName("u")[0] //拿到第一个
$(u).text("123")
text是jQuery函数,u是js元素,需转换后才能使用
·外部插入
after() | 在匹配元素之后插入内容 |
before() | 在匹配元素之前插入内容 |
//在p标签之后添加j
$("p").after(j)
//在p标签之前添加j
$("p").before(j)
在p标签之后
在p标签之前
2.删除
empty() | 删除匹配元素集合中所有的子节点 (不包含匹配元素) |
remove() | 删除匹配元素集合中所有的子节点 (包含匹配元素) |
//删除p标签中所有的子节点(不包含p标签)
// $("p").empty()
//删除p标签中所有的子节点(包含p标签)
$("p").remove()
使用empty删除
使用remove删除后页面是什么都没有的
3.修改
replaceWith() | 将所有匹配的元素替换成指定的内容 |
三、删除表格中的一行数据
<script src="js/jquery-3.5.1.js"></script>
<table border>
<tr>
<td>第一行</td>
<td>🌭🌭🌭</td>
<td>🥪🥪🥪</td>
<td>🌮🌮🌮</td>
<td>
<p>
<button onclick="$(this).parents('tr').remove()">删除</button>
</p>
</td>
</tr>
<tr>
<td>第二行</td>
<td>🍑🍑🍑</td>
<td>🍍🍍🍍</td>
<td>🍒🍒🍒</td>
<td>
<p>
<button onclick="this.parentElement.parentElement.outerHTML=''">删除</button>
</p>
</td>
</tr>
</table>
看第二张图可以看出,第一行已经删了,第二行只把删除按钮了
上面的代码中 this.parentElement.parentElement拿到的是td,所有删除的是td
四、菜单功能
<style>
li{
/* 去除选项前面的点点 */
list-style: none;
}
ul{
/* 调整了内间距 */
padding: 0px;
}
p{
background-color: bisque;
}
ol{
display: none;
}
/*激活的样式*/
.active{
background: lavenderblush;
color: burlywood;
}
/*激活的时候 它地下的ol*/
.active ol{
display: block;
}
</style>
<ul>
<li>
<p>速食</p>
<ol>
<li>🍔🍔🍔</li>
<li>🥪🥪🥪</li>
<li>🌮🌮🌮</li>
<li>🌯🌯🌯</li>
</ol>
</li>
<li>
<p>主食</p>
<ol>
<li>🍚🍚🍚</li>
<li>🍛🍛🍛</li>
<li>🍜🍜🍜</li>
<li>🍠🍠🍠</li>
</ol>
</li>
<li>
<p>甜品</p>
<ol>
<li>🍨🍨🍨</li>
<li>🍩🍩🍩</li>
<li>🍰🍰🍰</li>
<li>🍫🍫🍫</li>
</ol>
</li>
<li>
<p>水果</p>
<ol>
<li>🍉🍉🍉</li>
<li>🍒🍒🍒</li>
<li>🍌🍌🍌</li>
<li>🍓🍓🍓</li>
</ol>
</li>
</ul>
<script src="js/jquery-3.5.1.js"></script>
<script>
//给所有的菜单设置点击事件
$("p").click(function (){
//this是js对象
let li=$(this).parents("li")
//移除其他(兄弟)菜单的激活样式
li.siblings().removeClass("active")
//如果有激活样式,则移除
if(li.hasClass("active")){
return li.removeClass("active")
}
//给菜单添加激活的样式
li.addClass("active")
})
</script>
效果展示如下图所示
今日分享就到这了,下期再给大家分享更多有趣的