jquery学习（一）_H5之家 - 中国HTML5教程资源分享第一站

jquery学习（一）

简单的jquery学习，首先在页面引入jquery

<script src="js/jquery-1.8.3.js" type="text/javascript"></script>

首先一定要注意的是引入的路径

按照案例写一个简单的DEMO

<%@ 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"> <link href="css/default.css" type="text/css" />  <script src="js/jquery-1.8.3.js" type="text/javascript"></script>  <script type="text/javascript"> // 等待dom元素加载完毕加载 $(document).ready(function(){ $(".level1 > a").click(function(){ $(this).addClass("current") //给当前元素添加"current"样式 .next().show() //下一个元素显示 .parent().siblings().children("a").removeClass("current") //父元素的兄弟元素的子元素<a>移除"current"样式 .next().hide(); ; }); }); </script> <title>导航栏</title> </head> <body> <div> <ul> <li><a href="#none">衬衫</a> <ul> <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><a href="#none">卫衣</a> <ul> <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><a href="#none">裤子</a> <ul> <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> </div> </body> </html>

测试通过！

posted @