JavaScript学习笔记 (2).docx
#今日内容：1. JavaScript ：1. ECMAScript ：2. BOM ：3. DOM ：1 .事件# DOM简单学习：为了满足案例要求*功能：控制html文档的内容*获取页面标签（元素）对象：Element* document.get日ementByld（”id值）通过元素的id获取元素对象*操作Element对象：1 .修改属性值：1 .明确获取的对象是哪一个？2 .查看API文档，找其中有哪些属性可以设置,修改标签体内容：* 属性：innerHTML.获取元素对象1 .使用innerHTML属性修改标签体内容#事件简单学习*功能：某些组件被执行了某些操作后，触发某些代码的执行。*造句：XXX被XXX,我就XXX*我方水晶被摧毁后，我就责备对友。大敌方水晶被摧毁后，我就夸奖自己。*如何绑定事件.直接在html标签上，指定事件的属性（操作），属性值就是js代码1 .事件:onclick-单击事件.通过js获取元素对象，指定事件属性，设置一个函数*代码：<body><img id="light“ src二"img/off.gif" onclick="fun（）;"><img id="light2" src="img/off.gif"><script>function fun（）alert（'我被点了'）;alert（'我又被点了）;function fun2()alert('咋老点我?)1.获取Iight2对象var Iight2 = document.getElementByld("light2");2.绑定事件Iight2.onclick = fun2;</script></body>*案例1：电灯开关<!DOCTYPEhtml><html lang="en"><head><meta charset="UTF-8">title电灯开关</head><body><img id="light" src=',img/off.gif"><script>/*分析：L获取图片对象.绑定单击事件2 .每次点击切换图片*规那么：*如果灯是开的on,切换图片为off*如果灯是关的off,切换图片为on使用标记flag来完成*/1.获取图片对象var light = document.get日ementByld("light”)；var flag = false;代表灯是灭的。off图片 2.绑定单击事件 light.onclick = function()if(flag)判断如果灯是开的，那么灭掉 light.src = "img/off.gif"flag = false;else如果灯是灭的，那么翻开light.src = "img/on.gif"flag = true;)</script></body></html># BOM:1 .概念：Browser Object Model浏览器对象模型*将浏览器的各个组成局部封装成对象。2 .组成：* Window ：窗口对象Navigator ：浏览器对象夫Screen :显示器屏幕对象History ：历史记录对象* Location :地址栏对象3 . Window ：窗 口对象.创立1 .方法.与弹出框有关的方法：alert()显示带有一段消息和一个确认按钮的警告框。confirm。显示带有一段消息以及确认按钮和取消按钮的对话框。* 如果用户点击确定按钮，那么方法返回true* 如果用户点击取消按钮，那么方法返回false prompt()显示可提示用户输入的对话框。* 返回值：获取用户输入的值.与翻开关闭有关的方法：close()关闭浏览器窗口。*谁调用我，我关谁open()翻开一个新的浏览器窗口*返回新的Window对象.与定时器有关的方式setTimeout()在指定的毫秒数后调用函数或计算表达式。*参数：1 .js代码或者方法对象.毫秒值*返回值：唯一标识，用于取消定时器clearTimeoutO 取消由 setTimeout()方法设置的 timeout。setlnterval()按照指定的周期(以毫秒计)来调用函数或计算表达式。 clearlnterval()取消由 setlntervalQ 设置的 timeout。3 .属性：1 .获取其他BOM对象：historylocationNavigatorScreen:2 .获取DOM对象document4 .特点Window对象不需要创立可以直接使用window使用。window.方法名();* window引用可以省略。方法名()；4. Location ：地址栏对象.创立(获取)：1. window.locationlocation1 .方法：* reload。重新加载当前文档。刷新.属性* href设置或返回完整的URLo5. History ：历史记录对象.创立(获取)：1. window.historyhistory1 .方法：* back()加载history列表中的前一个URL。* forward() 加载history列表中的下一个URL。* go(参数)加载history列表中的某个具体页面。*参数：*正数：前进几个历史记录*负数：后退几个历史记录3.属性：* length返回当前窗口历史列表中的URL数量。# DOM ：*概念：Document Object Model文档对象模型*将标记语言文档的各个组成局部，封装为对象。可以使用这些对象，对标记语言 文档进行CRUD的动态操作* W3C DOM标准被分为3个不同的局部：*核心DOM -针对任何结构化文档的标准模型Document ：文档对象* 日ement :元素对象Attribute :属性对象* Text ：文本对象* Comment:注释对象文Node：节点对象，其他5个的父对象*XMLDOM -针对XML文档的标准模型* HTML DOM -针对HTML文档的标准模型*核心DOM模型：* Document ：文档对象1.创立(获取)：在html dom模型中可以使用window对象来获取1. window.documentdocument2.方法：1,获取Element对象：1. getElementByld() :根据id属性值获取元素对象。id属性值一 般唯一2. get日ementsByTagName()：根据元素名称获取元素对象们。返回值 是一个数组3. get日ementsByClassName():根据Class属性值获取元素对象们。返 回值是一个数组4. getElementsByNameO：根据name属性值获取元素对象们。返回 值是一个数组.创立其他DOM对象： createAttribute(name) createComment() create 日 ement() createTextNodeQ2 .属性* Element :元素对象1 .获取/创立：通过document来获取和创立.方法：1. removeAttribute():删除属性setAttribute()：设置属性* Node ：节点对象，其他5个的父对象*特点：所有dom对象都可以被认为是一个节点*方法：* CRUD dom 树：* appendChild()：向节点的子节点列表的结尾添加新的子节点。* removeChildO :删除(并返回)当前节点的指定子节点。* replaceChild()：用新节点替换一个子节点。*属性：* parentNode返回节点的父节点。* HTML DOM.标签体的设置和获取：innerHTML1 .使用html元素对象的属性.控制元素样式1 .使用元素的style属性来设置如：修改样式方式1divl.style.border = "lpx solid red"divl.style.width = "200px"/font-size-> fontSizedivl.style.fontSize ="20px"2 .提前定义好类选择器的样式，通过元素的className属性来设置其class属 性值。#事件监听机制：大概念：某些组件被执行了某些操作后，触发某些代码的执行。大事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了事件源：组件。如：按钮 文本输入框* 监听器：代码。* 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件, 那么触发执行某个监听器代码。大常见的事件：L点击事件：1. onclick ：单击事件ondblclick ：双击事件2 .焦点事件onblur ：失去焦点1. onfocus:元素获得焦点。3 .加载事件：1. onload ： 一张页面或一幅图像完成加载。4.鼠标事件：1. onmousedown2. onmouseup3. onmousemove4. onmouseover5. onmouseout鼠标按钮被按下。鼠标按键被松开。鼠标被移动。鼠标移到某元素之上。鼠标从某元素移开。5 .键盘事件：1. onkeydown某个键盘按键被按下。2. onkeyup某个键盘按键被松开。3. onkeypress某个键盘按键被按下并松开。6 .选择和改变onchange域的内容被改变。1. onselect 文本被选中。7,表单事件：1. onsubmit确认按钮被点击。2. onreset重置按钮被点击。
黑公网安备:91230400333293403D
