web页面设计实训课堂笔记06DYL

最新推荐文章于 2020-09-12 22:00:16 发布

XUEXIWEIYUAN'

最新推荐文章于 2020-09-12 22:00:16 发布

阅读量166

点赞数

本文链接：https://blog.csdn.net/weixin_44762370/article/details/88912870

版权

源类库jQuery

jQuery简介

jQuery是一个快捷、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“Write Less,Do More”,即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式开，优化HTML文档操作、时间处理、动画设计和Ajax交互。

jQuery是轻量级的js库（压缩后只有21k），这是其他的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE6.0+、FF1.5+、Safari2.0+、Opera9.0+、Chrome8+等）。jQuery还有一个比较大的优势，它的文档说明很全，而且各种应用也说的很详细，同时还有许多成熟的插件可供选择。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行拓展；拥有便捷的插件扩展机制和丰富的插件。

jQuery特点

jQuery的选择机制构建于CSS的选择器，它提供了快速查询DOM文件中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。其基础语法是： $(selector).action() 美元符号“$”定义jQuery;选择器（selector）"查询"和“查找”HTML元素；jQuery的action()执行对元素的操作。

jQuery选择器

jQuery选择器用于改变HTML元素的CSS属性。如下代码选择页面中所有的p标签并改变其背景颜色为红色。$("p").css("background-color"."red")；

jQuery根据CSS中相应的选择器，来操作HTML页面中的节点，例如上面的例子中，$('p')该代码是使用元素选择器来选择页面中所有的p标签。我们还可以使用id，类或组合选择器，甚至还可以添加：first、:last、:even、:odd这样的后缀来匹配第一个、最后一个、偶数、奇数元素来操作HTML节点。

课堂练习二级菜单总体代码

<!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: 20px; margin: 0 auto;}
ul li{list-style: none;float: left;line-height: 20px;text-align: center;position: relative}
a{text-decoration: none;color: #0d0d09;padding: 0 20px;width: 100px}
a:hover{text-decoration: none;color: #41afff;}
ul li ul{position: absolute;top: 20px;left: 0px}
ul li ul li{float: none; width:100px;background-color: #73777a;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>
<ul>
<li><a href="#">我要养狗</a> </li>
<li><a href="#">我要养小狗</a> </li>
<li><a href="#">我要养柯基</a> </li>
</ul>
</li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">web网页实战</a></li>
<li><a href="#">服务端技术</a> </li>
<li><a href="#">python开发</a> </li>

</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">语文</a> </li>
<li><a href="#">数学</a> </li>
<li><a href="#">英语</a> </li>
</ul>
</li>
<li><a href="#">经典案例</a>
<ul>
<li><a href="#">狗狗受伤怎么办</a> </li>
<li><a href="#">狗狗医院有哪些</a> </li>
<li><a href="#">狗狗能吃什么药</a> </li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">地址</a> </li>
<li><a href="#">联系方式</a> </li>
<li><a href="#">资料</a> </li>
</ul>
</li>
</ul>