jQuery——课后作业及练习

最新推荐文章于 2024-06-12 11:46:09 发布
最新推荐文章于 2024-06-12 11:46:09 发布
阅读量4k 收藏 39
点赞数 4
文章标签： jquery javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44502548/article/details/108836595
版权
这篇博客展示了四个使用jQuery实现的项目：一、今日团购页面；二、QQ简易聊天框；三、简易论坛发帖功能；四、凡客诚品帮助中心页面。通过这些实例，读者可以加深对jQuery在网页交互中的应用理解。
摘要由CSDN通过智能技术生成

一：今日团购页面

<!DOCTYPE html>
<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>今日团购模块 </title>
	<style>
		*{
    
		    margin:0px;
		    padding:0px;
		    font-size:12px;
		}
		#pruduce{
    
		    width:947px;
		    background-color:#F2F2F2;
		    margin: 0px auto;
		}
		.top{
    
		    height:55px;
		    background:url(img/top.jpg) no-repeat 10px 10px;
		}
		.main{
    
		    text-align:center;
		    height:309px;
		}
		.box{
    
		    width:300px;
		    height:285px;
		    border:1px solid #999;
		    margin:0px 6px;
		    float:left;
		    cursor:pointer;
		}
		.box1{
    
		    width:300px;
		    height:285px;
		    border:1px solid #999;
		    margin:0px 6px;
		    float:left;
		    cursor:pointer;
		}
		.box2{
    
		    width:300px;
		    height:285px;
		    border:1px solid #999;
		    margin:0px 6px;
		    float:left;
		    cursor:pointer;
		}
		dl{
    
		    padding-top:3px;
		
		}
		dd{
    
		    line-height:30px;
		}
		
		div.btprice_1{
    
		    height:50px;
		    background:#FFF2CE url(img/bt1.jpg) no-repeat 5px 4px;
		}
		div.btprice_2{
    
		    height:50px;
		    background:#FFF2CE url(img/bt2.jpg) no-repeat 5px 4px;
		}
		div.btprice_3{
    
		    height:50px;
		    background:#FFF2CE url(img/bt3.jpg) no-repeat 5px 4px;
		}
		.hoverstyle{
    
		    background-color:#D51938;
		    color:#fff;
		}
		.red{
    
			background-color: red;
		}
		
	</style>
	<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
	<script>
		$(function(){
    
			$(".box").mouseover(function(){
    
				$(".box").addClass("red");
			}).mouseout(function(){
    
				$(".box").removeClass("red");
			});
			$(".box1").mouseover(function(){
    
				$(".box1").addClass("red");
			}).mouseout(function(){
    
				$(".box1").removeClass("red");
			});
			$(".box2").mouseover(function(){
    
				$(".box2").addClass("red");
			}).mouseout(function(){
    
				$(".box2").removeClass("red");
			});
			
		})
	</script>
	</head>
	<body>
	<div id="pruduce">
		<div class="top"></div>
    	<div class="main">
    		<div class="box">
        		<dl>
            		<dt><img src="img/pic1.jpg" /></dt>
               	<dd>[包邮]亮点可移动儿童防身高帖（每个ID限20）</dd>
           	 	</dl> 
            	<div class="btprice_1"></div>
        	</div>
        	<div class="box1">
        		<dl>
            		<dt><img src="img/pic2.jpg" /></dt>
               	 <dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装</dd> 
	            </dl> 
	             <div class="btprice_2"></div>
	        </div>
	        <div class="box2">
	        	<dl>
	            	<dt><img src="img/pic3.jpg" /></dt>
	                <dd>[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)</dd>
	            </dl> 
	             <div class="btprice_3"></div>
	        </div>
	    </div> 
	</div>
	</body>
</html>

效果图：
在这里插入图片描述

二：制作QQ简易聊天框


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ简易聊天框</title>
    <style>
    	*{
    
    		margin: 0; 
    		padding: 0;
最低0.47元/天 解锁文章
未来见
关注
  • 4
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
第八章：使用jQuery操作DOM ——课后作业：
gz98411的博客
07-24 8224
1.新增游戏列表 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;游戏推荐 &lt;/title&gt; &lt;style type="text/css" &
jQuery快速开发资料jQuery案例 代码 素材 笔记 作业资料.zip
08-04
jQuery快速开发资料jQuery案例 代码 素材 笔记 作业资料，学习资料 01-getElementById获取元素.html 02-getElementsByTagName获取某些元素.html 03-H5新增获取元素方式(1).html 04-获取特殊元素.html 05-事件三要素.html 06-执行事件步骤.html 07-操作元素之改变元素内容.html 08-innerText和innerHTML的区别.html 09-操作元素之修改元素属性.html 10-分时问候并显示不同图片案例.html 11-操作元素之表单属性设置.html 12-仿京东显示隐藏密码.html 13-操作元素之修改样式属性.html 14-关闭淘宝二维码案例.html 15-循环精灵图.html 16-显示隐藏文本框内容.html 17-通过className更改元素样式.html 18-仿新浪注册页面.html images 作业-开关灯案例.html
JQuery作业
Yiky的博客
05-25 849
JQuery 作业 文章目录JQuery 作业代码效果图 完成商品信息表的信息全选、全不选、反选操作 每行信息后对应修改、删除、提交修改功能， 点击修改文本框可以进行输入，点击提交文本框不能输入，点击删除，删除这一行的信息 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全选全不选反选</title>
web前端期末大作业基于html+css+javascript+jquery制作家乡主题风景网页设计与实现——张家口
最新发布
网页设计与制作 | HTML+CSS+JS
06-12 834
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——
4.20作业--jQuery
kelouze06的博客
04-20 1087
1.使用jquery修改div元素的背景色(随意颜色) 2.使用jquery修改div的子元素p的内容为"我是子元素" 3.使用jquery修改第二个p元素的背景色为"orange" 4.使用jquery克隆方法.请克隆p元素并且修改"克隆的p元素"内容为"我是克隆体"，并添加到"被克隆p元素"的后面 5.删除列表元素中最后一个li元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U.
JSPro08.rar使用jQuery快速高效制作网页交互特效第八章，上机+课后+上课实例代码
05-29
JSPro08.rar使用jQuery快速高效制作网页交互特效第八章，上机+课后+上课实例代码
北大青鸟ACCP8.0使用jQuery快速高效的制作网页交互特效 第七章 上机+课后+上课实例代码
05-29
北大青鸟ACCP8.0使用jQuery快速高效的制作网页交互特效 第七章 上机+课后+上课实例代码
jQuery入门第八章（链式编程原理）
m0_56344602的博客
09-12 579
链式编程 JQ 的方法调用完毕后，大部分情况都是返回一个 JQ 对象。 由于返回值还是 JQ对象，所以还可以继续通过 点语法调用 JQ 对象的方法。 如果调用方法后，返回值不是 JQ 对象，就无法链式调用 JQ 的方法了。 $(this).addClass(); // 返回值是 JQ 对象，所以可以链式编程 $(window).scrollTop(); // 返回值是 数字，所以不能调用 JQ 的方法了 注意：一般获取值这种用法，返回值由.....
第八章——课后作业
qq_41882685的博客
07-25 712
1.删除增加游戏 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;游戏推荐 &lt;/title&gt; &lt;style type="text/css" &gt; *{
使用jQuery高效制作网页特效——第五章课后作业
qq_41882685的博客
07-18 2951
1.单击图片显示图片边框 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;单击图片显示边框&lt;/title&gt; &lt;script src="http://code.j
北大青鸟Javascript第8章在线培训作业参考
06-05
2.在给出的“贵美网站首页”中实现对相应的特效。 （1）带数字导航的横幅广告 （2）无缝垂直向上滚动特效 （3）漂浮广告 （4）设为首页，收藏本站（仅ie有效） （5）屏蔽鼠标右键
凡客诚品页面模板.zip
07-02
凡客诚品页面模板.zip
JQuery基础教程之第七章
11-04
JQuery基础教程之第七章后续章节看我后续资源jquery全套教程： JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础教程之第五章:http://download.csdn.net/source/745975 JQuery基础教程之第六章:http://download.csdn.net/source/747968 JQuery基础教程之第七章:http://download.csdn.net/source/747971 JQuery基础教程之第八章:http://download.csdn.net/source/747973 JQuery基础教程之第九章:http://download.csdn.net/source/747982 JQuery基础教程之第十章及附录:http://download.csdn.net/source/747999 JQuery基础教程源码:http://download.csdn.net/source/748030 jQuery in Action源码:http://download.csdn.net/source/748118
人民邮电出版社《jQuery程序设计基础教程》课后答案
06-24
人民邮电出版社出版的《jQuery程序设计基础教程》课后习题答案
初识 jQuery基础Day1——笔记整理（总结）+ 课后练习 ×1
Myself's CSDN
05-25 326
一. jQuery的概念 jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是"write Less，Do More”，即倡导写更少的代码，做更多的事情。 j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。 jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。 二. jQuery 的基本使用 1. jQuery 的下载 ​
jQuery基本操作--制作今日团购模块
weixin_50419323的博客
10-30 4310
需求： 代码：
使用jQuery模仿今日团购
liuyan11223的博客
07-07 669
今日团购
jquery课后练习
09-04
可以使用以下步骤来实现页面中div元素向右运动100px后回到初始位置的动画效果： 1. 在页面中引入jQuery库。 2. 声明一个按钮元素和一个div元素，在div元素的样式中设置初始位置、背景颜色、宽度和高度。 3. 使用jQuery的click()方法为按钮元素添加点击事件处理程序。 4. 在事件处理程序中使用animate()方法来实现div元素向右移动100px的动画效果。在animate()方法中设置要改变的CSS属性（left）和动画持续时间（500毫秒）。 5. 再次使用animate()方法，设置div元素回到初始位置（left: 0）的动画效果。 以下是实现以上功能的jQuery代码示例： ```javascript $("button").click(function () { $("div").animate({ left: 100, }, 500); $("div").animate({ left: 0, }, 500); }); ``` 注意：在使用这段代码之前，需要确保已经正确引入了jQuery库。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [十、jQuery（上） - 章节课后练习题及答案](https://blog.csdn.net/weixin_57002282/article/details/125208920)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值