Web二级导航栏练习及jQuery课堂笔记

最新推荐文章于 2023-04-06 10:59:02 发布

balabalapd

最新推荐文章于 2023-04-06 10:59:02 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/WLkkjm/article/details/88861940

一、二级导航栏编辑练习

1、用列表方法实现

●代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级导航栏列表方法</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #nav {
            background-color: #818181;
            width: 500px;
            height: 40px;
            margin: 0 auto ;
        }
        ul li{
            list-style: none ;
            float: left ;
            line-height: 40px;
            text-align: center ;
            position: relative ;
        }
        a{
            text-decoration: none ;
            color: #303030;
            padding: 0 20px;
            width: 100px;
        }
        a:hover {
            background-color: darkred ;
            color: white ;
        }
        ul li ul{
            position: absolute ;
            top:30px;
            left: 10px;
        }
        ul li ul li{
            float: none ;
            background-color: #818181;
            margin: 1px 0;
            display: none ;
        }
        ul li ul li a{padding: 0}
        ul li:hover ul li{display: block }
    </style>
</head>
<body>
<div id ="nav">
    <ul>
        <li><a href="#" >首页</a></li>
        <li><a href="#" >课程大厅</a>
            <ul>
                <li><a href="#" > web实训</a></li>
                <li><a href="#" >服务端技术</a></li>
                <li><a href="#" >py开发</a></li>
            </ul>
        </li>
        <li><a href="#" >学习中心</a></li>
        <li><a href="#" >经典案例</a></li>
        <li><a href="#" >关于我们</a></li>
    </ul>
</div>
</body>
</html>

●代码实现：

2、用js方法实现

●代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #nav {
            background-color: #818181;
            width: 500px;
            height: 40px;
            margin: 0 auto ;
        }
        ul li{
            list-style: none ;
            float: left ;
            line-height: 40px;
            text-align: center ;
            position: relative ;
        }
        a{
            text-decoration: none ;
            color: #303030;
            padding: 0 20px;
            width: 100px;
        }
        a:hover {
            background-color: darkred ;
            color: white ;
        }
        ul li ul{
            position: absolute ;
            top:30px;
            left: 10px;
        }
        ul li ul li{
            float: none ;
            background-color: #818181;
            margin: 1px 0;
            display: none ;
        }
        ul li ul li a{padding: 0}
        ul li:hover ul li{display: block }
    </style>
    <script type="text/javascript">
        function show(li){
            var ul = li.getElementsByTagName("ul")[0]
            console.log(ul)
            ul.style.display = 'block'
        }
        function hide(li){
            var ul = li.getElementsByTagName("ul")[0]
            console.log(ul)
            ul.style.display = 'none'
        }
    </script>
</head>
<body>
<div id ="nav">
    <ul>
        <li><a href="#" >首页</a></li>
        <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#" >课程大厅</a>
            <ul>
                <li><a href="#" > web实训</a></li>
                <li><a href="#" >服务端技术</a></li>
                <li><a href="#" >py开发</a></li>
            </ul>
        </li>
        <li><a href="#" >学习中心</a></li>
        <li><a href="#" >经典案例</a></li>
        <li><a href="#" >关于我们</a></li>
    </ul>
</div>
</body>
</html>

●代码实现：

●涉及知识点：

①onmouseover事件和onmouseout事件

onmouseover事件------鼠标指针移动到元素上时触发事件
onmouseout事件------在鼠标指针移出指定的对象时触发事件

②getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

*注：[0]就是对应第一个元素的索引

③style.display = 'block'：style.display = 'none'

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。

二、jQuery学习

1.jQuery简介

jQuery是一个快速、简洁的JavaScript框架
jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化Html文档操作、事件处理、动画设计和Ajax交互

2.jQuery语法基础

（1）添加jQuery库

在<head>标签导入

<head>
    <script src="jquery-1.9.1.min.js"></script>
</head>

在<body>标签导入

<body>
    <script src="jquery-1.9.1.min.js"></script>
</body>

（2）jQuery基础语法

$(selector).action()

*注：

美元符号"$"定义jQuery
选择器(selector)"查询"和"查找"HTML元素；
jQuery的action()执行对元素的操作

（3）jQuery选择器

jQuery选择器可用于改变HTML元素的CSS属性

如下代码选择页面中所有的<p>标签并改变其背景颜色为红色

$("p").css("background-color","red");

3.jQuery练习

●代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>

</head>
<body>
<p>asd</p>
<p>asd</p>
<span>123</span>
<span>123</span>
<script type ="text/javascript ">
    var p1 = document.getElementsByTagName("p")
    for(var i= 0;i<p1.length ;i++){
        p1[i].style.backgroundColor = "pink"
        p1[i].style.width = "30px"
        p1[i].style.height = "20px"
    }
    $("span").css("background-color","red").css('color','blue');
</script>
</body>
</html>

●代码实现：