JavaScript基础三
BOM
BOM: browser object model 浏览器对象模型。允许JS和浏览器“对话”。
window object窗口对象,代表浏览器窗口。
所有浏览器都支持窗口对象。JS中的全局对象,函数,变量都是窗口对象的成员。具体来说,全局变量是窗口对象的属性;全局函数是窗口对象的方法;即便是文档对象,也是窗口对象的一个属性,下面二者是相等的:
window.document.getElementById("header");
document.getElementById("header");
window对象的方法
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。返回true/false
prompt() 显示可提示用户输入的对话框。
例如:
var ret = prompt(“please enter a num”) //接收用户输入并赋值给ret
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期(以毫秒计 1000=1s)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout,需要传入setInterval()的返回值。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。
window对象是全局的,以上方法不需要加window前缀就可以直接调用。
下面我们看一下setInterval()和clearInterval()的具体应用:
点击start按钮,显示计时,点击stop,暂停计时,实现如下
<body>
<input type="text" value="" id="a"> //显示效果是通过对value赋值实现的
<button onclick="start()">start</button> //onclick触发start()函数执行
<button onclick="stop()">stop</button> //onclick触发stop()函数执行
</body><script>
function getTime(){var timer=new Date().toString(); //获取当前时间对象并转化为字符串var ele = document.getElementById("a"); //通过id定位目标元素ele.value = timer; //对目标元素的属性value赋值
}var res; //声明全局变量,接收setInterval()的返回值function start(){if (res==undefined){ //判断如果res值为undefined时,才执行下面函数,避免每次点击开启一个新计时器,而clearInterval只能清除最后一个计时器。getTime(); //点击后立即显示时间res = setInterval(getTime, 1000); //每隔一秒刷新一次}
}function stop(){clearInterval(res); //清除即使器res = undefined; //重置res值,这样点击时就可以重新开启计时。
}
</script>
DOM
document object model 文档对象模型。
DOM树
浏览器为加载的HTML创建一个文档对象模型,所有的对象/元素按树形结构组织起来。
DOM树展示文档中各个对象/元素的关系,方便我们查找元素,操作元素。
DOM节点:
节点类型
HTML中的每一个成分都是一个节点:
整个文档是一个document节点;
每个元素/标签是一个element节点;
每个属性是一个attribute节点;
每个元素中的文本是一个text节点。
这里,我们关注document节点和element节点。
节点关系
这里通过节点树展示节点间的关系:
查找节点的方法
- document.getElementById(“idname”)
- document.getElementsByTagName(“tagname”)
- document.getElementsByName(“name”),比如表单对象中的元素,有name属性。
- document.getElementsByClassName(“name”)
注意,由于id具有唯一性,因此,除了通过id查找,其余方法查找的结果是节点的集合,需要通过索引来定位,哪怕只有集合中只有一个元素。比如:
var ele = document.getElementByTagName("input")[0]
查找关联节点
- parentElement // 父节点标签元素
- children // 所有子标签
- firstElementChild // 第一个子标签元素
- lastElementChild // 最后一个子标签元素
- nextElementSibling // 下一个兄弟标签元素
- previousElementSibling // 上一个兄弟标签元素
注意,以上都是节点的属性,因此,使用时后面不能加括号。
另外,JS没有办法通过一个属性来找到所有的sibling。解决方案:先找到父标签,然后找到父标签下面的子标签。
节点操作
创建节点
var ele = document.createElement("input"); //创建节点ele.setAttribute("type","text"); //为节点增加属性
添加节点
注意,添加节点需要通过父节点来操作,所以要查找父节点
var parEle = document.getElementsById("par"); //查找父节点parEle.appendChild(ele); //通过父节点添加创建的子节点(添加到最后)// 或者把创建的节点添加到某个节点的前面parEle.insertBefore(ele,someNode);
删除节点
删除节点需要通过父节点来操作:
parEle.removeChild(ele);
修改/替换节点
需要通过父节点来操作:
parEle.replaceChild(new, old);
节点属性操作
Attribute
ele.getAttribute("attr_name"); ele.setAttribute("attr_name","value");ele.removeAttribute("attr_name");
文本属性
获取文本节点的值:innerText, innerHTML
赋值:
innerText
:纯文本
ele.innerText = "<p>hello</p>"
只能赋值为纯文本p标签会被当作文本对待。
innerHTML
:超文本。通过它可以给节点添加HTML代码。
ele.innerHTML = "<p>hello</p>"
,赋值超文本,添加了p标签和文本hello
表单类节点
对于表单类节点,比如<input>, <select>,<textarea>
等,选择了节点后,通过点.value
可以获取用户的输入值。
class操作
ele.className; //获取节点的所有class名称
ele.classList.add("class_name"); //为节点添加class
ele.classList.remove("class_name"); //为节点删除class
CSS操作
ele.style.property=value
ele.style.color="yellow";
//等价于
ele.setAttribute("attr_name","value");
DOM事件
事件类型
- onclick //点击某个元素时执行JS代码;
- ondblclick //双击某个元素时执行JS代码;
- onfocus //元素获得焦点时执行JS代码;常用于这些元素
<input>, <select>, and<a>
;与onfocus相反的是onblur; - on blur //元素失去焦点时;应用场景:表单验证,用户离开输入框后,代表输入完成,可以进行验证
- onchange //当元素的值改变时;常用于
<select>, radiobutton, checkbox
; - onkeydown //当用户正在按下键盘按键时;
- onkeypress //当用户按键盘按键时;该事件并不是对所有浏览器的所有按键都生效(比如:ALT, CTRL, SHIFT, ESC);想检测用户是否按下了键盘按键,可以用onkeydown,它对所有的按键都有效;
- onkeyup //当用户释放键盘按键时;
- onload //当一个对象加载完成后,主要是用在body元素;
- onmousedown //当用户在一个上按下鼠标按键时;顺序:onmousedown–>onmouseup–>onclick(鼠标左键或中建)/oncontextmenu(鼠标右键)
- onmousemove //当鼠标光标在一个元素上移动时;
- onmouseout //当鼠标从一个元素或其子元素离开时;
- onmouseover //当鼠标移至一个元素或其子元素时;
- onmouseleave //当鼠标光标离开一个元素时; The onmouseleave event is similar to the onmouseout event. The only difference is that the onmouseleave event does not bubble (does not propagate up the document hierarchy),比起onmouseout,这个事件仅限于元素本身,子元素不会触发事件。
- onmouseenter //当鼠标光标移至一个元素时;
- onselect //当元素中的文本被选中时;
- onsubmit // 当提交表单时;
事件类型示例
onkeydown 如何获取按键信息
<input typ="text" id="a"><script>var ele = document.getElementById("a");ele.onkeydown = function (e) {e = e || window.event;var keyNum = e.keyCode;var keyStr = String.fromCharCode(keyNum);alert(keyNum + '====>>' + keyStr);};</script>
说明:
1. 所有事件的监听是由操作系统完成的,然后把相关信息封装到event对象。event对象保存事件触发状态信息。
2. e=e||window.event; //通过e或全局的window.event对象拿,为了作浏览器兼容
3. e.keyCode //获取按键的asc码
4. String.fromCharCode(num) ==>数字转化为对应asc字符
事件传播
父元素绑定的事件,会传播给子元素。即子元素如果也绑定了事件,那么子元素的事件执行后,还会执行父元素的事件。
解决方案:在子元素中阻止触发父元素事件
<style>.outer {width: 300px;height: 300px;background-color: royalblue;}.inner {width: 200px;height: 200px;background-color: chartreuse;}</style><body>
<div class="outer"><div class="inner"></div>
</div>
</body><script>var par = document.getElementsByClassName("outer")[0];var son = document.getElementsByClassName("inner")[0];par.onclick = function () { //父元素绑定的事件,会传播给子元素alert("clicked papi!");};son.onclick = function (e) {e.stopPropagation();//阻止触发父元素事件。如果不加,子元素的事件执行完后,会紧接着执行父元素的alert("clicked son!");};</script>
事件绑定方式
方式一
<button onclick="foo(this)">click</button><script>function foo(self) {self.style.color="blue";}
</script>
将事件直接绑定在HTML代码元素的属性中,造成代码耦合,可读性差。
方式二
<button >click</button><script>var btnEle = document.getElementsByTagName("button")[0];btnEle.onclick = function(){alert("click ok!");}
</script>
在JS代码中查找节点,然后对节点绑定事件。推荐这种方式,降低代码耦合,灵活性更高。
this关键字
在DOM事件处理中,当一个函数用作事件处理时,this就是触发事件的元素。
在行内事件处理中,this就是DOM元素
var eles.document.getElementsByClassName("titile"); //假如我们选择了一组节点
eles.onclick = function(){ //点击其中一个节点,对触发事件的结点应用CSSthis.style.color="green"; //this指点击(触发事件)时的元素。
}
JavaScript基础三相关推荐
- JavaScript 基础(三) - Date对象,RegExp对象,Math对象,Window 对象,History 对象,Location 对象,DOM 节点...
Date对象 创建Date对象 //方法1:不指定参数var date_obj = new Date();alert(date_obj.toLocaleString())//方法2:参数为日期字符串v ...
- 前端小白学习路线及知识点汇总(三)-- JavaScript基础
前端小白学习路线及知识点汇总(三)-- JavaScript基础 一. JavaScript的组成 ECMAScript:由ECMA国际进行标准化的一门编程语言,往往被称为JavaScript或Jsc ...
- 第三十五篇(JavaScript基础)
JavaScript基础 前言 JavaScript(简称 JS)一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分, ...
- 前端基础三之JavaScript基础
文章目录 题外话 前言 1. JavaScript基础 1.1 JavaScript介绍 1.2 基础语法 1.2.1 Hello World 1.2.2 注释 1.2.3 变量 1.2.4 数据类型 ...
- JavaScript基础一
1.1 javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) J ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- JavaScript基础---语言基础(1)
写在前面: 通过四篇博客把JS基础中的基础整理一下,方便自己查阅,这些内容对于实际项目开发中也许并不会在意,但是作为JS的语言基础,自觉还是应该熟悉.在完成这三篇博客(JavaScript基础---语 ...
- javascript基础语法——词法结构
前面的话 javascript是一门简单的语言,也是一门复杂的语言.说它简单,是因为学会使用它只需片刻功夫:而说它复杂,是因为要真正掌握它则需要数年时间.实际上,前端工程师很大程度上就是指javasc ...
- javascript技术教程蔡敏_程序员都必掌握的前端教程之JavaScript基础教程(上)
阅读本文约需要10分钟,您可以先关注我们,避免下次无法找到. 本篇文章成哥继续带大家来学习前端教程之JavaScript,网页的动态事件基本上都是靠它来实现的.下面我们就一起来学习内容吧! 01 Ja ...
最新文章
- Docker(七):Docker build 、Docker Dockerfile 详解
- CAS权属线粗细修改
- i2c驱动 无法使用_Zephyr驱动SCCB设备
- 互联网1分钟 |1116
- Y2011_M12_HeartChicken
- Win7旗舰版系统hosts文件位置在哪里
- 277. Find the Celebrity
- c语言嵌套结构体生日,第09天C语言(17):结构体嵌套
- 【C语言】07-基本语句和运算
- Ghost工具进行分区对拷(备份、迁移系统)
- imitate wechat - 0
- oracle 18c 新特性,Oracle 18c新特性测试
- 记录参加微软打造开发者社会生态圈线下会议
- 京东店铺所有商品API接口(整店商品查询API接口),京东店铺商品API接口
- 本命年第三季度阶段反思
- java简单冒泡排序代码,跳槽大厂必看!
- spring data JPA常用注解
- 【三年面试五年模拟】算法工程师的独孤九剑秘籍(前十二式汇总篇)V1版
- socket.py line224 in meth return getattr(self._sock, name)(*args) error:[Error 2] No such file or di
- 网吧服务器固态硬盘使用,无盘服务器初次使用SSD固态硬盘应注意使用备用盘
热门文章
- (王道408考研操作系统)第三章内存管理-第二节3:页面置换算法1
- Shodan新手入坑指南
- 116. 填充每个节点的下一个右侧节点指针
- jenkins未授权访问漏洞记录(端口:7001,80,8080,50000)
- foreach的 多种用法
- 解读Laravel,看PHP如何实现Facade?
- ::before 和 ::after 伪元素用法
- 深入分析glibc内存释放时的死锁bug
- [转] Silverlight Navigation(多页面切换、传值)
- 为什么数字中台是企业应用新基建?