一.筛选
过滤 在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>
