Web前端相关

目录

实验四

实现代码（源自前端实验四——jQuery基础应用_连箬的博客-CSDN博客）

实验六

实现代码1

实现代码2.1

实现代码2.2（全）

模拟题

考试提供

实现代码1.1

实现代码1.2（全）

实现代码2.1

实现代码2.2

实现代码2.3（全）

补充知识点

1. 页面数据缓存

2. 复选框

3.  单选框

4. 下拉菜单

考题注意 

学习通练习题

---

实验四

1、修改css/main.css文件调整oscarlist.html中的表格样式

(1) 将所有偶数行背景色改为#dddddd

(2) 利用CSS伪类选择器，鼠标移上偶数行背景色改为#3dc1f1，鼠标移上奇数行背景色改为#bbedff

2、引用jQuery包，编写jQuery代码

(1) 为表格添加最后一列，该列所有单元格均放置一个“查看”链接，点击链接后在新页面打开detail.html，并构造get参数放入链接所在行所有的内容。

原理：构造包含链接的单元格HTML代码（例：查看），再追加到每个tr尾部即可，最好使用append方法；构造链接的URL时，需要提取本行所有单元格的内容，先利用jQuery选择链接所在行的前5个单元格，再使用text()方法提取单元格内的内容

需要构造的链接代码例：查看

参数说明：year获奖年份，number届数，cnname影片中文名，enname影片英文名，showyear上映年份

所有放入URL的参数值需要进行UrlEncode编码：encodeURIComponent("72届")

3、修改detail.html代码，引用jQuery包，编写jQuery代码

(1) 接收URL中的get参数，原理：先提取URL，然后再使用正则表达式识别URL中的各参数值：

提取URL的方法：window.location.href

提取到参数值后再解码，例：decodeURI("72%E5%B1%8A")

(2) 通过jQuery的html方法将所有的get参数渲染到表格对应的单元格中，再将影片的中文名写入到网页的title中

(3) 通过jQuery显示对应的剧照图片，只需修改图片的src属性即可，图片路径格式为"images/获奖年份.jpg"。

4、要求：本实验不允许修改HTML源代码，只能通过jQuery动态渲染HTML元素和内容。

实现代码（源自前端实验四——jQuery基础应用_连箬的博客-CSDN博客）

oscarlist.html

	
	
	
	



	

		
年份
奥斯卡
影片（中文名）
影片（英文名）
上映年份
		
2023
95届
瞬息全宇宙
Everything Everywhere All at Once
2022
		
2022
94届
健听女孩
Children of Deaf Adults
2021
		
2021
93届
无依之地
Nomadland
2020
		
2020
92届
极速车王
Ford v.Ferrari
2019
		
2019
91届
绿皮书
Green Book
2018
		
2018
90届
水形物语
The Shape of Water
2018
		
2017
89届
月光男孩
Moonlight
2017
		
2016
88届
聚焦
Spotlight
2016
		
2015
87届
鸟人
Birdman
2015
		
2014
86届
为奴十二年
12 Years a Slave
2014
		
2013
85届
逃离德黑兰
Argo
2013
		
2012
84届
艺术家
The Artist
2011
		
2011
83届
国王的演讲
The King's Speech
2010
		
2010
82届
拆弹部队
The Hurt Locker
2008
		
2009
81届
贫民窟的百万富翁
Slumdog Millionaire
2008
		
2008
80届
老无所依
No Country for Old Men
2007
		
2007
79届
无间道风云
The Departed
2006
		
2006
78届
撞车
Crash
2004
		
2005
77届
百万美元宝贝
Million Dollar Baby
2004
		
2004
76届
指环王3
The Lord of the Rings: The Return of The King
2003
		
2003
75届
芝加哥
Chicago
2002
		
2002
74届
美丽心灵
A Beautiful Mind
2001
		
2001
73届
角斗士
Gladiator
2001
		
2000
72届
美国丽人
American Beauty
2000
	

detail.html

	
	
	
	




	

	

		

			
获奖年份
			
1
		
		

			
届数
			
2
		
		

			
影片中文名
			
3
		
		

			
影片英文名
			
4
		
		

			
上映年份
			
5
		
	

实验六

实验内容：开发一个简单英语四级英汉电子词典。

1、设计词典布局（美观即可，不要求按设计图精确布局）

（1）创建网页，创建网页文件dict.html。

（2）网页布局

使用div+css按图1进行布局，风格为手机网页，文本框和下面内容区域宽度自适应，搜索按钮宽度固定，搜索栏固定到屏幕最上方。

图1 词典设计图

实现代码1

2、词典页面操作典事件编程

（1）相似词汇显示

当文本框发生改变时显示相似词汇，如图2所示。

 图2 输入词汇

实现方法：向接口getSimilarWords发起异步（AJAX）请求（参见《实验6_Web接口文档》第1节），服务器会返回响应，包含了相似词汇数据，将该数组中的词汇渲染到内容区域中（如图2所示），参考代码：

$.ajax({
url: "http://43.136.217.18:8081/getSimilarWords",
data: {word: "文本框中的字符"},
type: "GET",
datatype："json",
//访问成功，查看State
success: function(data){
//解析JSON
if(data.state == "SUC"){
……	//成功后，读取相似词汇，渲染到图2的列表
}
else{
……	//失败后，在图2的列表处显示失败信息
}
},
//访问失败
error: function(data){
…..		//在图2的列表处显示“系统错误消息”
}
});

JSON解析方式：所有相似词汇放在data.Content中，参见《实验6_Web接口文档》第1.4节。

实现代码2.1

（2）查询词汇结果显示

点击图2中的“查词按钮”，按文本框中的词汇进行查询；点击图2中相似词汇列表中的项目，按列表项中的词汇进行查询；查询需要异步（AJAX）调用getWordDetail接口（参见《实验6_Web接口文档》第2节），查询结果按图3的显示效果填充。

图3 词汇查询结果

参考代码：

$.ajax({
url: "http://43.136.217.18:8081/getWordDetail",
data: {word: "文本框或列表项中的词汇"},
type: "GET",
datatype: "json",
//访问成功，查看State
success: function(data){
//解析JSON
if(data.state == "SUC"){
……	//成功后，读取相似词汇，渲染到图3的内容区域
}
else{
……	//失败后，在图3的内容区域处显示错误信息
}
},
//访问失败
error: function(data){
…..		//在图3的内容区域处显示“系统错误消息”
}
});

JSON解析方式：词汇解释放在data.Content中，参见《实验6_Web接口文档》第2.4节；同一个词汇可能有多条解释，同一条解释可能有多组不同词性，同一组词性可能有多条释义，参见图3和《实验6_Web接口文档》第2.4节例2。

实现代码2.2（全）

    
    
    
    
    
    
    
    






    

        
词典
    
    

        
        查询
        
        

        
    



    

        
解释
    
    

        
    

参考：前端实验六——英汉字典_连箬的博客-CSDN博客

模拟题

一、产品搜索页面

打开“考试文件夹”中的input.html，完成以下步骤：

注意：本题仅能在input.html的

2、数据验证约束：（10分）

（1）点击“录入”按钮后执行数据验证；

（2）产品名称必须输入；

（3）产品名称中不能有数字；

（3）如果验证未通过则将错误消息填充至id为error的div中，并将错误消息以红色(#ff0000)显示；

（4）如果全部验证通过，则跳转至产品主页面product.html。

实现代码1.2（全）

    
    
    
    
    
    



    
产品名称
    

二、产品主界面

打开“考试文件夹”中的product.html，完成以下步骤：

1、前后端数据交互：点击页面中“搜索”按钮向后端发起请求

（1）接口地址：http://43.136.217.18:8081/getProduct

（2）接口调用方式：post

（3）提交参数：name

（4）输入产品名称“电脑”并点击搜索，服务器将返回JSON数据

服务端返回数据格式：（请粘贴在下方）

{"code":200,"data":[{"brand":"联想","image":"thinkpad.jpeg","model":"thinkpad","price":5000},{"brand":"戴尔","image":"lingyue.jpeg","model":"灵越","price":6000},{"brand":"惠普","image":"anyinjinglin.jpeg","model":"暗影精灵","price":6000},{"brand":"神舟","image":"youya.jpeg","model":"优雅","price":4000},{"brand":"联想","image":"yangtian.jpeg","model":"扬天","price":4000}],"msg":"成功","success":true}

实现代码2.1

2、界面设计和数据填充（如下图所示）

（1）遍历JSON中的所有的产品，构造表格HTML代码，并填充至id为product的div中。

（2）将数据放入一个四列表格中，第一行单元格为表头，height设为30px，后续行为数据，height设为100px；

（3）所有单元格都设置为垂直居中和水平居中；

（4）第一列显示一张图片，高宽各为100px，图片文件名为JSON中的image属性值，完整图片链接为：（4分）

http://43.136.217.18:8081/img/图片文件名

（5）第二列显示品牌，取值为JSON中的brand属性值

（6）第三列显示型号链接，链接文本取值为JSON中的model属性值，链接的中的图片文件名为JSON中的image属性值，完整链接代码为：

图片文件名">型号

链接要求点击后在新页面打开；

（7）第四列显示价格，取值为JSON中的price属性值。

实现代码2.2

3、界面美化

（1）在

补充知识点

1. 页面数据缓存

(1)以键值对保存和存储临时数据，可在一个页面保存，另一个页面打开

localStorage.setItem("key", value);
localStorage.getItem("key");

(2)例：
在a.html保存姓名

localStorage.setItem("name", "张三");

在b.html中取出姓名

var name = localStorage.getItem("name");

2. 复选框

(1)获取复选框的值

$("#checkItem").val();

(2)获取复选框是否被选中

$(this).is(":checked")

(3)复选框被选中后获取值

$("#checkItem").click(function(){
   if($(this).is(":checked")){
      var value = $("#checkItem").val();
   }
});

3.  单选框

(1)利用name分组，name相同的单选框为一组

男

女

普通用户

管理员

(2)在jquery中获取一组单选框被选中的值

$("input[name='sex']:checked").val();

(2)选择后获取本组单选框的值

$("input[name='sex']").click(function(){
    var value = $("input[name='sex']:checked").val();
    alert(value);
});

4. 下拉菜单

  四川
  湖北
  广东

(1)在jquery中获取被选选项值

   $("#menu").val()

(2)选择下拉选项后获取被选选项值

$("#menu").change(function(){
    var value = $("#menu").val();
    alert(value);
});

考题注意 

1、正式的试题跟模拟题类似，都是布局、输入数据验证、发送AJAX请求、收到JSON、读取JSON构造HTML并渲染到网页中去、为新渲染的HTML元素添加事件、执行事件后又发送新的请求再做新的渲染。

参考：

jQuery——为了考试/(ㄒoㄒ)/~~_连箬的博客-CSDN博客

 JS+ajax格式_沈十六6127的博客-CSDN博客 

jQuery——为了考试/(ㄒoㄒ)/~~_连箬的博客-CSDN博客2、动态构造的HTML跟模拟题差不多，都是需要重复显示的结构，不一定是表格，如果你们实现起来有困难，也可以就用你们熟悉的格式构造HTML，把会做的都做完了后，有时间再回头调整HTML格式和样式表。

参考：

 Jquery_沈十六6127的博客-CSDN博客 

使用字符串拼接的方式动态构造 HTML 表格_沈十六6127的博客-CSDN博客

学习通练习题

一. 单选题（共25 题，100.0分）

1. (单选题,4.0分)div、p、ul均为_________。

• A. 内部元素

• B. 行内块元素

• C. 行内元素

• D. 块元素

正确答案: D

2. (单选题,4.0分)div独占一行，包含_______属性的div可与下一个div同在一行。

• A. left

• B. right

• C. clear

• D. float

正确答案: D

3. (单选题,4.0分)div布局利用_______属性实现div的横向分布。

• A. align

• B. flex

• C. float

• D. table

正确答案: C

4. (单选题,4.0分)HTML基本语法由_______组成。

• A. 文字、链接和图片

• B. 标记、内容和样式

• C. 文字、链接、图片和布局

• D. 标记和内容

正确答案: D

5. (单选题,4.0分)JavaScript是_________。

• A. 弱类型语言

• B. 由服务器执行

• C. 编译执行的语言

• D. 面向对象的语言

正确答案: A

6. (单选题,4.0分)HTML换行使用_______。

• A. \r\n

• B.

• C. \n

• D.
  

正确答案: D

7. (单选题,4.0分)div的padding为10px，height为50px，margin为5px，div的可见高度为_________。

• A. 80px

• B. 50px

• C. 70px

• D. 60px

正确答案: C

8. (单选题,4.0分)链接至新浪网的链接标记是_________。

• A. 链接

• B. 链接

• C. 链接

• D. 链接

正确答案: D

9. (单选题,4.0分)有HTML代码：

西南石油大写

，使用css样式表_______将“石油”二字变为红色且其他字不变。

• A. #area,span{ color:red; }

• B. #area{ color:red; }

• C. #area span{ color:red; }

• D. area span{ color:red; }

正确答案: C

10. (单选题,4.0分)AJAX的说法错误的是_______。

• A. 由JavaScript执行

• B. 请求服务器时可不刷新页面

• C. 可由服务器主动发起

• D. 异步执行

正确答案: C

11. (单选题,4.0分)JavaScript的空格是_______。

• A.  

• B. >

• C. <

• D. "

正确答案: A

12. (单选题,4.0分)jQuery中，使用_______方法将HTML字符串绘制成DOM元素。

• A. innerText

• B. text

• C. innerHtml

• D. html

正确答案: D

13. (单选题,4.0分)如果URL中有中文或特殊符号应采用_______将其编码

• A. Base64Encode

• B. URLEncode

• C. UTF-8

• D. ASCII

正确答案: B

14. (单选题,4.0分)容器内容和边框之间的距离用_________属性定义。

• A. border

• B. padding

• C. height

• D. margin

正确答案: B

15. (单选题,4.0分)默认是_________。

• A. 行内元素

• B. 内部元素

• C. 行内块元素

• D. 块元素

正确答案: C

16. (单选题,4.0分)红色的RGB颜色代码为_______。

• A. #00FF00

• B. #FF0000

• C. #0000FF

• D. #FFFFFF

正确答案: B

17. (单选题,4.0分)CSS样式写在HTML元素中的style属性中，这种写法称为______。

• A. 内联样式

• B. 行内样式

• C. 外联样式

• D. 动态样式

正确答案: A

18. (单选题,4.0分)文本框的HTML代码是_______。

• A.

• B.

• C.

• D.

正确答案: D

19. (单选题,4.0分)border-width:1px 2px 0px 1px，分别设置了_________方向的边框宽度。

• A. 上左下右

• B. 上下左右

• C. 左右上下

• D. 上右下左

正确答案: D

20. (单选题,4.0分)链接标记中target="_______"，表示在新页面打开。

• A. _blank

• B. _self

• C. _parent

• D. _new

正确答案: A

21. (单选题,4.0分)

和
• 标记分别表示_______。

  • A. 块元素和行内元素

  • B. 列表和列表项

  • C. 行元素和列元素

  • D. 表格和单元格

  正确答案: B

  22. (单选题,4.0分)BOM对象为______对象模型。

  • A. 异步JS

  • B. 窗体

  • C. 文档

  • D. 浏览器

  正确答案: D

  23. (单选题,4.0分)JavaScript中document.getElementById("name")与jQuery代码_______是等价的。

  • A. $(document).name

  • B. $(name)

  • C. $("document.name")

  • D. $("#name")

  正确答案: D

  24. (单选题,4.0分)jQuery为元素input设置单击事件的方法错误的是_______。

  •       alert("触发单击事件");

       });

  • B. $("input").click(function(){

          alert("触发单击事件");

       });

  • C. $("input").addListener("click", function(){

          alert("触发单击事件");

       });

  • D. $("input").bind("click", function(){

          alert("触发单击事件");

       });

  正确答案: C

  25. (单选题,4.0分)对div设置鼠标进入后文字变红的效果，可以用css选择器_______实现。

  • A. div { color:red; }

  • B. div[over] { color:red; }

  • C. div:active { color:red; }

  • D. div:hover { color:red; }

  正确答案: D

  仅供个人考试学习，侵删。

  cr.Kerst