目录
1、什么是JavaScript?
1.1 JS概览
JavaScript是世界上最流行的编程语言之一,它是一种脚本语言,通过解释器运行,主要在客户端(浏览器)上运行。
JS能完成的事情:
①网页开发
②网页游戏开发
③服务器开发
④桌面程序开发(比如VSCode)
⑤手机app开发
1.2 JS、CSS、HTML三者关系
HTML:网页的结构(基础结构)
CSS:网页的表面(包装)
JS:网页的行为(实现的操作)
1.3 JS是如何运行的?
JS通过浏览器可以直接运行,JS通常是包含在HTML页面中的,浏览器中包含了两大类引擎:渲染引擎(HTML渲染引擎、CSS渲染引擎)、JS执行引擎。
2、JS前置知识
2.1 JS书写格式
①行内格式
<body>
<input type="button" value="点我" onclick="alert('haha')">
</body>
②内嵌格式
写到script标签中
<script>
alert("hh");
</script>
③外部格式
写到单独的.js文件中
<script src="hello.js"></script>
2.2 消息打印
①弹出输入框:
alert("hello");
②弹出选择框
confirm("确认删除?");
③输出信息到控制台
console.log("这是一条日志");
重要概念:log(日志)
查日志是程序猿调式程序的重要手段,以后日志就是我们的好盆友。
注意:JS中字符串常量可以使用单引号表示,也可以使用双引号表示,但HTML中推荐使用双引号,JS中推荐使用单引号。
2.3 注释
单行注释://
多行注释:/*.....*/
注释快捷键可自己设置
ctrl+/
注意与html中注释不同,html中注释为:<!--...-->
3、JS基础语法
3.1 定义变量
var name = '张三';
var age = 20;
var是JS中的关键字,表示这是一个变量。JS为弱类型语言,所以所有的变量都需要使用var来定义。
3.2 定义方法
//定义方法
function myfun(){
alert("执行了 myfun 方法")
}
//调用方法
myfun();
//定义带参数的方法
function myfun(name){
alert(name+"执行了 myfun 方法")
}
//调用
myfun('java');
3.3 条件判断
判断等语法和java语法类似,具体使用如下:
// if 写法 1
if(flag){
alert("标识为真");
}
*/
/*
// if 写法 2
if(flag){
alert("标识为真");
}else{
alert("标识为假");
}*/
/**
// if 写法 3
var day = "3";
if(day=="1"){
alert("今天星期1");
}else if(day=="2"){
alert("今天星期2");
}else if(day=="3"){
alert("今天星期3");
}else if(day=="4"){
alert("今天星期4");
}else{
alert("其他");
}
**/
// 写法4:三元表达式/三目表达式
// flag ? alert("为真") : alert("为假");
// switch
var day = 2;
// switch(day){
// case 1:
// alert("今天是周一");
// break;
// case 2:
// alert("今天是周二");
// break;
// //...
// default:
// alert("其他");
// }
// while
var num=0;
// while(num<10){
// if(num==5){
// break;
// }
// // console.log(num);
// // num++;
// console.log(num++);
// }
// for
for(var num=0;num<10;num++){
// console.log(num);
// }
4、JS操作DOM树
4.1 得到控件
document.getElementById("元素id")
4.2 操纵控件
document.getElementById("username").value; //获取元素值
document.getElementById("username").value = ...; //设置元素值
4.3 innerText/innerHTML
比如div标签,它没有value属性,此时若要获取控件,即获取元素开始和结束标签之间的Text或者HTML,此时用innerText/innerHTML,若需要用到css美化则用innerHTML,简单的文本就用innerText。
4.4 关于jQuery 框架
4.4.1 什么是jQuery?
jQuery是一个JS库,jQuery极大简化了JS编程。
与原生代码比较
4.4.2 如何使用jQuery?
导入js文件
<head>
<meta charset="UTF-8">
<title>我的文章列表</title>
<script src="jquery-1.9.1.min.js"></script>
</head>
4.4.3 基于jQuery 实现聚合搜索
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聚合搜索</title>
<script src="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/')">
<input value=" 360 " type="button" onclick="switchSearch('https://www.so.com/')">
<input value=" 搜狗 " type="button" onclick="switchSearch('https://www.sogou.com/')">
</div>
<div>
<iframe id="ifr" style="width: 100%;height: 600px;"
src="https://cn.bing.com/"></iframe>
</div>
</div>
<script>
function switchSearch(site){
jQuery("#ifr").attr("src",site);
}
</script>
</body>
</html>