Javascript 和 HTML、CSS一样，是Web前端开发所必须的三个模块。另外，JavaScript也是Vue、Ext、jQuery等框架的基础语言，所以JavaScript的学习是至关重要的。其实，学了C++语言，学了Java，感觉JavaScript的基础语法整理上比较类似于Java，所以那些输入输出选择循环语句的基础语法，就不记下来了，毕竟代码天天在写，也不会忘。
我跟之前总结HTML、CSS一样，同样是站在本科应用层的角度，重点是比较常用的语法搭配，其次是那些有花里胡哨的功能语法，省略那些可以被新功能所替代的旧方法。
HTML部分：点击这里
CSS部分：点击这里
本文目录：
目录
常用调试方法、常用获取HTML组件的八种方法、数据类型、按钮方法绑定、数组/循环、数组的常用方法、字符串常用方法、配合HTML组件
定时执行函数、 动态更新时间组件、正则表达式、输入栏提示文本、异常处理、滚动标题、JSON、模拟Java类、使用JS添加HTML组件、表格数据添加
第一部分：最常用的语法
常用调试方法
-
alert(
'hello zwz');
//弹框
-
console.log(
'hello zwz!');
//调试窗口
-
document.getElementById(
'c').innerHTML =
'hello zwz';
//覆盖输出到HTML元素
-
//不覆盖可以把= 改成 += 即可
常用获取HTML组件的八种方法
-
<input id=
"did"
class=
"dclass" name=
'dname' value=
"aaa"/>
-
//以上为HTML
-
var did =
document.getElementById(
'did');
//根据ID查找 唯一
-
var dclass =
document.getElementsByClassName(
'dclass')[
0];
//根据class查找 不唯一
-
var ddiv =
document.getElementsByTagName(
'input')[
0];
//根据标签名查找 不唯一
-
var dclass2 =
document.getElementsByName(
'dname')[
0];
//根据name查找 不唯一
-
var b =
document.querySelector(
'#did').value;
//id
-
var c =
document.querySelector(
'.dclass').value;
//class
-
var d =
document.querySelector(
'input').value;
// 标签
-
var e =
document.querySelectorAll(
'input')[
0].value;
//所有的标签集合
数据类型
JavaScript是一种弱类型的语言，在C++中，一个int类型的变量，用%f格式输出，就会出错，反之亦然；这是因为整数和浮点数之间有一条不可逾越的鸿沟（个人理解）。在JavaScript中就不一样了，var就是一个百搭类型，那些整数、浮点数、字符串，甚至对象、数组，通通可以定义。当然可以使用typeof函数来获取当前的数据类型，就像这样：
-
var a =
1;
-
var b =
3.14;
// num.toFixed(4);保留四位
-
var c =
'hello zwz!';
-
var d = [
'zwz01',
'zwz02',
'zwz03'];
-
var e = {
-
'name':
'zwz',
-
'age':
18
-
};
-
var leixing =
typeof(a);
-
var num =
parseFloat(string);
//String转Num
如果只是var一个变量没有初始化，类型就是undefined；如果为空，就是Null；如果数字计算结果不为数字，那么就是NaN。
按钮方法绑定
-
<input type="button" value="按钮" οnclick="run()"/>
-
-
function run(){
-
//运行的代码
-
}
数组/循环
-
//一维数组
-
var arr = [
'a1',
'a2',
'a3',
'a4',
'a5',
'a6'];
-
-
//二维数组
-
var arr = [
-
[
'zwz01',
'zwz02',
'zwz03'],
-
[
'zwz11',
'zwz12']
-
];
-
alert(arr[
0][
1]);
//调用
-
-
//for-in循环
-
var a = [
3,
4,
5,
6,
7];
-
for(
var i
in a){
-
document.getElementById(
'd').innerHTML += i+
'<br>';
-
}
数组的常用方法
字符串常用方法
配合HTML组件
-
//<!-- 下拉菜单 -->
-
var se =
document.getElementById(
'se').value;
-
//<!-- 单选/多选框 -->
-
var form =
document.getElementById(
'fo').lag;
//lag是name属性
-
for(
var i =
0 ; i < form.length; i ++){
-
if(form[i].checked){
-
console.log(form[i].id);
break;
//操作
-
}
-
form[i].checked =
1;
// 全选
-
if(form[i].checked)
//反选1
-
form[i].checked =
0;
-
else
//反选2
-
form[i].checked =
1;
-
}
第二部分：其他小功能
定时执行函数
-
var temp;
-
function run(){
-
console.log(
'zwz的1秒过去了<br>');
-
}
-
function start(){
-
temp =
window.setInterval(
'run()',
1000);
-
}
-
function stop(){
-
window.clearInterval(temp);
-
}
动态更新时间组件
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8" />
-
<title>
</title>
-
</head>
-
<body οnlοad="retime()">
-
<div id="d">
</div>
-
</body>
-
</html>
-
-
<script>
-
function retime(){
-
var time =
new
Date();
-
var year = time.getFullYear();
-
var mouth = time.getMonth() +
1;
-
var date = time.getDate();
-
var hour = time.getHours();
-
var min = time.getMinutes();
-
var sec = time.getSeconds();
-
-
document.getElementById(
'd').innerHTML = year +
'年' + mouth +
'月' + date +
'日 ' + hour +
'：' + min +
'：' + sec;
-
var thread = setTimeout(
'retime()',
1000);
-
}
-
</script>
-
-
<style type="text/css">
-
div{
-
height:
200px;
-
width:
1200px;
-
background-color: gainsboro;
-
}
-
</style>
正则表达式
-
function run(){
-
var input =
document.getElementById(
'in').value;
-
// console.log(typeof(input));
-
if(!(
/^[a-zA-Z]\w{3,15}$/.test(input))){
-
console.log(
'输入有误');
-
}
-
}
输入栏提示文本
-
<input type=
"text" id=
"in" value=
"请输入" />
-
-
var input =
document.getElementById(
'in');
-
input.onmouseup =
function(){
this.focus();}
-
input.onfocus =
function(){
this.select();};
异常处理
比如我在代码中的alert函数上多写一个t，如果没有异常，就会直接在浏览器调试页面报错，如果有catch语句，则会在id为'd'的HTML元素中打印错误信息。
-
function run(){
-
try{
-
alertt(
'hello zwz');
-
}
catch(e){
-
document.getElementById(
'd').innerHTML = e.message;
-
}
-
}
滚动标题
实现的原理是每隔一小段时间，把最后一个字母放在最前面，来模拟滚动的效果。
-
<script>
-
var str =
'hello zwz!';
-
function run(){
-
document.title = str;
-
str = str.substring(
1,str.length) + str.substring(
0,
1);
-
}
-
setInterval(
'run()',
200);
-
</script>
JSON
另外有一种JSON模式需要着重学一下，这个是前端提交到后端必须要转换的格式。
如果在后端的Java类中定义如下：（用var模拟后端Java类）
-
var a = {
-
'people':[
-
{
'name':
'zwz01',
'age':
'18'},
-
{
'name':
'zwz02',
'age':
'19'}
-
]
-
};
那么，JSON模式是这样的：
-
var b =
'{ "people" : [' +
'{ "name":"zwz01" , "age":"18" },' +
'{ "name":"zwz02" , "url":"19" }'+
']}';
-
var result1 =
typeof(b);
//结果为string类型
说白了，就是拿大括号 { } 括了一下。这个时候b的数据类型是string字符串类型。
然后我们使用JSON.parse函数转化
-
var c =
JSON.parse(b);
-
var result2 =
typeof(c);
//结果为object类型
-
alert(c.people[
0].name);
//引用
这就说明c是对象类型，是将字符串转化成了对象模型。 也可以直接使用里面的元素
至于对象型转化为字符串，以后有机会再去查一下。
模拟Java类
-
function People(name,age){
-
this.name = name;
-
this.age = age;
-
this.say =
function(){
-
console.log(
this.name +
' is ' +
this.age +
' years old!');
-
}
-
}
-
var p1 =
new People(
'zwz01',
18);
-
p1.say();
使用JS添加HTML组件
-
//假设
<body>中有一个id为'u'的ul
-
<script>
-
var LiArray =
document.getElementById(
'u').getElementsByTagName(
'li');
-
var aNew =
document.createElement(
'a');
-
var aNewText =
document.createTextNode(
'百度');
-
var aNewHref =
document.createAttribute(
'href');
-
aNewHref.value =
'http://www.baidu.com';
-
aNew.setAttributeNode(aNewHref);
-
aNew.appendChild(aNewText);
-
LiArray[
0].appendChild(aNew);
-
-
var Body =
document.body;
-
var HrNew =
document.createElement(
'hr');
-
var HrColor =
document.createAttribute(
'color');
-
HrColor.value =
'red';
-
HrNew.setAttributeNode(HrColor);
-
Body.appendChild(HrNew);
-
-
</script>
表格数据添加
-
<body>
-
<table id="msg" align="center">
-
<caption>XXXX表
</caption>
-
<tr>
-
<td>学号
</td>
<td>姓名
</td>
<td>性别
</td>
-
</tr>
-
<input type="button" οnclick="addRow()" value="添加数据"/>
-
</table>
-
</body>
-
-
<script>
-
function addRow(){
-
var form =
document.getElementById(
'msg');
-
var newRow = form.insertRow();
//返回新插入的行 (deleteRow(index)删除)
-
newRow.insertCell(
0).innerHTML =
'0413170337';
-
newRow.insertCell(
1).innerHTML =
'zwz';
-
newRow.insertCell(
2).innerHTML =
'nan';
-
}
-
</script>
最后编辑日期 2020 年 1 月 30 日
转载：https://blog.csdn.net/qq_41464123/article/details/104112582
查看评论