JS和jQuery基础
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、在页面添加注册、重置按钮
原型设计
参考文献
JS和jQuery基础相关推荐
- java与jquery的选择器区别_java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScrip ...
- java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章 JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScr ...
- Js与Jq实战：第七讲：jQuery基础
第七讲:jQuery基础 一.预习笔记 1.jQuery的简述 2.jQuery对象与JS对象 3.jQuery的基本选择器 4.jQuery层次选择器 5.jQuery基本过滤选择器 6.jQuer ...
- day43 JavaWen阶段——JQuery 基础（JQuery相关开发文档，JQuery对象和JS对象区别与转换，JQuery选择器，JQuery中DOM操作，案列【QQ表情选择】【左右移动】）
今日内容 1. JQuery 基础: 概念 快速入门 JQuery对象和JS对象区别与转换 选择器 DOM操作 案例 今日源码: 链接:https://pan.baidu.com/s/1KiG0c_V ...
- 事件委托技术原理和使用（js，jquery）
事件委托技术原理和使用(js,jquery) 原创 2016年03月10日 11:18:56 标签: 技术 / jquery / javascript 2555 一:事件委托技术原理 摘自http:/ ...
- 【Java Web开发指南】JQuery基础笔记
文章目录 JQuery 基础: 1. JQuery 基础:1. 概念2. 快速入门3. JQuery对象和JS对象区别与转换4. 选择器5. DOM操作6. 案例 JQuery 基础: 1. 概念: ...
- JQuery-学习笔记04【基础——JQuery基础案例】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- JQuery-学习笔记01【基础——JQuery基础】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- 06 Jquery 基础
06 Jquery 基础 前端学习之jquery: jQuery:一个库 Jquery的基础语法: $(selector).action() 基本选择器: <script>//基本选择器/ ...
最新文章
- 基于 Alluxio 的 HDFS 多集群统一入口的实现
- PCA目标函数的推导
- 乐高积木搭建微型地球仪，lego微型地球仪搭建详细流程
- Win10 EPROCESS 断链
- Cocoa/iPhone App/静态库 嵌入资源文件 rtb v0.1发布
- 数十种TensorFlow实现案例汇集：代码+笔记
- @select注解_Mybatis基本知识十七：Mybatis注解式开发-单表注解式开发
- 【POJ - 2987】Firing（最大权闭合图，网络流最小割，输出方案最小，放大权值法tricks）
- Asp.net MVC验证哪些事（2）-- 验证规则总结以及使用
- ibm服务器怎么收集日志信息,IBM X86 服务器Linux下收集DSA日志方法（包含BMC信息）...
- java 父类获取子类名称_Java入门第十六课：如何用继承的方法定义类
- 转载：住在我隔壁的大学刚毕业的小夫妻
- 随笔--你该如何利用自己的“暗时间”？
- 蒟蒻C语言入门篇（一）
- 软件测试周刊（第15期）：将军赶路 不追小兔
- 隐私泄露距离你我有多远?APP扩大个人隐私收集，增大隐私保护难度
- 程序设计天梯赛选拔 大炮打蚊子(刷水题就变傻，确实，感觉自己变傻了)
- informatica关于计划任务的表说明
- 法国敏捷开发与敏捷测试模式
- 借助幕课网的资源重新梳理下PHP基础知识，用以备忘。