0326网页实训知识总结

风吹动了我的腋毛

于 2019-03-30 20:23:49 发布

阅读量78

点赞数

本文链接：https://blog.csdn.net/qq_44785072/article/details/88918076

版权

jQuery基础语法：
1.jQuery选择器
jQuery选择器可用改变HTML元素的CSS属性。如下代码选择页面中所有的p标签并改变其背景颜色为红色。
$（ “ p ” ） . c s s (" b a c k g r o u n d - c o l o r ", " r e d "); j Q u e r y 根据 C S S 中相应的选择器，来操作 H T M L 页面中的节点，列如上面的列子中，$ (“p”)该代码是使用元素选择器来选择页面中所有p标签。我们还可以使用id，类或组合选择器，甚至还可以添加：first，:last,:even,:odd这样的后缀来匹配第一个，最后一个，偶数，奇数元素来操作HTML节点。
2.jQuery基础语法：
jQuery的选择机制构建于CSS的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。
基础语法：
$(s e l e c t o r) . a c t i o n () . 美元符号 “$ ”定义jQuery
选择器（selector）“查询”和“查找”HTML元素。
jQuery的action（）执行对元素的操作。
3.无序列表：
概念：无序列表是一个没有特定顺序的列表项的集合，也称为项目列表。在无序列表中，各个列表之间属于并列关系，没有先后顺序之分，它们之间以一个项目符号来标记。使用无序列表标签ul的type属性（使用CSS的list-style来代替），用户可以指定出现在列表项前的项目符号的样式，主要有：disc（实心圆点）、circle（空心圆点）、square（实心方块）、none（无项目符号）。
实例训练
二级菜单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #nav{
            background-color: #2ba949;
            width: 600px;
            height: 20px;
            margin: 0 auto;
        }
        ul li{
            list-style: none;
            float: left;
            line-height: 20px;
            text-align: center;
            position: relative;
        }
        a{
            text-decoration: none;
            color: #f5fcff;
            padding: 0 20px;
            width: 100px;
        }
        a:hover{
            background-color: #78a95c;
            color: #77e55d;
        }
        ul li ul{
            position: absolute;
            top:20px;
            left: 0px;
        }
        ul li ul li{
            float: none;
            width: 100px;
            background-color: #09ff26;
            margin: 1px 0;
            display: none;
        }
        ul li ul li a{
            padding: 0;
        }
        ul li:hover 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>
            <ul>
                <li><a href="#">web1</a></li>
                <li><a href="#">web2</a></li>
                <li><a href="#">web3</a></li>
            </ul>
            </li>
            <li><a href="#">服务端技术</a></li>
            <li><a href="#">python开发</a></li>
        </ul>
        </li>
        <li><a href="#">学习中心</a></li>
        <li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>
</body>
</html>

风吹动了我的腋毛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0326网页实训知识总结

jQuery基础语法：1.jQuery选择器jQuery选择器可用改变HTML元素的CSS属性。如下代码选择页面中所有的p标签并改变其背景颜色为红色。（“p”）.css(&quot;background−color&quot;,&quot;red&quot;);jQuery根据CSS中相应的选择器，来操作HTML页面中的节点，列如上面的列子中，（“p”）.cs...
复制链接

扫一扫