首页 > 代码库 > jquery学习（一）

jquery学习（一）

2024-08-30 20:28:34   218人阅读

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

<!-- 引入jquery  -->
<script src="http://www.mamicode.com/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 rel="stylesheet" href="http://www.mamicode.com/css/default.css" type="text/css" />
<!-- 引入jquery  -->
<script src="http://www.mamicode.com/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();                //它们的下一个元素隐藏
        return false;
    });
});
</script>
<title>导航栏</title>
</head>
<body>
    <div class="box">
        <ul class="menu">
            <li class="level1"><a href="http://www.mamicode.com/#none">衬衫</a>
                <ul class="level2">
                    <li><a href="http://www.mamicode.com/#none">短袖</a></li>
                    <li><a href="http://www.mamicode.com/#none">长袖</a></li>
                    <li><a href="http://www.mamicode.com/#none">短T袖</a></li>
                    <li><a href="http://www.mamicode.com/#none">长T袖</a></li>
                </ul></li>
            <li class="level1"><a href="http://www.mamicode.com/#none">卫衣</a>
                <ul class="level2">
                    <li><a href="http://www.mamicode.com/#none">短袖</a></li>
                    <li><a href="http://www.mamicode.com/#none">长袖</a></li>
                    <li><a href="http://www.mamicode.com/#none">短T袖</a></li>
                    <li><a href="http://www.mamicode.com/#none">长T袖</a></li>
                </ul></li>
            <li class="level1"><a href="http://www.mamicode.com/#none">裤子</a>
                <ul class="level2">
                    <li><a href="http://www.mamicode.com/#none">短裤</a></li>
                    <li><a href="http://www.mamicode.com/#none">休闲裤</a></li>
                    <li><a href="http://www.mamicode.com/#none">牛仔裤</a></li>
                    <li><a href="http://www.mamicode.com/#none">免烫卡其裤</a></li>
                </ul></li>
    </div>
</body>
</html>

测试通过！

jquery学习（一）


联系
我们