`

第一章 认识jQuery

锋利的jquery 
阅读更多 
/* reset */
body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;}
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
input,select{font-size:12px;line-height:16px;}
img{border:0;}
ul,li{list-style-type:none;}
a {color:#00007F;text-decoration:none;}
a:hover {color:#bd0a01;text-decoration:underline;}

.box {
    width: 150px;
	margin: 0 auto;
}
.menu{
	overflow:hidden;
	border-color: #C4D5DF;
    border-style: solid;
    border-width: 0 1px 1px;
}
/* lv1 */
.menu li.level1 a{
    display: block;
    height: 28px;
    line-height: 28px;
    background:#EBF3F8;
	font-weight:700;
    color: #5893B7;
	text-indent: 14px;
	border-top: 1px solid #C4D5DF;
}
.menu li.level1 a:hover{text-decoration:none;}
.menu li.level1 a.current{background:#B1D7EF;}
/* lv2 */
.menu li ul{overflow:hidden;}
.menu li ul.level2{display:none;}
.menu li ul.level2 li a{
    display: block;
    height: 28px;
    line-height: 28px;
    background:#ffffff;
	font-weight:400;
    color: #42556B;
	text-indent: 18px;
	border-top: 0px solid #ffffff;
    overflow: hidden;
}
.menu li ul.level2 li a:hover{
	color:#f60;
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/default.css" type="text/css" />
<title>导航栏</title>
<!-- 引入 jQuery -->
<script src="./scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
	$(".level1 > a").click(function(){
		$(this).addClass("current").next().show();
		$(this).parent().siblings().children("a").removeClass("current")
		.next().hide();
		return false;
	});
});
</script>
</head>
<body>
<p>第一步：初始化：</p>
<div class="box">
	<ul class="menu">
		<li class="level1">
			<a href="#none">衬衫</a>
			<ul class="level2">
				<li><a href="#none">短袖衬衫</a></li>
				<li><a href="#none">长袖衬衫</a></li>
				<li><a href="#none">短袖T恤</a></li>
				<li><a href="#none">长袖T恤</a></li>
			</ul>
		</li>
		<li class="level1">
			<a href="#none">卫衣</a>
			<ul class="level2">
				<li><a href="#none">开襟卫衣</a></li>
				<li><a href="#none">套头卫衣</a></li>
				<li><a href="#none">运动卫衣</a></li>
				<li><a href="#none">童装卫衣</a></li>
			</ul>
		</li>
		<li class="level1">
			<a href="#none">裤子</a>
			<ul class="level2">
				<li><a href="#none">短裤</a></li>
				<li><a href="#none">休闲裤</a></li>
				<li><a href="#none">牛仔裤</a></li>
				<li><a href="#none">免烫卡其裤</a></li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>

$(".level1 > a")的结果是[<a href="#none">衬衫</a> <a href="#none">卫衣</a> <a href="#none">裤子</a>] 在给定的父元素下匹配所有的子元素
click()事件是在点击"衬衫","卫衣","裤子"链接的时候触发的。
你点击了哪个链接，哪个就是this,addClass("current")是在该<a>标记中加上一个class属性current。
比如说：你点击第一个链接,也就是"衬衫"这个链接
next()方法会返回当前链接的同辈元素<ul class="level2">...</ul>
show就是显示该隐藏的元素。
parent会返回<li class="level1">..</li>(也就是第一组li)
siblings会返回<li class="level1">..</li><li class="level1">..</li>(第二组以及第三组)
children("a")会返回直接的子元素而不是所有后代元素,然后删除class属性
接着是next().hide()就是隐藏第二组和第三组列表的子列表
分享到：
| FreeMarker之Hello World
评论
发表评论

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

相关推荐

    JQuery权威指南 源代码

    前　言 第1章　jquery开发入门/1 1.1　jquery概述/2 1.1.1　认识jquery /2 1.1.2　jquery基本功能/2 1.1.3　搭建jquery开发环境/3 1.1.4　编写第一个简单的jquery应用/3 1.1.5　jquery程序的代码风格/5 1.2　jquery...

    jQuery权威指南-源代码

    1.1.4　编写第一个简单的jQuery应用/3 1.1.5　jQuery程序的代码风格/5 1.2　jQuery的简单应用/7 1.2.1　jQuery访问DOM对象/7 1.2.2　jQuery控制DOM对象/7 1.2.3　jQuery控制页面CSS /9 1.3　本章小结/11 第2章　...

    ASP.NET技术开发网上书店 第一章上机作业

    在"ASP.NET技术开发网上书店 第一章上机作业"中，我们可以推测这是一份教学材料或课程实践，旨在帮助学习者掌握ASP.NET的基础知识，并应用到实际的网上书店项目中。 第一章通常会介绍基础概念和环境搭建，让我们...

    jQuery-in-Action.part1.pdf

    对第一章的内容进行了回顾，强调了学习jQuery的重要性，并为下一章做了铺垫。 #### 第2章：创建被包装的元素集 - **2.1 选择元素以供操作** 介绍了如何使用不同的选择器来选取DOM中的元素，以便进行后续的操作...

    jQuery权威指南366页完整版pdf和源码打包

    前　言　第1章　jquery开发入门/1　1.1　jquery概述/2　1.1.1　认识jquery /2　1.1.2　jquery基本功能/2　1.1.3　搭建jquery开发环境/3　1.1.4　编写第一个简单的jquery应用/3　1.1.5　jquery程序的代码风格/5　1.2...

    jquery基础教程

    1. **第 1 章：认识 jQuery** - jQuery 的起源和发展历程。 - 为什么选择 jQuery 而不是原生 JavaScript。 - 安装和配置 jQuery。 2. **第 2 章：选择器与 DOM 操作** - jQuery 中的选择器语法，包括 CSS 选择...

    [jQuery移动开发].(jQuery.Mobile).Jon.Reid.文字版

    ##### 第1章：认识jQuery Mobile - **概述**：介绍了jQuery Mobile库的基本概念及其工作原理。 - **工作方式**：详细解释了jQuery Mobile是如何工作的，包括其核心机制和功能特点。 - **首个应用**：通过一个简单的...

    jQuery表单选择器源码

    `第7章 表单选择器.pdf`文档可能是对这部分内容的一个详细讲解，建议配合源码阅读，加深理解。 总结，jQuery表单选择器的源码解析不仅有助于初学者了解其工作原理，还能提升对JavaScript和DOM操作的深入认识。通过...

    第2章 认识Vue3.x

    jQuery的流行简化了JavaScript的开发，但随着HTML5的诞生，前端应用变得越来越复杂，MVVM框架应运而生，Vue.js便是其中之一。MVVM模式使得开发者可以更加专注于业务逻辑，而不是DOM操作，推动了SPA（单页应用程序）...

    asp.net ajax完全手册1-3章

    第一章：AJAX概述 在这一章中，读者将了解到AJAX（Asynchronous JavaScript and XML）的核心理念，即通过JavaScript实现页面的异步更新，提升Web应用程序的用户体验。这一章会介绍AJAX的历史背景，以及它如何改变了...

    第1章 Web前端开发基础.pdf

    在本章《Web前端开发基础》中，...通过这一章的学习，读者将建立起对Web前端开发全面的认识，具备基本的HTML、CSS和JavaScript编写能力，并了解如何利用各种框架和工具提高开发效率，为后续的Web开发实践打下坚实基础。

    javascript整本教程ppt

    首先，"第一章 了解JavaScript.ppt"会介绍JavaScript的基本概念，包括它的起源、用途以及在Web开发中的地位。JavaScript与HTML和CSS是构建网页的三大核心技术，它能够增强网页的交互性和实时性。这一章会讲解...

    北大青鸟ACCP6.0思维导图

    这一章通常会涵盖Java环境的搭建，包括JDK的安装和配置，以及编写并运行第一个"Hello, World!"程序。这一步是所有编程学习的起点，旨在让初学者对编程有个直观的认识，并熟悉Java开发的基本流程。 接着是“第02章 ...

    <<精通JavaScript >>(PDF)中文版

    第一部分　认识现代Javas cript 第1章　现代Javas cript程序设计　2 1.1　面向对象的Javas cript　2 1.2　测试代码　3 1.3　打包分发　4 1.4　分离式DOM脚本编程　5 1.4.1　DOM　6 1.4.2　事件　7 1.4.3　Javas ...

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