一、什么是JavaScript？
JavaScript（下文简称JS）是一种运行在客户端的脚本语言，不需要编译，运行过程中由JS解释器逐个进行解释并执行，JS解释器被称为JavaScript引擎，是浏览器的一部分。
二、JavaScript的用途
- 表单动态校验（验证数据合法性）
- 网页开发
- 网页游戏开发
- 服务器开发
- 桌面程序
- APP
- 控制硬件-物联网
三、JS是如何运行的？
JS通过浏览器可以直接运行，JS通常是包含在HTML页面中的，双击HTML页面就可以直接运行。上面提到JS解释器可以将JS语句逐个解释并执行，所以JS能在浏览器中直接运行是因为浏览器中包含了渲染引擎（HTML渲染引擎和CSS渲染引擎）+JS执行引擎。
四、JS前置知识
js的代码既可以写在<head></head>中，也可以写在<body></body>中。通常外部的引用我们写在<head></head>中，具体的业务写在<body></body>中。
4.1 JS书写格式
4.1.1 行内格式
直接嵌在html元素内部
<input value="点击我" type="button" onclick="alert('你好')">
注意：JS中的引号的使用，双引号中再使用字符串常量需要使用单引号。
4.1.2 内嵌格式
写在script标签中
<script>
alert('haha')
</script>
4.1.3 外部格式
写在单独的.js文件中。
先在文件目录下创建一个js的文件夹 ，再创建一个.js的文件。
使用外部格式分为两步：
1.先引入.js文件
<script src="js/base.js">
</script>
2.再使用.js文件
<input value="点击我" type="button" onclick=myck2(3456)>;
4.2 消息打印
4.2.1 弹出输入框
<script>alert('haha')</script>
4.2.2 弹出选择框
<script>confirm("确认删除？")</script>
4.2.3 输出信息到控制台
<script>console.log("这是一条输出")</script>
在浏览器中选择F12进入到开发者工具，就可以在控制台看到我们输出的信息。
4.3 JS单点调试的方法
- 打开开发者工具（F12）；
- 点击源代码面板；
- 找到需要调试的JS文件，设置断点；
- 触发并执行JS。
当程序有错误时，我们可以用这个单点调试的方法来调试程序。
五、JS基础语法
5.1 定义变量
- JS是弱类型语言，在定义变量时不用明确变量类型，只需要用var来表示这是一个变量即可。
- 每个语句最后带有一个英文的；结尾.js中可以省略，建议加上。
- 初始化的值如果是字符串，就要用单引号或双引号引起来。
- 初始化的值如果是数字，那么直接赋值即可。
5.1.1 创建变量
var name='张三';
var age=20;
5.1.2 使用变量
var name='张三';
var age=20;
console.log(name);
age=21;
console.log(age);
5.2 JS的数据类型
- number：数字，不区分整数和小数。
- boolean：true真，false假的。
- string：字符串类型。
- undefined：只有唯一的值undefined，表示未定义的值。
- null：只有唯一的值null，表示空值。
所有的数据类型都可以使用var来定义，js是弱类型的语言，虽然定义时不区分，但是综上JS还是由数据类型的概念的。
我们来看一个例子：
<div>
<input value="点击我" type="button" onclick=myalt()>
</div>
function myalt(){
var num1='2';
var num2=3;
alert(num1+num2)
}
那么如果我们想实现整数的相加，有两种实现的方式：
1.直接将值写成整数
<div>
<input value="点击我" type="button" onclick=myalt()>
</div>
function myalt(){
var num1=2;
var num2=3;
alert(num1+num2)
}
但这种方式在用户自己输入值时，就不适用了，我们来自己实现一个计算器：
<h2>计算器</h2>
数值1：<input type="text" id="ipt_num1"><br>
数值2：<input type="text" id="ipt_num2"><br>
<input type="button" value="相加" onclick="mycalc()">
<script>
function mycalc(){
//1.得到第一个输入框的值
var num1=document.getElementById("ipt_num1").value;
//2.得到第二个输入框的值
var num2=document.getElementById("ipt_num2").value;
//3.让输入框1的值 + 输入框2的值，并弹出结果
alert("相加结果："+(num1+num2));
</script>
}
这时我们就需要用到另一种方式，使用parse+数据类型实现数据类型转换。
2.实现类型转换
<h2>计算器</h2>
数值1：<input type="text" id="ipt_num1"><br>
数值2：<input type="text" id="ipt_num2"><br>
<input type="button" value="相加" onclick="mycalc()">
<script>
function mycalc(){
//1.得到第一个输入框的值
var num1=document.getElementById("ipt_num1").value;
//2.得到第二个输入框的值
var num2=document.getElementById("ipt_num2").value;
//3.让输入框1的值 + 输入框2的值，并弹出结果
alert("相加结果："+(parseInt(num1)+parseInt(num2)));
</script>
}
5.3 定义方法
用function直接定义一个方法，定义完之后调用。
function myMethod(){
alert("执行了myMehod方法");
}
myMethod();
function myMethod(name){
alert(name+"执行了myMehod方法");
}
myMethod("张三");
注意：也可以在定义方法之前调用方法，因为调用方法这个行为是在dom树之后执行，不会出现调用方法时方法还没有生成的现象。
DOM树：
5.4 条件判断
5.4.1 if
var flag=true;
//1.if写法1
if(flag){
alert("真的");
}
//2.if写法2
if(flag){
alert("真的");
}else{
alert("假的");
}
//3.if写法3
var day=4;
if(day==1){
alert("今天星期一");
}else if(day==2){
alert("今天星期二");
}else if(day==4){
alert("今天星期四");
}else{
alert("其他");
}
JS中的==与Java中==的不太相同，JS中的==比较的是对象的值是否相等，而不是地址，JS中的===比较的是地址。
5.4.2 三目运算符
// 三目表达式
flag?alert("为真"):alert("为假");
5.4.3 switch
var day=3;
switch(day){
case 1:
alert("今天是周一");
break;
case 2:
alert("今天是周二");
break;
case 3:
alert("今天是周三");
break;
}
5.5 循环语句
5.5.1 while循环
var num=1;
while(num<10){
console.log(num++);
}
当num大于等于10时，跳出循环。
5.5.2 for循环
for(var num=1;num<10;num++){
console.log(num);
}
六、JS操作DOM
6.1 得到控件
根据id得到HTML控件：
document.getElementById("元素id")
6.2 操作控件
6.2.1 获取元素值
document.getElementById("元素id").value;
6.2.2 设置元素的值
document.getElementById("元素id").value="需要设置的值";
具体实现实例：
<h2>计算器</h2>
数值1：<input type="text" id="ipt_num1"><br>
数值2：<input type="text" id="ipt_num2"><br>
<input type="button" value="相加" onclick="myTest()">
<script>
function myTest(){
//给num1 和 num2 赋一个默认的值
//1.得到控件
var iptNum1=document.getElementById("ipt_num1");
var iptNum2=document.getElementById("ipt_num2");
//2.操作控件
iptNum1.value=0;
iptNum2.value=0;
}
</script>
6.2.3 innerText/innerHTML
用来识别<div>的id：
innerHTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>计算器</h2>
数值1：<input type="text" id="ipt_num1"><br>
数值2：<input type="text" id="ipt_num2"><br>
<input type="button" value="相加" onclick="mycalc()">
<p></p>
<div id="resultDiv">
</div>
<script>
function mycalc(){
//1.得到第一个输入框的值
var num1=document.getElementById("ipt_num1").value;
//2.得到第二个输入框的值
var num2=document.getElementById("ipt_num2").value;
//3.让输入框1的值 + 输入框2的值，并弹出结果
document.getElementById("resultDiv").innerHTML="相加的结果：<span style='color=red;font-size:30px;'>"+(parseInt(num1)+parseInt(num2))+"<span>";
}
</script>
</body>
</html>
innerText:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>计算器</h2>
数值1：<input type="text" id="ipt_num1"><br>
数值2：<input type="text" id="ipt_num2"><br>
<input type="button" value="相加" onclick="mycalc()">
<p></p>
<div id="resultDiv">
</div>
<script>
function mycalc(){
//1.得到第一个输入框的值
var num1=document.getElementById("ipt_num1").value;
//2.得到第二个输入框的值
var num2=document.getElementById("ipt_num2").value;
//3.让输入框1的值 + 输入框2的值，并弹出结果
document.getElementById("resultDiv").innerText="相加的结果："+(parseInt(num1)+parseInt(num2));
}
</script>
</body>
</html>
七、jQuery框架学习
jQuery是一个JavaScript库，极大简化了JavaScript编程，jQuery很容易学习。
它具有一定的兼容性。
7.1 jQuery实现文章查询
具体实现：使用jQuery实现一个文章的查询工作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的文章列表</title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="button" value="查询我的文章" onclick="setlist()">
<hr>
<table id="mytable">
<tr>
<td>文章编号</td>
<td>文章标题</td>
<td>阅读量</td>
</tr>
</table>
<script>
function setlist(){
jQuery("#ipt_num1").val("请输入一个数字");
//1.根据当前登录用的id，去后端请求数据（当前登录用户的文章表）
var ids=[1,2,3,4,5];
var titles=["CSS","JS","HTML","JAVA","MYSQL"]
var count=[100,200,300,400,500];
//2.得到当前的控件并赋值
var table=jQuery("#mytable");
var appendHtml="";
for(var index=0;index<ids.length;index++){
//拼接一个 <tr>
var trHtml="<tr>";
trHtml+="<td>"+ids[index]+"</td>";
trHtml+="<td><a href='#'>"+titles[index]+"</td>";
trHtml+="<td>"+count[index]+"</td>";
appendHtml+=(trHtml+"</tr>");
}
table.append(appendHtml);
}
</script>
</body>
</html>
客户点击查询我的文章列表，就可以根据用户的登录id，去后端查找用户的文章列表（后面实现）,可以动态的显示客户的文章列表：
7.2 jQuery实现聚合搜索
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>聚合搜索</title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div>
<div style="height: 50px;margin-left: 40%;">
<input value="必 应" type="button" onclick="switchSearch('https://cn.bing.com/?scope=web&FORM=ANNTH1')">
<input value="搜 狗" type="button" onclick="switchSearch('https://www.sogou.com/')">
<input value="360" type="button" onclick="switchSearch('https://www.so.com/')">
</div>
<div>
<iframe id="ifr" style="width: 100%;height: 600px;" src="https://cn.bing.com/?scope=web&FORM=ANNTH1"></iframe>
</div>
</div>
<script>
function switchSearch(site){
jQuery("#ifr").attr("src" ,site);
}
</script>
</body>
</html>
扫一扫
1299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
