JS和jQuery
一、贯穿案例展示：控制页面弹出对话框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LAjO69PE-1667629663007)(assets/image-20220913083824710.png)]
二、案例切片
- 切片1：弹出警告对话框
- 切片2：分数累加器
三、切片1：弹出警告对话框
3.1、导入：为什么要用JS
JavaScript用于控制网页内容，实现网页浏览者与网页内容之间的交互，这种交互的实现直接发生在客户端，并不需要与Web服务器之间进行数据通信，因此将获得极高的响应速度。
3.2、实现需求
当页面加载完成后弹出一个警告对话框
3.2.1、需求分析
需求分解：
1、使用JS实现弹出警告对话框
3.2.2、需求实现
<script type="text/javascript">
alert("Hello JS")
</script>
3.3、知识点补充
3.3.1、如何使用JS
在HTML页面中，使用< scipt>< /script>标签将JavaScript脚本，嵌入到页面中。当游览器读取到网页中的< script>标签时，将以指定脚本语言的方式解释执行，而不是以普通的HTML文本进行处理。在HMTL中编写JavaScript 一般有两种方式：
a、直接嵌入
JavaScript脚本可以写在HTML网页中的任何位置
语法：
<script type="text/javascript">
document.write("欢迎使用JavaScript编写页面特效")
</script>
提示：document.writeln输出后会有一个空格
b、使用外部JavaScript文件
使用外部JavaScript文件就是以单独的文件存放JavaScript代码，并将其后缀命名为.js。一般会创建一个js文件夹用来存放外部js文件，外部js文件的名称和对应的网页名称相同
步骤：
a、创建外部js文件
b、在html页面中引用外部js文件
<script language=“javascript” src="外部js文件">
3.3.2、函数
在Java中可以使用函数将java代码进行封装后多次调用，javascript中同样可以编写函数。JavaScript中的函数包括自定义函数和系统函数。
a、函数基本语法
在javascript中定义函数必须以function关键字开头。
语法:
function 函数名(参数列表){
函数代码块
[return 表达式]
}
提示：函数中的参数列表可以不写var或let关键字，直接写参数名
b、函数表达式
JavaScript的函数也是一个对象，上述定义的函数实际上是一个函数对象，而函数名可以视为指向该函数的变量
语法:
left f = function(参数列表){
函数体
有返回值，直接使用return value;
};
调用函数:
f(参数);
在这种方式下，function (x) { … }是一个匿名函数，它没有函数名。这个匿名函数赋值给了变量f，所以，通过变量f就可以调用该函数。 调用函数 f();
c、箭头函数
ES6的箭头函数lambda表达式: 箭头函数声明方式：() => {}
//箭头函数
let f =(num)=>{
console.log(num);
};
//调用函数
f(10);
3.3.3、事件
JavaScript是基本对象、采用事件驱动的脚本语言。在DOM模型中，通过鼠标或按钮在浏览器窗口或网页上执行的操作称为事件(event)。例如<font color=red>用鼠标单击网页上的某个按钮，则该按钮发生了鼠标的单击事件，按钮就是事件源。</font>事件不仅产生于与用户交互的过程中，还产生于浏览器的自身动作。例如<font color=red>浏览器载入页面时会发生load事件，关闭页面时会发生unload事件。</font>如果将一段程序与各件事件源发生的事件相关联，事件发生时，浏览器将自动执行相关联的程序代码，执行的过程即为事件驱动。
对事件进行处理的程序或函数，被称为事件处理程序，它是响应事件的动作。通常情况下，处理事件的程序被封装到函数中，然后将函数与对象事件关联在一起。
a、事件注册方式1：标签中定义事件
<input type=”button” onclick=”sayHi()” value=”sayHi”/>
<script type="text/javascript">
function sayHi(){
alert("hello");
}
</script>
b、事件注册方式2：通过不同的事件属性定义事件
<input type=”button” id="btn" value=”sayHi”/>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
alert("hello");
}
</script>
c、事件注册方式3：通过addEventListener定义事件
<body>
<button id="btn">say hi</button>
</body>
<script type="text/javascript">
document.getElementById("btn").addEventListener("click", function(){
console.log("目标元素被点击了");
});
</script>
3.4、案例拓展
3.4.1、案例一
按图实现效果
点击页面按钮，在页面上弹出确认对话框，点击确认对话框的确认键，在网页上输出“欢迎使用xxx管理系统”
使用到的知识点
JavaScript事件注册机制、js取dom
参考代码
<!DOCTYPE html>
<html>
<script type="text/javascript">
function doTest(){
if(confirm("确定输出吗？")){
document.write("欢迎使用xxx管理系统")
}
}
</script>
<body>
<button onclick="doTest()">点我试试</button>
</body>
</html>
3.4.2、案例二
按图实现效果
点击页面按钮，让页面上的分数累加
使用到的知识点
-
JavaScript事件注册机制、js取dom
-
获取网页控件内容：innerHtml（带样式）和innerText（不带样式）
-
将字符串转换成整型：parseInt(字符串)
-
将字符串转换成浮点型：ParseFloat(字符串)
参考代码
<!DOCTYPE html>
<html>
<body>
<div id="num"></div>
<button onclick="doAdd()">累加分数</button>
</body>
<script type="text/javascript">
document.getElementById("num").innerText = 0;
function doAdd(){
var num = document.getElementById("num").innerHTML;
document.getElementById("num").innerText = parseInt(num) + 1;
}
</script>
</html>
3.5、小结
现场提问
1、js代码写在哪一个标签中？
2、使用js代码可以有哪2哪种方式？
3、如何向浏览器控制台输出日志？
4、可以使用什么关键字来声明一个函数？
5、请输出一种事件注册的方法
四、切片2：使用jQuery实现案例二效果
4.1、为什么要使用jQuery
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
4.2、实现需求
实现案例二效果
4.2.1、需求分析
需求分解：
1、在页面上添加显示数字和按钮的控件
2、使用CDN（目前使用的是百度的CDN）的形式引入jQuery文件
3、通过jQuery提供的选择器控制页面DOM元素实现功能
4.2.2、需求实现
<!DOCTYPE html>
<html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// $(document).ready(function(){
$(function(){
$("button").click(function(){
var num = $("#num").text();
var value = parseInt(num) + 1;
$("#num").text(value);
});
});
</script>
<body>
<div id="num">0</div>
<button>累加分数</button>
</body>
</html>
4.3、知识点补充
4.3.1、jQuery基本语法
在jquery中所有的代码一般都要写在文档就绪函数中
第一种：
$(document).ready(function
//业务代码
});
第二种：该写法是第一种写法的缩略写法
$(function(){
//业务代码
});
4.3.2、jQuery中的选择器
jquery的强大之处在于丰富的选择器，合理的使用选择器让编写代码更加的得心应手。
基本选择器
| 名称 | 示例 | 描述 |
|---|---|---|
| ID选择器 | $(“#dv”) | 根据指定的id匹配元素，示例表示获得id值为dv的标签 |
Ps：类选择器、标签选择器、全局选择器在重难点补充中讲解
4.4、案例拓展
4.4.1、获取文本框内容，判断奇偶数
按图实现效果
使用到的知识点
-
表单控件的使用、jQuery选择器、jQuery监听点击事件
-
监听按钮点击事件：click();
参考代码
<!DOCTYPE html>
<html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// $(document).ready(function(){
$(function(){
$("#btn_check").click(function(){
var value = $("#num").val();
if(value % 2 == 0){
alert("偶数");
} else {
alert("奇数");
}
});
});
</script>
<body>
<input id="num" type="text"/>
<button id="btn_check">校验</button>
</body>
</html>
4.4.2、案例二
按图实现效果
使用到的知识点
-
表单控件的使用、jQuery选择器、jQuery监听点击事件
-
监听键盘抬起事件：keyup();
参考代码
<!DOCTYPE html>
<html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// $(document).ready(function(){
$(function(){
$("#num").keyup(function(){
// $("#num_show")
var value = $("#num").val();
$("#num_show").text(value);
});
});
</script>
<body>
<input id="num" type="text"/>
<div id="num_show"></div>
</body>
</html>
4.5、小结
现场提问
1、jQuery的文档就绪函数如何写？
2、如何使用id选择器？
3、如何向网页中的一个指定id的div中输出内容？
八、课程小结
8.1、知识框架图
现场提问，用XMind现场总结，再次加深学生印象
8.2、课后作业
需求定义
开发一个用户注册的页面
需求分解
需求分解：
1、在页面中添加标题
2、在页面中添加用户名、密码、重复密码、昵称的文本框
3、在页面中添加爱好复选框
4、在页面添加性别单选按钮
5、在页面添加学历下拉列表
6、在页面添加注册、重置按钮
原型设计
1292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
