目录
1. JS书写格式
JS 有 3 种书写格式:1. ⾏内格式2. 内嵌格式3. 外部格式
1.1 行内格式
直接嵌⼊到 html 元素内部
注意: JS 中字符串常量可以使⽤单引号表示, 也可以 使⽤双引号表示.HTML 中推荐使⽤双引号, JS 中推荐使⽤单引号.
1.2 内嵌格式
1.3 外部格式
写一个单独的 .js ⽂件
1. 引入JS
2. 使用JS
![](https://i-blog.csdnimg.cn/blog_migrate/c5fbfd3d3243653520743468830f6c93.png)
![](https://i-blog.csdnimg.cn/blog_migrate/05f10ba083ed6de60ec053fdb2eb301c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/621f81139e2839b703be4af8f256dda8.png)
2. JS基础语法
2.1 定义变量
var name = 'zhangsan';var age = 20;
JS 中内置的⼏种类型:number: 数字. 不区分整数和⼩数.boolean: true 真, false 假.string: 字符串类型.undefined: 只有唯⼀的值 undefined. 表示未定义的值.null: 只有唯⼀的值 null. 表示空值.所有的数据类型都可以使⽤ var 来定义,js 是弱类型的数据语⾔。
不能实现相加,修改:、
2.2 定义方法
JS 中使⽤ function 关键字来表示定义⼀个⽅法,function 后⾯跟的是⽅法名。
执行的时候,从前到后依次执行。
// 定义⽅法function myfun(){alert("执⾏了 myfun ⽅法");}// 调⽤⽅法myfun();// 定义⽅法带参数function myfun(name){alert(name+":执⾏了 myfun ⽅法");}// 调⽤myfun('Java');
2.3 条件判断
2.3.1 if
(JS支持三元表达式)
2.3.2 switch
2.3.3 while循环 和 for循环
3. JS操作DOM
3.1 得到控件
根据id得到HTML控件:document.getElementById("元素id")
3.2 操纵控件
3.2.1 获取元素值
document.getElementById("username").value
3.2.2 设置元素的值
document.getElementById("username").value = "java";
3.2.3 InnerText/ InnerHTM
将innerText换成innerHTML后:
应用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>