jQuery-03(筛选&文档处理)

筛选

过滤

在jQuery对象数组中,过滤出一部分元素来
    first():获取匹配的第一个元素
    last():获取匹配的最后一个元素
    eq(N):获取匹配的第N或-N个元素
    filter(selector): 筛选出与指定表达式匹配的元素集合
    not(selector): 筛选出不包含特定特点的元素的集合
    has(selector): 筛选出包含特定特点的元素的集合

 

案例一:演示过滤所有的方法

		<!-- 导入jQuery库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 入口函数
			$(function() {

				// 在jQuery对象数组中,筛选出一部分元素

				// 1.1过滤
				// 过滤出指定表达式匹配的元素
				// 获取ul中所有的li元素,然后找到第一个元素
				// 昨日方法
				// $("#mDiv>ul>li:first").css("border","1px solid red")
				// 今日写法
				// $("#mDiv>ul>li").first().css("border","1px solid yellow")


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

				// 找到指定某一个元素,例如第三个
				// $("#mDiv>ul>li").eq(2).css("border","1px solid pink")

				// 过来出指定表达式匹配的元素集合
				// 找到属性title为a的属性
				// $("#mDiv>#mOl>li").filter("[title=aa]").css("background","red");

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

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

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

查找

在jQuery对象数组中,根据选择器查找父母、孩子、兄弟标签

    children():自标签中找

    find():后代标签中找

    parent():父标签

    preAll():前面所有兄弟标签

    nextAll():后面所有兄弟标签

    siblings():前后所有兄弟标签

案例二:演示查找所有方法

				// 1.2查找

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

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

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

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

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

				// 查找第三个li标签所有的兄弟标签
				// $("#m
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值