web实训知识点_0326

最新推荐文章于 2022-04-07 13:27:18 发布

cnyu412

最新推荐文章于 2022-04-07 13:27:18 发布

阅读量86

点赞数

本文链接：https://blog.csdn.net/cnyu412/article/details/88915897

版权

本文介绍了如何实现导航栏二级菜单，并探讨了jQuery的优势，包括快速获取元素和丰富的动画效果。同时，解释了AJAX在创建无刷新网页中的作用。还详细讲解了jQuery的基本语法，提供了一些示例代码。

摘要由CSDN通过智能技术生成

导航栏二级菜单案例
二级菜单实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style type="text/css">
       *{
           margin: 0;
           padding: 0;
       }
       #nav{
           background-color: darkgray;
           width: 600px;
           height:40px;
           margin: 0 auto  ;
       }
       ul{
           list-style: none;}
       ul li{
           float: left;
           line-height:40px;
           text-align: center;
           position: relative;
       }
       a{
           text-decoration: none;
           color: blue;
            padding: 0  10px;
           display: block;
       }
       a:hover{
           background-color:green;
           color: #4bffe8;
       }
       ul li ul {
           position: absolute;
           top:40px;
           left:0px;
           display: none;
       }
       ul li ul li{
           float: none;
           background-color: #f7ff3d;
          margin-top: 2px;
       }
 
       ul li ul li a{
           background-color: hotpink;
       }
       ul li:hover ul{
           display: block;
       }
   </style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#">首页</a><li>
        <li><a href="#">课程大厅</a>
        <ul>
            <li><a href="#">javajqurrerjqurrer</a><li>
            <li><a href="#">jqurrer</a><li>
            <li><a href="#">js</a><li>
        </ul>
        </li>
        <li><a href="#">学习中心</a>
        <ul>
            <li><a href="#">javajqurrerjqurrer</a><li>
            <li><a href="#">jqurrer</a><li>
            <li><a href="#">js</a><ul>
        </ul>
            <li>
            <li><a href="#">经典案例</a><li>
            <li><a href="#">关于我们</a><ul>
            </ul>
 
</div>
</body>
</html>

jquery学习：

特点：（1）快速获取文档元素

jquery的选择机制构建于CSS的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。jquery

       （2）提供漂亮的页面动态效果

jquery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jquery的内置效果，比如淡入淡出、元素移除等动态特效。

        （3）创建AJAX无刷新网页

AJAX是异步的JavaScript和ML的简称，可以开发出非常灵敏无刷新的网页。

jquery基本语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：

$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
eg：
$(this).hide() - 隐藏当前元素

$(“p”).hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class=“test” 的所有元素

$("#test").hide() - 隐藏所有 id=“test” 的元素

cnyu412

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web实训知识点_0326

导航栏二级菜单案例二级菜单实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ ...
复制链接

扫一扫