jQuery find() 及<ul><li>的使用

最新推荐文章于 2021-04-06 11:01:30 发布
最新推荐文章于 2021-04-06 11:01:30 发布
阅读量409 收藏
点赞数
分类专栏： jQuery 文章标签： jQuery find() ul li find()使用 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("button").click(function(){
		$("ul.i9").find('li').css('background-color', 'red');
	});
	
});
</script>
</head>
<body>
	<button style="width: 10%" >点击</button>
	<ul class="i0">
		<li class="i1">I</li>
		<li class="i2">II
			<ul class="i3">
				<li class="i4">1</li>
				<li class="i5">2
					<ul class="i6">
						<li class="i7">A</li>
						<li class="i8">B
							<ul class="i9">
								<li class="i10">a</li>
								<li class="i11">b</li>
					    	</ul>
						</li>
						<li class="i12">C</li>
					</ul>
			    </li>
				<li class="i13">3</li>
			</ul>
		</li>	
		<li class="i14">III</li>
	</ul>
</body>
</html>

 

效果图如下所示：



参考地址：http://www.w3school.com.cn/jquery/traversing_find.asp

_love
关注
专栏目录
jquery 循环li元素_jQuery 遍历 - find() 方法
weixin_42165583的博客
12-29 1512
定义和用法find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。语法.find(selector)参数描述selector字符串值，包含供匹配当前元素集合的选择器表达式。详细说明如果给定一个表示 DOM 元素集合的 jQuery 对象，.find() 方法允许我们在 DOM 树中搜索这些元素的后代，并用匹配元素来构造一个新的 jQuery 对象。.find...
class 原生js获取父元素_收集js小技巧
weixin_42389522的博客
12-02 1266
1、根据name值获取表单中输入框的值，表单如下：<form method='get' action='' target='_blank' name='qForm'> <input name='q' type='text' /> </form> <script> var val = document.qForm.q.value </sc...
js获取ul的方法
01-09 6737
在js里获取div下的ul标签 首先要找到div的id var oDiv=document.getElementById("id"); var oUl=oDiv.getElementsByTagName("ul")[0]; oUl就是ul要获取的标签
jQuery遍历之find()方法
qq_37036642的博客
08-03 3330
jQuery是一个合集对象，如果想快速查找DOM树中的这些元素的后代元素，此时可以用find()方法，这也是开发使用频率很高的方法。这里要注意 children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系） 理解节点查找关系： 1 代码如果是$("div").find("li")，此时，li与
重拾jquery之find方法
记录点滴
05-14 616
find方法在项目中经常用到，让我们一起研究下！ html代码： <div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul&...
jQuery在ul中显示某个li索引号的方法
10-24
首先，jQuery提供了一系列的选择器来选取元素，如选择所有的li元素可以用`$("ul>li")`，这个选择器的意思是选取所有ul元素的直接子元素li。当用户点击任意一个li元素时，我们可以在该元素上显示其在ul中的索引位置。...
实现滚动效果 <style type="text/css"> *{ margin:0px; padding:0px; border:0px; } body{font-size:12px} #demo{ overflow:hidden; height:200px; width:480px; position:relative; border: 1px solid skyblue; } #demo1{ height:auto; text-align:left; } #demo2{ height:auto; text-align:left; } #demo1 li{ list-style-type:none; height:22px; text-align:left; text-indent:15px; border: 1px solid blue; } #demo2 li{ list-style-type:none; height:22px; text-align:left; text-indent:15px; border: 1px solid blue; } </style> </head> <body> <div id="demo"> <ul id="demo1"> <li>111111111111111111111</li> <li>2222222222222222222222222222</li> <li>3333333333333333333333</li> <li>444444444444444444444</li> <li>55555555555555555555555555</li> <li>6666666666666666666666</li> <li>777777777777777777777777</li> </ul> <div id="demo2"></div> </div> <script src="../jquery-3.7.0.js"></script>
06-13
代码中使用了CSS样式来设置div和ul的属性，以及设置li元素的样式。同时，使用了jQuery库来实现滚动效果。具体实现可以参考下面的代码： ``` $(function(){ var demo1 = $("#demo1"); var demo2 = $("#demo2"); ...
<body> <div class="con_info"> <div class="info_left"> <div class="L_q"> <p>FAQ列表</p> </div> <ul class="dh"> <li class=""><a href="#">jQuery语法</a></li> <li class="xz"><a href="#">常见问题</a></li> </ul> </div> <div class="info_right"> <div class="liebiao"> <ul> <li id="1" class="click"><a class="link" href="#"><span class="num">1</span>jQuery 库中的 $() 是什么？</a> </li> <li id="zk_1" class="zk"> <div class="zk_con"> <div class="pc"> <p><span style="font-size: smaller">$() 函数是 jQuery() 函数的别称。$() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。</span></p> </div> </div> </li> <li id="2" class="click"><a class="link" href="#"><span class="num">2</span>$(document).ready() 是个什么函数</a></li> <li id="zk_2" class="zk"> <div class="zk_con"> <div class="pc"> <p><span style="font-size: smaller">ready() 函数用于在文档进入ready状态时执行代码</span></p> </div> </div> </li> <li id="3" class="click"><a class="link" href="#"><span class="num">3</span>如何在点击一个按钮时使用 jQuery 隐藏一个图片？</a></li> <li id="zk_3" class="zk"> <div class="zk_con"> <div class="pc"> <p><span style="font-size: smaller">jQuery为按钮点击之类的事件提供了很好的支持。通过ID或class定位到的图片,为按钮设置事件并执行hide() 方法即可隐藏元素。</span></p> </div> </div> </li> </ul> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $(".click").hover(function () { $(".zk").hide(); }) $(".num").click(function () { $(".zk").show(); }) }) </script> </body>点击小图标实现展开和隐藏效果（使用动画）
最新发布
07-20
var $zkCon = $(this).next(".zk").find(".zk_con"); if ($zkCon.is(":visible")) { $zkCon.slideUp("slow"); } else { $(".zk_con").slideUp("slow"); $zkCon.slideDown("slow"); } }); }); ``` 这段代码...
html<li>标签树形结构，可展开折叠
05-30
var children = $(this).find('> ul'); if (children.is(':visible')) { children.hide('fast'); } else { children.show('fast'); } e.stopPropagation(); }); }); </script> ``` 在这个例子中，当用户...
jquery ul li 操作
cxj5221的博客
12-04 4648
jquery ul li 操作
js中的find(),filter(),has()的用法和区别
weixin_38098192的博客
05-23 2万+
filter（）：操作当前元素集，删除不匹配的元素，得到一个新的集合&lt;ul&gt; &lt;li class="a"&gt;list item 1&lt;/li&gt; &lt;li&gt;list item 2 &lt;ul&gt; &lt;li&gt;&lt;div&gt;&lt;span&gt;a&lt;/span
遍历 ul li
小小程序猿
06-22 2541
张大军（13735898529）--> 张大军（13735898529）--> 张大军（13735898529）--> //遍历当前用户 function foreachAuthor(dataCurUser,html) { var flag = true; $("#ul_author").find("li").each(function(){ var tdAr
简单的 ul li 树形菜单
shunzizhan
11-12 1万+
简单的 ul li 树形菜单在实际开发中，我们经常遇到树形菜单，闲暇之余，特此简单研究了一下，欢迎吐槽！前言 所谓的树形菜单，无非就是 ul li的嵌套使用，如果有两级目录，就需要在li里再嵌套一层ul li，以此类推。 本例效果： 1.点击的li如果是叶子节点，则该节点变为红色字体； 2.点击的不是叶子节点，则展示子节点，再次点击，则影藏子节点。代码块html代码，例如：
jquery 中对 ul 下的 li 的常用动态操作
_夜渐凉
05-08 3196
场景： <div class="form-group"> <label class="col-sm-2 control-label">关联id：</label> <div class="col-sm-10"> <ul id="relids"> </ul> </d...
jQuery 选择器--层次选择器（一)
Mr-Zq的博客
04-06 146
jQuery 选择器–层次选择器（一) 子代选择器 语法：$(“ul>li”) 或者 $(“ul”).children(“li”) 获取ul的子级元素li 后代选择器 语法：$(“ul li”) 或者 $(“ul”).find(“li”) 获取ul下的所有li元素 相邻选择器 语法：$(“div+p”) 或者 $(“div”).next(“p”) 获取div后紧贴着的p标签 后面所有的兄弟元素 语法：$(“div~p”
js遍历（获取）ul中的li
m0_37238192的博客
03-07 3811
js遍历（获取）ul中的li &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;getcontent&lt;/title&gt;&lt;/head&gt
JS中find方法
热门推荐
菜鸟搬砖记
09-20 9万+
用法 find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。 如果没有符合条件的元素返回 undefined find() 对于空数组，函数是不会执行的。 find() 并没有改变数组的原始值。 array.find(function(currentValue, index, arr),thisValue)，其中currentValue为当前项，index为当前索...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值