jQuery框架-笔记
《jQuery框架-上课笔记》
共性问题
-
如何让自定义的模板，最后光标出现在指定的位置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bi0eBYm6-1593132159008)(assets/image-20200415090152587.png)]
-
邮箱地址正则表达式
/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/ -
createTextNode(文本)
创建文本节点，上课使用的是createElement("元素") 不推荐使用这个方法，建议innerText代替
回顾
- json相关的方法
| 语法 | 功能 |
|---|---|
| JSON.parse(字符串) | 将字符串转成JSON对象 |
| JSON.stringify(JSON对象) | 将JSON对象转成字符串 |
- 能够使用window对象常用的方法
| window中的方法 | 说明 |
|---|---|
| setInterval()/setTimeout() | 每隔一段时间调用1次/过一段时间只调用一次 |
| clearTimeout() / clearInterval() | 清除计时器，计时器是上面方法的返回值 |
- 能够使用location对象常用的属性
| 属性 | 功能 |
|---|---|
| href | 页面跳转 |
| search | 获取？后面的参数 |
- 能够使用history对象常用的方法
| 方法 | 作用 |
|---|---|
| forward() | 前进 |
| back() | 后退 |
- 能够使用DOM中来查找节点
| 获取元素的方法 | 作用 |
|---|---|
| document.getElementById(“id”) | 通过id获取唯一元素 |
| document.getElementsByTagName (“标签名”) | 通过标签名获取一组元素 |
| document.getElementsByName(“name”) | 通过name属性获取一组元素 |
| document.getElementsByClassName(“类名”) | 通过类名获取一组元素 |
| 根据CSS选择器获取元素 | 作用 |
|---|---|
| document.querySelector(CSS 选择器) | 通过CSS选择器获取一个元素 |
| document.querySelectorAll(CSS 选择器) | 通过CSS选择器获取一组元素 |
- 能够使用DOM来增删改节点
| 创建元素的方法 | 作用 |
|---|---|
| document.createElement(“标签名”) | 创建一个元素 |
| 将元素挂到DOM树上的方法 | 作用 |
|---|---|
| 父元素.appendChild(子元素) | 追加成最后一个子元素 |
| 父元素.removeChild(子元素) | 删除子元素 |
| 元素.remove() | 删除自己 |
- 能够使用正则表达式进行表单的验证
创建正则表达式格式：
new RegExp("正则表达式","匹配模式i")
/正则表达式/匹配模式
正则表达式的判断方法：
boolean 正则表达式对象.test(字符串)
学习目标
- 能够使用jQuery的基本选择器
- 能够使用jQuery的层级选择器
- 能够使用jQuery的过滤选择器
- 能够使用jQuery的DOM操作的方法
- 能够完成隔行换色
学习内容
什么是jQuery
目标
-
什么是jQuery
-
它有什么作用
什么是JS框架
JS框架也是使用JavaScript语言编写的，框架本身提供了大量的新的方法，可以简化JS代码，提高开发效率。
为什么要使用框架开发
同一段JS代码在不同的浏览器上执行效果是有差异的
- jQuery框架也是JS代码写出来的，就是一个JS文件
- 由第三方厂商做出来的，免费开源。
- 提供了大量的方法，以前需要编写多行代码的功能，现在一行代码就可以实现
- 程序员只需要编写一套代码 ，就可以无差异的运行在所有的浏览器上。
jQuery框架特点：
- 免费开源
- 轻量级框架：占用资源少，运行速度快
- 宗旨：write less do more
小结
jQuery开发有什么好处？
- 提高开发效率
- 免费开源
- 减少开发工作量
jQuery的导入与使用
目标
在页面上使用jQuery框架
官网
http://www.jquery.com
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JK6m6jGI-1593132159025)(assets/1553152806464.png)]
版本的选择：企业中使用相对比较低版本，学习比较高的版本
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hdoSfNgc-1593132159034)(assets/image-20200415093101046.png)]
- 开发中使用标准版：代码可读性好，有注释，文件比较大
- 在企业中部署使用压缩版，文件小
这两个版本在功能上是完全一样的
文档网站
https://www.jquery123.com/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nmAQ1pKy-1593132159045)(assets/image-20200415092946957.png)]
案例：导入jQuery并测试是否成功
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第1个jQuery代码title>
<script src="js/jquery-3.3.1.js">script>
head>
<body>
<script type="text/javascript">
$(function () {
//我们的代码写在这里，会在网页加载完毕以后执行
alert("Hello jQuery");
});
script>
body>
html>
导入失败的情况
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-puE8hWOg-1593132159053)(assets/image-20200415093953326.png)]
$(function())的作用
类似于window.onload
与window.onload的区别
<html lang="en">
<head>
<meta charset="UTF-8">
<title>与window.onload的区别title>
<script src="js/jquery-3.3.1.js">script>
head>
<body>
<script type="text/javascript">
/**
* jQuery中每个入口函数都会依次执行
*/
/*$(function () {
alert("Hello jQuery1");
});
$(function () {
alert("Hello jQuery2");
});*/
window.onload = function () {
alert("Window 1");
}
/**
* 只会执行最后这一次，后面的覆盖前面的
*/
window.onload = function () {
alert("Window 2");
}
script>
body>
html>
小结
-
jQuery导入有哪两个步骤?
- 将jquery复制到js目录下
- 使用script标签导入jquery.js文件
-
$(function()) 相当于哪个事件?
window.onload
jQuery对象与js对象之间的转换
JS对象与jQuery对象的区别
-
JS对象：以前通过DOM中方法获得的元素都是JS对象，如：document.getElementById(“id”)
-
jQuery对象：通过jQuery选择器选中元素，就是jQuery对象
为什么要转换
注：JS对象无法使用JQ对象中方法，如果JS对象需要使用JQ对象中方法，必须将JS对象转成JQ对象，反之亦然。
转换语法
| 操作 | 方法 |
|---|---|
| 将JS对象–>jQuery对象 | $(JS对象) |
| 将jQuery对象–> JS对象 | JQ对象[0] 或 JQ对象.get(0) JQ对象本质上是JS的一个数组对象 |
JS与JQ转换的演示案例：
需求
页面上有一个文本框，文本框中有值：传智播客。分别使用JS和jQuery的方法得到文件框中的值。
效果
代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS对象与JQ对象转换title>
<script type="text/javascript" src="js/jquery-3.3.1.js">script>
head>
<body>
<h2>JS对象与JQ对象的转换h2>
<input type="text" id="company" value="传智播客">
<input type="button" id="b1" value="JS得到值">
<input type="button" id="b2" value="JQ得到值">
<script type="text/javascript">
//使用JS对象的方法
document.getElementById("b1").onclick = function () {
//1.得到文本框对象
let jsObject = document.getElementById("company"); //JS对象
//2.取出文本框的值
//let txt = jsObject.value; //调用js对象的属性或方法
//将jsObject -> jqObject 转换
let txt = $(jsObject).val();
//3.显示出来
alert(txt);
}
//使用JQ对象的方法：按钮2的单击事件
$("#b2").click(function () { //回调函数，事件处理函数
//1.得到文本框对象
let jqObject = $("#company"); //JQ对象
//2.取出文本框的值
//let txt = jqObject.val(); //调用JQ中方法
//将jq对象->js对象
let txt = jqObject[0].value;
//3.显示出来
alert(txt);
});
script>
body>
html>
小结
| 操作 | 方法 |
|---|---|
| 将JS对象–>jQuery对象 | $(JS对象) |
| 将jQuery对象–> JS对象 | JQ对象[0] 或 JQ对象.get(0) |
选择器：基本选择器
目标
基本选择器的使用
选择器的作用
如果要操作网页中各种元素，首先要选中这些元素。jQuery中的选择器功能强大，选择方式灵活多样。
jQuery常用的选择器有如下：
- 基本选择器
- 层级选择器
- 过滤选择器
- 表单过滤选择器
选择器的语法
注：所有的选择器外面都要使用$("")，如：ID选择器 $("#ID")
| 基本选择器 | 语法 |
|---|---|
| ID选择器 | #ID |
| 类选择器 | .类名 |
| 标签选择器 | 标签名 |
示例：基本选择器的使用
<html>
<head>
<title>基本选择器title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js">script>
<style type="text/css">
div, span {
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div .mini {
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
div .mini01 {
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
style>
head>
<body>
<input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
<input type="button" value=" 改变元素名为 的所有元素的背景色为 红色" id="b2"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/>
<h1>有一种奇迹叫坚持h1>
<div id="one">
id为one
div>
<div id="two" class="mini">
id为two class是 mini
<div class="mini">class是 minidiv>
div>
<div class="one">
class是 one
<div class="mini">class是 minidiv>
<div class="mini">class是 minidiv>
div>
<div class="one">
class是 one
<div class="mini01">class是 mini01div>
<div class="mini">class是 minidiv>
div>
<div id="mover">
div 动画
div>
<span class="spanone">class为spanone的span元素span>
<span class="mini">class为mini的span元素span>
body>
<script type="text/javascript">
// 1) 改变 id 为one的元素的背景色为红色
$("#b1").click(function () {
//css方法("样式名","值")，修改行内样式
$("#one").css("background-color", "red");
});
// 2) 改变元素名为 的所有元素的背景色为 红色。
$("#b2").click(function () {
/*
标签选择器，选中所有的div
jquery几乎所有的方法，都支持直接操作一个集合
*/
$("div").css("background-color", "red");
});
// 3) 改变 class 为 mini 的所有元素的背景色为 红色
$("#b3").click(function () {
//样式名可以写成：background-color,也可以写成backgroundColor
$(".mini").css("backgroundColor", "red");
});
script>
html>
小结
基本选择器
语法
ID选择器
#ID
类选择器
.类名
标签选择器
标签名
选择器：层级选择器
目标
层级选择器的使用
语法
注：省略了$("")
层级选择器
语法
获取A元素内部所有B元素，B是A的子孙元素
A B
获得A元素下面的所有B子元素
A>B
获得A元素同级，下一个B元素。(B和A是兄弟关系，A是老二，B是老三)
A+B
获取A元素后面所有同级B元素。(B是A后面所有的兄弟，得到一个集合)
A~B
演示案例
<html>
<head>
<title>层次选择器title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js">script>
<style type="text/css">
div, span {
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div .mini {
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
div .mini01 {
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
style>
head>
<body>
<input type="button" value="改变 内所有 的背景色为红色" id="b1"/>
<input type="button" value="改变 内子 的背景色为 红色" id="b2"/>
<input type="button" value="改变 id为two的下一个div兄弟元素的背景色为红色" id="b3"/>
<input type="button" value="改变id为two的后面同级兄弟div元素的背景色为红色" id="b4"/>
<h1>有一种奇迹叫坚持h1>
<div id="one">
id为one
div>
<div id="two" class="mini">
id为two class是 mini
<div class="mini">class是 minidiv>
div>
<div class="one">
class是 one
<div class="mini">class是 minidiv>
<div class="mini">class是 minidiv>
div>
<div class="one">
class是 one
<div class="mini01">class是 mini01div>
<div class="mini">class是 minidiv>
div>
<span class="spanone">spanspan>
body>
<script type="text/javascript">
//1) 改变 内所有 的背景色为红色，子孙都算
$("#b1").click(function () {
$("body div").css("background-color", "red");
});
//2) 改变 内子 的背景色为 红色
$("#b2").click(function () {
$("body>div").css("background-color", "red");
});
//3) 改变 id为two的下一个div兄弟元素的背景色为红色
$("#b3").click(function () {
$("#two+div").css("background-color", "red");
});
//4) 改变id为two的后面同级兄弟div元素的背景色为红色
$("#b4").click(function () {
$("#two~div").css("background-color", "red");
});
script>
html>
小结
层级选择器
语法
获取A元素内部所有B元素
A B
获得A元素下面的所有B子元素
A>B
获得A元素同级，下一个B元素
A+B
获取A元素后面所有同级B元素
A~B
选择器：过滤选择器
目标
基本过滤选择器的使用
什么是过滤选择器
在现有已经选择的元素基础之上，再次进行过滤，得到剩下的元素。类似于CSS中伪类选择器语法
语法
基本过滤选择器
语法
获得选择的元素中的第一个元素
:first
获得选择的元素中的最后一个元素
:last
不包括指定内容的元素
:not()
偶数，从 0 开始计数
:even
奇数，从 0 开始计数
:odd
等于第几个 equals
:eq()
大于第n个，不含第index个
:gt()
小于第n个，不含第index个
:lt()
演示案例
<html>
<head>
<title>基本过滤选择器title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js">script>
<style type="text/css">
table {
margin: auto;
border-collapse: collapse;
width: 525px;
}
tr {
height: 30px;
text-align: center;
}
.girl {
width: 260px;
height: 260px;
border: 1px solid gray;
float: left;
}
style>
head>
<body>
<input type="button" value="第一行的背景色为浅灰色" id="b1"/>
<input type="button" value="最后一行的背景色为浅绿色" id="b2"/>
<input type="button" value="除第1行和最后1行的其它行背景色为浅黄色" id="b3"/>
<input type="button" value="索引值为偶数的行背景色为浅粉色" id="b4"/>
<input type="button" value="索引值为奇数的行背景色为aquamarine色" id="b5"/>
<input type="button" value="索引值大于 3 的tr元素的背景色为oldlace色" id="b6"/>
<input type="button" value="索引值等于 3 的tr元素的背景色为antiquewhite" id="b7"/>
<input type="button" value="索引值为小于 3 的tr元素背景色为yellowgreen" id="b8"/>
<hr />
<div style="width: 525px; margin: auto;">
<table border="1" align="center">
<caption><h3>学生信息列表h3>caption>
<tr>
<th>学号th>
<th>姓名th>
<th>性别th>
<th>年龄th>
<th>家庭住址th>
<th>成绩th>
tr>
<tr>
<td>1001td>
<td>孙悟空td>
<td>男td>
<td>72td>
<td>花果山td>
<td>90td>
tr>
<tr>
<td>1002td>
<td>猪八戒td>
<td>男td>
<td>36td>
<td>高老庄td>
<td>78td>
tr>
<tr>
<td>2002td>
<td>沙僧td>
<td>男td>
<td>30td>
<td>流沙河td>
<td>67td>
tr>
<tr>
<td>3000td>
<td>唐三藏td>
<td>男td>
<td>26td>
<td>东土td>
<td>87td>
tr>
<tr>
<td>4000td>
<td>白骨精td>
<td>女td>
<td>18td>
<td>白骨洞td>
<td>96td>
tr>
<tr>
<td>5000td>
<td>蜘蛛精td>
<td>女td>
<td>17td>
<td>盘丝洞td>
<td>95td>
tr>
<tr>
<td>总成绩td>
<td colspan="5">3045td>
tr>
table>
div>
<br />
body>
<script type="text/javascript">
//1) 改变第一行的背景色为浅灰色
$("#b1").click(function () {
//标签选择器，过滤得到第0元素
$("tr:first").css("backgroundColor", "lightgreen");
});
//2) 改变最后一行的背景色为浅绿色
$("#b2").click(function () {
$("tr:last").css("backgroundColor", "lightgreen");
});
//3) 改变除第1行和最后1行的其它行背景色为浅黄色
$("#b3").click(function () {
$("tr:not(:first):not(:last)").css("backgroundColor", "lightgreen");
});
//4) 改变索引值为偶数的行背景色为浅粉色，下标从0开始
$("#b4").click(function () {
//注：从0开始算
$("tr:even").css("backgroundColor", "lightgreen");
});
//5) 改变索引值为奇数的行背景色为aquamarine色
$("#b5").click(function () {
$("tr:odd").css("backgroundColor", "lightgreen");
});
//6) 改变索引值大于 3 的tr元素的背景色为oldlace色
$("#b6").click(function () {
//注：从0开始
$("tr:gt(3)").css("backgroundColor", "lightgreen");
});
//7) 改变索引值等于 3 的tr元素的背景色为antiquewhite
$("#b7").click(function () {
$("tr:eq(3)").css("backgroundColor", "lightgreen");
});
//8) 改变索引值为小于 3 的tr元素背景色为yellowgreen
$("#b8").click(function () {
$("tr:lt(3)").css("backgroundColor", "lightgreen");
});
script>
html>
小结
基本过滤选择器
语法
获得选择的元素中的第一个元素
:first
获得选择的元素中的最后一个元素
:last
不包括指定内容的元素
:not()
偶数，从 0 开始计数
:even
奇数，从 0 开始计数
:odd
等于第几个
:eq()
大于第n个，不含第index个
:gt()
小于第n个，不含第index个
:lt()
选择器：表单过滤选择器
目标
属性过滤选择器
语法
- 注：表单过滤选择器用于表单中元素
表单属性选择器
语法
可用
:enabled
不可用
:disabled
选中（单选radio ，多选checkbox）
:checked
选择（下列列表
:selected
示例
<html>
<head>
<title>表单属性过滤选择器title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js">script>
<style type="text/css">
div,
span {
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div .mini {
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
div .mini01 {
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
style>
head>
<body>
<input type="button" value="val() 方法改变表单内可用文本框元素的值" id="b1" />
<input type="button" value="val() 方法改变表单内不可用 元素的值" id="b2" />
<input type="button" value="length 属性获取(单选和多选)选框选中的个数" id="b3" />
<input type="button" value="length 属性获取下拉列表选中的个数" id="b4" />
<br><br>
<input type="text" value="不可用值1" disabled="disabled">
<input type="text" value="可用值1">
<input type="text" value="不可用值2" disabled="disabled">
<input type="text" value="可用值2">
<br><br>
<input type="checkbox" name="items" value="美容">美容
<input type="checkbox" name="items" value="IT">IT
<input type="checkbox" name="items" value="金融">金融
<input type="checkbox" name="items" value="管理">管理
<br><br>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<br><br>
<select name="job" id="job" multiple="multiple" size=4>
<option>程序员option>
<option>中级程序员option>
<option>高级程序员option>
<option>系统分析师option>
select>
<select name="edu" id="edu">
<option>本科option>
<option>博士option>
<option>硕士option>
<option>大专option>
select>
body>
<script type="text/javascript">
//1) val() 方法改变表单内可用文本框 元素的值
$("#b1").click(function () {
//val()作用，相当于value属性，既可设置值，也可以获取值
$("input[type=text]:enabled").val("天气不错");
});
//2) val() 方法改变表单内不可用 元素的值
$("#b2").click(function () {
$("input[type=text]:disabled").val("天气不错");
});
//3) length 属性获取选框选checked中的个数
$("#b3").click(function () {
//JQ对象本质是一个数组，就可以通过length属性得到它的长度。只有单选框和复选框有checked属性
alert($("input:checked").length);
});
//4) length 属性获取下拉列表选中的个数
$("#b4").click(function () {
alert($("option:selected").length);
});
script>
html>
小结
表单属性选择器
语法
选中（单选radio ，多选checkbox）
:checked
选择（下列列表
:selected
DOM操作的方法：html()，text()，val()
目标
在JQ中如何操作innerHTML、innerText、value属性
jQuery的DOM操作方法
操作方法的特点：所有的方法既可以设置值(set)，又可以获取值(get)
语法
html() 类似于以前innerHTML，修改或获取元素内部的HTML的内容，标签是起作用的。
text() 类似于以前的innerText，标签是不起作用的
val() 类似于以前的value属性，设置或获取值。如：val("值")设置值 val()获取值
演示案例
需求
获取"张三"，获得"标题标签"的文本，获得mydiv的标签体内容
效果
代码
<html>
<head>
<title>html和text和valtitle>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js">script>
head>
<body>
<input type="button" id="b1" value="设置值value"/>
<input type="button" id="b2" value="获取值value"/>
<input type="button" id="b3" value="设置html"/>
<input type="button" id="b4" value="获取值html"/>
<input type="button" id="b5" value="设置text"/>
<input type="button" id="b6" value="获取text"/>
<hr/>
<input id="myinput" type="text" name="username" value="张三"/><br/>
<div id="mydiv"><p><a href="#">标题标签a>p>div>
body>
<script type="text/javascript">
$("#b1").click(function () {
//有参数就是设置值value
$("#myinput").val("李四");
});
$("#b2").click(function () {
//不带参数就是获取值
alert($("#myinput").val());
});
//设置html
$("#b3").click(function () {
//有参数是设置值
$("#mydiv").html("寡妇追日
");
});
//获取值html
$("#b4").click(function () {
alert($("#mydiv").html());
});
//设置text
$("#b5").click(function () {
$("#mydiv").text("寡妇追日
");
});
//获取text
$("#b6").click(function () {
alert($("#mydiv").text());
});
script>
html>
小结
操作方法
功能
html()
类似于innerHTML
text()
类似于innerText
val()
相当于实现value的功能
DOM操作的方法：与属性有关的方法
目标
学习attr()、removeAttr()、prop()、removeProp()方法的使用
语法
attr() 修改，添加或获取元素的属性。
attr("属性名","值") 如果属性名不存在就是添加，如果存在就是修改。两个参数是添加或修改
attr("属性名") 一个参数就是获取属性的值
prop() 修改，添加或获取元素的属性。
prop("属性名","值") 如果属性名不存在就是添加，如果存在就是修改。两个参数是添加或修改
prop("属性名") 一个参数就是获取属性的值
removeAttr(),removeProp() 删除指定的属性
jq对象.removeAttr("src")
jq对象.removeProp("href")
什么时候使用attr()和prop()
如果属性值是true或false，建议使用prop()，编程更加方便
代码
<html>
<head>
<title>获取属性title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js">script>
head>
<body>
<input type="button" id="b1" value="获取北京节点的name属性值"/>
<input type="button" id="b2" value="设置北京节点的name属性的值为dabeijing"/>
<input type="button" id="b3" value="新增北京节点的discription属性 属性值是didu"/>
<input type="button" id="b4" value="删除北京节点的name属性"/>
<input type="button" id="b5" value="获得hobby的选中状态"/>
<ul>
<li id="bj" name="beijing">北京li>
<li id="tj" name="tianjin">天津li>
ul>
爱好：<input type="checkbox" id="hobby" value="游泳"/>游泳
body>
<script type="text/javascript">
//获取北京节点的name属性值
$("#b1").click(function () {
alert($("#bj").attr("name"));
});
//设置北京节点的name属性的值为"首都"
$("#b2").click(function () {
$("#bj").attr("name", "首都");
});
//新增北京节点的discription属性 属性值是didu
$("#b3").click(function () {
$("#bj").attr("discription", "帝都");
});
//删除北京节点的name属性
$("#b4").click(function () {
$("#bj").removeAttr("name");
});
//获得hobby的选中状态
$("#b5").click(function () {
//用于boolean类型的属性操作
alert($("#hobby").prop("checked"));
});
script>
html>
小结
方法名
功能描述
attr()
操作属性
prop()
操作布尔类型值的属性
removeAttr() /removeProp()
删除属性名和值
DOM操作的方法：与样式有关的方法
目标
学习与样式和类有关的方法
回顾
在JS中操作CSS的方法：
元素.style.样式名=样式值
元素.className=类名
与类名有关的方法
addClass("类名") 添加一个类样式，与CSS中第二种写法功能相同，如：addClass("一个或多个类名")
removeClass("类名") 移除一个类样式，让类样式不起作用
toggleClass("类名") 切换类样式，如果有这个class名就移除，如果没有就添加
与样式有关的方法
类似于css中方式一，修改行内样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4oQvG43U-1593132159062)(assets/1553159755613.png)]
示例
<html>
<head>
<title>样式操作title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js">script>
<style type="text/css">
.one{
width: 200px;
height: 140px;
margin: 20px;
background: red;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
/*待用的样式*/
.second{
width: 222px;
height: 220px;
margin: 20px;
background: yellow;
border: pink 3px dotted;
float:left;
font-size: 22px;
font-family:Roman;
}
style>
head>
<body>
<input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/>
<input type="button" value=" addClass" id="b2"/>
<input type="button" value="removeClass" id="b3"/>
<input type="button" value=" 切换样式" id="b4"/>
<input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/>
<input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/>
<hr/>
<h1>有一种奇迹叫坚持h1>
<h2>自信源于努力h2>
<div id="one" class="aaa">
id为one
div>
body>
<script type="text/javascript">
// 采用属性增加样式(改变id=one的样式)，样式名为second
$("#b1").click(function () {
//会覆盖之前的属性
$("#one").attr("class", "second");
});
// addClass
$("#b2").click(function () {
//不会覆盖原来的类，只是追加新的类
$("#one").addClass("second");
});
// removeClass
$("#b3").click(function () {
//移除一个类
$("#one").removeClass("second");
});
// 切换样式
$("#b4").click(function () {
//有就是移除，没有就是添加
$("#one").toggleClass("second");
});
// 通过css()获得id为one背景颜色
$("#b5").click(function () {
//1个参数是获取样式值
alert($("#one").css("background-color"));
});
// 通过css()设置id为one背景颜色为绿色
$("#b6").click(function () {
//2个参数是设置样式值
$("#one").css("background-color", "green");
});
script>
html>
小结
方法名
功能
addClass(类样式名)
添加类样式
removeClass(类样式名)
移除类样式
toggleClass(类样式名)
上面2个方法的切换
css(样式名)
获取指定样式值
css(样式名,样式值)
设置指定的样式
DOM操作的方法：元素的创建和添加
目标
使用JQ对象的方法创建和插入元素
回顾
-
JS中创建元素：createElement()
-
JS添加到DOM树：appendChild()
语法
$("标签内容") 创建一个元素
父元素.append(子元素) 添加到最后一个子元素，与js中appendChild()相同
父元素.prepend(子元素) 添加到第一个子元素
元素.before(元素) 添加到当前元素的前面，这两个元素是兄弟关系
元素.after(元素) 添加到当前元素的后面，这两个元素是兄弟关系
演示代码
<html>
<head>
<title>内部插入脚本title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js">script>
head>
<body>
<input type="button" id="b1" value="将反恐放置到city的后面"/>
<input type="button" id="b2" value="将反恐放置到city的最前面"/>
<input type="button" id="b3" value="将反恐放在天津前面"/>
<input type="button" id="b4" value="将反恐放在天津后面"/>
<input type="button" id="b5" value="创建一个广州的节点"/>
<hr/>
<ol id="city">
<li id="bj" name="beijing">北京li>
<li id="tj" name="tianjin">天津li>
<li id="cq" name="chongqing">重庆li>
ol>
<ul id="game">
<li id="fk" name="fankong">反恐li>
<li id="xj" name="xingji">星际li>
ul>
body>
<script type="text/javascript">
//将反恐放置到city的后面
$("#b1").click(function () {
//注：append还有剪切的功能
//$("#city").append($("#fk"));
//复制的功能，克隆。主操作方是父元素
//$("#city").append($("#fk").clone());
//子元素向父元素中追加，主操作方是子元素
$("#fk").appendTo($("#city"));
});
//将反恐放置到city的最前面
$("#b2").click(function () {
//也有prependTo()这个方法
$("#city").prepend($("#fk"));
});
//将反恐放在天津前面
$("#b3").click(function () {
//两者是兄弟关系
$("#tj").before($("#fk"));
});
//将反恐放在天津后面
$("#b4").click(function () {
$("#tj").after($("#fk"));
});
//创建一个广州的节点，加到城市中：广州
$("#b5").click(function () {
//创建元素
//let gz = $("广州 ");
//$("#city").append(gz);
//直接使用字符串，append会将字符串创建成一个元素
$("#city").append("广州 ");
});
script>
html>
小结
方法名
描述
$(标签的全部内容)
创建一个元素
父元素.append(子元素)
追加成最后一个子元素
父元素.prepend(子元素)
追加成第一个子元素
元素.before(元素)
添加到当前元素的前面
元素.after(元素)
添加到当前元素的后面
上午回顾
JQ对象与JS对象转换
JS->JQ： $(JS对象)
JQ->JS： JQ对象[0] 或 JQ对象.get(0)
选择器
基本选择器
#ID
.类名
标签名
层级选择器
A B
A>B
A+B
A~B
过滤选择器
:first
:last
:not()
:even
:odd
:eq()
:gt()
:lt()
表单过滤选择器
:enabled
:disabled
:checked
:selected
DOM的操作方法
修改元素的内容
html() -> innerHTML
text() -> innerText
val() -> value
属性有关的方法
attr()
prop() 用于布尔类型属性值
removeAttr() removeProp() 删除属性
样式有关的方法
addClass()
removeClass()
toggleClass() 切换类
css() 修改行内样式
元素创建和添加
$("元素的所有内容")
append() 添加到最后一个子元素
appendTo() 子元素追加到父元素中
prepend() 添加到第一个子元素
prependTo() 子元素追加到父元素中
before() 添加到当前元素的前面
after() 添加到当前元素的后面
clone() 当前元素克隆
DOM操作方法：删除元素
目标
与删除元素有关的方法
语法
元素.remove() 删除本身
父元素.empty() 父元素清空所有的子元素，父元素还在
示例
<html>
<head>
<title>删除节点title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js">script>
head>
<body>
<input type="button" id="b1" value="从city中删除北京" />
<input type="button" id="b2" value="删除city中所有的子节点" />
<hr/>
<ol id="city">
<li id="bj" name="beijing">北京li>
<li id="tj" name="tianjin">天津li>
<li id="cq" name="chongqing">重庆li>
ol>
body>
<script type="text/javascript">
//从city中删除北京 节点
$("#b1").click(function () {
$("#bj").remove(); //删除自己
});
//删除city中所有的子节点，观察city本身有没有删除
$("#b2").click(function () {
$("#city").empty(); //清空
});
script>
html>
小结
方法名
功能
元素.remove()
删除自己
父元素.empty()
清空子元素
jQuery的事件的使用
目标
-
一个元素同时使用多个事件
-
多个事件的链式写法
事件处理函数的命名
所有的事件处理函数前面都没有on
jQuery中常用的事件
事件方法
功能
blur()
失去焦点
change()
改变事件
click()
单击事件
dblclick()
双击事件
focus()
得到焦点
keydown()
键盘按下
keyup()
松开键盘
mouseover()
鼠标移上
mouseout()
鼠标移出
submit()
表单提交
事件方法使用示例
需求
- 文本框得到焦点和失去焦点分别显示不同的背景色
- 松开按键，将字母转成大写，再显示在文本框中
- 使用链式写法实现相同的功能
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rVnCDbAG-1593132159074)(assets/1553157150803.png)]
代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多个事件的写法title>
<script type="text/javascript" src="js/jquery-3.3.1.js">script>
<script type="text/javascript">
/*
1. 文本框得到焦点和失去焦点分别显示不同的背景色
2. 松开按键，将字母转成大写，再显示在文本框中
3. 使用链式写法实现相同的功能*/
$(function () {
/*
//得到焦点
$("#t1").focus(function () {
// $("#t1").css("background-color", "yellow");
//this是一个js对象，使用jq的方法必须转换
$(this).css("background-color", "yellow");
});
//失去焦点
$("#t1").blur(function () {
$("#t1").css("background-color", "lightgreen");
});
//松开按钮
$("#t1").keyup(function () {
//转成大写以后再赋值给自己
$("#t1").val($("#t1").val().toUpperCase());
});
*/
//得到焦点
$("#t1").focus(function () {
$(this).css("background-color", "red");
}).blur(function () { //失去焦点
$("#t1").css("background-color", "blue");
}).keyup(function () { //松开按钮
$("#t1").val($("#t1").val().toUpperCase()); //转成大写以后再赋值给自己
});
})
script>
head>
<body>
用户名：
<input type="text" id="t1" />
body>
html>
小结
事件方法
功能
blur()
失去焦点
focus()
得到焦点
keyup()
松开键盘
案例：表格隔行换色与全选全不选
目标
- 实现隔行变色的效果
- 实现全选全不选的效果
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YtPK5enD-1593132159080)(assets/1553156460136.png)]
步骤
隔行变色
- 页面加载完毕，得到所有的tr。
- 使用基本过滤选择器，除了第0行，设置偶数行背景色为lightgreen
- 使用基本过滤选择器，除了第0行，设置奇数行背景色为lightyellow
全选全不选
- 给最上面的id=all的复选框添加点击事件
- 使用属性选择器选中所有item=name的复选框，设置它的checked属性与id=all的复选框的checked属性相同。
代码
<html>
<head>
<meta charset="UTF-8">
<title>隔行换色/全选全不选title>
<style type="text/css">
table {
border-collapse: collapse;
}
tr {
height: 35px;
text-align: center;
}
a:link {
text-decoration: none;
}
style>
<script type="text/javascript" src="js/jquery-3.3.1.js">script>
<script type="text/javascript">
$(function () {
//隔行变色，除了第1行之外，even表示偶数行，剩下的行中偶数行
$("tr:gt(0):even").css("background-color", "lightgreen");
$("tr:gt(0):odd").css("background-color", "lightyellow");
//全选，全不选
$("#all").click(function () { //最上面的复选框点击事件
//得到all的值是true或是false
//选中所有下面的checkbox
$("input[name=item]").prop("checked", $("#all").prop("checked")); //设置boolean类型的属性
});
})
script>
head>
<body>
<table id="tab1" border="1" width="700" align="center">
<tr style="background-color: #999999;">
<td><input type="checkbox" id="all">td>
<td>分类IDtd>
<td>分类名称td>
<td>分类描述td>
<td>操作td>
tr>
<tr>
<td><input type="checkbox" name="item">td>
<td>1td>
<td>手机数码td>
<td>手机数码类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
<tr>
<td><input type="checkbox" name="item">td>
<td>2td>
<td>电脑办公td>
<td>电脑办公类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
<tr>
<td><input type="checkbox" name="item">td>
<td>3td>
<td>鞋靴箱包td>
<td>鞋靴箱包类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
<tr>
<td><input type="checkbox" name="item">td>
<td>4td>
<td>家居饰品td>
<td>家居饰品类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
table>
body>
html>
小结
-
选中大于0的tr的偶数行的选择器怎么写？
tr:gt(0):even
-
设置某个复选框选中的方法是什么？
jq对象.prop("checked",true)
案例：实现购物车
目标
使用今天学习的内容制作一个购物车案例
需求
- 实现添加商品，如果商品名为空，提示：商品名不能为空。如果不为空，则添加成功一行，清空文本框的内容，图片使用固定一张。
- 实现删除一行商品的功能，删除前弹出确认对话框。
效果
代码
<html>
<head>
<meta charset="UTF-8">
<title>购物车的实现title>
<style type="text/css">
table {
width: 400px;
border-collapse: collapse;
margin: auto;
}
td,th {
text-align: center;
height: 30px;
}
.container {
width: 400px;
margin: auto;
text-align: right;
}
img {
width: 100px;
height: 100px;
}
th {
background-color: lightgray;
}
tr:hover {
background-color: lightyellow;
}
style>
<script type="text/javascript" src="js/jquery-3.3.1.js" >script>
<script type="text/javascript">
//添加到购物车的点击事件
function addRow() {
//1.获取文本框中内容
let val = $("#pname").val().trim(); //去掉前后的空格
if (val == "") { //注：不同于Java
alert("商品名字不能为空");
//让文本框获得焦点
$("#pname").focus();
return;
}
//2.创建tr
let tr = "" +
"![](\"img/girl.jpg\")
" + val + " " +
" ";
//3.创建好的tr的放到父元素tbody中
$("#cart").append(tr);
//4.清空文本框内容
$("#pname").val("");
}
//删除一行
function deleteRow(obj) { //obj其实就是一个按钮对象，这是JS对象，转成JQ对象
if (confirm("真的要从购物车中移除这件商品吗?")) {
//按钮的父元素->td 的父元素 -> tr 删除tr即可
$(obj).parent().parent().remove(); //自己删除自己
}
}
script>
head>
<body>
<div class="container">
<table border="1">
<tbody id="cart">
<tr>
<th>
图片
th>
<th>
商品名
th>
<th>
操作
th>
tr>
<tr>
<td><img src="img/sx.jpg" />td>
<td>
三星Note7
td>
<td>
<input type="button" value="删除" onclick="deleteRow(this)">
td>
tr>
tbody>
table>
<br />
商品名：
<input type="text" id="pname" value="" />
<input type="button" value="添加到购物车" onclick="addRow()" />
div>
body>
html>
小结
1. 创建tr
2. 添加到tbody中
3. 删除元素remove()
4. 获取父元素：parent()
学习总结
- JS与JQ对象的转换
操作
方法
将JS对象–>jQuery对象
$(JS)
将jQuery对象–> JS对象
JQ对象[0] 或 JQ对象.get(0)
- 能够使用jQuery的基本选择器
基本选择器
语法
ID选择器
#ID
类选择器
.类名
标签选择器
标签名
- 能够使用jQuery的层级选择器
层级选择器
语法
获取A元素内部所有B元素
A B
获得A元素下面的所有B子元素
A>B
获得A元素同级，下一个B元素
A+B
获取A元素后面所有同级B元素
A~B
- 能够使用jQuery的DOM操作的方法
jQuery中的方法
作用
html()
相当于innerHTML
text()
相当于innerText
val()
相当于value
attr()
操作属性
prop()
操作属性，布尔类型的值
addClass()
添加类样式
removeClass()
删除类样式
$(标签全部内容)
创建一个元素
append()
追加到最后一个子元素
before()
添加到当前元素的前面
after()
添加到当前元素的后面
remove()
删除自己