JQuery筛选

在这里插入图片描述

	$(function(){
				// (1).过滤:在jQuery对象数组中,过滤出一部分元素 :
				// 1)、首先获取ul中所有的li子元素,即会产生一个li数组uls。然后:
					var uls = $("ul>li");
				//2)、first():获取数组uls中的第一个元素,即第一个li标签.
					// $("ul>li:first").css({"background":"pink"});
					// $("ul>li:first").css({"backgrourd":"pink"});
				// 3)、last():获取数组uls中的最后一个元素,即最后一个li标签.
					// uls.last().css({"backgrourd":"pink"});
					
				// 4)、eq(index):从数组uls中找到下标为2的元素.
					// uls.eq(2).css({"backgrourd":"pink"});
				//4.1)、从数组uls中找到倒数第2个元素.
					// uls.eq(-2).css({"backgrourd":"pink"});
					
				// 5)、filter(selector):匹配到类名为sa的元素。
				// uls.filter(".sa").css({"backgrourd":"pink"});
				// 5.1)、匹配到有属性title,并且值为a的元素.
				// uls.filter("[title=a]").css({"backgrourd":"pink"});
				// 5.2)、匹配到属性title的值不为a的元素
				// uls.filter("[title!=a]").css({"backgrourd":"pink"});
				// 5.3)、匹配到有title属性,且属性值不为a的元素.
				// uls.filter("[title][title!=a]").css({"backgrourd":"pink"});
				// 5.4)、从数组uls中过滤出有title属性的元素集合.
				// uls.filter("[title]").css({"backgrourd":"pink"});
				
				// 6)、has(selector):从数组uls中过滤出有<span>标签的元素集合.
				// uls.has("span").caa({"backgrourd":"pink"});
				// 7)、从数组uls中过滤出没有title属性的元素集合.
				// uls.filter("[:title]").css({"backgrourd":"pink"});
				
				//(2).查找:在jQuery对象数组中,查找出一部分元素:
				// 1)、children():查找ul的所有子标签
				// 1.1)、查找ul的所有li子标签
				// $("ul").children("li").css({"backgrourd":"pink"});
				//3)、find():查找ul下面所有的span标签
				// $("ul").find("span").css({"backgrourd":"pink"});
				// 4)、parent():查找b标签的父元素标签
				// $("b").parent().css({"backgrourd":"pink"});
				// 5)、pervAll():查找第三个(下标为2)li标签前面所有的兄弟标签
				// $("ul>li").eq(2).prevAll.css({"backgrourd":"pink"});
				// 6)、nextAll():查找第三个(下标为2)li标签后面所有的兄弟标签
				// $("ul>li").eq(2).nextAll.css({"backgrourd":"pink"});
				// 6.1)、查找第三个(下标为2)li标签后面所有的兄弟标签,并且只能是li标签
				// $("ul>li").eq(2).nextAll("li").css({"backgrourd":"pink"});
				// 8)、siblings():查找第三个(下标为2)li标签前后所有的兄弟标签
				// $("ul>li").eq(2).siblings().css({"backgrourd":"pink"});
				// 8.1)、查找第三个(下标为2)li标签前后所有的兄弟标签,并且只能是li标签
				// $("ul>li").eq(2).siblings("li").css({"backgrourd":"pink"});
				
				// (3).文档处理:
				// 3.1、增加
				// 1)、append():元素内部插入(之后)
				//1.1)、给ul中最后一个li子标签内部的后面再插入一个li标签。
				// var sa = $("ul>li").eq(-1).css({"backgrourd":"pink"});
				// sa.append("ul>"内部后面新插入的li</li>");
				// 方式一:
				// $("ul>li").eq(-1);
				// 方式二:
				// $("ul>li").last();
				// 方式三:
				// $("ul").children("li").last();
				// 方式四:
				// $("ul").children("li").eq(-1);
				//1.2)、往ul的每个li子标签内部的末尾追加一个li标签。
				// var sa = $("ul>li").css({"backgrourd":"pink"});
				//1.3)、往ul的最后一个子标签后面追加一个li标签。
				// $("ul").children().eq(-1).css({"backgrourd":"pink"});
				// $("ul").children().last().append("<li>内部后面新插入的li</li>");
				// 2)、prepend():元素内部插入(之前)
				//2.1)、给ul中第一个li子标签内部的前面再插入一个li标签。
				// $("ul>li").first().prepnd("<li>内部前面新插入的li</li>")
				// 3)、after():元素外部插入(之后):
				// 3.1)、在属性titile为b的元素后面添加一个li
				// $("[title=b]").after("<li>外部的后面</li>");
				// 4)、before():元素外部插入(之前):
				// 4.1)、在属性title为b的元素前面添加一个li
				// $("[title=b]").before("<li>外部的前面</li>");
				// 3.2、replaceWith()和replaceAll():改(替换)
				// 1)、把所有li标签下面的所有的span标签替换为文本框标签
				$("li span").replaceWith("<input type = 'text'/>");
				$("<input type = 'text'/>").replaceAll($(li span""));
				
				// 3.3、删除:empty()和remove()
				// 1.1)、删除ul中所有的子节点.
// 				$("ul").empty();:不会删除当前所匹配的标签,
// 				$("ul").remove();:会删除当前所匹配的标签,暴力删除
				// 1.2)、删除ul中所有的li子节点里面所有的子节点.
// 				$("ul>li").empty();
// 				$("ul>li").remove();
				//1.3)、删除ul中所有的li节点里面所有的子节点.
// 				$("ul li").empty();
// 				$("ul li").remove();
			})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值