JS网页基础知识
简述：简单地对知识点做个记录，跳过了一些自己感觉不需要了解的细枝末节。配上实例代码，以上。
js输出
输出框
- 警告框alert(): 只有一个按钮“确定”无返回值。语法：alert(“文本”)。
- 确认框confirm(): 两个按钮，确定或取消，返回true/false。语法：confirm(“文本”)。
- 提示框prompt()：弹出确认和取消两个按钮，返回输入的消息，如果点击取消则为null。语法：prompt(“文本”,”默认值”)。
HTML文档输出
- document.write()： 输出内容会显示在html上。
HTML元素输出
- innerHTML：内联元素，根据元素名写入到元素中。语法：document.getElementById().innerHTML = “内容”。
输出到游览器控制台
- console.log(): 内容输出到网页的控制台。
演示代码：
实现效果图：
基本语法
变量与数据类型
- 必须以字母开头，变量名称对大小写敏感。
- var为定义变量的语法，变量不需要声明数据类型。
- 变量数据类型规范弱，数据类型由String、Number、Boolean、Array、Null、Undefined。
运算符与循环
-
需要注意“+”可以用来拼接字符串。
-
for循环提供了for/in的用法，来循环遍历对象。
函数使用
使用说明
- 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 function a( 参数 ){} 声明会前置 var a = function( 参数 ){} 匿名函数 函数中的 return
DOM
DOM树模型
获取元素
- document.getElementById(): 通过id来获取html元素。
- document.getElementsByTagName() ：通过标签名来获取元素。
- document.getElementsClassName() ：通过类名class来获取元素
代码演示
DOM HTML
- 修改内容：document.getElementById().innerHTML = “内容”。
- 修改属性：
- element.getAttribute(): 获取链接的属性值。
- element.setAttribute()：更改链接的属性值。
- element.src: 更改链接的src属性。
- element.href： 更改链接的超链接地址属性。
代码演示
CSS DOM
- 修改样式: document.getElementById().style.color=“内容”
DOM事件
- 事件内嵌元素中
- Element.onclick=function(){displayDate()};
- Element.addEventListener(“click”, function(){ });
代码演示
实现效果
DOM节点
- document.createElement(“p”) ：创建DOM节点
- document.createTextNode(“新增”)：创建节点内容
- parent.appendChild(child)： 追加新建节点到父节点
- parent.removeChild(child)： 从父节点中删去选定的节点
代码示例
实现效果
js window
概念
- window表示游览窗口
- 所以js全局对象、函数以及变量军自动成为window对象的成员
- 全局变量是window对象的属性，全局函数是window对象的方法
####
方法
- window.open()
- window.close()
- window.moveTo()
- window.resizeTo()
代码实例
效果
screen window
- screen.availWidth - 可用的屏幕宽度
- screen.availHeight - 可用的屏幕高度
window history
- window.history 对象在编写时可不使用 window 这个前缀
- history.back() - 与在浏览器点击后退按钮相同
- history.forward() - 与在浏览器中点击按钮向前相同
- history.go()
