JavaScript基本语法03

时间  2019-12-13
标签 javascript 基本 语法 栏目 JavaScript 繁體版
原文   原文链接

JavaScript

  • 原文博客地址: JavaScript基本语法03
  • 书接上文JavaScript基本语法, 记录了JavaScript的记录了相关数据类型和函数等相关语法
  • 这里主要记录浏览器对象模型(BOM), window对象和文档对象模型(DOM)

BOM

  • BOM:浏览器对象模型（Browser Object Model)，是一个用于访问浏览器和计算机屏幕的对象集合。咱们能够经过全局对象window来访问这些对象。
  • 全部浏览器都支持window对象, 它表示浏览器窗口
  • 全部JavaScript全局对象、函数以及变量均自动成为window对象的成员
  • 全局变量是window对象的属性
  • 全局函数是window对象的方法

Window

  • window.document: 是一个BOM对象，表示的是当前所载入的文档(即页面)，但它的方法和属性同时也属于DOM对象所涵盖的范围
  • window.frames: 是当前页面中全部框架的集合
  • window.navigator: 用于反应浏览器及其功能信息的对象
  • window.screen: 提供浏览器之外的环境信息
  • window.location: 用于得到当前页面的地址 (URL)，并把浏览器重定向到新的页面
  • window.history: 获取浏览器的历史记录
  • 以上对象在编写时能够通常不使用window这个前缀

Screen

Screen中的相关属性的使用以下javascript

// 提供浏览器之外的环境信息
console.log(window.screen)
// 输出: Screen { availWidth: 2560, availHeight: 1417, width: 2560, height: 1440, colorDepth: 24, pixelDepth: 24, top: 0, left: 0, availTop: 23, availLeft: 0 }

// 返回屏幕的宽度，以像素计，减去界面特性，好比窗口任务栏
console.log(screen.availWidth)
// 输出: 2560

// 返回访问者屏幕的高度，以像素计，减去界面特性，好比窗口任务栏
console.log(screen.availHeight)
// 输出: 1417

// 返回总宽度 * 高度
console.log(screen.width + "*" + screen.height)
// 输出: 2560*1440

// 返回色彩深度
console.log(screen.colorDepth)
// 输出: 24

// 返回色彩分辨率
console.log(screen.pixelDepth)
// 输出: 24
复制代码

Location

  • 用于得到当前页面的地址 (URL)，并把浏览器重定向到新的页面
  • 经常使用的属性使用和介绍
console.log(window.location)

// 返回web主机的域名和端口号
console.log(location.host)
// localhost:63342

// 返回 web 主机的域名
console.log(location.hostname)
// localhost

// 返回当前页面的路径和文件名
console.log(location.pathname)

// 返回 web 主机的端口 （80 或 443）
console.log(location.port)

// 返回所使用的 web 协议（http:// 或 https://）
console.log(location.protocol)

// 返回当前页面的 URL
console.log(location.href)

// 设置须要跳转的页面的URL
window.location.href = "https://www.titanjun.top/"
复制代码

经常使用的相关方法介绍css

// 在浏览器中默认是会缓存浏览记录的
// 刷新当前页面, 会缓存
window.location.reload()

// 刷新当前页面, 不带缓存
window.location.reload(true)

// 加载新的页面
window.location.assign("greenWindow.html")
window.location.assign("https:www.titanjun.top")

// 替换当前页面(注意：不会再浏览器的历史记录表中留下记录)
window.location.replace("greenWindow.html")
window.location.replace("https:www.titanjun.top")
复制代码

History

包含浏览器的历史记录html

// 获取历史记录的长度
console.log(history.length)

// 回到上一页面
window.history.back()

// 进入到下一页面
window.history.forward()

// go() 里面的参数表示跳转页面的个数 
// 例如 history.go(2) 表示前进一个页面
window.history.go(2)
// history.go(-1) 表示后退一个页面
window.history.go(-1)
复制代码

Window相关方法

open&close

window.close(): 关闭窗口java

// 用于打开一个新的浏览器窗口或查找一个已命名的窗口
open(url?: string, target?: string, features?: string, replace?: boolean)
复制代码
参数 描述
url 一个可选的字符串，声明了要在新窗口中显示的文档的 URL。若是省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档
target 一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称能够用做标记 <a> 和 <form> 的属性 target 的值。若是该参数指定了一个已经存在的窗口，那么open() 方法就再也不建立一个新窗口，而只是返回对指定窗口的引用。在这种状况下，features将被忽略。
features 一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。若是省略该参数，新窗口将具备全部标准特征。在窗口特征这个表格中，咱们对该字符串的格式进行了详细的说明
replace 一个可选的布尔值。true装载到窗口的URL在窗口的浏览历史中建立一个新条目，false替换浏览历史中的当前条目

window中方法open()经常使用的特性node

属性 值 描述
width 数值 新窗口的宽度, 不能超过100
height 数值 新窗口的高度, 不能超过100
top 数值 距离屏幕上方的像素
left 数值 距离屏幕左侧像素
toolbar yes/no 是否显示工具栏, IE浏览器有效
location yes/no 是否显示地址栏, IE浏览器有效
fullscreen yes/no 全屏显示

onload/onunload

onload加载事件和onunload卸载事件web

<body>
	<button onclick="func()">跳转</button>
	<script type="text/javascript"> //onunload事件 //当页面彻底卸载再触发，只有IE支持 window.onunload = function() { alert("肯定关闭"); }; function func() { window.location.href = "red.html"; } //load事件 //当页面加载完成的时候会触发该事件  window.onload = function() { alert("我在界面加载完后才显示"); }; alert("页面加载中"); </script>
</body>
复制代码

onscroll

当窗口发生滚动会触发该事件编程

<body style="height:3000px">
	<h1>我是顶部</h1>
	<button onclick="goOn()" style="position: fixed;right: 50px;bottom: 50px">返回顶部</button>

	<script type="text/javascript"> //当窗口发生滚动会触发该事件 window.onscroll = function() { console.log("滚动"); //打印滚动高度 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; console.log(scrollTop); }; //返回顶部 function goOn() { document.documentElement.scrollTop = 0; document.body.scrollTop = 0; } </script>
</body>
复制代码

onresize

当浏览器发生缩放的时候就会反复触发resize事件数组

<body>
	<script type="text/javascript"> //当浏览器发生缩放的时候就会反复触发resize事件  window.onresize = function() { var w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth; var h = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight; console.log(document.documentElement.clientWidth, document.body.clientWidth, window.innerWidth, w); console.log(document.documentElement.clientHeight, document.body.clientHeight, window.innerHeight, h); }; </script>
</body>

复制代码

JS弹窗

在JavaScript中建立三种消息框：警告框、确认框、提示框浏览器

警告框

  • 警告框常常用于确保用户能够获得某些信息。
  • 当警告框出现后，用户须要点击肯定按钮才能继续进行操做

Alert 

<body>
    <button onclick="showAlert()">点击显示警告框</button>

    <script type="text/javascript"> function showAlert() { alert('你好, 这是一个警告框!') } </script>
</body>

复制代码

确认框

  • 确认框一般用于验证是否接受用户操做。
  • 当确认卡弹出时，用户能够点击 "确认" 或者 "取消" 来肯定用户操做。
  • 当你点击 "确认", 确认框返回true， 若是点击 "取消", 确认框返回false

confirm 

<body>
    <button onclick="showConfirm()">点击显示确认框</button>

    <script type="text/javascript"> function showConfirm() { var action = '' var con = confirm('你好, 这是一个警告框!') if (con == true) { action = '选择了确认' } else { action = '选择了取消' } console.log(action) } </script>
</body>
复制代码

提示框

  • 提示框常常用于提示用户在进入页面前输入某个值。
  • 当提示框出现后，用户须要输入某个值，而后点击确认或取消按钮才能继续操纵。
  • 若是用户点击确认，那么返回值为输入的值。若是用户点击取消，那么返回值为null

image 

<body>
    <button onclick="showPrompt()">点击显示提示框</button>

    <script type="text/javascript"> function showPrompt() { var action = '' var person = prompt('请输入你的名字', 'titanjun') if (person != null && person != "") { action = "你好: " + person } console.log(action) } </script>
</body>
复制代码

JS计时器

  • 在JavaScript中有两种计时方式, 间歇性计时器和延迟性定时器
  • setInterval()和setTimeout()是HTML DOM Window对象的两个方法
  • 两个方法能够不使用window前缀，直接使用函数

setInterval

  • 间隔指定的毫秒数不停地执行指定的代码
  • 第一个参数是函数, 第二个参数间隔的毫秒数, 1000 毫秒是一秒
// time不是定时器的名字, 只是定时器的编号, 是一个number类型
var time = window.setInterval(function () {
    console.log("titanjun.top")
}, 1000)
console.log(typeof time)
复制代码
  • 在开启定时器后, 如何让定时器中止工做?
  • clearInterval()方法用于中止setInterval()方法执行的函数代码
  • 一旦定时器中止工做后, 就必须从新启动定时器, 且定时器不能暂停, 只能中止和重启
  • 要使用clearInterval()方法, 在建立计时方法时你必须使用全局变量
<body>
    <button onclick="closeInterver()">关闭定时器</button>

    <script type="text/javascript"> //setInterval(函数名,时间) // 功能：建立一个间歇性定时器，每间隔参数二时间执行一次参数一函数 // 返回值：定时器的id，能够经过该id关闭定时器 // time不是定时器的名字, 只是定时器的编号, 是一个number类型 var time = window.setInterval(function () { console.log("titanjun.top") }, 1000) console.log(typeof time) // 关闭定时器 function closeInterver() { //注：js中没有恢复定时器一说，当你中止定时器以后，定时器就会被删掉，想要继续的话，直接新建一个定时器。 window.clearInterval(time) } </script>
</body>
复制代码

setTimeout

在指定的毫秒数后执行指定代码, 且只执行一次缓存

<body>
    <script type="text/javascript"> //setTimeout(函数名，时间) //功能：参数2时间之后再执行参数1函数 //返回值：定时器的id alert("建立定时器，3秒后执行名为func的函数"); var timer = setTimeout(function () { console.log("titanjun.top") }, 3000) // 关闭定时器 function closeTimer() { window.clearTimeout(timer) } </script>
</body>
复制代码

DOM

  • 当网页被加载时，浏览器会建立页面的文档对象模型（Document Object Model）
  • DOM是访问HTML和操做HTML的标准
  • 经过可编程的对象模型，JavaScript得到了足够的能力来建立动态的HTML
    • JavaScript可以改变页面中的全部HTML元素
    • JavaScript可以改变页面中的全部HTML属性
    • JavaScript可以改变页面中的全部CSS样式
    • JavaScript可以对页面中的全部事件作出反应
  • HTML DOM模型被构造为对象的树

domlisten

  • DOM节点层级关系(DOM树)
    • 一、父节点(parent node)：父节点拥有任意数量的子节点
    • 二、子节点(child node)：子节点只能拥有一个父节点
    • 三、兄弟节点(sibling node)：拥有相同父节点的同级节点
    • 四、根节点(root node)：一个HTML文档通常只有一个根节点，根节点没有父亲节点，是最上层的节点
    • 祖先节点：包含子节点的节点均可以叫作祖先节点，其中包括了父节点
    • 后代节点：一个节点内包含的全部节点，叫作后代节点，其中包括了子节点
  • DOM节点的分类
    • 一、文档节点
    • 二、标签(元素)节点
    • 三、属性节点
    • 四、文本节点
    • 五、注释节点

domcategory

获取HTML标签

在JavaScript中须要操做HTML标签, 首先要获取该标签, 这里介绍三种方法

  • 经过id找到HTML元素
  • 经过标签名找到HTML元素
  • 经过类名找到HTML元素
  • 经过name属性找到HTML元素
<body>
    <!--id div-->
    <div id="idDiv"></div>

    <!--classs div-->
    <div class="class1"></div>
    <div class="class1"></div>
    <div class="class1"></div>
    <div class="class1"></div>

    <!--input-->
    <input type="text" name="inputText">
    <input type="text" name="inputText">
    <input type="text" name="inputText">

    <!--JavaScript-->
    <script type="text/javascript"> // 1. 根据元素id获取元素节点 console.log('-------getElementById--------') var idDiv = document.getElementById('idDiv') console.log(idDiv) console.log(typeof idDiv) // 2. 根据元素class属性获取元素节点, 返回数组 // 获取相同class属性的元素节点列表, 注意：此方法不支持IE8如下 console.log('-----------getElementsByClassName------------------') var classDivs = document.getElementsByClassName('class1') for (var i = 0; i < classDivs.length; i++) { console.log(classDivs[i]) } // 3.根据标签名来获取元素节点的结合, 返回数组 console.log('-----------getElementsByTagName------------------') var tagNameDics = document.getElementsByTagName('div') for (var i = 0; i < tagNameDics.length; i++) { console.log(tagNameDics[i]) } // 4. 根据name属性值来获取元素节点的集合, 返回数组 console.log('------------getElementsByName--------------------') var nameDivs = document.getElementsByName('inputText') for (var i = 0; i < nameDivs.length; i++) { console.log(nameDivs[i]) } </script>
</body>
复制代码

获取属性节点

  • 标签的属性分官方定义的属性和自定义属性
  • 官方定义的属性可用点语法获取属性值
  • 自定义属性只能经过getAttribute方法
<body>
    <input type="text" id="in" placeholder="titanjun.top" blog="titanjun">

    <script type="text/javascript"> var input = document.getElementById('in') console.log(input) // 1. 获取官方定义的属性节点能够直接使用点语法, 用法: 元素节点.属性名 // 获得元素对应的属性值 var inType = input.type console.log(inType) console.log(input.placeholder) // 修改元素对应的属性值 input.placeholder = "https://www.titanjun.top" console.log('-----------getAttribute-----------') // 2. getAttribute方法, 可获取官方定义的属性和自定义的属性 console.log(input.getAttribute('placeholder')) var blog = input.getAttribute('blog') console.log(blog) console.log('-----------setAttribute-----------') // 修改元素对应的属性名 input.setAttribute('blog', 'titan') console.log(input) console.log('-----------removeEventListener-----------') // 移除元素节点中的某个属性节点, 某些低版本浏览器不支持 input.removeAttribute('blog') console.log(input) </script>
</body>
复制代码

获取文本节点

  • innerHTML: 从对象的开始标签到结束标签的所有内容,不包括自己Html标签
  • outerHTML: 除了包含innerHTML的所有内容外, 还包含对象标签自己
  • innerText: 从对象的开始标签到结束标签的所有的文本内容
<body>
    <div id="box">
        这是一个div盒子
    </div>

    <script type="text/javascript"> var jsDiv = document.getElementById('box') // 1. 元素节点.innerHTML //从对象的开始标签到结束标签的所有内容,不包括自己Html标签 console.log('--------innerHTML--------') var inner = jsDiv.innerHTML console.log(jsDiv) console.log(typeof jsDiv) // 2. 元素节点.outerHTML //除了包含innerHTML的所有内容外, 还包含对象标签自己 console.log('--------innerHTML--------') var outer = jsDiv.outerHTML console.log(outer) console.log(typeof outer) // 3. 元素节点.innerText //从对象的开始标签到结束标签的所有的文本内容 console.log('--------innerHTML--------') var text = jsDiv.innerText console.log(text) console.log(typeof text) // 修改 jsDiv.innerText = "https://www.titanjun.top" jsDiv.innerHTML = "<h2>https://www.titanjun.top</h2>" </script>
</body>
复制代码

读写行间样式表

获取像是表中的样式属性的属性值, 经常使用有两种方式

  • 方法一: 元素节点.style.样式属性名
  • 方法二: 元素节点.style["样式属性名"]
<body>
    <div id="box" style="width: 100px; height: 100px; background-color: red"></div>
    <button onclick="changeColor()">换颜色</button>

    <script type="text/javascript"> // 获取元素节点 var jsDiv = document.getElementById('box') // 获取style属性节点 var divStyle = jsDiv.style // console.log(divStyle) // 获取像是表中的样式属性的属性值 console.log(divStyle.width) console.log(jsDiv.style["height"]) // 设置样式表中样式属性的属性值 // 元素节点.style.样式属性名 = 样式属性值 // background-color --- backgroundColor jsDiv.style.backgroundColor = 'green' function changeColor() { var r = parseInt(Math.random() * 256); var g = parseInt(Math.random() * 256); var b = parseInt(Math.random() * 256); var colorStr = "rgb(" + r + ", " + g + ", " + b + ")"; jsDiv.style.backgroundColor = colorStr } </script>
</body>
复制代码
  • 设置样式表中样式属性的属性值时, 样式属性名遵循驼峰命名规则
  • HTML中的-号去掉，-号后面的单词首字母大写
  • 通常状况下, css的样式属性中出现"-"好, 则对应的style属性是: 去掉"-"号后面单词的第一个字母大写. 若是没有"-"号, 则二者同样
CSS样式属性 Style对象属性
color color
font-size fontSize
font-family fontFamily
background-color backgroundColor
background-image backgroundImage
display display

节点经常使用属性

  • 在DOM中，每一个节点都是一个对象
  • 对象拥有方法和属性，并可经过JavaScript进行访问和操做
  • 三个重要的节点属性是：nodeName, nodeValue, nodeType
节点类型 nodeName nodeType nodeValue
元素节点 元素名称 1 null
属性节点 属性名称 2 属性值
文本节点 #text 3 文本内容不包括html
注释节点 #comment 8 注释内容
文档节点 #document 9 null 
<body>
    <div id="box1">
        <p>我是第一个P</p>
        <p>我是第二个P</p>
        <p>我是第三个P</p>
        <p>我是第四个P</p>
    </div>
    <div id="box2"></div>
    <div id="box3"></div>
    <input id="put" type="text" name="in" placeholder="https://www.titanjun.top">

    <script type="text/javascript"> // 节点共有的属性：nodeName、nodeType、nodeValue var div1 = document.getElementById('box1') console.log(div1) console.log(div1.nodeName, div1.nodeType, div1.nodeValue) // 1. 获取当前元素节点的全部的子节点 var childNodesArr = div1.childNodes console.log(childNodesArr) // 2. 获取当前元素节点的第一个子节点 var firstChildNode = div1.firstChild console.log(firstChildNode) // 3. 获取当前节点的最后一个节点 var lastChhildNode = div1.lastChild console.log(lastChhildNode) // 4. 获取该节点文档的根节点, 至关于document var rootNode = div1.ownerDocument console.log(rootNode) // 5. 获取当前节点的父节点 var parentNode = div1.parentNode console.log(parentNode) // 6. 获取当前节点的前一个同级节点 var div2 = document.getElementById('box2') var previousNode = div2.previousSibling console.log(previousNode) // 7. 获取当前节点的后一个同级节点 var nextNode = div2.nextSibling console.log(nextNode) // 8. 获取当前节点的全部属性节点 var jsInput = document.getElementById('put') console.log(jsInput.attributes) </script>
</body>
复制代码

节点动态操做

<body>
    <div id="box">
        <p>titanjun</p>
        <p>titanking</p>
    </div>

    <script type="text/javascript"> // 建立元素节点 var div1 = document.createElement('div') div1.id = 'box1' console.log(div1) // 将一个新节点添加到某个节点的子节点列表的末尾上 //父节点.appendChild(子节点) document.body.appendChild(div1) // 将新节点添加到父节点的某个子节点的前面 var jsP = document.createElement('p') jsP.innerHTML = "https://www.titanjun.top" //父节点.insertBefore(新节点, 子节点) var jsD = document.getElementById('box') jsD.insertBefore(jsP, jsD.childNodes[3]) console.log(jsD) // 建立文本节点 var jsStr = document.createTextNode('/titanjun.top') // 添加文本节点 var jsP2 = jsD.childNodes[1] jsP2.appendChild(jsStr) // 替换节点, 将父节点中的某个子节点替换成新的节点 var replaceDiv = document.createElement('div') replaceDiv.id = 'box2' //父节点.replaceChild(新节点, 子节点) div1.parentNode.replaceChild(replaceDiv, div1) // 复制节点 // 只复制自己 var copyDiv1 = jsD.cloneNode() console.log(copyDiv1) // 复制自己和子节点 console.log(jsD.cloneNode(true)) // 删除节点, 删除父节点下对应的子节点 //父节点.removeChild(子节点) replaceDiv.parentNode.removeChild(replaceDiv) // 参照物父元素 //当某个元素的父元素或以上元素都未进行CSS定位时，则返回body元素，也就是说元素的偏移量（offsetTop、offsetLeft）等属性是以body为参照物的 //当某个元素的父元素进行了CSS定位时（absolute或者relative），则返回父元素，也就是说元素的偏移量是以父元素为参照物的 //当某个元素及其父元素都进行CSS定位时，则返回距离最近的使用了CSS定位的元素 var temp = jsD.childNodes[1].offsetParent console.log(temp) </script>
</body>
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程