1.编写第一个jQuery程序
需求说明
(1) .在Hbuilder中配置jQuery开发环境
打开页面时，弹出窗口，提示信息为“我编写的第一个jQuery程序！^^
image.png
代码
<title>编写第一个jquery程序</title>
<script type="text/jscript" src="jquery-3.4.1.js"></script>
<script type="text/jscript">
$(document).ready(function(e) {
alert("我编写的第一个jQuery程序！^^");
});
</script>
</head>
<body>
</body>
当当网
-
制作当当顶部导航
需求说明
(1) . 制作当当顶部导航
(2) . 鼠标移至“我的当当”上时显示二级菜单，并且显示1px的颜色为#EE7304实线边框，当鼠标离开边框范围之后，二级菜单消失，并有边框也消失
实现效果
image.png
image.png
jq代码
$(document).ready(function() {
$("#menu").mouseover(function(){
$("#menu-ul").css(
{"border":"1px #EE7304 solid" ,"display":"block"}
);
});
$("#menu").mouseout(function(){
$("#menu-ul").css(
{"display":"none"}
);
});
});
效果图
image.png
使用jQuery变换网页效果
- 需求说明
(1) . 制作《你是人间四月天》内容简介页面
(2) . 单击“你是人间的四月天”标题后，标题字体大小、颜色变为蓝色，正文的字体颜色变为绿色
(3) . 单击“查看全部”显示内容简介 -
实现效果
image.png
image.png
image.png
代码
网友评论