导图社区 JavaScript
这是一篇关于JavaScript的思维导图,主要内容包括:常用正则表达式,JS中的DOM编程,JS中的BOM编程,JS事件绑定,JS的对象,JS的流程控制和函数,JS的数据类型和运算符,JS的引入方式。
编辑于2024-07-13 02:13:54JavaScript
JS的引入方式
内部脚本引入
页面中,通过一对script标签引入JS代码
script代码放置位置具备一定的随意性,一般放在head标签中居多
外部脚本引入
将脚本放在独立的js文件中,通过script标签引入外部脚本文件
一对script标签要么用于定义内部脚本,要么用于引入外部js文件,不能混用
<script src="js/button.js" type="text/javascript"></script>
JS的数据类型和运算符
JS的数据类型
数值类型
字符串类型
布尔类型
引用数据类型
JS的变量
弱类型变量,可以统一声明成var
var声明的变量可以再次声明
变量可以使用不同的数据类型多次赋值
JS的语句可以以; 结尾,也可以不用;结尾
变量标识符严格区分大小写
JS的运算符
算术运算符
关系运算符
逻辑运算符
条件运算符
位运算符
JS的流程控制和函数
JS分支结构
If结构
Switch结构
JS循环结构
while循环
for循环
foreach循环
var cities =["北京","上海","深圳","武汉","西安","成都"] document.write("<ul>") for(var index in cities){ document.write("<li>"+cities[index]+"</li>") } document.write("</ul>")
括号中的临时变量表示的是元素的索引,不是元素的值,
()中也不在使用: 分隔,而是使用 in 关键字
JS函数声明
/* 语法1 function 函数名 (参数列表){函数体} */ function sum(a, b){ return a+b; } var result =sum(10,20); console.log(result) /* 语法2 var 函数名 = function (参数列表){函数体} */ var add = function(a, b){ return a+b; } var result = add(1,2); console.log(result);
函数没有权限控制符
不用声明函数的返回值类型,需要返回在函数体中直接return即可,也无需void关键字
参数列表中,无需数据类型
调用函数时,实参和形参的个数可以不一致
声明函数时需要用function关键字
JS的对象
JS声明对象
通过new Object()直接创建
通过{}形式创建
var person ={ "name":"张小明", "age":10, "foods":["苹果","香蕉","橘子","葡萄"], "eat":function (){ console.log(this.age+"岁的"+this.name+"喜欢吃:") for(var i = 0;i<this.foods.length;i++){ console.log(this.foods[i]) } } }
JSON
JSON 就是一种字符串格式,这种格式无论是在前端还是在后端,都可以很容易的转换成对象,所以常用于前后端数据传递
通过JSON.parse()方法可以将一个JSON串转换成对象
通过JSON.stringify()方法可以将一个对象转换成一个JSON格式的字符串
JS常见对象
数组
new Array()
new Array(5)
new Array(1,2,3,4,5)
[1,2,3,4,5]
Boolean
toString
valueOf
Date
Math
Number
String
JS事件绑定
事件可以是浏览器行为,也可以是用户行为。 当这些一些行为发生时,可以自动触发对应的JS函数的运行,我们称之为事件发生.JS的事件驱动指的就是行为触发代码运行的这种特点
常见事件
鼠标事件
onclick
onmousedown
onmouseenter
onmousemove
onmouseout
onmouseup
onmouseleave
onmouseover
ondbclick
键盘事件
onkeydown
onkeypress
onkeyup
表单事件
onblur
onchange
onfocus
onfocuesin
onfocusout
oninput
onreset
onsearch
onselect
onsubmit
JS中的BOM编程
BOM是Browser Object Model的简写,即浏览器对象模型。
BOM编程是将浏览器窗口的各个组成部分抽象成各个对象,通过各个对象的API操作组件行为的一种编程
window 顶级对象,代表整个浏览器窗口
location对象 window对象的属性之一,代表浏览器的地址栏
history对象 window对象的属性之一,代表浏览器的访问历史
screen对象 window对象的属性之一,代表屏幕
navigator对象 window对象的属性之一,代表浏览器软件本身
document对象 window对象的属性之一,代表浏览器窗口目前解析的html文档
BOM编程中的常用方法
alert
confirm
prompt
JS中的DOM编程
DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.
document对象本身是一种树形结构的文档对象
dom树中的节点类型
node 所有节点的父类型
element 元素节点 标签
attribute 属性节点 元素的属性
text 文本节点 双标签中间的内容
DOM获取页面元素
在整个文档范围内查找元素结点
document.getElementById(“id值”)
document.getElementsByTagName(“标签名”)
document.getElementsByName(“name值”)
document.getElementsByClassName("类名")
在具体元素节点范围内查找子节点
element.children
element.firstElementChild
element.lastElementChild
查找指定元素节点的父节点
element.parentElement
查找指定元素节点的兄弟节点
node.previousElementSibling
node.nextElementSibling
DOM操作元素属性值
属性操作
读取
元素对象.属性名
修改
元素对象.属性名=新的属性值
内部文本操作
获取或者设置标签体的文本内容
element.innerText
获取或者设置标签体的内容
element.innerHTML
DOM增删元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建和删除标签</title> </head> <body> <ul id="city"> <li id="bj">北京</li> <li id="sh">上海</li> <li id="sz">深圳</li> <li id="gz">广州</li> </ul> <script> //目标1: 在城市列表的最后添加一个子标签 <li id="cs">长沙</li> //1. 创建一个li标签 <li></li> var liElement = document.createElement("li"); //2. 给创建的li标签设置id属性和文本 <li id="cs">长沙</li> liElement.id = "cs" liElement.innerText = "长沙" //3. 将创建的li标签添加到城市列表中(ul) var cityUl = document.getElementById("city"); //父.appendChild(子)将子标签添加到父标签的最后面 //cityUl.appendChild(liElement) //目标2:在城市列表的深圳之前添加一个子标签 <li id="cs">长沙</li> //获取到深圳这个标签 var szElement = document.getElementById("sz"); //父.insertBefore(新标签,参照标签) //cityUl.insertBefore(liElement,szElement) //目标3: 在城市列表中添加一个子标签替换深圳 <li id="cs">长沙</li> //父.replaceChild(新标签,被替换的标签) //cityUl.replaceChild(liElement,szElement) //目标4: 在城市列表中删除深圳 //szElement.remove() //目标5: 清除城市列表中的所有城市,保留城市列表标签ul cityUl.innerHTML = "" </script> </body> </html>
相关API
创建元素节点并返回,但不会自动添加到文档中
document.createElement(“标签名”)
创建文本节点并返回,但不会自动添加到文档中
document.createTextNode(“文本值”)
将ele添加到element所有子节点后面
element.appendChild(ele)
将newEle插入到targetEle前面
parentEle.insertBefore(newEle,targetEle)
用新节点替换原有的旧子节点
parentEle.replaceChild(newEle, oldEle)
删除某个标签
element.remove()
常用正则表达式
用户名
/^\[a-zA-Z **]\[a-zA-Z-0-9]{5,9}\$/
密码
/^\[a-zA-Z0-9 \_-@#& \*]{6,12}\$/
电子邮箱
/^\s+\|\s+\$/g
前后空格
/^\[a-zA-Z0-9 \_.-]+@(\[a-zA-Z0-9-]+\[.]{1})+\[a-zA-Z]+\$/