jQuery常见方法汇总

一、遍历筛选元素的方法

find()

  find(selector)方法实现的是找出正在处理的元素的后代元素的功能,如:

	<script type="text/javascript">
		$("#btn2").click(function (){
   
			$(".demo").find("span").css({
   "border":"2px solid red"});
		});
	</script>

  找出class为demo的元素底下的span标签,并设置相应的css样式:
在这里插入图片描述

children()

  children(selector)方法实现的功能与find()类似,但是不同的是,children()方法取得的是子元素的合集,并且只能找到DOM树的下一级子元素,例如这里像上述代码设置demo底下的span标签:

	<script type="text/javascript">
		$("#btn2").click(function (){
   
			$(".demo").children("span").css({
   "border":"2px solid red"});
		});
	</script>

  这里就没有办法变色,因为span不是demo的下一级子元素,不加参数默认所有子元素都获取到:

	<script type="text/javascript">
		$("#btn2").click(function (){
   
			$(".demo").children().css({
   "border":"2px solid red"});
		});
	</script>

在这里插入图片描述

siblings()

  siblings(selector)方法实现的是筛选同辈元素的功能,例子如下:

	<script type="text/javascript">
		$("#btn2").click(function (){
   
			$(".demo1").siblings().css({
   "border":"2px solid red"});
		});
	</script>

在这里插入图片描述
  同样的,siblings()方法也可以添加参数,用于匹配指定的元素。

first()

  first()方法实现的是获取匹配的第一个元素,相当于:first选择器,如:

	<script type="text/javascript">
		$("#btn2").click(function (){
   
			$("span").first().css({
   "border":"2px solid red"});
			$("li").last().css({
   "border":"2px solid red"});
		});
	</script>

  匹配到的就是第一个span元素,last()实现的就是匹配最后一个元素,结果如下:
在这里插入图片描述

eq()

  eq(index)方法实现的是获取第N个元素,与选择器:eq(index)类似,如:

	<script type="text/javascript">
		$("#btn2").click(function (){
   
			$("li").eq(0).css({
   "border":"2px solid red"});
			//注意这里的索引是和数组一样,从0开始
		});
	</script>

在这里插入图片描述

parent()

  parent(selector)方法实现的是获取父元素的功能,但是只能沿DOM树向上遍历一级,若要再往上遍历,则需要使用parents()方法,如:


                
  • 14
    点赞
  • 81
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

这名没人用吧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值