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

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

jQuery find()ullifind()使用 
阅读更多 
<%@ 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
踩
分享到：
| JavaScript Attr的使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery 查找新建元素代码

    复习一下 //html &lt;div class=”dv”&gt; &lt;ul&gt; &lt;li&gt; &lt;a&gt;xx&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a&gt;aa&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a&gt;bb&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;ul&gt;&lt;/ul&gt; &lt;/div&gt; //js $(‘.dv’).find(‘ul’)-&gt;eq(0)-&gt;find(‘li’)-&gt;each(function(i){ var ...

    基于jquery的has()方法以及与find()方法以及filter()方法的区别详解

    代码如下:&lt;ul&gt; &lt;li&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&gt;&lt;/div&gt;list item 2-a&lt;/li&gt; &lt;li&gt;list item 2-b&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;list item 3&lt;/li&gt; &lt;li&gt;list item 4&lt;/li&gt;&lt;/ul&gt; ...

    jQuery仿京东商城楼梯式导航定位菜单

    涉及知识点：find()、parent()、... &lt;li&gt;1F&lt;span&gt;服饰&lt;/span&gt;&lt;/li&gt; &lt;li&gt;2F&lt;span&gt;美妆&lt;/span&gt;&lt;/li&gt; &lt;li&gt;3F&lt;span&gt;手机&lt;/span&gt;&lt;/li&gt; &lt;li&gt;4F&lt;span&gt;家电&lt;/span&gt;&lt;/li&gt; &lt;li&gt;5F&lt;span&gt;数码&lt;/span&gt;&lt;/li&gt; &lt;li&gt;6F&lt;spa

    Jquery实现获取子元素的方法分析

    本文实例讲述了Jquery实现获取子元素的方法。分享给大家供大家参考，具体如下： Jquery获取子元素的方法有2种，分别是children()方法和find()方法。下面我们分别来使用这两种方法，看看它们有何差异。... &lt;/ul&gt;

    jQuery详细教程

    $("ul li:first") 每个 &lt;ul&gt; 的第一个 &lt;li&gt; 元素 $("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性 $("div#intro .head") id="intro" 的 &lt;div&gt; 元素中的所有 class="head" 的元素 三. jQuery 事件...

    jQuery查找和过滤_动力节点节点Java学院整理

    通常情况下选择器可以直接定位到我们想要的元素，但是，当我们...&lt;ul class=lang&gt; &lt;li class=js&gt;JavaScript&lt;/li&gt; &lt;li class=dy&gt;Python&lt;/li&gt; &lt;li id=swift&gt;Swift&lt;/li&gt; &lt;li class=dy&gt;Scheme&lt;/li&gt; &lt;li name=haskell&gt;

    jquery操作菜单

    $(".menu&gt;ul&gt;li&gt;a").on('click',function(){ $(".menu&gt;ul&gt;li&gt;a").css('background-image',"url('../image/collapsed.gif')"); $(".menu ul li ul").slideUp().hide(1000); var ul = $(this).parent().find('...

    jQuery多级无限级导航下拉菜单代码

    jQuery多级无限级导航下拉菜单代码, jQuery多级无限级导航下拉菜单代码是一款可智能判断有没有下级菜单列表... $("ul.nav li").parent("ul").siblings("h3").append("&lt;span class='sub'&gt;&lt;/span&gt;"); } }); [removed]

    Web前端新人笔记之jquery入门心得(新手必看)

    本章将为大家介绍以下几点内容； 1、jquery的主要特点； 2、建立jquery的编码环境；...$('ul &gt; li:first').addClass('active'); ③ 改变文档内容 $('#container').append('&lt;a&gt;more&lt;/a&gt;') ④ 为页面添加动态效果 $

    jQuery多级无限级导航下拉菜单代码.zip

    $("ul.nav li").parent("ul").siblings("h3").append("&lt;span class='sub'&gt;&lt;/span&gt;"); } }); [removed] jQuery多级无限级导航下拉菜单代码是一款可智能判断有没有下级菜单列表的网站下拉菜单特效。

    jQuery的可伸缩时间轴代码timeline插件.zip

     $("ul&gt;li:first",this).addClass("active");  });  $(".month&gt;li").click(function(){  var $ul=$(this).parent();  $ul.find(".active").removeClass("active");  $(this).addClass(...

    Sortable前端框架

    &lt;li&gt;&lt;span class="my-handle"&gt;::&lt;/span&gt; list item text one &lt;li&gt;&lt;span class="my-handle"&gt;::&lt;/span&gt; list item text two &lt;/ul&gt; ``` ```css .my-handle { cursor: move; cursor: -webkit-grabbing; } ``` ---...

    图库新版jQuery焦点图 JS代码

    document.write('&lt;a href="/zt/book/" target="_blank"&gt;&lt;img src="/images/300x90-02.jpg" width="300" height="90" /&gt;&lt;/a&gt;');} if (code=="in300x250"){ document.write('&lt;script type="text/javascript" &gt;BAIDU_...

    jQuery手机端个人信息填写表单页面代码.zip

    $('[name="nice-select"]').find('ul').hide(); $(this).find('ul').show(); e.stopPropagation(); }); $('[name="nice-select"] li').hover(function(e){ $(this).toggleClass('on'); ...

    jquery 多级下拉菜单核心代码

    jquery 代码如下: $(document).ready(function(){ $(“ul li”).hover(function(){ $(this).find(“ul:first”).show();//鼠标滑过查找li下面的第一个ul然后显示； },function(){ $(this).find(“ul:first”).hide()...

    Jquery使用css方法改变样式实例

    本文实例讲述了Jquery使用css方法改变样式。分享给大家供大家参考。具体实现方法如下： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    supersized.min

    a=a+'&lt;li class="thumb'+i+' current-thumb"&gt;&lt;img src="'+n+'"/&gt;&lt;/li&gt;'}}else{if(h.options.slide_links){s=s+'&lt;li class="slide-link-'+i+'" &gt;&lt;a&gt;'+t+"&lt;/a&gt;&lt;/li&gt;"}if(h.options.thumb_links){h.options.slides[i]....

    JQuery文字列表向上滚动的代码

    jQuery实现代码如下： 代码如下:[removed]$(function(){ $(“#newly”).hover(function(){ clearInterval(scrtime);... $ul.animate({marginTop:”-10px”},1000,function(){ $ul.find(“li:fir

    jQuery自适应通栏宽屏banner幻灯片切换特效.zip

    这是一款代码简洁的... var curLi = jQuery(".fullSlide .bd li").eq(i);  if ( !! curLi.attr("_src")) {  curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")  }  } }); [removed]

Magicbox
Global site tag (gtag.js) - Google Analytics