1,写在html文档中的script标签中
2,导入外部的js文件,使用src = ‘url’ ,写在head标签上
统一使用var关键字来声明变量,大小写敏感
数据类型是根据赋值的类型来确定的
基本与java一致,但要注意字符串也可以进行加减乘除的运算,会自动转换
==, != : 不检测类型, 只检测值
=== , !==: 不仅检测值, 还检测类型
// if
// 注意: 和java不同, java中非if条件要么是布尔值, 要么是返回布尔值的表达式
// 在js中, if里面的条件可以写任何类型/东西, 但是 false, NaN, 0, 空串, null 这些内容表现为假
// for
// 注意: 在js中, 我们一般使用fori循环遍历数组, 一般使用foreach循环遍历对象
Number
toString() 以字符串返回数值
toFixed() 返回字符串值,它包含了指定位数小数的数字(四舍五入)
toPrecision() 返回字符串值,它包含了指定长度的数字,这个长度包括整数位,也是四舍五入
MAX_VALUE 返回 JavaScript 中的最大数字
MIN_VALUE 返回 JavaScript 中的最小数字
parseInt()转换为int值,允许空格,只返回首个数字
String
length 属性返回字符串的长度
indexOf()方法返回字符串中指定文本首次出现的索引(位置),不存在就返回-1
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分
split() 将字符串转换为数组
Array
toString() 返回数组转换的数组值(逗号分隔)的字符串
pop() 方法从数组中删除最后一个元素,返回删除的元素
push() 方法(在数组结尾处)向数组添加一个新的元素,返回数组长度
splice() 方法可用于向数组添加新项, 返回([]),同时也是可以进行删除的操作
// 第一个参数:添加新元素的起始位置。第二个参数:定义应删除多少元素。
// 其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。
sort() 方法以字母顺序对数组进行排序,返回值和原数组是经过排序的数组
reverse() 方法反转数组中的元素。返回值和原数组都变为经过反转数组
Math对象
Math.ceil(x)返回大于等于x的最小整数
Math.floor(x)返回小于等于x的最大整数
Math.random() 返回 0 ~ 1 之间的随机数 //常用
Math.round(x) 把一个数四舍五入为最接近的整数。
Math.max(x,y,z,...,n) 返回最高值
Math.min(x,y,z,...,n) 返回最低值
思想:文档对象模型
本质是将html中的标签解析成对象,每个对象对应一个树上的节点
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树:DOM Tree
dom树中的节点彼此拥有层级关系(由节点构成)
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
在节点树中,顶端节点被称为根(root)
每个节点都有父节点、除了根(它没有父节点)
一个节点可拥有任意数量的子节点
父、子 和同胞(兄弟或姐妹)节点。
同胞是拥有相同父节点的节点
首先从上到下解析HTML结构,并同时构建DOM树
异步加载外部脚本和样式表文件
解析并执行脚本代码。 (要先加载到外部脚本或者样式表)
构造HTML DOM模型。 (构建结束) --> 立即显示页面
加载图片/视频/音频等外部文件。
页面整体加载完毕。
getElementById() //按id
getElementsByName() //按类名
getElementsByTagName() //按标签名
appendChild
整体的思路:首先要获取要添加的节点的父节点,然后再通过父节点来添加
演示代码:
function addli() {
//根据id名来获取ul这个列表的根节点
var ulNode = document.getElementById("ul1")
//获取input框的节点
var inputNode = document.getElementById("inputstr")
//通过value属性来获取input输入的值
var str = inputNode.value
// 创建一个文本结点
var textNode = document.createTextNode(str)
// 创建一个li结点
var liNode = document.createElement("li")
//先在li节点里面添加文本节点
liNode.appendChild(textNode)
//再将li节点添加到ul节点里面,完成添加操作
ulNode.appendChild(liNode)
//清除输入框
inputNode.value = ''
}
removeChild: 删除某个结点的孩子,需要获取要删除的那个孩子节点的对象
<ul id="ul1"><li>zs</li><li>ls</li><li>wu</li><li>zl</li></ul>
下标:<input id="inputstr">
<button onclick="deleteli()">删除</button>
<script>
function deleteli() {
//先获取ul列表节点,即父节点
var ulNode = document.getElementById("ul1")
//先获取input节点,再获取value值,即输入的下标
var index = document.getElementById("inputstr").value
// ulNode获得ul结点的所有孩子结点,返回一个数组
var childNodes = ulNode.childNodes;
//根据下标来获取数组中的值
ulNode.removeChild(childNodes[index])
}
</script>
replaceChild
<div id="div1">
div
</div>
<input id="inputstr">
<button onclick="changediv()">替换</button>
<script>
function changediv() {
var inputNode = document.getElementById('inputstr')
var inputstr = inputNode.value //获取输入的值
// 创建一个文本结点
var textNode = document.createTextNode(inputstr)
///获取div1节点
var divNode = document.getElementById("div1")
// 给某个结点替换一个孩子:replaceChild
// 第一个参数: 新孩子
// 第二个参数: 旧孩子
divNode.replaceChild(textNode, divNode.childNodes[0])
}
</script>
innerText可以直接获取节点内部的文本,这样就不用频繁的获取对象