JavaScript与jQuery简单实验

学习是我快乐

发布日期: 2020-06-04 21:30:39 浏览量: 112
评分:
star star star star star star star star star star_border
*转载请注明来自write-bug.com

一、任务一:JavaScript二十四进制的时钟特效

1.1 任务要求

  • 对象的使用

  • document.write()方法的使用

  • setInterval()方法的使用

1.2 设计思路

  • 利用JavaScript Date对象,利用该对象的方法创建,年,月,日,星期,时,分,秒的变量(注:getYear+1900;getMonth+1 保证时间的准确性 [这个方法是在上世纪设计的,从上世纪的角度来看,21世纪还是个遥远的年代,所以这个getYear()方法的实现就是简单的减掉1900])

  • 在html适当位置创建显示位置标签id

  • 利用document.getElementById()获取查找第一个id所在位置

  • 利用innerHTML 属性可用于获取或替换 HTML 元素的内容

  • 利用setInterval(show,1000); 方法,每隔1000毫秒调用一次函数

1.3 设计代码

1.4 运行结果分析

第一次获取系统时间作为初值,利用setInterval()重复调用函数,达到更新时间的目的

1.5 错误分析及解决

  • 错误

    • 由于版本问题在使用windon. setInterval() 一直无法运行
    • 使用getElementById()时错误的在()中加了#
  • 错误解决

    • 将windon去除
    • document.getElementById()获取查找第一个id所在位置

1.6 任务要求解释说明

  • 对象的使用
    Date 对象用于处理日期和时间 [Date 对象会自动把当前日期和时间保存为其初始值]

  • document.write()方法的使用
    Document.write() 方法可向文档写入 HTML 表达式或 JavaScript 代码
    可列出多个参数(exp1,exp2,exp3,…) ,它们将按顺序被追加到文档中

  • setInterval()方法的使用
    setInterval(function,interval[,arg1,arg2,……argn]) function是一个函数名或者一个对匿名函数的引用。interval制定对function调用两次之间的时间,单位是毫秒。后面的arg1等是可选的参数,用于制定传递给function的参数

二、任务二: JavaScript完成表单验证

2.1 任务要求

  • 正则表达式的使用

  • 如何获取表单元素

  • 函数的应用

  • 表单验证的方法

2.2 设计思路

  • 利用function{} 建立四个函数. Checkemail();checkename();checkage();分别对三个输入框的值经行判断 checkform()函数判断三个函数输入正确与否,利用document.getElementById();获取name,age,email的值

  • 利用正则正则表达式以及test()方法判断是否正确

  • 利用html DOM innerHTML属性通过改变属性设置,提醒填写相关信息的正确性

  • 当所有方法都正确时点击提交将checkform()返回值赋给onsubime 提交表达单

2.3 设计代码

2.4 运行结果分析

利用HTML DOM innerHTML属性显示输入信息的正确与否;通过HTML的submit方法个reset实现表单的提交和重置

2.5 错误分析及解决

  • 错误

    • 未写判断函数,导致每次点击提交都跳转
    • 错误的将onSubmit和Submit事件记混,但导致无论信息正确与否,表单依旧可以提交
  • 解决

    • 添加判断条件,在form标签中利用onSubmit事件点击判断是否成立,成立则提交Submit对象提交按钮
    • 熟悉并且掌握HTML DOM Form对象的Submit事件时为了创建提交按钮Osubmit指定一个函数,当onclick submit事件发生时,通过函数的返回值判断是否提交表单

2.6 任务要求解释说明

  • 正则表达式的使用
    正则表达式是构成搜索模式的字符序列,利用test()方法通过模式搜索字符串返回 true or false

  • 获取表单元素
    通过方法getElementById()的方法获取所对应id的位置,与.value结合 document.getElementById(“IDname”).val;获取对应位置对应标签的值

  • 函数的应用
    利用function 函数名{};的格式建立函数,在本题中利用onBlur事件当用户离开标签失去焦点时执行对应函数

  • 表单验证的方法
    Submit对象创建一个表单提交按钮(<input type="submit"> 标签每出现一次,一个 Submit 对象就会被创建,触发onclick事件通过函数返回值true or false 判断是否提交);通过form.onsubimet (当onclick submit表单时调用)通过函数返回值判断是否提交表单

三、任务三: JavaScript图片幻灯片

3.1 任务要求

  • setAttribute方法的使用

  • 访问HTML节点方法的使用

3.2 设计思路

  • 利用getElementById()方法访问HTML,返回对拥有指定 id 的第一个对象的引用

  • 通过setaAttribute方法对已有的属性进行设置或改值

3.3 设计代码

3.4 运行结果分析

通过对标签(图下数字)的点击实现图片的切换,通过点击的后对应标签的颜色改变,对起经行已读标记。

3.5 错误分析及解决

  • 错误

    • 将方法getElementById()和方法getElementsByName() 记混
  • 错误解决

    • 方法记忆get….Id 访问指定id名称对象的引用(第一个)
    • get….name 访问指定name名称的对象集合

3.6 任务要求解释说明

  • setAttribute方法
    对于setAttribute的定义和用法 ,etAttribute() 方法添加指定的属性,并为其赋 指定的值。如果这个指定的属性已存在,则仅设置/更改值。

  • 访问HTML节点方法
    本任务中:通过document.getElementById(“id”);获取某个已知结点

四、任务四: 访问购物车页面节点

4.1 任务要求

  • DOM对象的使用

  • getElementsByName与getElementById方法的区别

  • window对象的使用

  • innerHTML与value的区别

  • 访问HTML文档节点的方法

4.2 设计思路

  • 设计函数minus(-)通过方法getElementById().value 访问对应标签的值,再次利用该方法改变amount的值 .利用HTML DOM innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。设置判断当amount==1时不可提醒不可在加

  • 设计函数plus(+)思路同(1)

  • 设计函数total() 利用getElementsByName方法,返回计算总价格

  • 设计collection()函数和del()函数 模拟真是情况,跳出对应提醒

  • 设计函数close() 完成关闭标签函数

4.3 设计代码

4.4 运行结果分析

通过对onclick按钮”(+ -)”的操作完成对应信息的改变,对onclick按钮”结算”完成对价格的结算,对onclick按钮”关闭”实现关闭网页。

4.5 错误分析及解决

  • 错误

    • 出现价格的小数点后面有很多位的情况
    • 出现商品价格不对但是总结算对的情况
  • 错误解决

    • 利用toFixed() 方法把 price 四舍五入为指定小数位数的数字
    • 再利用方法getElementById时将Id取错

4.6 任务要求解释说明

  • DOM对象
    Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。getElementsByName()与getElementById()的使用

  • getElementsByName()与getElementById()方法的区别
    getElementById() 返回对拥有指定 id 的第一个对象的引用。getElementsByName()返回带有指定名称的对象集合

  • window对象的使用
    close返回窗口是否已被关闭

  • innerHTML与value的区别
    使用innerHTML获取到<div>标签内的所有内容,包括<p>标签对和<img>标签; 相当于给标签中加入HTML代码;使用value获取的<input>标签的value属性, 相当于修改控件显示内容

  • 访问HTML文档节点的方法
    DOM常用的方法getElementById() 返回文档中具有指定id属性的Element节点。firstChild以Node的形式返回当前节点的第一个子节点。如果没有子节点,则为null。lastChild以Node的形式返回当前节点的最后一个子节点。如果没有子节点,则为null。nextSibling以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点,则返回null

五、任务五: 制作二十四进制的时钟特效(jQuery)

5.1 任务要求

  • jQuery的基本语法

  • 如何使用jQuery工厂函数

  • Id选择器的使用

5.2 设计思路

  • 利用JavaScript Date对象,利用该对象的方法创建,年,月,日,星期,时,分,秒的变量

  • 在html适当位置创建显示位置标签id

  • jQ DOM操作 $(“#+id”). html设置或返回所选元素的内容

  • 利用setInterval(show,1000); 方法,每隔1000毫秒调用一次函数

5.3 设计代码

5.4 运行结果分析

第一次获取系统时间作为初值,利用setInterval()重复调用函数,达到更新时间的目的。

5.5 错误分析及解决

  • 错误

    • 未使用jQ的工厂函数,不符合题意
    • 使用jQ工厂函数后事件部刷新
  • 解决

    • 在声明函数时使用$(“doucment”).ready(function (){});的方法声明工厂函数
    • 注意在jQ环境下的setInterval使用方法,应放在函数里面

5.6 任务要求解释说明

  • 如何使用jQuery工厂函数
    写法:$(document).ready(); 优点:在浏览器构建DOM树之后立即执行其中的代码。比JS代码加载速度快

  • Id选择器的使用
    本题中:使用的$(“#title”) 选取所有对应id(title)的标签。使用的$(“#myclock”) 选取所有对应id(myclock)的标签

六、任务六: jQuery完成表单验证

6.1 任务要求

  • JQuery的基本语法

  • Id选择器的使用

  • 如何使用jQuery工厂函数访问表单

  • 表单验证的方法

  • 正则表达式的使用

6.2 设计思路

  • 利用function{} 建立五个函数. Checkemail();checkename();checkage();分别对三个输入框的值经行判断, submit()工厂函数判断三个输入是否均正确;一个匿名的函数实现重置

  • 利用$(“#+id”).val;获取输入的name,age,email的值

  • 利用正则正则表达式以及test()方法判断是否正确

  • 利用$(“#+id”).html属性通过改变属性设置,提醒填写相关信息的正确性

  • 当所有方法都正确时点击提交实现跳转

6.3 设计代码

6.4 运行结果分析

通过正则表达式,判断输入结果是否正确然后提示相关信息。

6.5 错误分析及解决

  • 错误

    • 错误的将jQ的库的JS文件放在文件实现的JS后面,导致浪费大量的时间纠错
  • 解决

    • 将文件引用位置调换,JavaScript作为脚本语言,按照自上而下的顺序运行

6.6 任务要求解释说明

  • Id选择器的使用
    $(“#id”) 选取所有对应id的标签

  • 如何使用jQuery工厂函数访问表单
    利用submit()方法的放返回值判断是否提交表单, 当元素失去焦点时发生 blur 事件

七、任务七: 使用jQuery完成变换网页效果

7.1 任务要求

  • 使用选择器选取元素

  • 使用css(),addClass()方法为选取的元素添加CSS样式

  • 使用show()方法显示元素

7.2 设计思路

  • 在标签的css中利用 display:none 的方法将对应标签的内容隐藏

  • 在利用$(“标签名”).fadeToggle() 方法,实现通过某个事件触发显示和隐藏标签内容

  • 当点击h3标签(你是人间的四月天)时利用css 动态改变h3的颜色,和利用addClass改变p标签的样式属性,其中改变的样式需要在css中已存在

7.3 设计代码

7.4 运行结果分析

点击标题提示使标题和介绍文字同时变色,点击介绍文字使改文字变色;点击查看全文显示内容介绍,再次点击将其收起。

7.5 错误分析及解决

  • 错误

    • 未使用addClass的方法改变,不符合任务要求
  • 解决

    • 学习,掌握并使用addClass的用法

7.6 任务要求解释说明

  • 使用选择器选取元素
    利用$(“标签名”)选择元素

  • 使用css(),addClass()方法为选取的元素添加CSS样式
    addClass()本质只是针对class的类的增加删除,不能获取到指定样式的属性的值,css()可以获取到指定的样式值。css的样式是有优先级的,当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候,优先级如下:外部样式 < 内部样式 < 内联样式。.css方法设置的样式属性优先级要高于.addClass方法

  • 使用show()方法显示元素
    改进使用fadeToggle()方法实现再次点击将元素收起的效果

八、任务八: 制作图书简介页面

8.1 任务要求

  • 基本选择器的使用

  • 层次选择器的使用

  • 使用css(),addClass()方法为选取的元素添加CSS样式

说明

  • “自营图书几十万……”一行的字体颜色为红色

  • “¥24.10”的字体大小为24px,红色加粗显示

  • “[定价:¥35.00]”的字体颜色为#ccc(灰色),带有中划线

  • <dl>标签中的字体颜色均为红色

  • 单击“以下促销……”链接,显示隐藏的内容,如下图所示,此部分字体颜色均为红色

  • “加购价”“满减”“105-6”“200-16”的字体颜色为白色,背景颜色为红色。

8.2 设计思路

  • 利用基本选择器选择<p>改成红色

  • 利用父子选择器的选择<id=jdPrice>内部的所有<span>标签改成红色,大小为24px;

  • 利用派生选择器选择<id=jdPrice>内部的<p>内部的<span>标签将字体字体颜色为#ccc(灰色),带有中划线

  • 利用click事件触达show();通过css()和addClass()改变对应颜色

8.3错误分析及解决

学习掌握了各类标签选择器的使用方法。

8.4 任务要求解释说明

  • 基本选择器的使用
    #id $(“#lastname”) id=”lastname” 的元素,.class $(“.intro”) 所有 class=”intro” 的元素,Element $(“p”)所有 <p> 元素

  • 层次选择器的使用
    派生选择器:在s1内部获得全部的s2节点(不考虑层次),$(s1 > s2) [父子]:直接子元素选择器:在s1内部获得s2的子元素节点

  • 使用css(),addClass()方法为选取的元素添加CSS样式
    addClass()本质只是针对class的类的增加删除,不能获取到指定样式的属性的值,css()可以获取到指定的样式值。css的样式是有优先级的,当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候,优先级如下:外部样式 < 内部样式 < 内联样式。.css方法设置的样式属性优先级要高于.addClass方法

上传的附件

发送私信

43
文章数
9
评论数
最近文章
eject