今日内容
0 复习上周
1 本周安排
2 JQuery介绍
3 JQuery引入
4 JQuery的语法
4.1 选择器
4.2 事件
5 DOM操作
5.1 获取设置标签内容
5.2 获取设置标签属性
5.3 获取设置标签样式
6 作业
0 复习上周
1 写出至少15个标签
复制
h1-h6 p hr br div span font ol ul li img a iframe table tr td form input select option 2 写出至少7个css属性
复制
color,text-align,font-size,font-family,background-color,background-image width,height,list-style,display,margin,padding,border,position,top,bottom,left,right,float --- 以上属性的值,要再记忆 3 写出input标签的type的不同属性值以及解释
复制
type=text,文本框 type=password,密码框 type=radio,单选框 type=checkbox,复选框 type=file,文件上传 type=email,邮箱 type=date,日期 4 写出js通过id获得dom对象的语句
复制
document.getElementById("id") 5 写出js代码:获得input的值
复制
input对象.value 6 写出几个表单事件
复制
获得焦点 onfocus 失去焦点 onblur 内容改变 onchange 表单提交 onsubmit 7 form
复制
action,表单数据提交到后台的路径 ----- 课下,再写一个注册表单,form写上路径,点击提交,观察浏览器路径 demo1.html?username=admin&password=123456&sex=男&skill=Java&skill=HTML&birthday=2022-01-01 ----- 以上路径,发现?前面是服务器路径 ?后面是表单提交的数据,key=value key是表达标签(input,select)要设置name属性 https://www.baidu.com/s?ie=UTF-8&wd=java 8 哪些HTML标签,CSS样式,JS能发出请求?
复制
总结: HTML标签内,有src或者href属性都可以发请求 <a href="路径"> <link href="路径"> <img src="路径"> <form action="路径"> <iframe src="路径"> css中,关于引入图片的属性,也会发请求 background-image:url(路径) js中 window.location.href = "路径"
1 本周安排
- 周一 JQuery
- 周二 JQuery
- 周三 MySQL
- 周四 MySQL
- 周五 MySQL
2 JQuery介绍
JQuery是JS的类库,是js的框架,将原来的JS的操作封装,让js操作DOM,BOM等更加方便简洁.优化HTML文档操作、事件处理、动画设计和AJAX交互。
复制
jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。 jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
自己总结,jq是什么,用来干什么
3 JQuery引入
1 JQuery是JS的框架,是第三方技术,是需要在
项目中引入JQuery类库2 在HTML
页面中引入JQuery类库3 以后,就可以在页面中写JQuery代码
3.1 项目中引入JQuery类库
项目中引入js类库,一般都会新建一个文件夹js
一个完整的前端项目目录结构
-项目名
–css
–js
–images
3.2 页面中引入
3.3 使用JQuery
<body> <button id="btn">点我,使用JQ绑定事件,弹框</button> <!-- 引入JQuery,开闭标签之间,不要再写js代码 --> <script src="./js/jquery-2.1.0.js"></script> <!-- 先引入JQuery,再开始写代码 --> <script> // $("#btn") 选中btn按钮 // .click 绑定点击事件 // function() 事件触发的函数 $("#btn").click(function () { alert("jquery弹框"); }); </script> </body>
4 JQuery的语法
现在主要学习JQuery的语法是
- 选择器
- 事件
其他的JS语法,在JQuery是通用的,例如
- 变量
- 数据类型
- 引用类型(JSON,数组,日期,数学等)
- 运算符
- 分支选择
- 循环
4.1 选择器
选择器有很多种,具体查询APIjQuery 参考手册 - 选择器 (w3school.com.cn)
主要学习几个基本即可
- 标签名
- id
- 类
标签名选择器
复制
$("标签名"); // 这样就可以获得同名所有标签,返回的是数组 // $是JQuery中特殊符号,$===JQuery对象
<body> <div>曹操</div> <div>曹植</div> <div>曹丕</div> <span>曹冲</span> <script src="./js/jquery-2.1.0.js"></script> <script> // 标签名选择器,选到所有同名标签,返回数组 var divArr = $("div"); console.log(divArr); </script> </body>
id选择器
复制
$("#id") // 标签要设置id属性,$()内要使用#id选中标签
<body> <div id="d1">曹操</div> <div id="d2">曹植</div> <div id="d3">曹丕</div> <span id="d4">曹冲</span> <script src="./js/jquery-2.1.0.js"></script> <script> // id选择器,标签加id属性,$()内要#号 // 选择到一个标签 var div1 = $("#d1"); console.log(div1); </script> </body>
类选择器
复制
$(".class")
<body> <div id="d1">曹操</div> <div id="d2" class="son">曹植</div> <div id="d3" class="son">曹丕</div> <span id="d4" class="son">曹冲</span> <script src="./js/jquery-2.1.0.js"></script> <script> // 类选择器,标签加class属性,$()内要.class // 选择到同class的多个标签 var sonArr = $(".son"); console.log(sonArr); </script> </body>
其他选择器,笔记中不再记,代码演示一下…
4.2 事件
事件就是发生在浏览器上的事情,键盘事件,鼠标,表单事件,加载事件等
现在这些事件与JS中事件是一样,只不过是代码变成了JQuery的语法格式
事件的写法不一样,与原来HTML事件中少了on
JQuery事件 HTML事件 focus onfocus click onclick … … 绑定方式
复制
jquery对象.事件(响应函数)
4.2.1 点击双击
<body> <button id="btn-1">点单击事件</button> <button id="btn-2">点双击击事件</button> <script src="./js/jquery-2.1.0.js"></script> <script> var count = 0; /** * 1 选择事件源 * 2 绑定事件 * 3 设置响应函数 */ $("#btn-1").click(function () { count++; console.log("单击:" + count); }); $("#btn-2").dblclick(function () { console.log("双击"); }); </script> </body>
4.2.2 鼠标事件
<body> <div id="box" style="width: 200px; height: 200px; border: 2px red solid" ></div> <script src="./js/jquery-2.1.0.js"></script> <script> var count = 0; /** * 1 选择事件源 * 2 绑定事件 * 3 设置响应函数 */ // $("#box").mouseover(function () { // console.log("鼠标进入"); // }); // $("#box").mouseout(function () { // console.log("鼠标离开"); // }); // 链式语法,其实就是链式调用,连着调用 $("#box").mouseover(function () { console.log("鼠标进入"); }).mouseout(function () { console.log("鼠标离开"); }).mousemove(function () { console.log("鼠标移动"); }); </script> </body>
4.2.3 键盘事件
- keydown
- keyup
- keypress
<body> <!-- 演示键盘事件 --> <input id="input-1" /> <script src="./js/jquery-2.1.0.js"></script> <script> /** * 1 选择事件源 * 2 绑定事件 * 3 设置响应函数 */ $("#input-1") .keydown((event) => { console.log("键盘按下"); if (event.keyCode == 13) { console.log("按下回车,提交表单"); } }) .keyup(() => { console.log("键盘弹起"); }) .keypress(function () { console.log("键盘按压"); }); </script> </body>
4.2.4 表单事件
- focus
- blur
- change
- submit
<body> <form accept="/java2217"> 用户名<input type="text" name="username" /><br /> 密码<input type="password" name="password" /><br /> 技能<input type="checkbox" name="skill" value="Java" /> Java <input type="checkbox" name="skill" value="HTML" /> HTML <input type="checkbox" name="skill" value="MySQL" /> MySQL <br /> <input type="submit" value="提交" /> </form> <script src="./js/jquery-2.1.0.js"></script> <script> // 获得焦点失去焦点 $("input[type=text]") .focus(() => { console.log("用户名输入框获得焦点"); }) .blur(() => { console.log("用户名输入框失去焦点"); }); // 内容改变(下拉框,单选复选,都可以实现改变事件) $("input[type=checkbox]").change(() => { console.log("内容改变"); }); // 表单提交 // 选中表单,绑定事件 // form是标签名选择器,:first是选中第一个 $("form:first").submit(function () { console.log("提交了"); // return false; // 阻止表单提交 return true; // 允许表单提交 }); </script> </body>
4.2.5 加载事件
- 加载事件,当页面加载完再触发的事件
- js时加载事件是onload
- 在jquery中ready来加载事件
<html lang="en"> <head> <script src="./js/jquery-2.1.0.js"></script> <script> // 设置页面加载事件 $(document).ready(function () { $("#btn").click(() => { console.log("点击"); }); }); // 以上页面加载事件,会简写 $(function () { $("#btn").click(() => { console.log("点击222"); }); }); </script> </head> <body> <button id="btn">按钮</button> </body>
5 DOM操作
5.1 获取设置标签内容
js中
- innerHTML
- innerText
jQuery中
- html(内容)
- text(内容)
- val(内容)
<body> <div id="div-1"> <span>获得设置标签内容</span> </div> <button id="btn-1">点击获得div中html</button> <button id="btn-2">点击获得div中text</button> <hr /> <button id="btn-3">点击设置div中html</button> <button id="btn-4">点击设置div中text</button> <hr /> <input id="input-1" /> <button id="btn-5">点击获得input中的value</button> <button id="btn-6">点击设置input中的value</button> <script src="./js/jquery-2.1.0.js"></script> <script> // 获得html标签,及内容 $("#btn-1").click(() => { console.log($("#div-1").html()); }); // 获得纯文本内容 $("#btn-2").click(() => { console.log($("#div-1").text()); }); // 设置html.其中有标签和属性,会解析 $("#btn-3").click(() => { $("#div-1").html("<p style='color:red'>这是重新设置的内容</p>"); }); // 设置text,其中全部都以文本展现 $("#btn-4").click(() => { $("#div-1").text("<p style='color:red'>这是重新设置的内容</p>"); }); // 获得输入框的值 $("#btn-5").click(() => { console.log($("#input-1").val()); }); // 获得输入框的值 $("#btn-6").click(() => { $("#input-1").val("黑发不知勤学早,白首方悔读书迟."); }); </script> </body>
5.2 获取设置标签属性
属性(attribute)操作
- attr(name) 获得指定名字的属性
- attr(name,value) 给指定属性设置值
- attr(properties) 给多个属性设置值
- properties其实是json对象
- {key:value,key:value}
- removeAttr(name) 移除指定属性的值
<body> <input id="input-1" type="text" /> <button id="btn-1">获得type的属性值</button> <button id="btn-2">设置type的属性值password</button> <button id="btn-3">设置type的多个属性值</button> <button id="btn-4">移除属性</button> <script src="./js/jquery-2.1.0.js"></script> <script> $("#btn-1").click(function () { // 获得属性值 console.log($("#input-1").attr("type")); }); $("#btn-2").click(function () { // 设置属性值 $("#input-1").attr("type", "password"); }); // 同时设置多个属性值 $("#btn-3").click(function () { // 同时设置类型是密码框,再设置默认值 // 使用的是json {key:"value"} $("#input-1").attr({ type: "password", value: "111111" }); }); // 移除属性 $("#btn-4").click(function () { // 设置属性值,移除该属性,就是默认效果 $("#input-1").removeAttr("type"); }); </script> </body>
5.3 获取设置标签样式
JQuery操作样式有两种方案
- 给标签设置class类
- 给标签的style设置css属性
5.3.1 设置class类
通过给标签设置/删除class类来改变样式
- addClass(class)
- removeClass(class)
- toggleClass(class)
<head> <title>获得设置class类</title> <style> .box1 { width: 100px; height: 100px; background-color: red; } .box2 { width: 200px; height: 200px; background-color: green; } </style> </head> <body> <div id="box" class="box1">块</div> <button id="btn-1">设置box2样式类</button> <button id="btn-2">移除box2样式类</button> <button id="btn-3">切换样式</button> <script src="./js/jquery-2.1.0.js"></script> <script> $("#btn-1").click(() => { $("#box").addClass("box2"); }); $("#btn-2").click(() => { $("#box").removeClass("box2"); }); $("#btn-3").click(() => { // 切换box2 // 当前有box2样式,那我就移除 // 当前没有box2样式,那我就添加 $("#box").toggleClass("box2"); }); </script> </body>
5.3.2 设置获得css属性
设置获得css属性
- css(属性) 获得指定css属性值
- css(属性,值) 设置指定属性和值
- css(properties)
<body> <div id="box" style="background-color: red">块</div> <button id="btn-1">点击获得属性</button> <button id="btn-2">点击设置1个属性</button> <button id="btn-3">点击设置多个属性</button> <script src="./js/jquery-2.1.0.js"></script> <script> $("#btn-1").click(() => { // 获得指定css属性值 console.log($("#box").css("background-color")); }); $("#btn-2").click(() => { // 设置指定css属性值 $("#box").css("background-color", "green"); }); $("#btn-3").click(() => { // 同时设置多个css属性 $("#box").css({ backgroundColor: "yellow", width: "200px", height: "200px", }); }); </script> </body>
补充
<body> 性别 <!-- 单选框,默认选中,需要加属性checked --> <!-- HTML5中,即现在版本中,属性名和属性值一样时,可以只写属性名 --> <input type="radio" name="sex" value="1" />男 <input type="radio" name="sex" value="2" checked />女 <hr /> <input type="checkbox" name="skill" value="java" checked />java <input type="checkbox" name="skill" value="html" checked />html <input type="checkbox" name="skill" value="mysql" />mysql </body>
6 作业
0 重复2遍代码 1 jq实现二级联动 2 全选和反选 3 以上css属性的值,要再记忆 4 课下,再写一个注册表单,form写上路径,点击提交,观察浏览器路径
lor: “yellow”,
width: “200px”,
height: “200px”,
});
});
补充
<body> 性别 <!-- 单选框,默认选中,需要加属性checked --> <!-- HTML5中,即现在版本中,属性名和属性值一样时,可以只写属性名 --> <input type="radio" name="sex" value="1" />男 <input type="radio" name="sex" value="2" checked />女 <hr /> <input type="checkbox" name="skill" value="java" checked />java <input type="checkbox" name="skill" value="html" checked />html <input type="checkbox" name="skill" value="mysql" />mysql </body>
6 作业
0 重复2遍代码 1 jq实现二级联动 2 全选和反选 3 以上css属性的值,要再记忆 4 课下,再写一个注册表单,form写上路径,点击提交,观察浏览器路径
