子元素过滤选择器

最新推荐文章于 2022-01-08 09:51:56 发布
最新推荐文章于 2022-01-08 09:51:56 发布
阅读量294 收藏
点赞数
分类专栏： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yecats/article/details/51520069
版权 
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>子元素过滤选择器</title>
  <script src="jquery-1.8.0.js"></script>
 </head>
 <style type="text/css">
	body{
		font-size:12px;
		text-align:center;
	}
	ul{
		width:241px;
		list-style-type:none;
		padding:0px;
	}
	ul li{
		height:23px;
		width:60px;
		line-height:23px;
		float:left;
		border-top:solid 1px #000;
		border-bottom:solid 1px #000;
		margin-bottom:5px;
	}
	.GetFous{
		width:58px;
		border:solid 1px #666;
		background-color:#eee;
	}
 </style>
 
 <script type="text/javascript">
 /*
	$(function(){
		$("li:nth-child(2)").addClass("GetFous");			
	});
	$(function(){
		$("li:first-child").addClass("GetFous");			
	});
	$(function(){
		$("li:last-child").addClass("GetFous");			
	});
	*/	
	$(function(){
		$("li:only-child").addClass("GetFous");			
	});
 </script>
 <body>
		<ul>
			<li>Item 1-0</li>
			<li>Item 1-1</li>
			<li>Item 1-2</li>
			<li>Item 1-3</li>
		</ul>
		<ul>
			<li>Item 2-0</li>
			<li>Item 2-1</li>
			<li>Item 2-2</li>
			<li>Item 2-3</li>
		</ul>
		<ul>
			<li>Item 3-0</li>
		</ul>
 </body>
</html>

yecats
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery子元素过滤选择器用法示例
10-21
主要介绍了jQuery子元素过滤选择器用法,结合实例形式分析了jQuery中nth-child、first-child、last-child、only-child等进行子元素过滤操作的相关技巧,需要的朋友可以参考下
jQuery基础教程之强大的选择器（过滤选择器-子元素过滤选择器）
HEHEEH123的专栏
06-29 644
子元素过滤选择器的过滤规则相对于其它的选择器稍微有些复杂，不过没关系，只要将元素的父元素和子元素区分清楚，那么使用起来也非常简单。另外还要注意它与普通的过滤选择器的区别。 选择器 描述 返回 示例 :nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素 集合元素 :eq(index)只匹配一
简单讲解jQuery中的子元素过滤选择器_jquery
01-08 2138
简单讲解jQuery中的子元素过滤选择器_jquery 子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。 $('li:first-child').css('background', '#ccc'); //每个父元素第一个li 元素 $('li:last-child').css('background', '#ccc'); //每个父元素最后一个li 元素 $('li:only-child').css('background', '#ccc'); //每个父元素只有
css3之结构伪类选择器
Allen-Ye博客
08-14 547
结构伪类选择器主要有哪些 first-child last-child nth-child(2n) nth-of-type() first-of-type last-of-type only-child empty 首先我们先把今天要做的效果给大家展示下，今天要做的是在这个案例的基础上添加，话不多说，上代码跟截图 <!DOCTYPE html> <html> &lt...
jquery子元素过滤选择器使用示例
10-27
jquery子元素过滤选择器在某些特殊的情况下还是比较实用的，下面为大家介绍下具体的使用方法，感兴趣的各位可以参考下哈
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
01-21
本文实例讲述了jQuery内容过滤选择器与子元素过滤选择器用法。分享给大家供大家参考，具体如下： jQuery的内容过滤选择器 一、:contains(text) 选择器：:contains(text) 描述：匹配包含给定文本的元素 返回值：元素...
简单讲解jQuery中的子元素过滤选择器
10-22
主要介绍了jQuery中的子元素过滤选择器,列举了一些操作DOM时获取父元素的一些方法,需要的朋友可以参考下
jQuery选择器之子元素过滤选择器
10-19
主要为大家详细介绍了jQuery选择器之子元素过滤选择器的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JQuery学习笔记
墨笙弘一
02-18 613
一.jquery的优势 1.轻量级。采用了UglifyJS进行压缩，大小保持在30KB左右 2.强大的选择器。 3.出色的DOM操作的封装。 4.可靠的事件处理机制。 5.完善的AJAX。JQuery将所有的AJAX操作封装到了一个函数.ajax()中。6.不污染顶级变量。JQuery只建立一个名为JQuery的对象，其所有的函数方法都在这个对象之下。其别名.ajax()中。 6.不污
jQuery前端开发学习指南(12)——jQuery子元素过滤选择器
谷哥的小弟
03-30 793
子元素过滤选择器用于根据子元素在父元素中的顺序来获取子元素。
jQuery 基础入门
weixin_44342481的博客
03-10 185
JavaScript框架简介jQuery的优势jQuery的使用第一个jQuery程序jQuery 对象jQuery 对象转成 DOM 对象DOM 对象转成 jQuery 对象jQuery对象与dom对象的转换举例jQuery的选择器基本选择器基本选择器示例(修改样式)层次选择器层次选择器示例过滤选择器基本过滤选择器基本过滤选择器示例内容过滤选择器内容过滤选择器示例可见性过滤选择器示例可见性过滤选择器示例属性过滤选择器 JavaScript框架简介 jQuery的优势 轻量级 （Lightweight）.
jquery子元素过滤选择器，
boss_way的博客
11-01 1888
1.1． 子元素过滤选择器   根据子元素顺序来获取。 ：nth-child（序号）；根据序号来选择，序号是从1开始,也可以设置odd even 根据奇偶来设置 也可以通过倍数（例如3n+1）来设置 :first-child（）； 获取第一个 :last-child（）； 获取最后一个 :only-child（）； 获取只有一个子元素的元素 示例： $(function()
jQuery四大选择器，以及例子来充分理解
热门推荐
wang__junhappy的博客
05-14 2万+
1. jQuery选择器的优势：(1) 代码更简单(2) 支持CSS1到CSS3选择器(3) 完善的处理机制2. jQuery选择器的分类（1） 基本选择器      基本选择器是jQuery中使用最多的选择器，它又元素Id、class、元素名、多个元素符组成。      （2） 层次选择器       层次选择器通过DOM元素间的层次关系来获取元素，主要的层次关系包括父子、后代、相邻、兄弟关系。...
JQuery选择器(9子元素过滤选择器)
chuteng3602的博客
09-12 667
子元素过滤选择器 选择器 描述 返回 示例 :nth-child (index/even odd/equation) 选取每个父元素下的第index 个子元...
属性过滤选择器，子元素过滤选择器
ld513508088的专栏
12-12 965
1.获取p的文本 段1 段2 方法一： $("p").each(function(index,domEle){ &(domEle).click(function(){ alert(($domEle).html()); }); }); jQuery.函数名()//是jQuery的全局函数、 方法二： var $p=$("p"); $.each($p,function(inde
jQuery过滤选择器——子元素过滤选择器
C.
11-13 4755
子元素过滤选择器1、:nth-child(index/even/odd/equation) 用法: $(”ul li:nth-child(2)”) 返回值 :集合元素 说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始. 2、:first-child
子元素过滤器nth-child解释
最新发布
05-18
在 CSS 中，`:nth-child()` 伪类...如果要仅选择特定类型或类的子元素，则需要在 `:nth-child()` 选择器前添加其他选择器，例如 `.my-class:nth-child(2)` 将选择每个父元素下的第二个带有 `.my-class` 类的子元素。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值