jQuery——筛选和文档处理

jQuery——筛选和文档处理可以联合运用到购物车案例上实现部分功能。

jQuery过滤

 以div>ui>li的子代关系

//1.1 过滤

						//--过滤出指定表达式匹配的元素
						// 获取id为oDiv下的ul中所有的li元素，然后找到第一个元素
						// $("#oDiv>ul>li").first().css("border","1px solid blue")

						// 找到最后一个元素
						// $("#oDiv>ul>li").last().css("border","1px solid blue")

						// 找到指定的某一个元素，例如第3个
						// $("#oDiv>ul>li").eq(3).css("border","1px solid blue")


						//--过滤出指定表达式匹配的元素集合
						// 找到属性title为aa的元素
						// $("#oDiv>#myOl>li").filter("[title=aa]").css("background","yellow");


						// 筛选出有title属性的元素集合
						// $("#oDiv>#myOl>li").filter("[title]").css("background","yellow");

						// 筛选出有<span>标签的元素集合
						//<li></li>  <li>span</li> 
						// $("#oDiv>#myOl>li").has("span").css("background","yellow");


						// 筛选出没有title属性的元素集合
						// $("#oDiv>ul>li").not("[title]").css("background","red");

  jQuery查找

 以div>ui>li的子代关系

						// 查找ul的所有子标签,并且指定为li子标签 
						// $("#oDiv>ul>li").css("background","orange");
						// $("#oDiv>ul").children().css("background","orange");


						// 查找ol下面所有的span标签
						// $("#oDiv>#myOl").find("span").css("background","red");;

						// 查找b标签的父元素标签 parentNode
						// $("b").parent().css("background","blue");

						// 查找第三个li标签前面所有的兄弟标签
						// $("#oDiv>ul>li").eq(2).css("background","orange");
						// $("#oDiv>ul").children().eq(2).css("background","orange");
						// $("#oDiv>ul").children().eq(2).prevAll().css("background","orange");

						// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
						// $("#oDiv>ul").children().eq(2).nextAll().css("background","orange");

						// 查找第三个li标签所有的兄弟标签
						// $("#oDiv>ul").children().eq(2).siblings().css("background","orange");

						// 查找第三个li标签后面所有的兄弟标签 拿到其中的第二个
						// $("#oDiv>ul").children().eq(2).nextAll().eq(1).css("background","orange");

jQuery的文档处理

// jQuery中通过选择器获取到标签后依然会返回本身对象
				// 不管调用什么方法后依然将本身返回

				//2.1 增
				//--内部插入(前面和后面)
				//   插入到最后面(给ul中最后一个li中插入一个a标签)
				// $("#oDiv>li").last().css("background","red");
				// $("#oDiv>li").last().append("<a href = '#'>百度一下</a>");
				// appendTo
				// $("<a href = '#'>百度一下</a>").appendTo($("#oDiv").children().last());

				//   插入到最前面(给ul中第一个li中插入一个a标签)
				// $("#oDiv>li").first().prepend("<a href = '#'>百度一下</a>");

				// $("<a href = '#'>百度一下</a>").prependTo($("#oDiv").children().eq(2));

				//--外部插入(之前和之后)
				//   在属性title为b的li前面插入一个a标签
				// before
				// $("#oDiv").children().filter("[title=b]").css("background","red");
				// $("#oDiv").children().filter("[title=b]").before("<a href = '#'>呵呵</a>");

				// $("#oDiv").children().filter("[title=b]").css("background","red").before("<a href = '#'>呵呵</a>");


				//   在属性title为b的li后面插入一个a标签
				// $("#oDiv").children().filter("[title=b]").css("background","red").after("<a href = '#'>呵呵</a>");


				//2.2 改				
				//把li下面所有的span标签替换为<a>标签
				// $("#oDiv").find('span').css("background","red").replaceWith("<a href = '#'>超链接</a>")




				//2.3 删				
				//清空ul中所有li的内容
				// $("#oDiv").children("li").css("background","red").empty();


				//移除ul中所有的li
				// $("#oDiv").children("li").css("background","red").remove();

——————————————body代码——————————————
<ul id="oDiv">
			<li>item1<span>123</span></li>
			<li title="b">item2</li>
			<ul>
				<li><span>222</span>333</li>
			</ul>
			<li><span>123</span>item3</li>
			<li>item4</li>
			<li><span>123</span>item5</li>
		</ul>

总体总结