欢迎来到冰点文库! | 帮助中心 分享价值,成长自我!
冰点文库
全部分类
  • 临时分类>
  • IT计算机>
  • 经管营销>
  • 医药卫生>
  • 自然科学>
  • 农林牧渔>
  • 人文社科>
  • 工程科技>
  • PPT模板>
  • 求职职场>
  • 解决方案>
  • 总结汇报>
  • ImageVerifierCode 换一换
    首页 冰点文库 > 资源分类 > DOCX文档下载
    分享到微信 分享到微博 分享到QQ空间

    JavaScript DOM编程艺术 笔记3Word格式.docx

    • 资源ID:6568684       资源大小:948KB        全文页数:48页
    • 资源格式: DOCX        下载积分:3金币
    快捷下载 游客一键下载
    账号登录下载
    微信登录下载
    三方登录下载: 微信开放平台登录 QQ登录
    二维码
    微信扫一扫登录
    下载资源需要3金币
    邮箱/手机:
    温馨提示:
    快捷下载时,用户名和密码都是您填写的邮箱或者手机号,方便查询和重复下载(系统自动生成)。
    如填写123,账号就是123,密码也是123。
    支付方式: 支付宝    微信支付   
    验证码:   换一换

    加入VIP,免费下载
     
    账号:
    密码:
    验证码:   换一换
      忘记密码?
        
    友情提示
    2、PDF文件下载后,可能会被浏览器默认打开,此种情况可以点击浏览器菜单,保存网页到桌面,就可以正常下载了。
    3、本站不支持迅雷下载,请使用电脑自带的IE浏览器,或者360浏览器、谷歌浏览器下载即可。
    4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩,下载后原文更清晰。
    5、试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓。

    JavaScript DOM编程艺术 笔记3Word格式.docx

    1、 几种主要的数据类型:字符串:由零个或是多个字符构成,包括(但不限于)字母,数字,标点符号和空格。字符串必须包含在引号里,单引号或是双引号都可以,可以自行选择,最好是根据字符串的字符来选择,字符串包含单引号,整个字符串就用双引号,反之亦然。也可以用反斜线对字符进行转义。 Var mood=dont ask;数值:给变量赋一个数值,不用限定它必须是一个整数。允许小数点,也就是浮动数,也可以是个负数加上号布尔值:只有两个可选值true和false,不是字符串,千万不要用引号括起来,var married=true;数组:字符串,数值和布尔值都是标量。,标量的任意时刻都只有一个值,如果想用一个变量来

    2、存储一组值,就需要使用数组。数组就是用一个变量表示一个值得集合,集合中的每个值都是这个数组的一个元素。 Var beatles=Array(4) 4是数组的元素个数 也可以不给出元素的个数。向数组里添加元素成为填充。要给出新元素的值,还需要给出新元素在数组中的存放位置,这个位置就是这个元素的下标。数组里一个元素一个下标。下标必须用方括号括起来,从0开始算起: arrayindex=element; 也可以声明数组的同时对它进行填充,元素间用逗号隔开: var beatles=Array(”john”,”paul”,”george”,”ringo”);会自动分配下标 有时不必明确的表明是在创建数

    3、组,只需用一对方括号把各个元素的初始值括起来就可以了:var beatles=”john”,”paul”,”george”,”ringo” 数组的元素不一定是字符串,布尔值和数值都可以是数组的元素。三种类型的混合也是可以的,实际上变量,另一个数组的元素,另一个数组都可以是数组的元素。Beatles01数组包含数组时的取值方法。关联数组:就是数组元素的下标不是数字而是字符串。此时代码更具可读性。对象:与数组类似,也是使用一个名字表示一组值。兑现的每个值就是对象的每一个属性。 Var lennon=object(); lennon.name=”John”; lennon.year=1940; le

    4、nnon.living=false;创建对象使用object关键字,他不是用方括号和下标来获取元素,而是想任何JavaScript对象一样,使用点号来获取属性 简洁的语法,即花括号语法: propertyName:value; propertyName:比如lennon对象 var lennon=name:”John”,year:1940,living:false; 属性名与JavaScript变量的命名规则有相同之处,属性值可以是任何JavaScript值,包括其他对象。用对象来代替传统数组的做法意味着可以通过元素的名字而不是下标数字来引用它们。这大大提高了脚本的可读性。Var beatle

    5、s=; beatles.vocalist=lennon; 这样beatles.vocalist.name的值是“john”了操作: 计算和处理数据算术操作符:操作符是JavaScript为完成各种操作而定义的一些符号。+-*/分别是加减乘除。不仅是数值,变量也可以进行操作。加号+ 比较特殊,可以用于连接字符串,甚至是数字和字符串的连接,JavaScript是一种弱类型语言是可以的,此时数值会自动转化为字符串。数值和字符串连接到一起结果是一个更长的字符串。当是连接两个数值时,结果将是两者的和。另一个非常有用的快捷键操作就是+=,一次完成“加法和赋值(或是拼接和赋值)”var year=2010;

    6、 var message=”the year is”;message+=year; 执行结果是the year is 2005.2.4条件语句JavaScript使用条件语句来做判断。可以在脚本中设置条件,只有满足了条件才能让更多的语句得到执行。If(条件)条件满足时才能执行的语句; 条件的求值结果永远是一个布尔值,只能是true或false。有时候,只有一条语句时,花括号可以省略。后面可以跟着一个else语句在条件是false时执行。If(12)alert(“the world has gone mad!”);elsealert(“All is well with the world”);2

    7、.4.1 比较操作符大于, 小于=,小于或等于=,等于号是=,单个等号=,是完成赋值操作的。不等于符号是由一个感叹号和一个等号构成的(!=)相等操作符=并不表示严格相等,比如false和null会被当做是相等的,严格相等是=,同时严格不等于是(!=)2.4.2逻辑操作符逻辑操作符的对象是布尔值, 逻辑与&,逻辑或|,逻辑非!,逻辑非作用于单个逻辑操作数,其结果是操作数所取得值取反。2.5 循环语句循环语句可以多次执行同一个代码块,只要条件得到满足,包含在循环语句里的代码就将重复地只想下去。知道条件结果为false。2.5.1 while循环While(条件)执行语句; 条件满足时,会一直执行下

    8、去。关键字在于循环对条件的影响,否则可以一直执行下去。Do.while中,循环至少执行一次,先执行在判断条件。Do执行语句;while(条件);2.5.2for循环For循环实际上是while循环的一种变体。用for循环来重复执行一些代码的好处是循环控制结构更加清晰。与循环有关的所有内容都包含在for语句的圆括号部分。最常用的用途之一就是对某个数组里的全体元素进行遍历处理。2.6函数如果需要多次使用同一段代码,可以把它们封装成一个函数。函数就是一组允许在你的代码里随时调用的语句。事实上,每个函数实际上是一个短小的脚本。Fnction shout()var beatles=Array(“a”,”

    9、b”,”c”,”d”);For(var count=0;countbeatles.length;count+) alert(beatlescount);这个函数的循环语句将依次弹出对话框来显示beatles乐队成员的名字。现在,如果想在自己的脚本里执行这一动作,可以随时使用如下的语句来调用这个函数: shout();每当需要反复做一件事时,都可以利用函数来避免重复键入大量的内容。不过,函数的真正威力体现在,你可以把不同的数据传递给他们,而他们将使用这些数据区完成预定的操作。我们把传递给函数的数据成为参数(argument)。Function name(参数)执行语句;JavaScript提供了

    10、很多内建函数,如alert。在定义函数时,你可以为它声明任意多个参数,只要用逗号把他们分隔开来就行。在函数的内部,你可以像使用普通变量那样使用它的任何一个参数。传递俩个参数给函数,函数将对他们进行乘法元算:Function multiply(num1,num2)Var total=num1*num2;Alert(total);调用函数 multiply(10,2);如果这个函数能把结果返回给调用这个函数的语句往往会更有用。函数不仅能接收数据,而且能返回数据。我们完全可以让一个函数返回数值,字符串,数组和布尔值。这就需要return:Funct ion multiply(num1,num2)va

    11、r total=num1*num2; return total;函数的真正价值体现在,我们还可以把他们当做一种数据类型来使用,这意味着可以把一个函数的调用结果赋给一个变量:在命名变量的时候,用下划线来分割各个单词,在命名函数时,从第二个单词把每个单词的第一个字母大写(即驼峰命名法),这样就可以一眼看出那个是变量,那个是函数。函数名字也不能包含空格。变量的作用域全局变量可以在脚本中的任何位置被引用,作用域是整个脚本。局部变量值存在于声明它的那个函数的内部,在函数外是无法饮用的。仅作用域特定的函数。如果在某个函数中使用了var,那个变量就将被视为一个局部变量。只存在于这个函数的上下文中,反之,没有

    12、var,那个变量就被视为一个全局比阿奴变量,如果脚本里已经存在一个与之同名的全局变量,这个函数就会改变那个全局变量的值。Function square(num)total=num*num; Var tatal=50; var number=square(20); alert(total):本来是让square()函数只把它计算出来的平方值返回给变量number,但因为未吧函数内部的total设为局部变量,这个函数把名字同样是他他俩的那个全局变量的值也改变了。函数在行为方面应该像一个自给自足的脚本,在函数内部明确声明局部变量,就能避免任何形式的二义性隐患。2.7对象对象是自包含的数据集合,包含在

    13、对象里的数据可以通过两种形式访问属性和方法:属性是隶属于某个特定对象的变量;方法是只有某个特定对象才能调用的函数;对象就是由一些属性和方法组合在一起而构成的一个数据实体 方法和属性全部集合在一起,就是对象了 object.属性 object.方法 (调用方法)实例:为了使用person对象来描述一个特定的人,需要创建一个person对象的实例。实例就是对象的具体个体。实例除了具有对象的属性和方法外,还有别的New关键字创建 var Jeremy=new person;可以利用对象的属性来检索关于jeremy的信息 jeremy.age Jeremy.mood2.7.1 内建对象内建对象就是Ja

    14、vaScript预先定义好的对象 数组就是 我们用new关键字去初始化一个数组,其实就是在创建一个array对象的新实例 var beatles= new Array();Math对象的round方法可以把十进制数值舍入为一个与之最接近的整数Date对象可以用来存储和检索与特定日期和时间有关的信息,创建date新实例时,JavaScript自动使用当前日期和时间对它进行初始化:var current_date=new Date();还有getDay(),getHours(),getMonth()系列方法,供对象和实例调用 var today=current_date.getDay();2.7.

    15、2宿主对象不是由JavaScript语言本身而是由它的运行环境提供的,预先定义好的其他对象。具体到web应用,这个环境就是浏览器。由浏览器提供的预设定义对象被称为宿主对象。如Form,Image,Element和document,document可以获得网页上任何一个元素的信息。第3章 对象的三种类型:用户定义对象:由程序员自行创建的对象内建对象:内建在语言里对象,如,和宿主对象:由浏览器提供的对象(最初脚本中已能用了,最基础的如)我们的主要精力在浏览器窗口内的网页上,document对象的主要功能就是处理网页内容。Document的对象和方法及其重要。节点文档是由节点构成的集合,只不过此时的

    16、节点是文档树上的树枝和树叶而已。主要有三种:元素节点,文本节点和属性节点3.4.1元素节点 Dom的原子是元素节点,标签的名字就是元素的名字。3.4.2文本节点:既是文档中文本元素3.4.3属性节点 属性节点用来对元素做出更具体的描述,几乎所有的元素都有一个title的属性 title=“*”就是一个属性节点3.4.5获取元素 有3种DOM方法可获取元素节点,分别通过ID,标签名和class1.getElementById 区分大小写 只有一个参数既是ID的名称 document.getElementById(id)Typeof操作符可以告诉我们它的操作数是一个字符串,数值,函数,布尔值还是对

    17、象。事实上,文档中的每一个元素都是一个对象。2.getElementByTagName 返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素,也只有参数,既是标签名 document.getElementByTagName(“tag”);但是好像标签名要带引号,不然好像不起作用(必须带上) 通配符*号,也可以作为参数,只是要加引号,以此与乘法操作符,有所区别。并且可以查到所有的元素 document.getElementByTagName(”*”)3.getElementByClassName 接受一个参数既是类名,返回结果也是一个数组。就算只有一个元素,也是数组。并且要用引号括主

    18、,可能是参数值字符串的原因,所有要用引号吧。也可以查找多个类名,不同的类用空格分隔就行了。并且类名的顺序不重要,就算元素中还有其他的类名也不和重要。三种方法可以混合使用,var shopping=document.getElementById(“purchase”); Var sales=shopping.getElementByClassName(“sale”);其中getElementByClassName只有在比较新的浏览器中才能用,有一些替代方法Function getElementByClassName(node,classname)If (node. getElementByCla

    19、ssName)Return node. getElementByClassName (classname);Var results=new Array();Var elems=node. getElementByClassName(“*”);For (var i=0;ielems.length;i+)If(elemsi.className.indexof(classname)!=-1)Resultsresults.length=elemsiReturn results;这个getElementByClassName函数接受两个参数。第一个node表示Dom树中的搜索起点,第二个classnam

    20、e就是要搜索的类名。如果传入节点上已经存在了适当的getElementByClassName函数,那么这个新函数就直接返回相应的几点列表。如果getElementByClassName函数不存在,这个函数就会循环遍历所有标签,查找带有相应类名的元素。(这个例子不适合多个类名)替代上面的函数:Var shopping=document.getElementById(“purchase”);Var sales=getElementByClassName(shopping,”sales”);indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. 如果要检索的字符串值没有出现,则该

    21、方法返回 -1。3.5获取属性3.5.1 getAttribute 只有一个参数要查询的属性名 getAttribute不属于document对象,所以不能通过document来调用,只能通过元素节点调用。还可以和document方法一起使用 用if语句来验证条件,if(something)和if(something!=null)两者作用是一样的,但是前者比较简洁啊 if(title_text) alert(title_text);3.5.2 getAttribute 修改元素节点的属性 object.setAttribute(属性,值)可以设置根本没有的属性,此时完成两种操作创建属性和修改属

    22、性 若是存在的属性,设置后将会被覆盖。 但是修改后在浏览器查看源代码是仍是之前的属性:这有由于D的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。的真正威力:对页面进行刷新缺不需要再浏览器里刷新页面。第章案例研究:图片库事件处理函数在特定事件调用特定的JavaScript代码。需要注意的是showpic()函数需要一个参数:一个带有href属性的元素节点参数。当我们把onclick事件处理函数嵌入到一个连接中时,需要把这个连接本身作showpic函数的参数。有个简单有效的方法可以做到这一点:使用this关键字。这个关键在这里的含义是“这个对象”。具体到这个例子,thi

    23、s表示“这个元素节点”:showpic(this)事件=“JavaScript语句” 可以把任意数量的JavaScript语句放在引号之间,用分号隔开即可。 Onclick=”showpic(this)”;4.4.1 childNodes属性 可以用来获取任何一个元素的所有子元素,它是一个包含这个元素全部子元素的数组想让函数在页面加载时执行,就需要使用onload事件处理函数Window.onload=countBodyChidren; 记住函数后面不加小括号的4.4.2 nodeType属性 每个节点都有nodeType属性,这个属性让我们知道自己正在与哪一种节点打交道,差劲的是nodeTy

    24、pe的值并不是英文。 Node.nodeType 获取节点类型结果是数值共12种,其中3种具有使用价值:元素节点的nodeType的属性值是1. 属性节点的nodeType的属性值是2. 文本节点的nodeType属性值是3.4.4.5 nodeValue属性 用来得到(和设置)一个节点的值 node.nodeValue 但是得到的并不是包含在node中的文本,我们想要的是他的第一个子节点Node。childNodes0.nodeValue4.4.6 firstChild和lastChild node. firstChild和node.childNodes0对应Node.childNodesn

    25、ode.childNodes.length-1和node. lastChild基本是等价的第5章 最佳实践平稳退化:确保网页在没有JavaScript的情况下也能正常工作向后兼容性:确保老版本的浏览器不会因为你的JavaScript脚本而死掉性能考虑:确保脚本执行的性能最优平稳退化JavaScript使用window对象的open()方法来创建新的浏览器窗口,有三个参数window.open(url,name,features)三个参数都是可选的url是想在新窗口里打开的网页的url地址,如不写,就会弹出一个空白页name是弹出的新窗口的名称。可以在代码里通过这个名字与新窗口进行同信。Feat

    26、ure是一个以逗号分割的字符串,其内容是新窗口的各种属性。新窗口的尺寸(宽高),启用和禁用各种浏览器功能(工具条,菜单条,初始显示位置)Open()方法是使用BOM的一个好案例,他对文档内容无任何影响(那是的地盘),这个方法只与浏览环境(具体到这个例子,就是对象)有关。Function popup(winURL)Window.open(winURL,”popup”,”width=320,height=480”);这个函数将打开一个320*480 的新窗口“popup” 将此函数村委外部文件。如何调用此函数。一个方法是伪协议5.2.1 “Javascript:”伪协议“真”协议用来在因特网上的计算机之间传输数据包,如HTTP协议(http:/),FTP协议(ftp:/)等。伪协议是一种非标准化的协议。“Javascript:”伪协议让我们通过一个连接来调用JavaScript函数。Example这条语句在支持”javascript:”伪协议的浏览器中运行正常,较老的浏览器则会去阐释打开那个连接但失败,支持这种伪协议但禁用JavaScript功能的浏览器会失眠也不做。总之,在HTML文档里通过“javascript:”伪协议吊桶JavaScript代码的做法非常不好。5.2.2 内嵌的事件处理函数图片库脚本中见识了事件处理函数。Onclick最为属性嵌入


    注意事项

    本文(JavaScript DOM编程艺术 笔记3Word格式.docx)为本站会员主动上传,冰点文库仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知冰点文库(点击联系客服),我们立即给予删除!

    温馨提示:如果因为网速或其他原因下载失败请重新下载,重复下载不扣分。




    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

    copyright@ 2008-2023 冰点文库 网站版权所有

    经营许可证编号:鄂ICP备19020893号-2


    收起
    展开