目录
查找 在jQuery对象数组中，根据选择器查找孩子、父母、兄弟标签
一.筛选
过滤 在jQuery对象数组中，过滤出一部分元素来
- first()：获取匹配的第一个元素
- last()：获得匹配的最后一个元素
- eq(N)：获取匹配的第N或-N个元素
- filter(selector)：筛选出与指定表达式匹配的元素集合
- has(selector)：筛选出包含特定特点的元素的集合
- not(selector)：筛选出不包含特定特点的元素的集合
案例1：演示过滤所有的方法
$(function () {
/* 一、 在jQuery对象数组中，筛选出一部分元素 */
//1.1 过滤
//--过滤出指定表达式匹配的元素
// 获取ul中所有的li元素，然后找到第一个元素
// $("ul li:first").css("background","pink");
// $("ul>li").first().css("background","pink");
// 找到最后一个元素
// $("ul li:last").css("background","pink");
// $("ul>li").last().css("background","pink");
// 找到指定的某一个元素，例如第3个
// $("ul>li:eq(2)").css("background","pink");
// $("ul>li:eq(-2)").css("background","pink");
// $("ul>li").eq(2).css("background","pink");
//--过滤出指定表达式匹配的元素集合
// 筛选出有title属性的元素集合 []
// $("ul>li").filter("[title]").css("background","pink");
// 找到属性title为a的元素
// $("ul>li").filter("[title=a]").css("background","pink");
// 找到属性title不为a的元素
// $("ul>li").filter("[title][title!=a]").css("background","pink");
// 筛选出有<span>标签的元素集合
// $("ul>li").has("span").css("background","pink");
// 筛选出没有title属性的元素集合
// $("ul>li").not("[title]").css("background","pink");
<body>
<h2>jQuery03：筛选、文档处理</h2>
<!-- 筛选和查找案例 -->
<ul>
<li>1</li>
<li title="a">2</li>
<li title="b">3</li>
<li title="a"><span><b>4</b></span></li>
<li title="b"><span>5</span></li>
<ol>
<li>6</li>
<li>7</li>
</ol>
<span>8</span>
</ul>
</body>
})查找 在jQuery对象数组中，根据选择器查找孩子、父母、兄弟标签
- children()：子标签中找
- find()：后代标签中找
- parent()：父标签
- prevAll()：前面所有的兄弟标签
- nextAll()：后面所有的兄弟标签
- siblings()：前后所有的兄弟标签
案例2：演示查找所有的方法
$(function(){
//1.2 查找
// 查找ul的所有子标签,并且指定为li子标签
// $("ul>li").css("background","pink");
// $("ul").children("li").css("background","red");
// 查找ul下面所有的span标签
// $("ul span").css("background","pink");
// $("ul").find("span").css("background","pink");
// 查找b标签的父元素标签
// $("b").parent().css("background","pink");
// 查找第三个li标签前面所有的兄弟标签
// $("ul li").eq(2).prevAll().css("background","pink");
// $("li:eq(2)").css("background","pink");
// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
// $("ul li").eq(2).nextAll("li").css("background","pink");
// 查找第三个li标签所有的兄弟标签
// $("ul li").eq(2).siblings().css("background","pink");
<body>
<h2>jQuery03：筛选、文档处理</h2>
<!-- 筛选和查找案例 -->
<ul>
<li>1</li>
<li title="a">2</li>
<li title="b">3</li>
<li title="a"><span><b>4</b></span></li>
<li title="b"><span>5</span></li>
<ol>
<li>6</li>
<li>7</li>
</ol>
<span>8</span>
</ul>
</body>
})二.文档处理
一.增
1.1 内部插入 1~2 后面 3~4 前面
- append()：将内容添加到指定的元素后面
- appendTo()：和append()颠倒
- prepend()：将内容添加到指定元素前面
- prependTo():和prepend()颠倒
1.2 外部插入
- after()：在匹配元素之后插入内容
- before()：在匹配元素之前插入内容
案例3：演示文档处理-增加
$(function(){
//2.1 增
//--内部插入(前面和后面) 做为自己的子代/儿子 append(小儿子) prepend(大儿子)
// 插入到最后面(给ul中最后一个li中插入一个a标签)
// $("ul>li:last").append("<a href='http://www.baidu.com'>百度<a/>");
// $("<a href='http://www.baidu.com'>百度<a/>").appendTo($("ul>li:last"));
// 插入到最前面(给ul中第一个li中插入一个a标签)
// $("ul>li:first").prepend("<a href='http://www.baidu.com'>百度<a/>")
//--外部插入(之前和之后) before(哥哥) after(弟弟)
// 在属性title为b的li前面插入一个a标签
// $("ul>li").filter("[title=b]").before("<a href=#>哈哈哈<a/>")
// 在属性title为b的li后面插入一个a标签
// $("ul>li").filter("[title=b]").after("<a href=#>哈哈哈<a/>")
<body>
<h2>jQuery03：筛选、文档处理</h2>
<!-- 筛选和查找案例 -->
<ul>
<li>1</li>
<li title="a">2</li>
<li title="b">3</li>
<li title="a"><span><b>4</b></span></li>
<li title="b"><span>5</span></li>
<ol>
<li>6</li>
<li>7</li>
</ol>
<span>8</span>
</ul>
</body>
})二.删
- empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）
- remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）
案例4：演示文档处理-删除
$(function(){
//2.3 删
//清空ul中所有li的内容 清空文本
// $("ul li").empty();
//移除ul中所有的li 指定标签
// $("ul li").remove();
<body>
<h2>jQuery03：筛选、文档处理</h2>
<!-- 筛选和查找案例 -->
<ul>
<li>1</li>
<li title="a">2</li>
<li title="b">3</li>
<li title="a"><span><b>4</b></span></li>
<li title="b"><span>5</span></li>
<ol>
<li>6</li>
<li>7</li>
</ol>
<span>8</span>
</ul>
</body>
})三.改
- replaceWith()：将所有匹配的元素替换成指定的内容
案例5：演示文档处理-修改
$(function(){
//2.3 删
//清空ul中所有li的内容 清空文本
// $("ul li").empty();
<body>
<h2>jQuery03：筛选、文档处理</h2>
<!-- 筛选和查找案例 -->
<ul>
<li>1</li>
<li title="a">2</li>
<li title="b">3</li>
<li title="a"><span><b>4</b></span></li>
<li title="b"><span>5</span></li>
<ol>
<li>6</li>
<li>7</li>
</ol>
<span>8</span>
</ul>
</body>
})三.CSS位置
- offset()：相对整个大容器的相对位置
- position()：相对父容器的相对位置
案例6：大Div中嵌套小Div，求两个div相对位置
$(function(){
//位置
//大容器和父容器的距离
// let a = $("#aa").offset(); //大容器
// console.info(a.left,a.top);
// let a = $("#aa").position(); //父容器
// console.info(a.left,a.top);
// let a = $("#bb").offset(); //大容器
// console.info(a.left,a.top);
// let b = $("#bb").position(); //父容器
// console.info(b.left,b.top);
})
<body>
<h3>位置</h3>
<div id="aa">
<div id="bb"></div>
</div>
</html>scrollXX
scrollTop()：滚动条到顶部距离
案例7：滚动条位置
$(function(){
// 获取滚动条位置 返回顶部案例
$("#btn").click(function () {
//获取滚动条距离上面的距离
// let a = $("body,html").scrollTop();//拿值
// alert (a);
//设置值 返回顶部
$("body,html").scrollTop(0);
})
});
})
<body>
<!-- <input type="button" value="获取滚动条的距离" id="btn" /> -->
<input type="button" value="返回顶部" id="btn" />
</body>
55
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
