JAVA WEB DAY 07_ jQuery 基础
文章目录
- jQuery 基础
-
- 目标
- 01_jQuery 概述和导入-[★★★]
- 02_ jQuery 对象与 JS 对象的转换-[★★★★]
- 03_ jQuery 之基本选择器-[★★★★]
- 04_ jQuery 之层级选择器-[★★★★]
- 05_ jQuery 之属性选择器-[★★★★]
- 06_ jQuery 之基本过滤选择器-[★★★★]
- 07_ jQuery 之表单属性选择器-[★★★★]
- 08_ jQuery 常用事件概述-[★★★]
- 09_ jQuery 常用事件示例-[★★★★]
- 10_事件切换函数与示例-[★★★★]
- 11_ jQuery 中事件的动态绑定和解绑-[★★★]
- 12_ jQuery 对象的循环遍历-[★★★]
- 13_ jQuery 之DOM 操作- html 代码、文本、值-[★★★]
- 14_ jQuery 之 DOM 操作-属性操作-[★★★]
- 15_ jQuery 之 DOM 操作-样式操作-[★★★]
- 16_ jQuery 之 DOM 操作-创建和插入-[★★★]
- 17_ jQuery 之 DOM 操作-删除操作-[★★★]
- 18_案例01-隔行换色和全选、全不选-[★★★★]
- 19_案例02-实现购物车-[★★★★]
- 20_案例03-抽奖程序-[★★★★]
jQuery 基础
目标
- 能够使用 jQuery 的基本选择器
- 能够使用 jQuery 的层级选择器
- 能够使用 jQuery 的绑定与解绑方法
- 能够使用 jQuery 对象的遍历方法
- 能够使用 jQuery 全局的遍历方法
- 能够使用 jQuery 的 DOM 操作的方法
- 能够完成隔行换色
- 能够完成案例：抽奖程序
01_jQuery 概述和导入-[★★★]
- jQuery 是什么: JS 框架：对 JS 代码进行封装，提高开发效率，降低开发难道
- jQuery 的导入格式：
- 示例代码
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JQ导入title>
<script src="js/jquery-3.3.1.min.js">script>
<script>
// JS写法：当网页加载完毕时执行
/*window.onload = function () {
};*/
// JQ写法：当网页加载完毕时执行
$(function () {
alert("进来啦吗");
});
script>
head>
<body>
body>
html>
02_ jQuery 对象与 JS 对象的转换-[★★★★]
- JS 对象与 jQuery 对象相互转换的语法
| JS对象与jQuery对象相互转换的语法 | 转换语法 |
|---|---|
| 将JS对象 转换为 jQuery对象 | $(JS对象) |
| 将jQuery对象 转换为 JS对象 | jq对象[索引] jq对象本质就是数组 |
- 需求：页面上有一个文本框，文本框中有值：阿里巴巴。
1.分别通过js对象和jQuery对象得到值，并且使用alert()方法显示出来。
2.混合使用是错误的，没有输出效果。
3.对象转换以后使用各自的方法得到值。 - 示例代码
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JQ对象和JS对象的转换title>
<script src="js/jquery-3.3.1.min.js">script>
<script>
// 1) 分别通过js对象和jQuery对象得到值，并且使用alert()方法显示出来。
/*document.getElementById("one").onclick = function () {
}*/
// 当网页加载完毕执行
$(function () {
// 监听第1个按钮点击
$("#one").click(function () {
// 根据id获取文本输入框元素对象
// jsObj：是JS对象
var jsObj = document.getElementById("user");
// 获得文本输入框的值
// alert(jsObj.value);
// 将JS对象转换为JQ对象
var jqObj = $(jsObj);
alert(jqObj.val());
});
// 监听第2个按钮点击
$("#two").click(function () {
// 根据id获取文本输入框元素对象
// jqObj：是JQ对象
var jqObj = $("#user");
// 调用JQ对象的方法获得文本输入框的值
// alert(jqObj.val());
// 将JQ对象转换为JS对象
// JQ对象本质就是数组
var jsObj = jqObj[0];
alert(jsObj.value);
});
});
script>
head>
<body>
<input id="user" type="text" value="阿里巴巴">
<input type="button" value="JS得到值" id="one">
<input type="button" value="JQ得到值" id="two">
body>
html>
03_ jQuery 之基本选择器-[★★★★]
- 基本选择器
| 基本选择器 | 语法 |
|---|---|
| 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 () {
$("#one").css("background-color","red");
});
// 2) 改变元素名为 的所有元素的背景色为 红色。
$("#b2").click(function () {
$("div").css("background-color","red");
});
// 3) 改变 class 为 mini 的所有元素的背景色为 红色
$("#b3").click(function () {
$(".mini").css("background-color","red");
});
script>
html>
04_ jQuery 之层级选择器-[★★★★]
- 层级选择器
层级选择器
说明
语法
获得A元素内部的所有的B元素
B元素是A元素的子孙元素都可以
$(“A B”)
获得A元素下面的所有B子元素
B元素必须是A元素的子元素
$(“A > B”)
获得A元素同级，下一个B元素
A与B是同级的兄弟元素
如果A是老二，B是老三
$(“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"/>
<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");
});
script>
html>
05_ jQuery 之属性选择器-[★★★★]
- 属性选择器
属性选择器
语法
获得有属性名的元素
标签名[属性名]
获得属性名等于指定值元素
标签名[属性名=属性值]
获得属性名不等于指定值元素
标签名[属性名!=属性值]
复合属性选择器，多个属性同时过滤
标签名[属性1][属性2]
<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;
}
div.visible {
display: none;
}
style>
head>
<body>
<input type="button" value="含有属性title 的div元素背景色为红色" id="b1"/>
<input type="button" value="属性title值等于test的div元素背景色为红色" id="b2"/>
<input type="button" value="属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
<input type="button" value="属性title值包含best的div元素背景色为红色" id="b4"/>
<hr/>
<div id="one">
id为one div
div>
<div id="two" class="mini" title="test">
id为two class是 mini div title="test"
<div class="mini">class是 minidiv>
div>
<div class="visible">
class是 one
<div class="mini">class是 minidiv>
<div class="mini">class是 minidiv>
div>
<div class="one" title="test02">
class是 one title="test02"
<div class="mini01">class是 mini01div>
<div class="mini" style="margin-top:0px;">class是 minidiv>
div>
<div class="one">
div>
<div id="mover" title="best">
id="mover" title="best"
div>
body>
<script type="text/javascript">
//1) 含有属性title 的div元素背景色为红色
$("#b1").click(function () {
$("div[title]").css("background-color","red");
});
//2) 属性title值等于test的div元素背景色为红色
$("#b2").click(function () {
$("div[title=test]").css("background-color","red");
});
//3) 属性title值不等于test的div元素(没有title属性的也将被选中)背景色为红色
$("#b3").click(function () {
$("div[title!=test]").css("background-color","red");
});
//4) 属性title值包含best的div元素背景色为红色
$("#b4").click(function () {
$("div[title=best][id]").css("background-color","red");
});
script>
html>
06_ jQuery 之基本过滤选择器-[★★★★]
基本过滤器选择器是在已经选中的元素中进行过滤
基本过滤选择器
语法
获得选择的元素中的第一个元素
:first
获得选择的元素中的最后一个元素
:last
不包括指定内容的元素
:not()
偶数，从0开始计数
:even
奇数，从0开始计数
:odd
等于第几个
:eq(index)
大于第n个，不含第index个
:gt(index)
小于第n个，不含第index个
:lt(index)
- 示例代码
<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 () {
$("tr:first").css("background-color","lightgray");
});
//2) 改变最后一行的背景色为浅绿色
$("#b2").click(function () {
$("tr:last").css("background-color","lightgreen");
});
//3) 改变除第1行和最后1行的其它行背景色为浅黄色
$("#b3").click(function () {
$("tr:not(:first):not(:last)").css("background-color","lightyellow");
});
//4) 改变索引值为偶数的行背景色为浅粉色，下标从0开始
$("#b4").click(function () {
$("tr:odd").css("background-color","lightpink");
});
//5) 改变索引值为奇数的行背景色为aquamarine色
$("#b5").click(function () {
$("tr:even").css("background-color","aquamarine");
});
//6) 改变索引值大于 3 的tr元素的背景色为oldlace色
$("#b6").click(function () {
$("tr:gt(3)").css("background-color","oldlace");
});
//7) 改变索引值等于 3 的tr元素的背景色为antiquewhite
$("#b7").click(function () {
$("tr:eq(3)").css("background-color","antiquewhite");
});
//8) 改变索引值为小于 3 的tr元素背景色为yellowgreen
$("#b8").click(function () {
$("tr:lt(3)").css("background-color","yellowgreen");
});
script>
html>
07_ jQuery 之表单属性选择器-[★★★★]
表单属性选择器作用：在已选中表单元素中进行过滤
- 表单属性选择器
表单属性选择器
语法
可用
:enabled
不可用
:disabled
选中（单选radio，多选checkbox）
:checked
选择（下列列表
:selected
不可见元素
:hidden
- 示例代码
<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">
#myDiv {
background-color: red;
/*
display属性的作用：控制元素的显示和隐藏
none：隐藏元素
inline：显示元素并设置元素为内联元素：不会独占一行
block：显示元素并设置元素为块级元素：会独占一行
*/
display: inline;
}
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" />
<input type="button" value="显示隐藏文本输入框" id="b5" />
<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">
<input type="text" value="隐藏文本输入框" style="display: none">
<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 () {
$("input[type=text]:enabled").val("Java4期");
});
//2) val() 方法改变表单内不可用 元素的值
$("#b2").click(function () {
$("input[type=text]:disabled").val("Java41期");
});
//3) length 属性获取选框选checked中的个数
$("#b3").click(function () {
var len = $("input[type=checkbox]:checked").length;
alert(len);
});
//4) length 属性获取下拉列表选中的个数
$("#b4").click(function () {
var len = $("select > option:selected").length;
alert(len);
});
//5) 显示隐藏文本输入框
$("#b5").click(function () {
$("input[type=text]:hidden").css("display","inline");
});
script>
html>
08_ jQuery 常用事件概述-[★★★]
- jQuery 事件名和 JS 事件名的区别：JS 事件名以 on 开头，JQ 没有 on
事件方法
说明
blur()
失去焦点事件
change()
值改变数据
click()
单击事件
dblclick()
双击事件
focus()
获得焦点事件
keydown()
键盘按下事件
keyup()
键盘松开事件
mouseover()
鼠标移入事件
mouseout()
鼠标移出事件
submit()
表单提交事件
hover()
鼠标悬停事件
09_ jQuery 常用事件示例-[★★★★]
-
需求：文本框得到焦点和失去焦点分别显示不同的背景色，松开按键，将字母转成大写，再显示在文本框中。
-
示例代码
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript" src="js/jquery-3.3.1.min.js">script>
<script type="text/javascript">
/*
需求：文本框得到焦点和失去焦点分别显示不同的背景色，
松开按键，将字母转成大写，再显示在文本框中。
* */
$(function () {
// 当文本输入框失去焦点执行指定函数
$("#t1").blur(function () {
// this：js对象
$(this).css("background-color","yellow");
});
// 当文本输入框获得焦点执行指定函数
$("#t1").focus(function () {
$(this).css("background-color","red");
});
// 监听键盘松开事件
$("#t1").keyup(function () {
// 将字母转成大写，再显示在文本框中。
// 获取文本输入框内容并转换为大写
/* var value = $($(this)).val().toUpperCase();
// 重新给文本输入框设置内容
$(this).val(value);*/
// 简化代码
$(this).val($(this).val().toUpperCase());
});
});
script>
head>
<body>
用户名：
<input type="text" id="t1"/>
body>
html>
10_事件切换函数与示例-[★★★★]
- 事件切换函数
事件切换函数
说明
JQ对象.hover(function, function)
事件切换
参数1：函数：当鼠标移入时触发
参数2：函数：当鼠标移出时触发
- 需求：创建一个DIV，指定宽和高为500px，边框2px,灰色，实线。当鼠标移入div背景图片发生变化，移出DIV背景图片变成另一张。使用hover，同时支持两个事件。
- 示例代码
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
#girl {
height: 500px;
width: 500px;
border: 2px solid gray;
}
style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js">script>
<script type="text/javascript">
/*
需求：创建一个DIV，指定宽和高为500px，边框2px,灰色，实线。当鼠标移入div背景图片发生变化，
移出DIV背景图片变成另一张。使用hover，同时支持两个事件。
* */
$(function () {
$("#girl").hover(function () {
// 鼠标移入时执行
$(this).css("background-image","url(\"img/adv1.jpg\")")
},function () {
// 鼠标移出时执行
$(this).css("background-image","url(\"img/adv2.jpg\")")
});
})
script>
head>
<body>
<div id="girl">
div>
body>
html>
11_ jQuery 中事件的动态绑定和解绑-[★★★]
- 事件绑定
事件绑定
语法
JQ对象.on(“事件名”, function() {});
给JQ对象关联的元素动态绑定事件
参数1：事件名
参数2：事件回调函数
- 事件解绑
事件解绑
语法
JQ对象.off(“事件名1 事件名2”)
解绑JQ对象的指定事件
JQ对象.off()
解绑JQ对象的所有事件
-
需求：
有四个按钮，b1按钮使用以前的事件写法，点击弹出信息。b2按钮没有事件。点击绑定事件按钮给b2按钮绑定点击事件。然后点击b2按钮，查看输出的信息。点击解绑事件按钮解除b2按钮的点击事件。
-
示例代码
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>事件动态绑定和解绑title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js">script>
head>
<body>
<input type="button" value="按钮1" id="b1">
<input type="button" value="按钮2" id="b2">
<hr>
<input type="button" value="绑定事件" id="bind">
<input type="button" value="解绑事件" id="unbind">
body>
<script type="text/javascript">
/*
需求：有四个按钮，b1按钮使用以前的事件写法，点击弹出信息。b2按钮没有事件。
点击绑定事件按钮给b2按钮绑定点击事件。
然后点击b2按钮，查看输出的信息。
点击解绑事件按钮解除b2按钮的点击事件。
* */
// 命名函数：监听按钮1点击
function btn01Click() {
alert("aaa");
}
// 使用匿名函数作为参数
$("#b1").click(function () {
alert("bbb");
})
// 监听 bind 按钮点击
$("#bind").click(function () {
// 给按钮2动态绑定点击事件
// 参数1：事件名
// 参数2：事件回调函数
$("#b2").on("click",function () {
// alert("哎呀...被点了...");
console.log("哎呀...被点了...")
})
// 给按钮2动态绑定鼠标移入数据
$("#b2").on("mouseover",function () {
// alert("哎呀...进来了...")
console.log("哎呀...进来了...")
})
});
// 监听 unbind 按钮点击
$("#unbind").click(function () {
// 给按钮2解绑点击事件
// $("#b2").off("click");
// 解绑按钮2的所有事件
$("#b2").off();
});
script>
html>
12_ jQuery 对象的循环遍历-[★★★]
jQuery 对象本身就是数组对象，因此常常需要对 jQuery 对象进行遍历。
- jQuery对象遍历方式
jQuery对象遍历方式
说明
JQ对象.each(function(index,element))
对JQ对象进行遍历
传递回调函数：参数1：索引值，参数2：遍历到的元素
$.each(数组, function(index,element))
对JQ对象进行遍历
参数1：要遍历的JQ对象
参数2：回调函数：参数1：索引值，参数2：遍历到的元素
- 需求：对select中的所有option元素进行遍历并且输出HTML内容。
- 示例代码
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery的遍历方式title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js">script>
head>
<body>
<select name="city" id="city">
<option>广州option>
<option>深圳option>
<option>东莞option>
select>
<input type="button" id="b1" value="jq对象的方法遍历"/>
<input type="button" id="b2" value="jq对象的全局方法"/>
<script type="text/javascript">
$("#b1").click(function () {
// 获得所有option元素：jq对象==>就是一个数组
var jqArray = $("select > option");
// jq对象的方法遍历
// 回调函数需要两个参数
// 参数1：索引值
// 参数2：当前遍历的元素对象
jqArray.each(function (index,element) {
// element：JS对象
// element.innerHTML：获取或设置标签体内容
// element.innerHTML = "xxx";
// var content = element.innerHTML;
alert(index+"==>"+element.innerHTML);
})
});
$("#b2").click(function () {
// 获得所有option元素：jq对象==>就是一个数组
var jqArray = $("select > option");
// jq全局方法遍历
// 回调函数需要两个参数
// 参数1：索引值
// 参数2：当前遍历的元素对象
$.each(jqArray,function (index,element) {
// element：JS对象
// element.innerHTML：获取或设置标签体内容
// element.innerHTML = "xxx";
// var content = element.innerHTML;
alert(index+"==>"+element.innerHTML);
})
});
script>
body>
html>
13_ jQuery 之DOM 操作- html 代码、文本、值-[★★★]
- 方法
方法名
功能描述
html()
获取元素标签体内容
html(“HTML”)
设置元素标签体内容
text()
获取标签体内容：只是文本
text(“文本”)
设置标签体内容：有子标签会原样输出
val()
获取表单元素的值
val(“值”)
设置表单元素的值
- 示例代码
<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 () {
// 给文本输入框赋值
$("#myinput").val("小泽");
});
$("#b2").click(function () {
// 获取文本输入框的值
alert($("#myinput").val());
});
// 设置html
$("#b3").click(function () {
// 设置元素标签体内容：如果内容有标签，则浏览器会解析标签
// js对象的属性innerHTML：设置或获取标签题内容
// jq对象的函数html()：设置或获取标签题内容
$("#mydiv").html("百度一下");
});
// 获取值html
$("#b4").click(function () {
// 获取元素标签体内容
alert($("#mydiv").html());
});
// 设置text
$("#b5").click(function () {
// JQ对象的text函数等价于JS对象的innerText属性
// 设置元素标签体内容：如果内容有标签，则浏览器不会解析标签会原样输出
$("#mydiv").text("百度一下");
});
//获取text
$("#b6").click(function () {
// 获取元素标签体内容
alert($("#mydiv").text());
});
script>
html>
14_ jQuery 之 DOM 操作-属性操作-[★★★]
- 方法
方法名
功能描述
attr(“属性名”)
获取属性值
attr(“属性名”, “属性值”)
修改或添加属性
prop(“属性名”)
获取属性值
prop(“属性名”,”属性值”)
修改或添加属性
removeAttr(“属性名”)
删除属性
removeProp(“属性名”)
删除属性
如何选择attr()和prop()
- 如果属性值是boolean类型，使用prop()方法。如：selected, checked等。
- 其它类型的属性使用attr()。
- 示例代码
<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属性的值为"dabeijing"
$("#b2").click(function () {
$("#bj").attr("name","dabeijing");
});
// 新增北京节点的description属性 属性值是didu
$("#b3").click(function () {
$("#bj").attr("description","didu");
});
// 删除北京节点的name属性
$("#b4").click(function () {
$("#bj").removeAttr("name");
});
// 获得hobby的选中状态
$("#b5").click(function () {
alert($("#hobby").prop("checked"));
});
script>
html>
15_ jQuery 之 DOM 操作-样式操作-[★★★]
- 方法
方法名
功能描述
addClass(“类样式名”)
添加类样式：先将样式定义在类选择器中
removeClass(“类样式名”)
删除类样式
toggleClass(“类样式名”)
切换类样式：有则删除，无则添加
以上三个方法本质是操作标签元素的class属性
方法名
功能描述
css(“样式名”)
根据样式名获得样式值
css(“样式名”,”样式值”)
添加指定的样式
以上两个方法本质是操作标签元素的style属性
- 示例代码
<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">
id为one
div>
body>
<script type="text/javascript">
// 采用属性增加样式(改变id=one的样式)，样式名为second
$("#b1").click(function () {
// 等价于给元素设置了class=second
$("#one").addClass("second")
});
// addClass
$("#b2").click(function () {
// 等价于给元素设置了class=second
$("#one").addClass("second")
});
// removeClass
$("#b3").click(function () {
$("#one").removeClass("second")
});
// 切换样式
$("#b4").click(function () {
// 有则删除，无则添加
$("#one").toggleClass("second")
});
// 通过css()获得id为one背景颜色
$("#b5").click(function () {
$("#one").css("background-color","red");
});
// 通过css()设置id为one背景颜色为绿色
$("#b6").click(function () {
alert($("#one").css("background-color"));
});
script>
html>
16_ jQuery 之 DOM 操作-创建和插入-[★★★]
- 方法
方法名
描述
$(“标签的全部内容”)
创建一个标签元素
类似于document.createElement(“tr”)
写法：$("aa
父元素.append(子元素)
将元素添加成父元素的最后一个子元素，调用者是父元素
子元素.prependTo(父元素)
将元素添加成父元素的第一个子元素，调用者是子元素
元素.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 () {
$("#city").append($("#fk"));
});
// 将反恐放置到city的最前面
$("#b2").click(function () {
$("#fk").prependTo($("#city"));
});
// 将反恐放在天津前面
$("#b3").click(function () {
$("#tj").before($("#fk"));
});
// 将反恐放在天津后面
$("#b4").click(function () {
$("#tj").after($("#fk"));
});
// 创建一个广州的节点，加到城市中：广州
$("#b5").click(function () {
// 创建子元素li：广州
// var li = $("广州 ");
// 添加子元素
/*$("#city").append($("广州 "));*/
// 创建li元素
var li = document.createElement("li"); //
// 设置标签体内容
li.innerHTML = "广州"; // 广州
// 将li元素添加到city元素上
$("#city").append($(li));
});
script>
html>
17_ jQuery 之 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>
18_案例01-隔行换色和全选、全不选-[★★★★]
- 需求
1.在网页加载完毕以后执行下面的选择器并且设置css样式
所有大于0的偶数行，背景色设置为：pink
所有大于0的奇数行，背景色设置为：yellow
2.实现全选和全部选功能。
+示例代码
<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.min.js">script>
<script type="text/javascript">
/*
1. 在网页加载完毕以后执行下面的选择器并且设置css样式
- 所有大于0的偶数行，背景色设置为：pink
- 所有大于0的奇数行，背景色设置为：yellow
2. 实现全选和全不选功能。
* */
$(function () {
// 所有大于0的偶数行，背景色设置为：pink
$("tr:gt(0):even").css("background-color","pink");
// 所有大于0的奇数行，背景色设置为：yellow
$("tr:gt(0):odd").css("background-color","yellow");
/* 实现全选和全不选功能。 */
$("#all").click(function () {
// 获取全选复选框的选中状态
// alert($(this).prop("checked"))
// 获取下面四个复选框元素对象
$("input[type=checkbox][name=item]").prop("checked",$(this).prop("checked"));
});
});
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>
19_案例02-实现购物车-[★★★★]
- 添加元素方法：父元素.append(子元素)
- 删除元素方法：元素.remove()
- 获得父元素属方法：jq对象.parent();
-
需求
1.实现添加商品，如果商品名为空，提示：商品名不能为空。如果不为空，则添加成功一行，清空文本框的内容，图片使用固定一张。
2.实现删除一行商品的功能，删除前弹出确认对话框。
-
示例代码
<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.min.js">script>
<script type="text/javascript">
/*
需求：
1. 实现添加商品，如果商品名为空，提示：商品名不能为空。如果不为空，
则添加成功一行，清空文本框的内容，图片使用固定一张。
2. 实现删除一行商品的功能，删除前弹出确认对话框。
* */
// 监听添加按钮点击：添加商品到购物车
function addProduct() {
// 1. 获取文本输入框元素对象
var inputElement = $("#productName");
// 2. 获取商品名字
var productName = inputElement.val();
// 3. 判断商品名字是否有值
// trim()：去除字符串左右空格
if (productName.trim().length == 0){
alert("商品名字不能为空");
return;
}
// 4. 创建tr元素对象
var tr = $("![](\"img/adv1.jpg\"/)
"+productName+" \n" +
"
20_案例03-抽奖程序-[★★★★]
-
需求：
1.当用户点击开始按钮时，小像框中的像片快速切换。
2.当用户点击停止按钮时，小像框中的像片停止切换，大像框中淡入显示与小像框相同的像片。
-
步骤分析：
1.将所有的图片地址保存在一个数组中，定义三个全局变量：总计数num，数组长度total，计时器timer
2.一开始让停止按钮不可用
3.点开始按钮调用方法imgStart()，点击后让开始按钮不可用，停止按钮可用。
4.每过25毫秒调用一次切换函数imgChange()，不停的替换小图片中的src地址。
5.每次替换图片计数总数加1，数组下标计算方法：数组下标=计数总数%数组的长度
6.点结束按钮调用方法imgStop()，让结束按钮不可用，让开始按钮可用。
7.imgStop()清除计时器，将小图片中的地址赋值给大图片的地址，先隐藏，再并且淡入显示图片
-
示例代码
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>抽奖程序title>
<style type="text/css">
#small {
border: 1px solid blueviolet;
width: 75px;
height: 75px;
margin-bottom: 20px;
}
#smallPhoto {
width: 75px;
height: 75px;
}
#big {
border: 2px solid orangered;
width: 500px;
height: 500px;
position: absolute;
left: 300px;
top: 10px
}
#bigPhoto {
width: 500px;
height: 500px;
}
#btnStart {
width: 100px;
height: 100px;
font-size: 22px;
}
#btnStop {
width: 100px;
height: 100px;
font-size: 22px;
}
style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js">script>
head>
<body>
<div id="small">
<img id="smallPhoto" src="img/man00.jpg"/>
div>
<div id="big">
<img id="bigPhoto" src="img/man00.jpg"/>
div>
<input id="btnStart" type="button" value="开始">
<input id="btnStop" type="button" value="停止">
<script type="text/javascript">
// 准备一个一维数组，用户的图片的路径
var imgs = [
"img/man00.jpg",
"img/man01.jpg",
"img/man02.jpg",
"img/man03.jpg",
"img/man04.jpg",
"img/man05.jpg",
"img/man06.jpg"
];
// 定义变量记录当前显示的图片索引
var index = 0;
// 定义变量接收定时任务id
var taskId = 0;
// 设置停止按钮的状态：不可点击
$("#btnStop").prop("disabled",true);
// 监听开始按钮点击
$("#btnStart").click(function () {
// 1. 设置开始按钮不可点
$(this).prop("disabled",true);
// 2. 设置停止按钮可点击
$("#btnStop").prop("disabled",false);
// 3. 开启一个定时器：每隔0.2秒切换小相框图片
// 参数1：定时器回调函数，用来封装定时任务
// 参数2：时间间隔：单位毫秒
// setTimeout开启的定期器只会执行一次
// setInterval开启的定期器会重复执行
taskId = setInterval(changeImage,50);
});
// 监听停止按钮点击
$("#btnStop").click(function () {
// 1. 设置停止按钮不可点
$(this).prop("disabled",true);
// 2. 设置开始按钮可点击
$("#btnStart").prop("disabled",false);
// 3. 停止定时任务
clearInterval(taskId);
// 4. 将小相框图片显示在大相框上
// 4.1 隐藏大相框图片
$("#bigPhoto").hide();
// 4.2 设置大相框图片
$("#bigPhoto").attr("src",$("#smallPhoto").attr("src"));
// 4.3 显示大相框图片
// $("#bigPhoto").show(3000);
$("#bigPhoto").fadeIn(5000);
});
// 切换图片函数：每隔0.2秒切换小相框图片
function changeImage() {
// 索引加一
index++;// index > imgs.length
// 计算真实的索引值
var i = index % imgs.length; // 10000 % 7 = 0 - 6
// 根据索引获得要切换的图片
var img = imgs[i];
// 根据id获取小相框图片元素对象
$("#smallPhoto").attr("src",img);
}
script>
body>
html>