JQuery学习笔记(三)——菜单

最新推荐文章于 2020-09-29 09:01:42 发布
最新推荐文章于 2020-09-29 09:01:42 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： JS/JQuery HTML/CSS 文章标签： jquery function class stylesheet 浏览器 url

1、页面中的菜单项可以通过嵌套的ul和li来表示

2、菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构建多层的菜单

3、浏览器中的ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进，Opera浏览器比较特殊，li的标识符和其他浏览器不同

4、list-style属性值为none时，可以清除ul和li前面的小圆点

5、清除子菜单的缩进值，需要padding和margin都为0，其中IE6和IE7只有margin也为0的时候才可以清除缩进值

6、可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，直到填满整个区域

7、可以使用background-repeat来控制背景图的重复填充方式

8、如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的

9、text-decoration属性值为none时，可以取消文字上的下划线

10、background-position可以控制背景图的位置，属性值既可以用数值，也可以用center，left，top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向。第二个对应纵向

11、background-image的值为none表示没有背景图

12、background-image的值为no-repeat时，背景图不会在所在的区域中重复显示

13、IE6以外的其他浏览器可以通过设定display的值设为block来让a元素充满所在的区域，对于IE6，则需要设定display为inline-block，同时设定a的宽度

14、display的值为none可以用于隐藏元素

15、.main a和 .main > a的不同之处，前者选择使用了.main的这个class的元素内部所有的a节点，后者只选择 .main的子节点中的a节点

16、show，hide方法可以用于显示或隐藏元素，没有参数时的效果和修改CSS的display属性效果一样。参数可以是单位为毫秒的数字，或者是slow，normal，fast这三个文字，都可以来控制完成显示或隐藏需要的时间。注意这时动画效果靠不断改变元素的宽度和高度来实现的。

17、toggle方法更为强大，可以省去我们判断元素是显示还是隐藏的状态，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用方法和show，hide相同

18、slideDown，slideUp可以实现向下或向上卷动的效果，实际上是通过指定时间内自发元素的高度来实现动画效果。需要注意的是这两个方法参数为空的情况和show，hide不同

19、slideToggle和toggle达到的效果类似

20、DOCTYPE对于JQuery中的动画是有影响的。没有DOCTYPE定义时，在IE中，JQuery的动画会出现闪烁的糟糕效果

21、float的值是left，可以使原来各自位于一行的元素全部在一行中向左浮动。

22、可以给多个选择器定义同样的样式，选择器之间用,分割。同样对于JQuery的$方法，也可以传入多个选择器

例：菜单

menu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>JQuery实战3——菜单</title>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="css/menu.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/menu.js"></script>
	</head>

	<body>
		<ul>
			<li class="main">
				<a href="#">菜单项1</a>
				<ul>
					<li><a href="#">子菜单项11</a></li>
					<li><a href="#">子菜单项12</a></li>
				</ul>
			</li>
			<li class="main">
				<a href="#">菜单项2</a>
				<ul>
					<li><a href="#">子菜单项21</a></li>
					<li><a href="#">子菜单项22</a></li>
				</ul>
			</li>
			<li class="main">
				<a href="#">菜单项3</a>
				<ul>
					<li><a href="#">子菜单项31</a></li>
					<li><a href="#">子菜单项32</a></li>
				</ul>
			</li>
		</ul>
		<br>
		<br>
		<ul>
			<li class="hmain">
				<a href="#">菜单项1</a>
				<ul>
					<li><a href="#">子菜单项11</a></li>
					<li><a href="#">子菜单项12</a></li>
				</ul>
			</li>
			<li class="hmain">
				<a href="#">菜单项2</a>
				<ul>
					<li><a href="#">子菜单项21</a></li>
					<li><a href="#">子菜单项22</a></li>
				</ul>
			</li>
			<li class="hmain">
				<a href="#">菜单项3</a>
				<ul>
					<li><a href="#">子菜单项31</a></li>
					<li><a href="#">子菜单项32</a></li>
				</ul>
			</li>
		</ul>
	</bo

menu.css 

ul,li{
	/*清除ul,li上默认的小圆点*/
	list-style:none;
}
ul {
	/*清除子菜单中的缩进*/
	padding:0;
	margin:0;
}
.main, .hmain {
	/*背景图,在横向上重复*/
	background-image:url(../images/title.gif);
	background-repeat:repeat-x;
	width:120px;
}
li {
	/*background-image会覆盖background-color*/
	background-color:#EEEEEE;	
}
a {
	/*取消所有的下划线*/
	text-decoration:none;
	padding-left:20px;
	/*填充整个区域*/
	display:block;
	/*以下两行为IE6专写*/
	display:inline-block;
	width:100px;
	padding-top:3px;
	padding-bottom:3px;
}
.main a, .hmain a {
	color:white;
	background-image:url(../images/collapsed.gif);
	background-repeat:no-repeat;
	background-position:3px center;
}
.main li a, .hmain li a {
	color:black;
	/*清除子菜单项上的背景图*/
	background-image:none;
}
.main ul, .hmain ul {
	/*隐藏子菜单项*/
	display:none;
}

.hmain {
	/*横向显示*/
	float:left;
	margin-left:1px;
}

menu.js 

$(document).ready(function(){
	//页面中的DOM已经装载完成时，执行的代码
	$(".main > a").click(function(){
		//找到主菜单项对应的子菜单项
		var ulNode = $(this).next("ul");
		/*
		if (ulNode.css("display") == "none") {
			ulNode.css("display","block");
		} else {
			ulNode.css("display","none");
		}
		*/
		//ulNode.show("slow");//normal fast
		//ulNode.hide();
		//ulNode.toggle();
		//
		//ulNode.slideDown("slow");
		//ulNode.slideUp;
		ulNode.slideToggle();
		changeIcon($(this));
	});
	$(".hmain").hover(function(){
		$(this).children("ul").slideDown();
		changeIcon($(this).children("a"));
	},function(){
		$(this).children("ul").slideUp();
		changeIcon($(this).children("a"));
	});
});

/**
 * 修改主菜单的指示图标
 */
function changeIcon(mainNode) {
	if (mainNode) {
		if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
			mainNode.css("background-image","url('images/expanded.gif')");
		} else {
			mainNode.css("background-image","url('images/collapsed.gif')");
		}
	}
}

menu.js中的内容可换为

	//页面中的DOM已经装载完成时，执行的代码
//	$(".main > a").click(function(){
//		//找到主菜单项对应的子菜单项
//		var ulNode = $(this).next("ul");
//		
//		if(ulNode.css("display") == "none"){
//			ulNode.css("display","block");
//			//$(".main > a").css("background-image",url(../images/expanded.gif).css("background-repeat","no-repeat").css("background-position","3px center");
//		} else {
//			ulNode.css("display","none");
//		}
//		
//		//ulNode.show(500);//500ms显示完毕,也可以为slow,normal,fast参数
//		//ulNode.hide();
//		//ulNode.toggle();//自动判断是显示还是隐藏
//		//ulNode.slideDown();//展开
//		//ulNode.slideUp();//隐藏
//		//ulNode.slideToggle();
//	});
//	$(".main > a").mouseover(function(){
//		var ulNode = $(this).next("ul");
//		if(ulNode.css("display") == "none"){
//			ulNode.css("display","block");
//		} else {
//			ulNode.css("display","none");
//		}
//	});
//	$(".main > a").mouseout(function(){
//		var ulNode = $(this).next("ul");
//		if(ulNode.css("display") == "block"){
//			ulNode.css("display","none");
//		}
//	});

	$(".main").hover(function(){
		$(this).children("ul").slideDown();
		changeIcon($(this).children("a"));
	},function(){
		$(this).children("ul").slideUp();
		changeIcon($(this).children("a"));
	});

运行结果：



chuangrain
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery总结二（事件）
qq_56248592的博客
12-19 859
Jquery总结二（事件）
JQuery【横向菜单】
暖暖冬阳
08-14 1398
CSS代码： ul, li { list-style: none; } ul { padding: 0; margin: 0; } .hmain { background-image: url(images/title.gif); background-repeat: repeat-x; width: 120px; } li { background-color: #eee; }
JQuery【下拉菜单】
暖暖冬阳
08-14 688
CSS代码： ul, li { /*清除ul和li上默认的小圆点*/ list-style: none; } ul { /*清除子菜单的缩进值*/ padding: 0; margin: 0; } .main { background-image: url(images/title.gif); background-repeat: repeat-x; width: 120px;
js_常见特效——点击切换_背景颜色_收起与展开
weixin_30294021的博客
12-29 130
<script src="../js/jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){ //左侧导航切换 $(".a").click(function(){ $(".active").removeClass("active");...
网页中常用的简单横向和纵向菜单
deron7的专栏
12-09 4857
网页中常用的横向和纵向菜单 ul,li { list-style:none; } ul { padding:0; margin:0; } .main,.hmain { background-image:url("imag
jQuery省市区三级联动菜单实例.zip
最新发布
10-08
**jQuery省市区三级联动菜单实例** 在网页设计中，经常需要实现一种功能，即当用户选择省份时，市和区会根据所选的省份自动更新，这种交互效果被称为三级联动菜单。jQuery作为一款广泛使用的JavaScript库，提供了...
jQuery招聘网站左侧导航分类菜单代码.zip
09-23
首先，我们来看这个项目的核心技术——jQuery。jQuery是一款轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。通过使用jQuery，开发者可以更高效地编写代码，实现复杂的网页交互...
jQuery带音效圆形网页右键菜单代码.zip
09-23
本项目——"jQuery带音效圆形网页右键菜单代码"，就是这样一个利用jQuery实现的创新性功能，它不仅提供了常规的右键菜单功能，还增加了音效和独特的圆形设计，为用户带来更为沉浸式的浏览体验。 首先，我们来看这个...
jQuery左侧边栏多级导航下拉菜单代码.zip
09-23
总的来说，这个jQuery左侧边栏多级导航下拉菜单代码实例提供了一个直观的起点，无论是对于初学者学习jQuery和前端开发，还是对于经验丰富的开发者寻找快速实现导航菜单的解决方案，都极具价值。通过深入理解并实践这...
jQuery鼠标滑过导航下拉菜单特效.zip
09-23
本项目——"jQuery鼠标滑过导航下拉菜单特效"，就是利用jQuery实现的一种常见且实用的导航菜单特效，旨在提升用户在网站上的浏览体验。 一、jQuery基础 jQuery是JavaScript的一个轻量级库，它的出现大大简化了DOM...
JQuery实现绚丽的横向下拉菜单
weixin_33896069的博客
12-20 103
以前经常看见网站有菜单的显示，鼠标移上去就出现下拉的效果，很绚丽，经过看JQuery视频后，发现实现也挺容易的。Html中，通过<ul>和<li>标签将所需的元素写出来。 代码如下:<body><ul><li class="hmain"><a href="#">菜单项1</a><ul&...
jQuery实现下拉菜单
sleepwalker_1992的专栏
05-17 7477
html文件&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉菜单&lt;/title&gt; &lt;link rel="stylesheet" type="
.hide()..eq($('#').index(this)).show()与>选择器
透明大脑
06-26 5822
Document         .menu { padding:0; margin:0; list-style-type:none;} .menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; } .menu li a { display:block; width:80px; text-ali
【JQuery】知识点总结（上）
Reka's blog ^_^
01-10 2316
背景：
Jquery----下拉菜单（利用滑动效果）
weixin_48340600的博客
09-29 1285
1、普通方法 //鼠标经过 $(".nav>li").mouseover(function() { // $(this) jQuery 当前元素 this不要加引号 // show() 显示元素 hide() 隐藏元素 $(this).children("ul").slideDown(200); });
jQuery大法第五式--动画效果
qq_36789311的博客
08-16 176
一、基本的动画效果 1、隐藏元素 hide():可以用于隐藏元素，将元素CSS样式属性display设置为none，它会记住原先的属性状态。 （1）不带参数 hide()：用于实现不带任何效果的隐藏匹配元素。 （2）带参数 hide(speed,[callback])：用于实现以动画形式隐藏所有匹配的元素，并在隐藏完成后可选择地触发一个回调函数。 speed：动画的时长 callb...
jQuery 小白笔记
weixin_46074652的博客
01-07 338
jq好处：写得少，做得多，解决兼容问题，链式编程，隐式迭代… DOM中的顶级对象:document–页面中的顶级对象 document点出来的是DOM中的属性和方法 BOM中的顶级对象:window–浏览器中的顶级对象 window点出来的是浏览器中的属性和方法 jQuery的顶级对象:jQuery–$ $点出来的是jQuery中的方法 jq中 页面加载事件 页面加载完执行 这里面的内容 jq...
jQuery学习笔记——事件
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值