- 浏览: 108252 次
- 性别:
- 来自: 大连
文章分类
- 全部博客 (159)
- 前端开发 (6)
- jsp (4)
- jquery (17)
- 配置文件 (2)
- Spring (10)
- java (34)
- hibernate (9)
- VC++ win32 application (6)
- C++ (6)
- MFC文件夹对话框 (1)
- C (4)
- MFC (1)
- C# (3)
- 两个路由器怎么连接 (1)
- Maven3 (3)
- Servlet (10)
- Struts2 (6)
- jdom (1)
- Struts1 (1)
- Spring MVC (2)
- Ant (5)
- SSH (6)
- oracle 10g (1)
- ibatis (3)
- JPA (3)
- EJB (2)
- XML知识 (3)
- javascript (2)
- android (1)
- FreeMarker (1)
- dwr (1)
- Ext (10)
- EXCEL (1)
最新评论
/* 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()就是隐藏第二组和第三组列表的子列表
发表评论
-
视频展示效果实例
2014-05-11 15:55 580<!DOCTYPE html PUBLIC &quo ... -
(css()排队)-queue()
2014-05-07 12:13 692<!DOCTYPE html PUBLIC &quo ... -
css()未排队
2014-05-07 11:52 501<!DOCTYPE html PUBLIC &quo ... -
综合动画
2014-05-07 09:38 528<!DOCTYPE html PUBLIC &quo ... -
按顺序执行多个动画
2014-05-07 09:36 632<!DOCTYPE html PUBLIC &quo ... -
9-6(animate多重动画1)
2014-05-07 09:10 464<!DOCTYPE html PUBLIC &quo ... -
相同事件名称,不同命名空间执行方法
2014-05-06 18:59 609<!DOCTYPE html PUBLIC &quo ... -
添加事件命名空间,便于管理
2014-05-06 17:49 431例如可以把为元素绑定的多个事件类型用命名空间规范起来,jQ ... -
移除事件
2014-05-05 20:54 463<!DOCTYPE html PUBLIC &quo ... -
合成事件
2014-05-05 15:28 440<!DOCTYPE html PUBLIC &quo ... -
事件绑定
2014-05-05 15:06 486<!DOCTYPE html PUBLIC &quo ... -
图片提示效果
2014-05-05 14:54 597<!DOCTYPE html PUBLIC &quo ... -
初级javasctipt
2014-03-03 21:31 622<!DOCTYPE HTML PUBLIC &quo ... -
1-5(表格)
2014-03-03 19:40 666<!DOCTYPE html PUBLIC &quo ... -
jQuery对象和DOM对象的相互转换
2014-03-03 18:40 520jQuery对象转成DOM对象: ... -
插件写法
2012-11-12 16:28 803(function($) { $.extend({ pr ...
相关推荐
### 第一章 认识 jQuery #### 1.1 WINDOW.ONLOAD 和 `$(document).ready(function() {})` 的区别 在JavaScript中,`window.onload` 事件是在整个页面(包括所有资源如图片、脚本等)加载完毕后触发的函数。而...
前 言 第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.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的基础知识,并应用到实际的网上书店项目中。 第一章通常会介绍基础概念和环境搭建,让我们...
对第一章的内容进行了回顾,强调了学习jQuery的重要性,并为下一章做了铺垫。 #### 第2章:创建被包装的元素集 - **2.1 选择元素以供操作** 介绍了如何使用不同的选择器来选取DOM中的元素,以便进行后续的操作...
前 言 第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...
1. **第 1 章:认识 jQuery** - jQuery 的起源和发展历程。 - 为什么选择 jQuery 而不是原生 JavaScript。 - 安装和配置 jQuery。 2. **第 2 章:选择器与 DOM 操作** - jQuery 中的选择器语法,包括 CSS 选择...
##### 第1章:认识jQuery Mobile - **概述**:介绍了jQuery Mobile库的基本概念及其工作原理。 - **工作方式**:详细解释了jQuery Mobile是如何工作的,包括其核心机制和功能特点。 - **首个应用**:通过一个简单的...
`第7章 表单选择器.pdf`文档可能是对这部分内容的一个详细讲解,建议配合源码阅读,加深理解。 总结,jQuery表单选择器的源码解析不仅有助于初学者了解其工作原理,还能提升对JavaScript和DOM操作的深入认识。通过...
jQuery的流行简化了JavaScript的开发,但随着HTML5的诞生,前端应用变得越来越复杂,MVVM框架应运而生,Vue.js便是其中之一。MVVM模式使得开发者可以更加专注于业务逻辑,而不是DOM操作,推动了SPA(单页应用程序)...
第一章:AJAX概述 在这一章中,读者将了解到AJAX(Asynchronous JavaScript and XML)的核心理念,即通过JavaScript实现页面的异步更新,提升Web应用程序的用户体验。这一章会介绍AJAX的历史背景,以及它如何改变了...
在本章《Web前端开发基础》中,...通过这一章的学习,读者将建立起对Web前端开发全面的认识,具备基本的HTML、CSS和JavaScript编写能力,并了解如何利用各种框架和工具提高开发效率,为后续的Web开发实践打下坚实基础。
首先,"第一章 了解JavaScript.ppt"会介绍JavaScript的基本概念,包括它的起源、用途以及在Web开发中的地位。JavaScript与HTML和CSS是构建网页的三大核心技术,它能够增强网页的交互性和实时性。这一章会讲解...
这一章通常会涵盖Java环境的搭建,包括JDK的安装和配置,以及编写并运行第一个"Hello, World!"程序。这一步是所有编程学习的起点,旨在让初学者对编程有个直观的认识,并熟悉Java开发的基本流程。 接着是“第02章 ...
第一部分 认识现代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 ...