jQuery 筛选&文档处理

一.筛选

1.过滤

first() 获取匹配的第一个元素

 $("#oDiv>ul>li").first().css("border","1px solid red");

last()：获得匹配的最后一个元素

$("#oDiv>ul>li").last().css("border","1px solid red");

eq(N)：获取匹配的第N或-N个元素

 $("#oDiv>ul>li").eq(3).css("border","1px solid red");

filter(selector)：筛选出与指定表达式匹配的元素集合

$("#oDiv>#myO1>li").filter("[title==aa]").css("background","red");

has(selector)：筛选出包含特定特点的元素的集合

$("#oDiv>#myO1>li").has("span").css("background","red");

not(selector)：筛选出不包含特定特点的元素的集合

$("#oDiv>myO1>li").ont("[title]").css("background","red");

2.查找

children()：子标签中找

$("#oDiv>ul").children().css("background","orange");

find()：后代标签中找

$("#oDiv>#myO1").find("span").css("background","red");

parent()：父标签

$("b").parent().css("background","blue");

prevAll()：前面所有的兄弟标签

 $("#oDiv>ul>li").children().eq(2).prevAll().css("background","orange");

nextAll()：后面所有的兄弟标签

$("#oDiv>ul>li").children().eq(2).nextAll().css("background","orange");

siblings()：前后所有的兄弟标签

$("#oDiv>ul>li").children().eq(2).siblings().css("background","orange");

二.文档处理

1.增

1.1 内部插入

append()：将内容添加到指定的元素后面

$("#odiv>#oul>li").last().append("<a href = '#'>百度一下</a>");

appendTo()：和append()颠倒

$("<a href = '#'>4399</a>").appendTo($("#oul").children().last());

prepend()：将内容添加到指定元素前面

$("#oul>li").first().prepend("<a href = '#'>百度一下</a>");

prependTo():和prepend()颠倒

$("<a href = '#'>4399</a>").prependTo($("#oul").children().eq(2));

1.2 外部插入

after()：在匹配元素之后插入内容

 $("#oul").children().filter("[title=b]").after("<a href = '#'>后面</a>");

before()：在匹配元素之前插入内容

$("#oul").children().filter("[title=b]").before("<a href = '#'>前面</a>");

2.删

empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）

$("#oul").children("li").empty();					

remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）

$("#oul").children("li").remove();					

3.改

replaceWith()：将所有匹配的元素替换成指定的内容

$("#oul").find('span').css("background","red").replaceWith("< href = '#'>超链接</a>)	;