目录
前言
js的地位就不用说了，前端脚本之王，作为后端开发，也是一个必须了解掌握到的技术。
如何引入js脚本
既然js是写前端的，那么js一定会和html标签搭配使用，下面给出html内部引入js代码的二种方式
js的数据类型
这里将js与c语言、java语言的数据类型做一个对比。
先来说一下c语言:
再来说一下java语言的数据类型：
下面来说javascript的数据类型： 
另外，Object,undefined也可以看成是js的数据类型，前者是对象类型，后者是未定义数据类型
对于c语言与java语言来说，他们是强类型语言，在定义变量的时候，需要带上数据类型，比如int num =3;但是对于js来说，不用，它是弱类型语言，但是一般用var来声明一个变量，如果一个变量不用var声明就是全局变量，但是需要谨慎使用，容易引起程序结构性问题，还可以用const来声明一个变量，表明是一个常量。
null，undefined，NaN这几个关键字
在javascript中，有一个typeof运算符，用来测试变量的数据类型
比如var num = 3;console.log(typeof(num)),这里就会在控制台打印number数据类型
对于var num = nulll来说，他是object类型
NaN:这是一个number类型，表明是一个非数字，同时NaN与任何数==、===都是false,可以通过isNaN函数判断是不是NaN
undeifned就是undefined类型,这个表示未定义
关于js的一些变量命名，运算符，循环语句,函数，数组
能学到js，基础应该是有的，所以我这就不过多去阐述这些东西，可以直接去查w3c手册。
关于布尔类型值判断的问题
<script type = "text/javascript">
var num1 = NaN
//NaN表示假
if(num1) {
document.writeln("NaN为真");
} else {
document.writeln("NaN为假");
}
document.writeln("<br/>")//在html文件中换行必须用这个<br/>标签
var str1 = "";
if(str1) {
document.writeln("空字符串为真");
} else {
document.writeln("空字符串为假");
}
document.writeln("<br/>");
var num2 = null;
if(num2) {
document.writeln("null为真");
} else {
document.writeln("null为假");
}
document.writeln("<br/>");
var num3 = undefined;
if(num3) {
document.writeln("undefined为真");
} else {
document.writeln("undefined为假");
}
</script>运行结果：
以上这些都表示为假的逻辑值
Function函数对象
这里也就是说，如何来创建一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var add = function(num1,num2) {
return num1 + num2;
}
function minus(num1,num2,num3,num4) {
return num1 - num2;
}
var value = add(1,2);
var value1 = minus(1,2);
alert(value + " " + value1);//3 -1
//通过length获取形参个数，不是实际参数个数
document.writeln(add.length + " " + minus.length);//2 4
//这个arguments.length代表了实际传入参数个数
//arguments是一个数组，代表实际传入参数个数
function multi(num1,num2,num3,num4) {
alert("参数个数" + arguments.length);//3
for(var i = 0;i < arguments.length;i++) {
//打印传入的参数
document.writeln(arguments[i]);//1 2 3
}
}
multi(1,2,3);//这里会弹出3
</script>
</head>
<body>
</body>
</html>下面说一下window对象中open函数的用法
1.自己设置一个窗口，并且设置窗口内容，然后来检测一下窗口的closed状态是否处于被关闭状态
<html>
<head>
<script type="text/javascript">
function ifClosed()
{
document.write("'myWindow' has been closed!")
}
function ifNotClosed()
{
document.write("'myWindow' has not been closed!")
}
function checkWin()
{
if (myWindow.closed)
ifClosed()
else
ifNotClosed()
}
</script>
</head>
<body>
<script type="text/javascript">
//省去了两个参数，第三个参数直接设置了窗口的大小
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
</script>
<input type="button" value="Has 'myWindow' been closed?" onclick="checkWin()" />
</body>
</html>
当然了，它还可以帮我们直接打开一个链接
浏览器对象中Location对象的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type = "button" id = "gobaidu" value = "去百度" />
<script>
var obj = document.getElementById("gobaidu");
obj.onclick=function () {
//直接利用href属性帮我们跳转到一个链接
location.href="https://www.baidu.com";
}
</script>
</body>
</html>javascript:void(0)的用法与含义
这两者有啥区别：
1.前者不会整体刷新页面，后者会整体刷新页面
2.后者会给我们抛出一个锚，然后跳转到网页的上端
DOM文档对象模型关于结点值，结点类型获取问题
先来看一下结点类型nodeType
顺便在说一下nodeName
另外一个需要注意的是，html结构中的各种空格，换行符都可能会把文本节点当做同胞元素处理。这就会导致错误。
下面看一个文档结构
然后我们来获取一下div1的firstChild的类型，弹出来是3，也就是文本结点
那我们把这个文档结构修改一下
这下弹出的又是1，属性结点了，换句话说，空格被当成了文本结点进行处理
那么针对于下面这个文档结构，想要获取div1的值怎么处理
首先拿到div1元素对象，然后firstChild是空格，那么它的兄弟结点nextSibling就是div2这个元素结点，那么再来调用一下nextSibling是不是就是div1这个文本结点了，在通过nodeValue属性就可以获取这个结点值了。
先来看这个为什么会弹出NULL
然后继续看下面
第一个弹出
上面还多了两个方法，一个是innerText，只弹出元素内部的值
只获取标签里面的值，不带标签元素
另外一个是innerHtml
把内部的标签元素也一起带上打印
DOM文档对象模型之如何添加子结点，删除子结点
看一个图
上面就是div1这个盒子包含了div2这个盒子，我现在还想给div1这个盒子追加一个盒子div3，最后我们还要把它删除
这里就会用到这几个函数：
1.createElement("div") 创建元素结点
2.appendChild(结点对象) 把这个结点对象添加到调用者上
3.removeChild(结点对象)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 1px solid red;
}
#div1{
width:200px;
height:200px;
}
#div2{
width:100px;
height:100px;
}
#div3{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id = "div1">
<div id = "div2">
div2
</div>
div1
</div>
<a href = "javascript:void(0);" id="add">添加子节点</a>
<a href = "javascript:void(0);" id="del">删除子节点</a>
<!--利用javascript来获取文本节点-->
<script>
var add = document.getElementById("add");
add.onclick=function () {
var div1 = document.getElementById("div1");
var div3 = document.createElement("div");
//还可以设置创建出来的节点属性
div3.setAttribute("id","div3");
div1.appendChild(div3);//追加为div1的一个孩子结点
}
//下面就是删除子节点
var del = document.getElementById("del");
del.onclick=function(){
var div3 = document.getElementById("div3");
var div1 = document.getElementById("div1");
div1.removeChild(div3);
}
</script>
</body>
</html>DOM增删该节点的具体操作
我们要做的是通过js来添加一个节点
这里要用到的东西就是
1.如何拿到input框里面的值，通过DOM中input对象的value属性获取
2.如何创建元素结点，文本结点，并把它俩作为子结点
createElement("td")
createTextNode(文本变量)
appendChild(元素)
因为这里面还涉及到超链接，就是一些属性的问题
还要用到
setAttribute("属性名"，属性值)
另外我们还需要删除tr这个整体标签，那么就要知道它的父类，可能会用到
parentNode这个属性
好了直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border:1px solid;
margin: auto;
width:500px
}
td,th{
text-align:center;
border:1px solid;
}
div{
text-align:center;
margin:50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" value="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
</tr>
</table>
<script>
//1.先把添加做了
var add = document.getElementById("btn_add");
//得到三个节点的值
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
add.onclick=function () {
//我们现在的目的是在td里面放数据
var td_id = document.createElement("td");
//创建文本节点
var text_id = document.createTextNode(id);//传入是一个值
//添加到td下面
td_id.appendChild(text_id);
//和上面类似
var td_name = document.createElement("td");
var text_id = document.createTextNode(name);
td_name.appendChild(text_id);
//和上面类似
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
//注意还有一个删除的超链接节点
var td_a = document.createElement("td");
var a = document.createElement("a");
var text_a = document.createTextNode("删除");
a.appendChild(text_a);
td_a.appendChild(a);
//a这个超链接标签需要设置一些属性
a.setAttribute("href","javascript:void(0)");
a.setAttribute("onclick","delTr(this)");
//创建节点
var tr = document.createElement("tr");
//需要把上面的td加到tr下面去
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//获取table节点，然后把tr加上去
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
//下面来做删除的部分（需要一个父节点来删除它的子节点）
//删除是把这个节点对象给传进来了
function delTr(obj) {
//这里obj是a->td->tr->table这样才能找到父类table
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>上面这个代码感觉写的有点长，下面提供一个更好的解决办法
add.onclick = function(){
//下面我们换一种添加方法，使用innerHtml进行数据的添加
table.innerHTML += "<tr>\n" +
" <td>"+id+"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+gender+"</td>\n" +
//双引号内部有双引号要进行转义
" <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >删除</a></td>\n" +
" </tr>";
}
DOM控制元素样式
使用style属性来设置
div1.style.border = "1px solid red"
div1.style.fontSize(这里属性全部变成小驼峰不是以前的下划线font-size)
javascript中的正则表达式对象
RegExp正则表达式一个缩写
test()方法是用于判断是否符合正则要求
exec：查找找到的第一个匹配的正则表达式的值
compile():用来改变正则表达式模式
js中关于函数传参问题与变量是字符串的拼接问题
比如这样一种情况，这是js的一个函数
这里是在页面加载完成之后会去调用的一个函数
下面调用代码
中间做了一个缺省的值，也就是说currentPage做了一个null的默认，另外还有一个rname就是参数名字
上面这个函数还有以下几种调用方式
下面再来说一下， 在对于html标签的拼接过程中，如果涉及到的是字符串类型的参数，在拼接的时候，就必须用双引号给引用起来
对于上面的参数来说，rname是一个字符串的类型，那么就必须用双引号
1157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
