Web前端开发（JavaScript+jQuery）课件全套 卢秋锦 项目1-10 JavaScript- 综合信息类网站首页的实现_第1页
Web前端开发（JavaScript+jQuery）课件全套 卢秋锦 项目1-10 JavaScript- 综合信息类网站首页的实现_第2页
Web前端开发（JavaScript+jQuery）课件全套 卢秋锦 项目1-10 JavaScript- 综合信息类网站首页的实现_第3页
Web前端开发（JavaScript+jQuery）课件全套 卢秋锦 项目1-10 JavaScript- 综合信息类网站首页的实现_第4页
Web前端开发（JavaScript+jQuery）课件全套 卢秋锦 项目1-10 JavaScript- 综合信息类网站首页的实现_第5页
已阅读5页，还剩246页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web前端技术

JavaScript目录1.1JavaScript基础JavaScript函数1.3☞点击查看本小节知识架构☞点击查看本小节知识架构程序控制结构和语句1.2☞点击查看本小节知识架构

1.1JavaScript基础1.1.1认识JavaScriptJavaScript是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的Web页面，可广泛应用于服务器、PC端、移动端和智能手机等设备。JavaScript内嵌于HTML网页中，通过浏览器内置的JavaScrpt引擎进行解释执行，把一个原本只是用来显示内容的静态页面转变为支持用户交互的动态页面。1.1.2javascript的前世今生121995年由网景公司的工程师BrendanEich设计，最初名为“Mocha”，后改为“LiveScript”1997年产生了第一版ECMAScript标准32000年随着Ajax技术的兴起，JavaScript的重要性进一步提升，推动了JavaScript框架和库的发展4现在JavaScript在前端开发中占主导地位，新技术如React、Angular、Vue等框架推动了其发展1.1.3JavaScript的特点不需要编译就可以运行不是一种纯面向对象编程语言，但它支持面向对象的编程语法相对简单直观，网络上有大量的学习资源和社区支持动态类型语言，变量在声明时不需要定义类型几乎可以在所有的现代浏览器上运行，通过Node.js，JavaScript也可以运行在服务器端脚本语言基于对象简单易学动态性跨平台性1.1.4JavaScript的作用增强网页交互性页面内容的动态操作异步数据处理事件驱动编程前端框架和库的支持全栈开发能力跨平台应用开发<script>alert("我的第一个JavaScript");</script>1.1.5JavaScript的用法<script>标签在HTML页面中插入JavaScript，需使用<script>标签。例如：<!DOCTYPEhtml><html><head><title>内联JavaScript示例</title></head><body><h1>JavaScript示例</h1></body></html>1.1.5JavaScript的用法通常，这些<script>标签放置在HTML的<head>部分或<body>部分的末尾。2.JavaScript的引入方式内联JavaScript：将JavaScript代码直接嵌入到HTML文件中。使用<script>标签在HTML文档中编写JavaScript代码。<!DOCTYPEhtml><html><head><scriptsrc="js/my-script.js"></script></head><body><h1>JavaScript示例</h1></body></html>1.1.5JavaScript的用法这种方法有利于代码的重用和维护，特别是当相同的JavaScript代码需要在多个页面中使用时2.JavaScript的引入方式外部JavaScript：将JavaScript代码写在单独的.js文件中，然后通过<script>标签的src属性引入。console.log("Hello,JavaScript!");1.1.5JavaScript的用法3.JavaScript的数据输出console.log()：console.log()是在控制台输出信息的常用方法，用于调试和查看程序执行过程中的结果。alert("Hello,JavaScript!");1.1.5JavaScript的用法3.JavaScript的数据输出alert()：alert()方法弹出一个包含指定文本的警告框，常用于向用户显示一些简单的信息。<!DOCTYPEhtml><html><body> <pid="output"></p> <script>//JavaScript代码

document.getElementById("output").innerHTML="Hello,JavaScript!";</script></body></html>1.1.5JavaScript的用法在HTML页面中输出内容：通过修改HTML元素的内容来实现在页面中输出数据。3.JavaScript的数据输出document.write("Hello,JavaScript!");1.1.5JavaScript的用法3.JavaScript的数据输出document.write()：document.write()方法可用于直接向文档写入内容。varx=10;1.1.6JavaScript语句3.JavaScript的数据输出赋值语句：用于给变量赋值。1.1.6JavaScript语句3.JavaScript的数据输出条件语句：根据条件执行不同的代码块。if(x>5){//如果x大于5，则执行这里的代码}else{//否则执行这里的代码}for(vari=0;i<5;i++){//循环体，会执行5次}1.1.6JavaScript语句3.JavaScript的数据输出循环语句：用于重复执行一段代码。functionmyFunction(){//函数体}myFunction();//调用函数1.1.6JavaScript语句3.JavaScript的数据输出函数调用语句：调用函数执行特定的操作。functionadd(a,b){returna+b;}1.1.6JavaScript语句3.JavaScript的数据输出返回语句：在函数中用于返回值。varvariableName;//声明变量functionmyFunction(){//声明函数

//函数体}1.1.6JavaScript语句3.JavaScript的数据输出声明语句：用于声明变量或函数。varresult=x+y;//表达式语句1.1.6JavaScript语句3.JavaScript的数据输出表达式语句：包含一个表达式，通常以分号结束。console.log("Hello,World!");输出语句：在浏览器控制台输出信息。try{//可能发生错误的代码}catch(error){//处理错误的代码}1.1.6JavaScript语句3.JavaScript的数据输出异常处理语句：用于处理可能发生的错误。a=5;b=6;c=a+b;1.1.7JavaScript代码规范1.分号分号用于分隔JavaScript语句。通常我们在每条可执行的语句结尾添加分号。使用分号的另一用处是在一行中编写多条语句。以上示例也可以写成以下代码:a=5;b=6;c=a+b;varperson="Hege";varperson="Hege";1.1.7JavaScript代码规范2.空格JavaScript会忽略多余的空格。我们可以向脚本添加空格，来提高其可读性。下面这两行代码是等效的：document.write("你好\世界!");1.1.7JavaScript代码规范3.对代码行进行折行我们可以在文本字符串中使用反斜杠对代码行进行换行。如下面的例子都会正确显示出其内容：//document.getElementById("myH1").innerHTML="欢迎来到我的主页";document.getElementById("myP").innerHTML="这是我的第一个段落。";1.1.7JavaScript代码规范4.JavaScript注释单行注释：以//开头，下方代码运行结果，第一个语句将不执行。多行注释：以/*开始，以*/结尾，下方代码运行结果，两个语句都不执行。/*document.getElementById("myH1").innerHTML="欢迎来到我的主页";document.getElementById("myP").innerHTML="这是我的第一个段落。";*/1.1.8JavaScript数据结构1.标识符命名规范：标识符只能由字母、数字或下划线和中文组成，而不能包含空格、标点符号、运算符等其他符号。标识符的第一个字符必须是字母、下划线或者中文。标识符不能与JavaScript中的关键字名称相同，即不能是iclse

等。1.1.8JavaScript数据结构2.关键字关键字标识了JavaSoript语向的开头或结尾。根据规定，关键字是保留的，不能用作变量名或函数名。breakcasecatchcontinuedefaultdeletedoelsefinallyforfunctionifininstanceofnewreturnswitchthisthrowtrytypeofvarvoidwhilewithJavaScript中的关键字1.1.8JavaScript数据结构3.保留字保留字在某种意义上是为将来的关键字而保留的单词。因此保留字不能被用作变量名或函数名。JavaScript中的保留字abstractbooleanbytecharclassconstdebuggerdoubleenumexportextendsfinalfloatgotoimplementsimportintinterfacelongnativepackageprivateprotectedpublicshortstaticsupersynchronizedthrowstransientvolatile

1.1.8JavaScript数据结构4.常量简单地说，常量是字面变量，是固化在程序代码中的信息，常量的值从定义开始就是固定的。常量主要用于为程序提供固定和精确的值，如数值、字符串、迎辑值真(true)、逻辑值假（false)等都是常量。常量通常使用const声明。语法格式如下：const常量名：数据类型二值；1.1.8JavaScript数据结构5.变量变量是用于存储信息的"容器"，在编程语言中，变量用于存储数据值。命名规则：变量必须以字母开头变量也能以$和_符号开头（不过我们不推荐这么做）变量名称对大小写敏感（y和Y是不同的变量）注意：JavaScript语句和JavaScript变量对大小写都是敏感的。当编写JavaScript语句时，请留意是否关闭大小写切换键。1.1.9数据类型1.JavaScript字符串字符串是存储字符（比如"BillGates"）的变量。字符串可以是引号中的任意文本，可以使用单引号或双引号。varcarname="VolvoXC60";varcarname='VolvoXC60';1.1.9数据类型2.JavaScript数字JavaScript只有一种数字类型。数字可以带小数点，也可以不带。varx1=34.00;//使用小数点来写varx2=34;//不使用小数点来写极大或极小的数字可以通过科学（指数）计数法来书写。vary=123e5;//12300000varz=123e-5;//0.001231.1.9数据类型3.JavaScript布尔布尔（逻辑）只能有两个值：true或false。varx=true;vary=false;1.1.9数据类型4.JavaScript数组下面的代码创建名为cars的数组：数组下标是基于零的，所以第一个项目是[0]，第二个是[1]，以此类推。varcars=newArray();cars[0]="Saab";cars[1]="Volvo";cars[2]="BMW";1.1.9数据类型5.JavaScript对象对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式(name:value)来定义。属性由逗号分隔：varperson={firstname:"John",lastname:"Doe",id:5566};对象属性有两种寻址方式：name=person.lastname;name=person["lastname"];1.1.9数据类型6.Undefined和NullUndefined这个值表示变量不含有值。可以通过将变量的值设置为null来清空变量。cars=null;person=null;1.1.9数据类型7.声明变量类型当声明新变量时，可以使用关键词"new"来声明其类型：varcarname=newString;varx=newNumber;vary=newBoolean;varcars=newArray;varperson=newObject;1.1.10运算符和表达式1.算术运算符算术运算符用于连接运算表达式，主要包括加（+）、减（-）、乘（*）、除（/）、取模（%）、自增（++）、自减（--）等。举例：指定变量值，并将值相加，语句执行后，x的值是：7：y=5;z=2;x=y+z;1.1.10运算符和表达式2.比较运算符比较运算符在逻辑语句中使用，用于判断变量或值是否相等。其运算过程需要首先对操作数进行比较，然后返回一个布尔值true或false。运算符说明示例==等于，只根据表面值进行判断，不涉及数据类型“5”==5的值为true===绝对等于，同时根据表面值和数据类型进行判断“5”===5的值为false！=不等于，只根据表面值进行判断，不涉及数据类型“5”！=5的值为false!==不绝对等于，同时根据表面值和数据类型进行判断“5”！==5的值为true>

大于“5”>3的值为true>=大于等于“5”>=3的值为false<

小于“5”=3的值为false<=小于等于“5”<=3的值为false1.1.10运算符和表达式3.赋值运算符赋值运算符是用于给JavaScript变量赋值。给定x=10和y=5，下面的表格解释了赋值运算符。运算符例子等同于运算结果=x=y

x=5+=x+=yx=x+yx=15-=x-=yx=x-yx=5*=x*=yx=x*yx=50/=x/=yx=x/yx=2%=x%=yx=x%yx=01.1.10运算符和表达式4.逻辑运算符通常用于执行逻辑运算，它们常与比较运算符一起使用，来表示复杂比较运算，而且常用于if、while和for语句中。运算符说明示例&&逻辑与，若两边表达式的值都为true，则返回true；任意一个值为false，则返回false10>7&&10<15,true10>7&&10>15,false||逻辑或，只有表达式的值都为false时，才返回false10>7||100>15,true10<7||100<15,false！逻辑非，若表达式的值为true，则返回false，否则返回true!(10>7),false!(100<15),true1.1.10运算符和表达式5.条件运算符条件运算是JavaScript中的一种特殊的三元运算符，它有三个部分，其语法格式为：条件？表达式1：表达式2在使用条件运算符时，如果条件为真，则表达式使用表达式1的值，否则使用表达式2的值。1.1.10运算符和表达式6.运算符的优先级Javascript运算符均有明确的优先级与结合性。优先级较高的运算符将先于优先级低的运算符进行运算。结合性则是指具有同等优先级的运算符将按照怎样的顺序进行运算，结合性有向左结合和向右结合两种。1.1.10运算符和表达式6.运算符的优先级运算符的优先级优先级（1最高）说明运算符1逻辑非！2括号（）3自加/自减运算符++--4乘法、除法、取余运算符*/%5加法、减法运算符+-6小于、小于等于、大于、大于等于<<=>>=7等于、不等于==！=8逻辑与&&9逻辑或||10赋值运算符和快捷运算符=+=*=/=%=-=动手实践：简单加法器的实现1.案例介绍关键点：使用prompt()获取用户输入。使用parseFloat()确保将用户输入解析为浮点数。执行数值运算并将结果存储在变量中。使用alert()输出结果。动手实践：简单加法器的实现2.实现过程输入javascript语言标签声明变量num1=prompt();和num2=prompt();定义变量result用alert()输出运算结果动手实践：简单加法器的实现3.小结通过一个简单的加法器案例，展示了在JavaScript中进行数值运算的基本方法。学习者可以通过自定义不同的数值进行加法运算，从而加深对基本数值运算和JavaScript语言特性的理解。

1.2程序控制结构和语句1.2.1程序控制结构和语句1.基本处理流程对数据结构的处理流程。称为基本处理流程。在JavaScript中，基本的处理流程包含三种结构，循序结构、选择结构和循环结构。顺序结构单项选择和双向选择结构1.2.1程序控制结构和语句1.基本处理流程循环结构（左：当型；右：直线型）变量名=表达式；赋值语句往往需要大量的变量来存储程序中用到的数据，所以用来对变量进行赋值的赋值语句也会在程序中大量出现。其格式如下：1.2.1程序控制结构和语句当使用关键字var声明变量时，可以同时使用赋值语句对声明的变量进行赋值。varusername=“book”;varblue=true;varvariable=“万事如意”;3.条件判断语句条件判断语句就是对语句中不同条件的值进行判断，进而根据不同的条件执行不同的语句。if语句：1.2.1程序控制结构和语句If（条件语句）{执行语句;}3.条件判断语句if-else语句：通常用于一个条件需要两个程序分支来执行的情况。1.2.1程序控制结构和语句If（条件）{当条件为true时执行的代码}else{当条件不为true时执行的代码}3.条件判断语句If-elseif语句：选择多个代码块之一来执行。1.2.1程序控制结构和语句If（条件1）{当条件1为true时执行的代码}elseif(条件2){当条件2为true时执行的代码}else{当条件1和条件2不为true时执行的代码}3.条件判断语句switch语句：一种多分支选择结构，用于将一个表达式的结果与多个值进行比较，并根据比较结果选择执行语句。1.2.1程序控制结构和语句switch（表达式）{case数值1：

语句块1；break； case数值2：

语句块2；break； …….. case数值n：

语句块n；break； Default;

语句块n+1； }4.循环控制语句while循环语句：是一种在循环开始之前不知道具体循环次数的情况下执行代码的循环结构。它在每次迭代之前检查循环条件，只有在条件为真时才执行代码块。1.2.1程序控制结构和语句while(循环条件){//待执行的代码块}4.循环控制语句dowhile循环语句：do-while循环与while循环类似，但它会先执行一次代码块，然后再检查循环条件。1.2.1程序控制结构和语句do{//待执行的代码块}while(循环条件);4.循环控制语句for循环语句：是一种计数循环，用于在已知循环次数的情况下执行一段代码。它通常包括初始化变量、循环条件和每次迭代后更新变量的步进操作。1.2.1程序控制结构和语句for（初始化表达式;循环条件表达式;循环后的操作表达式;）{//待执行语句块}5.对话框在JavaScript中有三种样式的对话框，可分别用作提示、确认和输入、对应三个函数：alert()、confirm()、prompt()。1.2.1程序控制结构和语句函数作用alert()该对话框在只用于提醒，不能对脚本产生任何改变。它只有一个参数，即为需要提示的信息，没有返回值。confirm()该对话框一般用于确认信息。它只有一个参数，返回值为true或false。prompt()该对话框可以进行输入，并返回用户输入的字符串。它有两个参数，第一个参数显示提示信息，第二个参数显示输入框和默认值（未设置默认值时则不显示）。动手实践：九九乘法口诀表的实现1.布局分析关键点：在HTML中使用<table>标签表示表格。使用JavaScript的document.write()方法将表格动态生成。外层循环控制行数，内层循环控制列数，根据乘法规则生成每个单元格的内容。使用<th>标签表示表头，即乘法表的每个乘法式。添加CSS样式对表格进行简单修饰。动手实践：简单加法器的实现2.实现过程使用for嵌套实现乘法口诀的基本样式在for循环中直接添加表格对表格进行CSS样式修饰动手实践：简单加法器的实现3.小结九九乘法口诀表的生成通过嵌套循环结构实现，灵活运用了外层循环控制行数，内层循环控制列数的逻辑。JavaScript的document.write()方法用于在页面中动态生成HTML内容。CSS样式的添加可以提升表格的可读性和美观性。

1.3JavaScript函数1.3.1函数函数是一段被命名的可重用的代码块，用于执行特定的任务或计算。函数提供了一种将代码模块化的方式，使得代码更加结构化、可读性更强，并且方便维护和重用。关键特征：重命名参数代码块返回值调用分类方法：按参数个数按返回值按函数的来源1.3.2定义函数1.不指定函数名应用场合：把函数直接赋值给变量网页事件直接调用函数function（[参数1，参数2，…..]）{//函数体}1.3.2定义函数2.指定函数名说明：function为关键字，在此用来定义函数函数名必须是唯一的中括号[]括起来部分是可选部分，参数（形参）是可选的可使用return将值返回function函数名（[参数1，参数2，……]）{//函数体[return表达式]}1.3.2定义函数3.函数参数的使用函数参数是函数定义的一部分，用于指定函数可以接收的输入值。关键点：定义参数传递参数默认参数可变参数列表命名参数参数的作用域1.3.2定义函数4.函数的返回值函数的返回值是函数执行完成后返回给调用者的值。示例：functionmultiply(a,b){returna*b;}varproduct=multiply(3,4);console.log(product);//输出121.3.2函数的调用1.函数的简单调用当函数定义完成后，要想在程序中发挥函数的作用，必须得调用这个函数。函数名称([参数1，参数2，…….])//其中参数1，参数2，是可选的1.3.2函数的调用2.在表达式中调用函数在表达式中调用函数的方式，一般比较适合有返回值的函数，函数的返回值参与表达式的计算。functionYears(year){ if(year%4==0&&year%100!=0||year%400==0) { returnyear+"年是闰年"; }else { returnyear+"年是平年"; }}1.3.2函数的调用3.在事件响应中调用函数JavaScript是基于事件模型的编程语言，页面加载、用户单击、移动光标都会产生事件，当事件产生时，JavaScript可以调用某个函数来响应这个事件。functionshow(){varcount=document.myForm.txtName.value

for(i=0;i<count;i++){document.write("<h2>欢迎来到我的课堂</h2>");}}<inputtype="submit"name="Submit"value="欢迎来到我的课堂"onClick="show()">1.3.2函数的调用4.通过链接来调用函数在<a>标签中的href标记中使用“JavaScript:函数名()”来调用函数，当用户单击该链接时，相关函数就会被执行。functiontest(){alert("欢迎来到web前端课堂");}<ahref="javascript:test();"> web前端</a>1.3.3JavaScript中常用的函数1.嵌套函数嵌套函数就是在函数的内部再定义一个函数。优点：可以使用内部函数轻松获得外部函数的参数以及函数的全局变量。function外部函数名（参数1，参数2）{ function内部函数名（）{

函数体 }}1.3.3JavaScript中常用的函数2.递归函数函数直接或间接调用函数本身。必要条件：首先包括一个结束递归的条件其次包括一个递归调用语句function递归函数名（参数1）{

递归函数名（参数1）；}1.3.3JavaScript中常用的函数3.内置函数语言内部事先定义好的函数。常用内置函数作用eval（expr）把一个字符串当做一个JavaScript表达式一样去执行isFinite用来确定参数是有是一个有限数值isNaN用于指明是否是保留值NaNparseInt/parseFloat将数值字符串转化为一个数值Number/String将对象转换为数值或字符串1.布局分析布局时主要使用了div层的嵌套，以及标题和img标签。动手实践：简单加法器的实现动手实践：简单加法器的实现2.实现过程新建HTML文档，创建基本布局添加CSS样式表书写JavaScript代码本章小结本项目首先针对JavaScript基础进行了介绍，包括引入方式、输出语句、注释、标识符、变量的声明与赋值以及数据类型、表达式和运算符的使用，然后讲解了如何使用流程控制语句实现条件判断和代码的重复执行，最后介绍了什么是函数、函数的定义、调用和返回值以及常用函数。主讲人：卢秋锦Web前端技术

数组与对象目录2.1数组对象2.2☞点击查看本小节知识架构☞点击查看本小节知识架构

数组2.1.1初始数组数组（array）是存储一系列变量的组合，它有一个或多个元素组成，各个元素之间用逗号分割。vararr=['a','b','c'];2.1.2创建数组实例化Array对象的方式创建数组是通过new关键字实现的。1.使用Array对象创建数组varname=newArray('Lucy','Jack','Limin');//元素值类型为字符型varage=newArray(18,38,62,44);//元素值类型为数值型varmix=newArray(112,'abc',null,true,undefined);//元素值类型为混合型vararrl=newArray（）；//或vararr2=newArray：//空数组2.1.2创建数组使用“[]”创建数组的方式与Array()对象的使用方式类似，只需将newArray()替换为[]即可。2.使用“[]”创建数组varweather=['wind'，'fine'，]；//相当于：newArray（'wind'，'fine'，）varempty=[];//相当于：newArrayvarmood=["sad"，empty×3，"hAppy"];//控制台输出mood：（5）varmood=['sad',,'hAppy'];控制台输出mood：（3）2.1.3数组的基本操作Array对象提供的length属性可以获取数组的长度，其值为数组元素最大下标加1。1.获取数组长度vararrl=[78,88,98];vararr2=['a',,,'b','c'];console.log（arrl.length）；//输出结果为：3console.log（arr2.length）；//输出结果为：52.1.3数组的基本操作访问数组元素：数组创建完成后，若想要查看数组中某个具体的元素，可以通过“数组名[下标]”的方式获取指定下标的值。2.数组的访问与遍历vararr=['Limin','JavaScript',1156,true];console.log(arr[0]);2.1.3数组的基本操作遍历数组元素：依次访问数组中所有元素的操作，可以使用for或for...in语句。2.数组的访问与遍历vararray=[1,2,3,4,5];//定义一个数组//使用for...in语句遍历数组for(varindexinarray){varelement=array[index];console.log(element);}2.1.3数组的基本操作数组创建后，可以根据实际需求，通过自定义数组元素下标的方式添加元素。3.添加数组元素vararr=['Honghong',‘Jim’];arr[2]='Tom';arr[3]='Jack';console.log(arr);//输出结果:（4）["Honghong"，"Jim"，"Tom"，"Jack"]2.1.3数组的基本操作修改元素与添加元素的使用方式相同，不同的是修改元素是为已含有值的元素重新赋值。4.修改元素vararr=['a','b','c','d'];arr[2]=123;arr[3]=456;console.log(arr);//输出结果：（4）["a"，"b"，123，456]2.1.3数组的基本操作可以利用delete关键字删除该数组元素的值。5.元素的删除varstu=['Tom','Jimmy','Lucy'];console.log（stu）；//输出结果：（3）["Tom"，"Jimmy"，"Lucy"]deletestu[1]；

//删除数组中第2个元素console.log（stu）；//输出结果：（3）["Tom"，empty，"Lucy"]2.1.4数组的排序重复走访过要排序的数列，一次比较两个数，如果顺序错误就进行交换，直到没有再需要交换。1.冒泡排序2.1.4数组的排序在未排序的数组中找到最小或者最大的元素，存放在排序数组的起始位置。然后再从未排序的数列中去找到这个数组中第二大或这第二小的数放在已排序的数之后，以此类推，不断重复直到所有元素排列完毕。2.选择排序2.1.4数组的排序将一个未排序的元素插入到已经排序好的数组中，从而使得已排序的数组增加一个元素，通过插入不断完善已排序数组。3.插入排序2.1.4数组的排序三种排序方式优劣比较：名称优点缺点冒泡排序稳定性好；慢，每次只能移动相邻两个数据。选择排序移动数据的次数已知（n-1次）比较次数多，是一种不稳定的排序方法。插入排序稳定性好，速度快；比较次数不一定，比较次数越少，插入点后的数据移动越多，特别是当数据总量庞大的时候，但用链表可以解决这个问题。2.1.5常见数组方法JavaScript中可以利用Array对象提供的方法，实现在数组的末尾或开头添加数组的新元素，或在数组的末尾或开头移出数组元素。利用这些方法可以模拟栈和队列的操作。1.栈和队列方法方法名称功能描述push()将一个或多个元素添加到数组的末尾，并返回数组的新长度unshift()将一个或多个元素添加到数组的开头，并返回数组的新长度pop()从数组的末尾移出并返回一个元素，若是空数组则返回undefinedshift()从数组的开头移出并返回一个元素，若是空数组则返回undefined2.1.5常见数组方法在开发中，若要检测给定的值是否是数组，或是查找指定的元素在数组中的位置，则可以利用Array对象提供的检索方法。2.检索方法方法名称功能描述includes()用于确定数组中是否含有某个元素，含有返回true，否则返回falseArray.isArray()用于确定传递的值是否是一个Array，是返回true，不是返回falseindexOf()返回在数组中可以找到给定值的第1个索引，如果不存在，则返回-1lastIndexOf()返回指定元素在数组中的最后一个的素引，如果不存在则返回-12.1.5常见数组方法在项目开发中,若需要将数组转换为字符串,则可以利用JavaScript提供的join()和toString()方法实现。3.数组转字符串方法名称功能描述join()将数组的所有元素连接到一个字符串中。toString()返回一个字符串，表示指定的数组及其元素。2.1.5常见数组方法JavaScript还提供了很多其他常用的数组方法。例如，合并数组、数组浅拷贝、颠倒数组元素的顺序等。4.其他方法方法名称功能描述sort()对数组的元素进行排序，并返回数组。fill()用一个固定值填充数组中指定下标范围内的全部元素reverse()颠倒数组中元素的位置splice()对一个数组在指定下标范围内删除或添加元素slice()从一个数组的指定下标范围内拷贝数组元素到一个新数组中concat()返回一个合并两个或多个数组后的新数组2.1.5常见数组方法一群猴子排成一圈，按“1，2，......，n”依次编号。然后从第1只开始数，数到第m只，把它踢出圈，其后的猴子再从1开始数，数到第m只，再把它踢出去·....·.如此不停地进行下去，直到最后只剩下一只猴子为止，那只猴子就是我们要找的大王。5.案例--猴子选大王2.1.5常见数组方法模拟游戏：假设n（猴子总数）：8、m（踢出圈的）：3；第一圈：踢出的猴子编号为3、6，位置编号为3、6。第二圈：踢出的猴子编号为1、5，位置编号为9、12。第三圈：踢出的猴子编号为2、8，位置编号为15、18。第四圈：无。第五圈：踢出的猴子编号为4，位置编号为21。得出猴王编号：75.案例--猴子选大王实现思路：通过prompt()接收用户传递的猴子总数n和踢出的第m只猴子；利用数组保存所有猴子的编号（1~n）；设置一个变量i，记录每次参与游戏（报数）的猴子位置；通过while循环，只要猴子数组内元素个数大于1，就继续循环；在循环中判断当前猴子的位置i与m求余是否为0，若为零，删除该数组元素。提示：通过出栈的方式取出猴子，如判断不为0，再将该元素入栈。5.案例2.1.5常见数组方法通常使用3个下拉菜单分别表示省份、城市和区域，为了使代码更好维护，可以利用数组存储数据，再创建函数来控制二三级下拉菜单。1.动态生成下拉菜单动手实践：三级联动菜单的实现functioncreateOption(obj，data){for(variindata){varop=newOption(data[i]，i);obj.options.add(op);}}varprovince=document.getElementById(provincecreateOption(province，provinceArr);用户选择完省份后，其后下拉列表中自动获取该省份的所有城市，并依次类推，选择完城市后，其后的下拉列表中自动获取该城市中的所有区域。2.实现下拉菜单三级联动动手实践：三级联动菜单的实现//获取城市下拉菜单的元素对象varcity=document.getElementById('city’);//为省份下拉列表添加事件province.onchange=function(){optioncity.options.length=0；createOption(city，cityArr[province.value]);}编写代码修改省份province的onchange事件，使得区域的下拉菜单内容随省份修改进行变动。2.实现下拉菜单三级联动动手实践：三级联动菜单的实现province.onchange=function(){city.options.length=0;createOption(city，cityArr[province.value]);if(province.value>=0){city.onchange();//自动添加城市对应区域下拉菜单}else{ country.options.length=0;}};

对象2.2.1对象在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。对象是由属性和方法组成的。属性：事物的特征，在对象中用属性来表示（常用名词）方法：事物的行为，在对象中用方法来表示（常用动词）1.什么是对象2.2.1对象在javascript中的对象表达结构更清晰，更强大，如Lucy的个人信息在对象中的表达结构如下：2.为什么需要对象Lucy.姓名=‘Lucy’；=‘Lucy’;Lucy.性别=‘女’；person.sex=‘女’;Lucy.年龄=‘12’；person.age=‘12’;Lucy.身高=‘156’；person.heigh=‘156’;2.2.2对象的创建对象字面量：就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法。{}里面采取键值对的形式表示。键：相当于属性名；值：相当于属性值，可以是任意类型的值1.利用字面量创建对象varstudent={ name:‘李明’; age:18; sex:’男’;S sayHello:function(){ alert(‘Helloeveryone!’)}; };2.2.2对象的创建Object（）：第一个字母大写newObject（）：需要new关键字使用的格式：对象.属性=值；2.利用newObject创建对象varJim=newObect();J='pink';andy.age=18;Jim.sex='男'；Jim.sayHello=function(){alert（'Helloeveryone!'）；}2.2.2对象的创建构造函数用于创建某一类对象，其首字母要大写构造函数要和new一起使用才有意义3.利用构造函数创建对象functionPerson(name){=name;this.sayHi=function(){ alert（’我的名字叫：’+）； }}varbigboy=newPerson（'大男孩'）；console.log();2.2.3new关键字使用new关键字创建一个新的对象实例：创建一个空的普通JavaScript对象（{}）1将新创建的对象的原型（__proto__）连接到构造函数的原型对象中2将构造函数内部的this关键字指向新创建的对象3执行构造函数内部的代码，初始化新对象的属性和方法4如果构造函数没有显示返回一个对象，则返回新创建的对象52.2.3new关键字//构造函数functionPerson(name,age){=name;this.age=age;}//使用new关键字创建对象varperson1=newPerson("Alice",30);varperson2=newPerson("Bob",25);console.log(person1);//Person{name:'Alice',age:30}console.log(person2);//Person{name:'Bob',age:25}示例：2.2.4遍历对象对象是键值对的集合，通常可能需要遍历它的键（key）、值（value）或者两者。可用for...in语句对数组或者对象的属性进行循环操作。for(varkinobj){console.log(k);//这里的k是属性名console.log(obj[k]);//这里的obj[k]是属性值}for（变量in对象名字）{//在此执行代码}2.2.5内置对象JavaScript中的对象分为3种：自定义对象、内置对象、浏览器对象。内置对象：就是指JavaScript语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）。优点：可帮助我们快速开发。1.概述2.2.5内置对象2.Math对象常用方法功能Math.abs(x)返回一个数的绝对值。Math.ceil(x)向上取整，返回大于等于给定数字的最小整数。Math.floor(x)向下取整，返回小于等于给定数字的最大整数。Math.round(x)四舍五入，返回最接近给定数字的整数。Math.PI圆周率π的近似值，约为3.141592653589793。Math.max(x1,x2,...xn)返回一组数中的最大值。Math.pow(x,y)返回x的y次幂。Math.random()返回一个介于0（包含）和1（不包含）之间的随机浮点数。Math.log(x)返回一个数的自然对数（以e为底）。2.2.5内置对象3.Date对象方法名说明代码getFullYear():获取年份（4位）dObj.getFullYear()getMonth():获取月份（0表示一月，11表示十二月）dObj.getMonth()getDate():获取日期（1-31）。dObj.getDate()getDay():获取星期几（0表示星期日，6表示星期六）dObj.getDay()getHours():获取小时（0-23）dObj.getHours()getMinutes():获取分钟（0-59）dObj.getMinutes()getSeconds():获取秒数（0-59）dObj.getseconds()getMilliseconds():获取毫秒数（0-999）dObj.getMilliseconds()2.2.5内置对象4.String对象方法作用length获取字符串的长度charAt(index)获取index位置的字符，位置从0开始计算indexOf(searchValue)获取searchValue在字符串中首次出现的位置lastindexOf(searchValue)获取searchValue在字符串中最后出现的位置substring(startl,end)截取从start位置到end位置之间的一个子字符串substr(start,length）截取从start位置开始到length长度的子字符串toLowerCase()获取字符串的小写形式toUpperCase()获取字符串的大写形式split(separatorl,limit)使用separator分隔符将字符串分隔成数组，limit用于限制数量replace(str1,str2)使用str2替换字符串中的str1，返回替换结果2.2.5内置对象5.Number对象方法作用MAXVALUE在JavaScnipt中所能表示的最大数值(静态成员)MINVALUE在JavaScript中所能表示的最小正值(静态成员)toFixed(digits)使用定点表示法来格式化一个数值Number对象用于处理整数、浮点数等数值，常用的属性和方法如下所示。动手实践：日历的制作实现思路利用prompt()函数接收用户设置的年份。编写calendar()函数，根据指定的年份生成年历。设计并输出日历的显示样式。获取指定年份1月1日的星期值，获取每个月共有多少天。循环遍历每个月中的日期。将日期显示到对应的星期下面本章小结本节课讲述了JavaScript的数组和对象数据结构，数组的元素类型及常见操作、对象的基本概念、属性和方法等，通过本节课，学习者能够使用数组的常见操作解决实际问题；能够创建自定义对象，并使用对象访问语句进行操作。主讲人：卢秋锦Web前端技术

文档对象模型与浏览器对象模型目录3.1DOM文档对象模型☞点击查看本小节知识架构Window对象3.2☞点击查看本小节知识架构

3.1DOM文档对象模型3.1.1什么是DOM？DOM全称DocumentObjectModel文档对象模型JavaScript中通过DOM来对HTML文档进行操作，只要理解了DOM就可以操作WEB页面。文档：文档表示整个的HTML网页文档 对象：对象表示将网页中的每一个部分都转换为了一个对象模型：使用模型来表示对象之间的关系，这样方便我们获取对象3.1.2什么是DOMHTMLDOMHTML指的是DOM中为操作HTML文档提供的属性和方法。3.1.3HTML元素操作元素的获取方法说明document.getElementById()返回对拥有指定id的第一个对象的引用document.getElementByName()返回带有指定名称的对象集合document.getElementByTagName()返回带有指定标签名的对象集合document.getElementByClassName()返回带有指定类名的对象集合document对象提供了一些用于查找元素的方法，利用这些方法可以根据元素的id、name、和class属性以及标签名称的方式获取操作的元素。3.1.3HTML元素操作2.元素的内容JavaScript中，若要对获取的元素内容进行操作，则可以利用DOM提供的属性和方法实现。分类名称说明属性innerHTML设置或返回元素开始和结束标签之间的HTMLinnerText设置或返回元素中去除文本内容textContent设置或返回指定节点的文本内容方法document.write()向文档写入指定的内容document.writeIn()向文档写入指定的内容后并换行3.1.3HTML元素操作3.元素属性在DOM中，为了方便JavaScript获取、修改和遍历指定的HTML元素的相关属性，提供了操作的属性和方法。分类名称描述属性attribute返回一个元素的属性集合方法setAttribute(name,value)设置或者改变指定属性的值getAttribute(name)返回指定元素的属性值removeAttribute(name)从元素中删除指定的属性3.1.4DOM节点操作文档对象模型（DOM）通过引入nodeType来表示HTML文档中不同节点的类型。由于HTML文档的复杂性，每个节点都被赋予一个特定的nodeType。appendChild()把新的子节点添加到指定节点removeChild()删除子节点replaceChild()替换子节点insertBefore()在指定的直接点前面插入新的子节点createAttribute()创建属性节点createElemnet()创建元素节点createTextNode()创建文本节点getAttribute()返回指定的属性值setAttribute()把指定属性设置或修改为指定的值3.1.5事件处理事件处理指的就是与事件关联的JavaScript对象，当与页面特定部分关联的事件发生时，事件处理器就会被调用。具体步骤：发生事件启动事件处理程序事件处理程序作出反应3.1.5事件处理鼠标事件通过鼠标动作触发的事件。1.鼠标事件类别事件说明鼠标事件onclick鼠标单击时触发的事件ondbclick鼠标双击时触发的事件onmousedown鼠标按下时触发的事件onmouseup鼠标弹起时触发的事件onmouseover鼠标移动到某个设置了此事件的元素上时触发的事件onmousemove鼠标移动时触发的事件onmouseout鼠标从某个设置了此事件的元素上离开时触发的事件3.1.5事件处理键盘事件是指通过键盘动作触发的事件。2.键盘事件类别事件说明键盘事件onkeydown键盘上的某个按键被按下时触发的事件onkeyup键盘上的某个按键被按下后弹起时触发的事件onketpress当输入有效的字符按键时触发的事件3.1.5事件处理鼠标事件通过鼠标动作触发的事件。3.表单事件类别事件说明表单事件onfocus当某个元素获得焦点时触发的事件onblur当前元素失去焦点时触发的事件onchange当前元素失去焦点并且元素内容发生改变时触发的事件onreset当表单被重置时触发的事件onsubmit当表单被提交时触发的事件动手实践：动态添加课程实现步骤：创建响应click事件的按钮；将onClick设置为"addCourseName()"；书写响应onclick的addCourseName()函数。

3.2Window对象window对象在客户端JavaScript中扮演着重要的角色，它是客户端程序的全局（默认）对象，它还是客户端对象层次的根节点，也是JS中最大的对象，它描述的是一个浏览器窗口，window对象表示浏览器中打开的窗口。1.基本概念3.2.1Window对象2.常用属性和方法3.2.1Window对象分类名称说明属性closed返回一个布尔值，该值声明了窗口是否已经关闭name设置或返回存放窗口名称的一个字符串opener返回对创建该窗口的window对象的引用parent返回当前窗口的父窗口self对当前窗口的引用，等价于window属性top返回最顶层的父窗口2.常用属性和方法3.2.1Window对象分类名称说明方法alert()显示带有一段消息和一个确认按钮的警告框confirm()显示带有一段消息以及确认按钮和取消按钮的对话框prompt()显示可以提示用户输入的对话框open()打开一个新的浏览器窗口或查找一个已命名的窗口close()关闭浏览器窗口focus()把键盘焦点给予一个窗口print()打印当前窗口的内容scrollBy()按照指定的像素值来滚动内容scrollTo()把内容滚动到指定的坐标3.窗口的操作3.2.1Window对象实现弹出窗口就需要使用window对象的open方法。open()方法用于打开一个新的浏览器窗口，或者查找一个已命名的窗口。3.窗口的操作3.2.1Window对象open（URL,name,space,replace）URL：指定新窗口要打开网页的URL地址；name：指定被打开新窗口的名称；space：用于设置浏览器窗口的特征（如大小、位置、滚动条等；replace：true表示替换浏览器历史中的当前条目，false（默认值）表示在浏览器历史中创建新的条目。4.定时器3.2.1Window对象JavaScript中可通过window对象提供的方法实现在指定时间后执行特定的操作，也可以让程序代码每隔一段时间执行一次，实现间歇操作。方法说明setTimeout()在指定的毫秒数后调用函数或执行一段代码clearTimeout()清除或取消由setTimeout()方法设置的定时器setInterval()按照指定的周期（以毫秒计）来调用函数或执行一段代码clearInterval()清除或取消由setInterval()方法设置的定时器3.2.2location对象BOM中location对象提供的方法，可以更改当前用户在浏览器中访问的URL，实现新文档的载入、重载以及替换功能。方法与属性说明href返回当前页面的URLpathname()返回当前页面的路径和文件名port()返回web主机的端口（80或443）protocol()返回所使用的web协议（http:或https:）assign()载入一个新的文档reload()重新载入当前文档replace用新的文档替换当前文档3.2.3history对象BOM提供的history对象，保存着用户上网的历史记录，从窗口被打开的那一刻算起。分类名称说明属性length返回历史列表中的网址数方法back加载history列表中的前一个URLforward加载history列表中的下一个URLgo加载history列表中的某个具体页面3.2.4navigator对象Navigator提供了有关浏览器的信息，但每个浏览器中的navigator对象中都有一套自己的属性。下面列举了主流浏览器中的一些方法和属性。

名称说明属性AppCodeName返回浏览器的代码名AppName返回浏览器的名称AppVersion返回浏览器的平台和版本信息cookieEnabled返回指明浏览器中是否启用cookie的布尔值platform返回返回用户操作系统的信息userAgent返回由客户机发送服务器的user-agent头部的值方法javaEnabled()指定是否在浏览器中启用JavataintEnabled()规定浏览器是否启用数据污点(datatainting)3.2.5screen对象每个Window对象的screen属性都引用一个Screen对象。Screen对象中存放着有关显示浏览器屏幕的信息。属性描述availHeight返回显示器屏幕的高度(除Windows任务栏之外)。availWidth返回显示器屏幕的宽度(除Windows任务栏之外)。bufferDepth设置或返回调色板的比特深度。colorDepth返回目标设备或缓冲器上的调色板的比特深度。deviceXDPI返回显示器屏幕的每英寸水平点数。deviceYDPI返回显示器屏幕的每英寸垂直点数。fontSmoothingEnabled返回用户是否在显示控制面板中启用了字体平滑。动手实践：漂浮效果的实现实现步骤：使用document.getElementById获取广告容器的引用；定义变量x和y来追踪广告的当前位置；定义变量speed来设置广告的移动速度；编写moveAd

函数，处理广告位置的更新和边界检查；使用requestAnimationFrame

实现连续的动画效果。本章小结本章主要介绍了文档对象模型（DOM）以及浏览器对象模型（BOM）的基本概念和常见操作，常用事件的调用和事件处理程序的编写，计时器的创建、启动和停止方法，以及计时器的应用场景等。主讲人：卢秋锦Web前端技术

jQuery目录jQuery选择器4.24.1jQuery基础jQuery动画效果4.3☞点击查看本小节知识架构☞点击查看本小节知识架构jQuery事件机制4.4☞点击查看本小节知识架构☞点击查看本小节知识架构

4.1jQuery基础4.1.1

什么是jQuery？jQuery是一款快速、轻巧而功能丰富的JavaScript库。特点和优势：简化的DOM操作事件处理动画和效果Ajax支持跨浏览器兼容性插件开发简洁的语法4.1.2

网页中如何添加jQuery有两个版本的jQuery可供下载：Productionversion-用于实际的网站中，已被精简和压缩。Developmentversion-用于测试和开发（未压缩，是可读的代码）在HTML文档中使用<script>标签引入jQuery文件。本地文件引入<!--下载的jQuery文件应该在相应的路径下--><scriptsrc="path/to/jquery.min.js"></script>4.1.2

网页中如何添加jQuery在HTML文件的<head>部分添加一个指向jQuery库的<script>标签，通过CDN（内容分发网络）引用它。示例：

百度引用的方法。2.通过CDN引入动手实践：我的第一个jQuery程序创建HTML页面，在HTML文档中使用<script>标签引入jQuery文件。1.创建HTML页面<scriptsrc="jquery-1.12.4.js"></script>动手实践：我的第一个jQuery程序2.书写jQuery代码<script>$(document).ready(function(){ alert("欢迎来到jQuery课堂"); });</script>

4.2jQuery选择器4.2.1jQuery语法在jQuery中，基础语法始于定义$，表示jQu

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论