《javascript&jQuery程序设计》教师备课教案.docx
javascript&jQuery程序设计教师备课教案一：Javascript基础【教学目的与要求】1 .知识目标：学生应掌握JaVaSCriPt基本语法，以及各种数据类型的判别和变换2 .能力目标：掌握JaVaSCriPt的网页特效的应用【重点与难点】重点:JaVaSCriPt基本语法，以及各种数据类型的判别和变换难点：JaVaSCriPt的流程控制语句【教学方法及手段】媒体演示法、案例教学法【教学时数】20课时【教学内容与教学过程】一、JavaScript的实现JaVaSCriPt是一种直译式脚本语言，它和JaVa语言不一样，JaVa语言是介于解释型和编译型语言之间的一种语言，在虚拟机上运行，必须经过编译，通过相应平台上的解释器，实现独立于某个特定的平台编译代码的束缚。而JavaScript语言是一种解释性编程语言，其源代码在发往客户执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器解释执行。完整JaVaSCriPt的实现是由以下三个部分组成：ECMAScript:核心标准。D0M：文档对象模型。B0M：浏览器对象模型。1、 ECMAScriptECMAScript是JavaScript的核心标准，它描述了该语言的语法和基本对象。2、 DOMDOM指的是DOCUmentObjectModel（文档对象模型），它是HTML的应用程序接口。DOM将整个HTML页面看作是由各种节点层级构成的结构文档。3、 BOMBOM指的是BrowserObjectModel（浏览器对象模型），可以对浏览器窗口进行访问和操作处理。该模型最早是由IE3.0与NetSCaPeNaVigatOr3.0提供的，目前所有的主流浏览器都支持BOM,但是会有各自独立的实现内容。二、Javascript的使用JavaScript有两种使用方式：一是在HTML文档中直接添加代码；二是将JavaScript脚本代码写到外部的JavaScript文件中，再在HTML文档中引用该文件的路径地址。这两种使用方式的效果完全相同，可以根据使用率和代码量选择相应的开发方式。例如有多个网页文件需要引用同一段JavaScript代码时，则可以写在外部文件中进行引用，以减少代码冗余。R内部JaVaSCriPtJavaScript代码可以直接写在HTML页面中，只需使用script首尾标签嵌套即可。2、 外部JavaScript如果选择将JaVaSCriPt代码保存到外部文件中，则只需要在HTML页面的script）标签中声明SrC属性即可。此时外部文件的类型必须是JaVaSCriPt类型文件（简称为JS文件），即文件后缀名为.js。三、JavaScript语法1、JaVaSCriPt大小写在JavaScript中大小写是严格区分的，无论是变量、函数名称、运算符和其他语法都必须严格按照要求的大小写进行声明和使用。例如变量hello与变量HELLO会被认为是完全不同的内容。2. JavaScript分号很多编程语言（例如C、JaVa和Perl等）都要求每句代码结尾要使用分号（；）表示结束。而JavaScript的语法规则对此比较宽松，如果一行代码结尾没有分号也是可以被正确执行的。3、JavaScript注释为了提高程序代码的可读性，JavaScript允许在代码中添加注释。注释仅用于对代码进行辅助提示，不会被浏览器执行。JavaScript有两种注释方式：单行注释和多行注释。单行注释用双斜杠（/）开头，可以自成一行也可以写在JaVaSCriPt代码的后面。多行注释使用/*开头，以*/结尾，在这两个符号之间的所有内容都会被认为是注释内容，均不会被浏览器所执行。四、JaVaSCriPt代码块和Java语言类似，JavaScript语言也使用一对大括号标识需要被执行的多行代码。五、JavaScript变量1、变量的声明JavaScript是一种弱类型的脚本语言，无论是数字、文本还是其他内容，统一使用关键词var加上变量名称进行声明，其中关键词var来源于英文单词variable(变量)的前三个字母。可以在声明变量的同时对其指定初始值；也可以先声明变量，再另行赋值。由于JavaScript变量是弱类型的，因此同一个变量可以用于存放不同类型的值。例如可以声明一个变量初始化时用于存放数值，然后将其更改为存放字符串。变量的声明不是必须的，可以不使用关键词Var声明直接使用。2、变量的命名规范一个有效的变量命名需要遵守以下两条规则： 首位字符必须是字母(A-Za-Z).下划线J)或者美元符号($)； 其他位置上的字符可以是下划线(_)、美元符号($)、数字(09)或字母(AZaz)。 常用的变量命名方式有CameI标记法、PaSCal标记法和匈牙利类型标记法等。 Camel标记法：又称为驼峰标记法，该规则声明的变量首字母为小写，其他单词以大写字母开头。例如：varmyFirstScript、varmyTest等。 Pascal标记法：该规则声明的变量所有单词首字母均大写。例如：varMyFirstScript>varMyTest等。 匈牙利类型标记法：该规则是在Pascal标记法的基础上为变量加一个小写字母的前缀，用于提示该变量的类型，如i表示整数、s表示字符串等。例如：varSMyFirstScriptsvariMyTest等。六、JavaScript关键字和保留字JavaScript遵循ECMA-262标准中规定的一系列关键字规则，这些关键字不能作为变量或者函数名称。全部关键字共计25个，表41JavaScript关键字一览表breakcasecatchcontinuedefaultdeletedoelsefinallyforfunctionifininstanceofnewreturnswitchthisthrowtrytypeofvarvoidwhilewith如果使用了上述关键词作为变量或者函数名称会引起报错。在ECMA-262中还规定了一系列保留字，这些字是为将来的关键字而保留的单词，同样也不可以作为变量或者函数的名称。全部保留字共计31个，表4-2JavaScript保留字一览表abstractbleanbytecharclassconstdebuggerdoubleenumexportextendsfinalfloatgotoimplementsimportintinterfacelongnativepackageprivateprotectedpublicshortstaticsupersynchronizedthrowstransientvolatile如果使用了上述保留字作为变量或者函数名称会被认为是使用了关犍字,从而一样引起报错。七、JavaScript基本数据类型JavaScript有五种原始类型分别是：Number（数字）、Boolean（布尔值）、String（字符串）、Null（空值）和Undefined（未定义）。JaVaSCriPt提供了typeof方法用于检测变量的数据类型，该方法会根据变量本身的数据类型给出对应名称的返回值。八、JaVaSCriPt对象类型在JaVaSCriPt中，对象类型分为三种：本地对象、内置对象和宿主对象。本地对象（nativeobject）是ECMASCriPt定义的引用类型;内置对象（builtinobject）指的是无需实例化可直接使用的对象，其实也是特殊的本地对象；宿主对象（hostobject）指的是用户的机器环境，包括DOM和BOM。九、文档对象模型DOM1、查找HTML元素在JavaScript中有三种方式可以查找HTML元素： 通过HTML元素的id名称查找； 通过HTML元素的标签名称查找；通过HTML元素的类名称查找。(1)通过id查找HTML元素一般默认不同的HTML元素使用不一样的Id名称以示区别，因此通过id名称找到指定的单个元素。在JaVaSCriPt中语法如下：document.getElementByld("id名称”)；其中getElementByldO方法是遵照驼峰命名法，即第一个单词全小写，后面的每一个单词首字母大写的方式。这种命名方法在JaVaSCriPt中比较普遍。如果未找到该元素，则返回值为null；如果找到该元素，则会以对象的形式返回。(2)通过标签名查找HTML元素HTML元素均有固定的标签名称，因此通过标签名称可以找到指定的单个或一系列元素。在JaVaSCriPt中语法如下：document.getElementsByTagName("标签名称”)；此时方法中的Elements是复数形式，因为要考虑到有可能存在多个元素符合要求。同样如果未找到符合的元素，则返回值为null；如果有多个符合条件的元素，则返回值是数组的形式。(3)通过类名查找HTML元素document.getElementsByClassName()方法可用于根据类名称获取HTML元素。在JaVaSCriPt中语法如下：document.getElementsByClassName("类名称”)；此时方法中的Elements是复数形式，因为要考虑到有可能存在多个元素符合要求。同样如果未找到符合的元素，则返回值为null；如果有多个符合条件的元素，则返回值是数组的形式。十、DOMHTML1 .创建动态的HTML内容在JaVaSCriPt中，使用document,write()方法可以往HTML页面动态输出内容。例如:<body><script>document,write（"Hello2016”）；<script><body>上述代码片段表示将在空白页面上动态输出字符串"Hello2016”。需要注意的是,alertO方法中的换行符n在这里是无效的，如果需要输出换行直接使用HTML换行标签<br>即可。2 .改变HTML元素内容innerHTML可以用于获取元素内容，也可以改变元素内容。使用innerHTML属性获取或更改的元素内容可以包括HTML标签本身。获取元素内容的语法结构如下：var变量名二元素对象.InnerHTML;更改元素内容的语法结构如下：元素对象innerHTML=新的内容；这里的元素对象可以使用document对象的getElementById（"id名称”）方法获取。3 .改变HTML元素属性在JavaScript还可以根据属性名称动态地修改元素属性。其语法结构如下：元素对象attribute=新的属性值；也可以使用SetAttribUte（）方法达到同样的效果。其语法格式如下：元素对象SetAttribute（"属性名称“，"新的属性值”）；H-一、DOMCSSJavaScript还可以改变HTML元素的CSS样式。其语法结构如下：元素对象style.属性二新的值；这里的元素对象可以使用document对象的getElementById（"id名称”）方法获取。属性指的是在CSS样式中的属性名称，等号右边填写该属性更改后的样式值。十二、DOM事件JavaScript还可以在HTML页面状态发生变化时执行代码，这种状态的变化称为DOM事件(Event)o十三、DoM节点使用JavaScript也可以为HTML页面动态地添加和删除HTML元素。1 .添加HTML元素添加HTML元素有两个步骤，先要创建需要添加的HTML元素，然后将其追加在一个已存在的元素中去。使用document对象的CreateElement()方法可以创建新的元素，其语法结构如下：document.CreateElement(”元素标签名”)；使用appendChild()方法可以将创建好的元素追加到已存在的元素中，其语法结构如下：己存在的元素对象.appendChild(需要添加的新元素对象)；2 .删除HTML元素删除已存在的HTML元素也需要两个步骤：首先使用document对象的getElementByld("id名称”)方法获取该元素，然后使用removeChild()方法将其从父元素中删除。其父元素如果有明确的id名称，同样可以使用getElementByld()方法获取。例如，在知道父元素id名称的情况下删除其中id="plw的子元素：vartest=document.getElementByld(,test,)；获取父元素varp=document.getElementByld("plw)；获取子元素test.removeChild(p)；删除子元素若父元素无对应的id名称获取，可以使用子元素的ParentNode属性获取其父元素对象，效果相同。十四、浏览器对象模型BOM浏览器对象模型(BrowserObjectModel,BOM)使JaVaSCriPt可以与浏览器进行交互。BOM中的常用对象如下：window：浏览器窗口对象，其成员包括所有的全局变量、函数和对象。screen：屏幕对象，通常用于获取用户可用屏幕的宽和高。location：位置对象，用于获得当前页面的URL地址，还可以把浏览器重定向到新的指定页面。history：历史记录对象，其中包含了浏览器的浏览历史记录。navigator：浏览器对象，通常用于获取用户浏览器的相关信息。1、WindoW对象在JaVaSCriPt中WindOW对象表示浏览器窗口，目前所有浏览器都支持该对象。JavaScript中一切全局变量、函数和对象都自动成为WindOW对象的内容。2、Sereen对象在JaVaSCriPt中window,screen对象可用于获取屏幕的可用宽度和高度。该对象在使用时通常可以省略WindOW前缀，简写为SCreen。screen对象的常用属性如下：availWidth：表示屏幕的可用宽度，默认单位为像素（px）。avaiIHeight:表示屏幕的可用高度，默认单位为像素（px）。其中avail前缀来源于英文单词available（可用的）。可用宽度或高度指的是去除界面上自带的内容（例如任务栏）后的实际可使用的宽高。3、LoCatiOn对象在JavaScript中window,location对象可用于获取当前页面的URL或者将浏览器重定向到新的页面。该对象在使用时通常可以省略WindOWS前缀，简写为IoCatiOn。location的href属性可以用于重定向到其他URL地址。例如：location,href（"a.html,）；4、HiStory对象在JavaScript中window,history对象可用于获取当前页面的URL或者将浏览器重定向到新的页面。该对象在使用时通常可以省略WindoWS前缀，简写为histo”。通常使用history对象实现浏览器上返回和前进按钮的相同功能。相关方法解释如下：backO：返回上一个页面，相当于点击了浏览器上的后退按钮。forwardO：前进到下一个页面，相当于点击了浏览器上的前进按钮。5、NaVigator对象在JavaScript中window,navigator对象可用于获取用户浏览器的一系列信息，例如浏览器的名称、版本号等。该对象在使用时通常可以省略window前缀,简写为navigatoro二、JQUery基础jquery框架定义：在JaVaSCriPt的基础上，把常用操作进行封装。使得页面特效实现更加简单,快速。选择器可以找到页面元素选择器对象的方法，可以实现各种常用操作图片轮换力口载iquery,js<scripttype=wtext/javascript,Src="js文件的路径jquery.jsa><script>选择器$（“"）工厂函数ID选择器$（"#标签id值”）类别选择器$（".class属性值”）标记选择器$（“标记名称”）属性选择器$（"标签名称二'标签属性值'”）位置选择器$（“：位置信息”）后代选择器$（“选择器1选择器2”）子代选择器$（“选择器1>选择器2>"）ID选择器$（"#标签id值“）< （"#P1”）找到的是一个P标签< （"#P2”）找到的是一个P2标签< （"#P3”）找到的是一个P3标签Html：< pid="pl”>pl<p>< pid="P2">p2<p>< pid="P3">p3<p>小案例：<body>< pid=”pl,>pl<p>< pid="P2">p2<p><pid="p3”>p3<p><body><script>VarObI=$("#P1”)；Obl.css(border,“Ipxsolidorange,)；<script>类别选择器$(“.class属性值")$(".cl”)找到的是一个P标签$(".c2”)找到的是第三个P标签Html：< pclass=,cl”>pl<p>< pcIass=,cl"id="p2”>p2<p>< pcIass=,C2"id="p3”>p3<p>小案例：<body>< pclass="cl,>pl<p>< pclass="cl,id="p2”>p2<p><pclass="C2"id="P3”>p3<p><body><script>$(".cl”).css(border,Ipxsolidred,)；<script>标记选择器$(“标记名称”)$("P")找到所有的P标签Html:<div>divl<div>< pclass="cl”>pl<p>< pclass="cl,id="p2”>p2<p>< pclass="C2"id="P3”>p3<p>小案例：<body><div>divl<div>< pclass=,cl,>pl<p>< pcIass=,cl,id="p2”>p2<p><pclass="C2"id="P3”>p3<p><body><script>$("p").css(border,Ipxsolidred”)；<script>属性选择器$("属性名='值')$("属性名值'”)$(“属性名$='值'")$("属性名*='值'")HTML：< ahref=whttp：/w>百度<a>< ahref="a.phpw>A<a>< ahref="b.html,>B<a>< ahref=wc.php">C<a>< ahref="http：wWW,>QQ<a>小案例：<body>< ahref=whttp：/w>百度<a>< ahref=,a.phpw>A<a>< ahref="b.html,>B<a>< ahref=wc.php">C<a><ahref="http：wWW,>QQ<a><body><script>$("href三,a.php,").css(border,”Ipxsolidred")；$("href=,http,).css(iborder,”Ipxsolidred")；$("href$=,php,).css(iborder,”Ipxsolidred”)；$("href*三,a,).css(iborder,"Ipxsolidred”)；<script>位置选择器位置选择器选择第,个S(wSelectorfirsr)选择最后一个SCSeIeCtorIaSf)选择价SCSCSeteetOrOdcr)偶数行SCseIectoreven")获取指定位置SCSeIectOreq(nF)大于指定位SSCseIectorgt(n)")小于指定位BtScSeleetOrlt(n)HTML:<ahref=http/wwwbaiducom">BAIDU<a><ahref="aphp">A<a><ahref=b,htm>B<a><ahref="c.php">C<a><ahref=httpwwwqq.m>QQ<a>小案例:7 <nead>8 <body>9 <href=,'http:/">BAIDU</>10 <ahref=,'a.php,*>A</>11 <href="b.html">B</>12 <href=,'c.php,>>C</>13 <href=*'http:/www.qqecom">QQ<>14 </ody>15 </lm>16 <type=,'te×t/javascript">17 找第一个18 /$(Ma:first*).css(,border,*,lpxsolidred");19 找最后一个20 /$(Ma:last*').css(,border,lpxsolidred”)；21 /$(Ma:evenH).css(*border,'lpxsolidred");22 /$(,a:eq(l)',).css("border°,Ipxsolidred°);23 (azgt(l),).css(,border'''lpxsolidred”)；24 <script>代选择后代选择器(符合选择器其中之一)SC选择器选择器")$C#ul1li)HEL:<uld=ul><fc>Li-1<><b>U2<fc><i>U3<ul><li>U-a-1<li><li>L>-a-2<i><li>Li-3-3<i><ul><><ul>小案例:<.><ulid=t'ull,'>< Ii>Li-l<li>< li>Li-2</< i>Li-3<ul>< >Li-3-l</；>< li>Li-3-2</>< >Li-3-3</></.；><Ji><ul><ody></'>-type=,'te×t/javascript">li").css("border'''lpxsolidred");<s：:,>子代选择器子代选择器SC选择器>选择器>")S(W1>li")HTML:<ulid="ul1w><li>Li-1<li><li>U-2<li><li>Li-3<ul><li>Li-3-1<li><li>Li-3-2<i><li>Li-3-3<i><ul><li><ul>小案例:<head><body></><<,type=,te×t/javascript,>：(,ull>li,').css(,'border','lpxsolidred");<script>九、标签内容操作 $(选择器)val即可设置默认值，又可获取默认值 $(选择器)html(值) $(选择器)text(值D例子：注册表单验证<!DOCTYPEhtml><html><head><metacharset=,utf8”><title><title><scripttype="text/javascript,Src="js/jquery-3.4.I.js"><script><scripttype="text/javascript,src=j,js/jquery-3.4.1.min.jsw><script><script>functionCheckUsername()对用户名进行验证varUsername=S("name='username'").val()；varre=/azAZazAZ_0-93,19$/.test(username)；if(re)$(,username,).html('用户名合法')；returntrue；else$(,username,).html('用户名格式错误')；returnfalse；functionCheckPassword()varV=$("name三,password,).val()；if(cS6,20)$/.test(v)$("password").html('密码格式正确')；returntrue；else$(,#m_passwordw).html('密码格式错误')；returnfalse；functionCheckRepassword()varV=$("name='password'").val()；varVI=$("name=1repassword,).val()；if(v=vl)$("repassword,).html('密码验证成功')；returntrue；else$(,repassword,).html('密码验证失败')；returnfalse；<script><head><body><tableclass=,tlwwidth=w100%w><tr>< tdcolspan=,3”>< hl>会员注册<hl><td><tr><tr>< tdwidth="80,>用 ； ； ；户 ； ； ；名<td>< tdWidth="170"Xinputtype="textwOnbIUr="CheckUsername()name=username, ><td>< td><divclass="message,id="musername,请输入4到20位由英文字母数字和下划线组成的字符串，且数字不能作为开头XdivXtd><tr><tr><td>密 ； ； ； ； ； ； ； ； ；码<td><td><inputtype=,password,onblur=,CheckPassword()name="password,><td><td><divclass="message,id="m_password”>非空白字符620位<div><td><tr><tr><td>确认密码<td><td><inputtype="password,onblur=,CheckRepassword()name="repassword"><td><td><divclass="message,id="mrepasSwordw>请确认密码<div><td><tr><tr><tdcolspan=,3wXinputtype=,submit,VaIUe="注册”><td><tr><table><body><html>标签属性操作$（选择器）attr（属性名,值）title,t注：如果是设置title属性的值，后面要跟第二参数。不加第二参数是获取属性的值，加上第二参数，是设置属性的值4 <metaCharSet="UTF-8”>5 <>attr属性操作</><scripttype=',te×t/javascript"src="./js/jquery.js"><<scripttype三,text/javascript'*>8 <(function()S(*ullliu).each(function(inde×)""is)attr('title'J我是第”(index)“个“)；I】)12 )13 <script>14 <hea0><txly>1.6<ulid=-ull,>17<>li-l<>18<>li-2<>19<li>li-3<li>八<>li-4<>n<li>li-5<li>< 2</.>注：this是指节点对象，不能直接使用attr属性，要加上$OH一、jQueu实现图片切换方法一：< !DOCTYPEhtml><html><head>< metacharset=,utf8”><title><title><style>< PiCLiStwidth：300px；height：200px；position：relative；icListdivwidth：300px；height：200px；position：absolute；icListulposition：absolute；bottom：5px；right：8px；list-style：none；#PiCLiStulIifloat：left；width：30px；text-align：center；icListulIiadisplay：block；width：20px；text-decoration：none；text-align：center；color：white；padding：5px；.activebackground：red；)<style><scriptsrc=wjs/jquery-3.4.1.jsw><script><head><body><divid=wpicList,><div><imgSrc="img/songl.jpg"><div><div><imgsrc=wimgsong2.jpgw><div><div><imgSrc="img/schoolnewsl.jpg"><div><ulid="itemlist”><lititle="1"CIaSS="active”Xahref="#”>l<a><li><lititle=,2"class="“Xahref="#”>2<a><li><lititle="3"class="“<ahref="中'>3<a><li><ul><div><body><script>varindex=0;varintervalId=SetInterval(changeling,1000)；functionchangelmg()$(,ttpicListdivw).css("display"，"none")；$(,icListdiv").eq(index).css("display”,”block”)；$(,ftitemlistIi,).removeClass("active")；$(,ItitemlistIi,).eq(index).addClass("active,)；index=index+l；if(index=3)index=0;$(,picListdiv").mouseover(function()clearinterval(intervalld)；).mouseout(function()intervalId=SetInterval(changelmg,1000)；)$(,ItitemlistIi,).mouseover(function()$(,SitemlistIi,).removeClass("active,)；$(this).addClass("active”)；index=$(this).attr("title”)1；$("#PiCLiStdiv").css("display,”none”)；$(,ttpicListdivw).eq(index).css("display,”block")；)<script><html>方法二:<!DOCTYPEhtml><html><head><metacharset=,utf8”><title><title><scripttype=,text/javascript,Src="js/jquery-3.4.I.js"><script><scripttype="text/javascript,src=j,js/jquery-3.4.1.min.jsw><script><style>#imglwidth：300px；height：200px；position：relative；的Ingldivwidth：20px；height：20px；color：white；text-align：center；position：absolute；bottom：8px；font-weight：bold；<style><script>vark=0；vararr='img/schooInewsl.jpg,'img/songl.jpg,'imgsong2.jpg'；每过1秒，把arr中的值赋给img的src属性functionchangeSrc()k+；if(k>2)k=0;varpath=arrk；$(,#imglimg").attr('src',path)；改变子DlV的效果$(,#imgldiv").css(,background1,)；$(,#imgldiv：eq("+k+w)").css(,background,orange,)；SetTimeout(changeSrc,1000)；$(function()SetTimeout(changeSrc,1000)；)<script><head><body><divid="imgl”><imgs
