`
Hermosa_Young
  • 浏览: 255112 次
  • 来自: 上海
社区版块
存档分类
最新评论

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

阅读更多
<%@ 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

  • 大小: 20.3 KB
0
0
分享到:
评论

相关推荐

    jquery实现ul_li菜单展开收起效果

    &lt;li&gt;&lt;a href="#"&gt;子菜单1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;子菜单2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="parent"&gt; &lt;a href="#"&gt;菜单2&lt;/a&gt; &lt;ul class="sub-menu" style="display:none;"&gt; &lt;li&gt;&lt;a href="#"&gt;子菜单3&lt;/a&gt;...

    jQuery mobile多种样式的导航

    &lt;li&gt;&lt;a href="#" data-icon="home"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" data-icon="gear"&gt;设置&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" data-icon="grid"&gt;网格&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; ``` `data-role="navbar"` 属性定义了这是一...

    jquery 树形菜单

    在HTML中,我们可以使用`&lt;ul&gt;`和`&lt;li&gt;`元素来构建这样的结构。例如: ```html &lt;ul id="treeMenu"&gt; &lt;li&gt;菜单1 &lt;ul&gt; &lt;li&gt;子菜单1.1&lt;/li&gt; &lt;li&gt;子菜单1.2&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;菜单2 &lt;ul&gt; &lt;li&gt;子菜单2.1&lt;/li&gt;...

    仿京东商城商品分类菜单

    在创建商品分类菜单时,可以使用`&lt;nav&gt;`元素来表示导航部分,`&lt;ul&gt;`和`&lt;li&gt;`元素来组织层级关系,例如: ```html &lt;nav id="categoryMenu"&gt; &lt;ul&gt; &lt;li&gt;数码产品 &lt;ul&gt; &lt;li&gt;手机&lt;/li&gt; &lt;li&gt;电脑&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt;...

    静态网页,原生代码制作,有三级下拉菜单

    这段代码会在鼠标进入和离开`&lt;li&gt;`时,使用jQuery的`slideDown`和`slideUp`方法控制下拉菜单的展开和收起。 总结,制作一个具有三级下拉菜单的静态网页需要结合HTML来构建菜单结构,CSS来美化并实现基本的交互,...

    新浪网jQuery二级下拉菜单.zip

    一个简单的二级下拉菜单通常由`&lt;ul&gt;`和`&lt;li&gt;`元素构成,一级菜单项是`&lt;li&gt;`元素,而二级菜单项则嵌套在一级菜单项的子`&lt;ul&gt;`中。例如: ```html &lt;ul class="nav"&gt; &lt;li&gt;&lt;a href="#"&gt;菜单1&lt;/a&gt; &lt;ul class="subnav"&gt;...

    JQuery头部导航栏

    通过在`&lt;li&gt;`元素内嵌套另一个`&lt;ul&gt;`,并使用jQuery来控制显示和隐藏,可以实现这一功能: ```html &lt;li class="has-submenu"&gt; &lt;a href="#"&gt;服务&lt;/a&gt; &lt;ul class="submenu hidden"&gt; &lt;li&gt;&lt;a href="#"&gt;服务1&lt;/a&gt;&lt;/li...

    jQuery树型多级手风琴菜单代码.zip

    通常,我们可以使用`&lt;ul&gt;`和`&lt;li&gt;`元素来构建层级关系。每个菜单项可能包含子菜单,这些子菜单可以通过嵌套的`&lt;ul&gt;`来表示。例如: ```html &lt;ul id="accordion"&gt; &lt;li&gt; &lt;a href="#"&gt;菜单1&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=...

    js,jq,css多方面实现简易下拉菜单功能.docx

    &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;菜单一&lt;/a&gt; &lt;ul&gt; &lt;li&gt;内容一&lt;/li&gt; &lt;li&gt;内容二&lt;/li&gt; &lt;li&gt;内容三&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;菜单二&lt;/a&gt; &lt;ul&gt; &lt;li&gt;内容一&lt;/li&gt; &lt;li&gt;内容二&lt;/li...

    jquery实现三级下拉菜单实例

    一个基本的三级下拉菜单通常由`&lt;ul&gt;`和`&lt;li&gt;`元素组成,其中`&lt;li&gt;`元素可能包含嵌套的`&lt;ul&gt;`来表示子菜单。例如: ```html &lt;ul class="menu"&gt; &lt;li&gt; 一级菜单1 &lt;ul&gt; &lt;li&gt;二级菜单1&lt;/li&gt; &lt;li&gt;二级菜单2 &lt;ul&gt; ...

    html 导航栏

    导航栏的链接通常由`&lt;ul&gt;`(无序列表)和`&lt;li&gt;`(列表项)元素组成,每个`&lt;li&gt;`中包含一个`&lt;a&gt;`(超链接)元素指向不同的页面或网站部分。 例如,一个简单的HTML导航栏结构可能如下所示: ```html &lt;nav&gt; &lt;ul&gt; ...

    jquery资源管理器树形菜单.zip

    每个`&lt;li&gt;`元素代表一个菜单节点,可以包含子节点(嵌套的`&lt;ul&gt;`)或链接到具体资源。例如: ```html &lt;ul class="tree"&gt; &lt;li&gt; 文件夹1 &lt;ul&gt; &lt;li&gt;文件1&lt;/li&gt; &lt;li&gt;文件2&lt;/li&gt; &lt;li&gt;子文件夹1 &lt;ul&gt; &lt;li&gt;孙子...

    HTML下拉框,下拉菜单源码

    然而,描述中提到的是“下拉菜单”,这可能指的是使用`&lt;ul&gt;`和`&lt;li&gt;`元素,配合CSS和JavaScript实现的自定义下拉菜单。这种下拉菜单可以提供更丰富的交互和设计灵活性。例如: ```html &lt;ul class="dropdown"&gt; &lt;li&gt;...

    兼容主流浏览器的jQuery多级手风琴菜单

    通常,我们会使用`&lt;ul&gt;`和`&lt;li&gt;`元素来创建一个多级的无序列表,每个`&lt;li&gt;`内部再包含子级的`&lt;ul&gt;`和`&lt;li&gt;`。例如: ```html &lt;ul id="accordion"&gt; &lt;li&gt; &lt;a href="#"&gt;菜单1&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;子菜单1-1...

    jQuery树形菜单插件多级菜单选中代码

    通常,菜单项会嵌套在`&lt;ul&gt;`和`&lt;li&gt;`元素中,通过`&lt;ul&gt;`表示层级关系,`&lt;li&gt;`表示菜单项。例如: ```html &lt;ul id="treeMenu"&gt; &lt;li&gt; 菜单1 &lt;ul&gt; &lt;li&gt;子菜单1-1&lt;/li&gt; &lt;li&gt;子菜单1-2&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; ...

    jQuery在ul中显示某个li索引号的方法

    首先,jQuery提供了一系列的选择器来选取元素,如选择所有的li元素可以用`$("ul&gt;li")`,这个选择器的意思是选取所有ul元素的直接子元素li。当用户点击任意一个li元素时,我们可以在该元素上显示其在ul中的索引位置。...

    绝不可错过的一款jQuery四级滑出菜单【荐】

    通常,菜单会由多个`&lt;ul&gt;`和`&lt;li&gt;`元素组成,各级菜单嵌套在彼此内部。例如: ```html &lt;ul class="menu"&gt; &lt;li&gt;&lt;a href="#"&gt;一级菜单1&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;二级菜单1-1&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;三级...

    jQuery FAQs问答垂直手风琴切换.zip

    在HTML5中,我们可以创建一个包含问题和答案的无序列表(`&lt;ul&gt;`),每个问题是一个列表项(`&lt;li&gt;`),而答案则可以包裹在折叠的详情元素(`&lt;details&gt;`)内,与对应的概要元素(`&lt;summary&gt;`)结合使用。 CSS部分用于...

    JQuery树形菜单

    通常,树形菜单由HTML列表元素(`&lt;ul&gt;` 和 `&lt;li&gt;`)构建,其中`&lt;li&gt;`元素代表菜单项,而子级菜单则通过嵌套的`&lt;ul&gt;`实现。例如: ```html &lt;ul class="tree-menu"&gt; &lt;li&gt; 菜单项1 &lt;ul&gt; &lt;li&gt;子菜单项1&lt;/li&gt; &lt;li&gt;子...

    jQuery多级分类菜单联动选择代码

    通常,一级菜单是`&lt;ul&gt;`元素,每一级子菜单也是`&lt;ul&gt;`元素,隐藏在`&lt;li&gt;`元素内。例如: ```html &lt;div id="category"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;一级菜单1&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;二级菜单1-1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;...

Global site tag (gtag.js) - Google Analytics