Day 11/09/2017 前端基础之JS(三)
BOM对象
window对象 所有浏览器都支持 window 对象。 概念上讲.一个html文档对应一个window对象. 功能上讲: 控制浏览器窗口的. 使用上讲: window对象不需要创建对象,直接使用即可.
Window 对象方法
alert() 显示带有一段消息和一个确认按钮的警告框。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 prompt() 显示可提示用户输入的对话框。open() 打开一个新的浏览器窗口或查找一个已命名的窗口。 close() 关闭浏览器窗口。setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。 clearInterval() 取消由 setInterval() 设置的 timeout。 setTimeout() 在指定的毫秒数后调用函数或计算表达式。 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 scrollTo() 把内容滚动到指定的坐标。
方法使用
1、alert confirm prompt以及open函数
//----------alert confirm prompt----------------------------//alert('aaa');/* var result = confirm("您确定要删除吗?");alert(result); *///prompt 参数1 : 提示信息. 参数2:输入框的默认值. 返回值是用户输入的内容.// var result = prompt("请输入一个数字!","haha");// alert(result); 方法讲解: //open方法 打开和一个新的窗口 并 进入指定网址.参数1 : 网址.//调用方式1//open("http://www.baidu.com");//参数1 什么都不填 就是打开一个新窗口. 参数2.填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数.open('','','width=200,resizable=no,height=100'); // 新打开一个宽为200 高为100的窗口//close方法 将当前文档窗口关闭.//close();
View Code
示例:
var num = Math.round(Math.random()*100);function acceptInput(){//2.让用户输入(prompt) 并接受 用户输入结果var userNum = prompt("请输入一个0~100之间的数字!","0");//3.将用户输入的值与 随机数进行比较if(isNaN(+userNum)){//用户输入的无效(重复2,3步骤)alert("请输入有效数字!");acceptInput();}else if(userNum > num){//大了==> 提示用户大了,让用户重新输入(重复2,3步骤)alert("您输入的大了!");acceptInput();}else if(userNum < num){//小了==> 提示用户小了,让用户重新输入(重复2,3步骤)alert("您输入的小了!");acceptInput();}else{//答对了==>提示用户答对了 , 询问用户是否继续游戏(confirm).var result = confirm("恭喜您!答对了,是否继续游戏?");if(result){//是 ==> 重复123步骤.num = Math.round(Math.random()*100);acceptInput();}else{//否==> 关闭窗口(close方法). close();}}}
View Code
2、setInterval,clearInterval
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数
语法:<br> setInterval(code,millisec)其中,code为要调用的函数或要执行的代码串。millisec周期性执行或调用 code 之间的时间间隔,以毫秒计。
示例:
<input id="ID1" type="text" οnclick="begin()"> <button οnclick="end()">停止</button><script>function showTime(){var nowd2=new Date().toLocaleString();var temp=document.getElementById("ID1");temp.value=nowd2;}var ID;function begin(){if (ID==undefined){showTime();ID=setInterval(showTime,1000);}}function end(){clearInterval(ID);ID=undefined;}</script>
View Code
DOM对象
什么是HTML DOM
- HTML Document Object Model(文档对象模型)
- HTML DOM 定义了访问和操作HTML文档的标准方法
- HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)
DOM树
画dom树是为了展示文档中各个对象之间的关系,用于对象的导航。
DOM节点
节点类型
HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的:
- 整个文档是一个文档节点
- 每个 HTML 标签是一个元素节点
- 包含在 HTML 元素中的文本是文本节点
- 每一个 HTML 属性是一个属性节点
其中,document与element节点是重点。
节点关系
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。
- 在节点树中,顶端节点被称为根(root)
- 每个节点都有父节点、除了根(它没有父节点)
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分,以及节点之间的关系:
访问 HTML 元素(节点),访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素。
节点查找
直接查找节点
document.getElementById('idname') # id='idname' document.getElementsByTagName('input') # 标签为input的标签对象document.getElementsByName('name') #name='name' document.getElementsByClassName('name') #class='name'
<div id="div1"><div class="div2">i am div2</div><div name="yuan">i am div2</div><div id="div3">i am div2</div><p>hello p</p> </div><script>var div1=document.getElementById("div1");////支持; // var ele= div1.getElementsByTagName("p"); // alert(ele.length); ////支持 // var ele2=div1.getElementsByClassName("div2"); // alert(ele2.length); ////不支持 // var ele3=div1.getElementById("div3"); // alert(ele3.length); ////不支持 // var ele4=div1.getElementsByName("yuan"); // alert(ele4.length)</script>
View Code
注意:设计到寻找元素,注意<script>标签的位置!
导航节点属性
parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
注意,js中没有办法找到所有的兄弟标签!
节点操作
创建节点:
createElement(标签名) :创建一个指定名称的元素。
例:var tag=document.createElement(“input")tag.setAttribute('type','text');
添加节点:
追加一个子节点(作为最后的子节点) somenode.appendChild(newnode)把增加的节点放到某个节点的前边 somenode.insertBefore(newnode,某个节点);
删除节点:
removeChild():获得要删除的元素,通过父元素调用删除
替换节点:
somenode.replaceChild(newnode, 某个节点);
节点属性操作:
1、获取文本节点的值:innerText innerHTML
2、attribute操作
elementNode.setAttribute(name,value) elementNode.getAttribute(属性名) <-------------->elementNode.属性名(DHTML)elementNode.removeAttribute(“属性名”);
3、value获取当前选中的value值
input select (selectedIndex) textarea
4、innerHTML 给节点添加html代码:
该方法不是w3c的标准,但是主流浏览器支持
tag.innerHTML = “<p>要显示内容</p>”;
5、关于class的操作:
elementNode.className #设置或者查找类名为xxx的节点 #例:查找id为myid的节点,它的类名为什么console.log(document.getElementId('myid').className); #例:设置这个节点。它的类名document.getElementId('myid').className='zzz'; elementNode.classList.add('xxx') 添加节点的'xxx'类属性 elementNode.classList.remove('xxx') 移除节点的'xxx'类属性
6、改变css样式:
<p id="p2">Hello world!</p> <script> document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontSize=60px; </script>
转载于:https://www.cnblogs.com/JAYWX/articles/7819725.html
Day 11/09/2017 前端基础之JS(三)相关推荐
- web前端基础之JS
JavaScript概述 一个完整的 JavaScript 实现是由以下 3 个不同部分组成的: 核心(ECMAScript) 文档对象模型(DOM) Document object model (整 ...
- 前端基础-Node.js核心模块的使用
第2章 核心模块的使用 2.1.1 FS模块 node核心模块之一,用于操作文件: 中文手册 : http://nodejs.cn/api/fs.html 文件读写 // 引入模块 var fs = ...
- 【学姐面试宝典】前端基础篇Ⅴ——JS深浅拷贝、箭头函数、事件监听等
前言 博主主页
- web前端基础之Bootstrap(三) - 插件
模态框 放在body内的直接子元素 弹出方式 1.通过 data 属性 data-toggle="modal" data-target="#myModal" ...
- 前端基础 html(三)
基础语义化标签-三种列表 1.有序列表:带有标号顺序的列表 2.无序列表:没有顺序,但有表头的列表 3.自定义列表:一个列表中可以同时放图片和文字,称作一行列表. 小技巧可以用ul>li*3的形 ...
- 前端基础 - 案例(三) 报时器
实现一个报时器,例如6:00-12:00显示早上好: 12:00-18:00显示下午好:18:00-6:00显示晚上好 <!DOCTYPE html> <html lang=&quo ...
- Web前端基础——jQuery(三)
本文主要从以下几方面介绍jQuery应用中的内容: 1 jQuery 节点遍历 2 jQuery 中的过滤器 3 jQuery 属性操作 4 jQuery Dom节点操作 5 几个jQuery例子 6 ...
- 前端基础进阶(七):函数与函数式编程
纵观JavaScript中所有必须需要掌握的重点知识中,函数是我们在初学的时候最容易忽视的一个知识点.在学习的过程中,可能会有很多人.很多文章告诉你面向对象很重要,原型很重要,可是却很少有人告诉你,面 ...
- 前端基础——CSS布局
前端基础学习第三天 文章目录 前端基础学习第三天 一.CSS布局 1.margin(外边距) 2.padding(内边距) 3.position 4.float 二.布局实例 1.浮动布局 2.弹性布 ...
最新文章
- phpstudy下的mysql升级
- PHP 自定义session储存 数据库 方式类 高洛峰 细说PHP
- 皮一皮:35岁后你做什么?
- 万字超强图文讲解 AQS 以及 ReentrantLock 应用
- Codeforces Round #624 (Div. 3) D. Three Integers 数论
- 下列不属于html5语义元素,HTML5 新的语义元素
- vue中通过js控制页面样式方法
- 转录组测序多少生物重复合适?2个?3个?48个?
- 20145217 《信息安全系统设计基础》第0周学习总结
- java cap是什么_寒冬面试归来总结最新蚂蚁4面(Java):CAP+数据强一致性+分布式等...
- 10款非常有效的帮助你设计超酷响应式布局的jQuery插件
- 解决开启Vue项目缺少node_models包问题
- 同步发电机转子的转动惯量与运动方程(一) 基本物理概念
- 利用爬虫刷CSDN博客访问量
- python zip压缩_用Python处理ZIP压缩包
- Chrome浏览器所有页面崩溃
- 计算机用通讯电压多少,通信局(站)用交流电源的质量指标要求
- ayit第十周训练g题
- 提高pyautogui识图率的优化方案
- Python库的安装详解