JQuery 框架
注意事项
在导入JQUREY外部文件的时候不可以使用自闭合标签。无效化导入且不报错！！
<!-- <script src="jquery-3.3.1.min.js"></script> -->
<script src="jquery-3.3.1.min.js"/> // 不可使用此方式加载
jQuery框架特点：
-
免费开源
-
轻量级框架：占用资源少，运行速度快
-
宗旨：write less do more
jQuery开发有什么好处？
-
提高开发效率
-
免费开源
-
减少开发工作量
JQuery 格式
入口函数
$(function())的作用
类似于windos.onload，当页面加载完成之后再执行该函数。
<!DOCTYPE html>
<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对象与js对象之间的转换
JS对象与jQuery对象的区别
Jquery对象实际上是一个数组类。
JS对象：以前通过DOM中方法获得的元素都是JS对象，如：document.getElementById(“id”)
jQuery对象：通过jQuery选择器选中元素，就是jQuery对象
为什么要转换？
JS对象无法使用JQ对象中方法，如果JS对象需要使用JQ对象中方法，必须将JS对象转成JQ对象，反之亦然。
记忆语法，JQ是升级版 所以 JS—>JQ 要加钱 $（js对象）
JS是初级版 所以JQ —>JS要减钱 jq对象[0]
| 操作 | 方法 |
|---|---|
| 将JS对象–>jQuery对象 | $(JS对象) |
| 将jQuery对象–> JS对象 | JQ对象[0] 或 JQ对象.get(0) JQ对象本质上是JS的一个数组对象 |
<!DOCTYPE html>
<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>
JQ选择器
选择器的作用
如果要操作网页中各种元素，首先要选中这些元素。jQuery中的选择器功能强大，选择方式灵活多样。
jQuery常用的选择器有如下：
-
基本选择器
-
层级选择器
-
过滤选择器
-
表单过滤选择器
基本选择器
注：所有的选择器外面都要使用 钱$("")，如：ID选择器 $("#ID")
有以下单不限于。css中的所有基本选择器都可以用。
| 基本选择器 | 语法 |
|---|---|
| ID选择器 | #ID |
| 类选择器 | .类名 |
| 标签选择器 | 标签名 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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=" 改变元素名为 <div> 的所有元素的背景色为 红色" 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是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini">class是 mini</div>
<div class="mini">class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini01">class是 mini01</div>
<div class="mini">class是 mini</div>
</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) 改变元素名为 <div> 的所有元素的背景色为 红色。
$("#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>
层级选择器
| 层级选择器 | 语法 |
|---|---|
| 获取A元素内部所有B元素，B是A的子孙元素 | A B |
| 获得A元素下面的所有B子元素 | A>B |
| 获得A元素同级，下一个B元素。(B和A是兄弟关系，A是老二，B是老三) | A+B |
| 获取A元素后面所有同级B元素。(B是A后面所有的兄弟，得到一个集合) | A~B |
案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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="改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
<input type="button" value="改变 <body> 内子 <div> 的背景色为 红色" 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是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini">class是 mini</div>
<div class="mini">class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini01">class是 mini01</div>
<div class="mini">class是 mini</div>
</div>
<span class="spanone">span</span>
</body>
<script type="text/javascript">
//1) 改变 <body> 内所有 <div> 的背景色为红色，子孙都算
$("#b1").click(function () {
$("body div").css("background-color", "red");
});
//2) 改变 <body> 内子 <div> 的背景色为 红色
$("#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>
过滤选择器
什么是过滤选择器
在现有已经选择的元素基础之上，再次进行过滤，得到剩下的元素。类似于CSS中伪类选择器语法
语法
返回的都是数组，数组中每个元素都是js对象。
| 基本过滤选择器 | 语法 |
|---|---|
| 获得选择的元素中的第一个元素 | :first |
| 获得选择的元素中的最后一个元素 | :last |
| 不包括指定内容的元素 | :not() |
| 偶数，从 0 开始计数 | :even |
| 奇数，从 0 开始计数 | :odd |
| 等于第几个 equals | :eq() |
| 大于第n个，不含第index个 | :gt() |
| 小于第n个，不含第index个 | :lt() |
案例演示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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>1001</td>
<td>孙悟空</td>
<td>男</td>
<td>72</td>
<td>花果山</td>
<td>90</td>
</tr>
<tr>
<td>1002</td>
<td>猪八戒</td>
<td>男</td>
<td>36</td>
<td>高老庄</td>
<td>78</td>
</tr>
<tr>
<td>2002</td>
<td>沙僧</td>
<td>男</td>
<td>30</td>
<td>流沙河</td>
<td>67</td>
</tr>
<tr>
<td>3000</td>
<td>唐三藏</td>
<td>男</td>
<td>26</td>
<td>东土</td>
<td>87</td>
</tr>
<tr>
<td>4000</td>
<td>白骨精</td>
<td>女</td>
<td>18</td>
<td>白骨洞</td>
<td>96</td>
</tr>
<tr>
<td>5000</td>
<td>蜘蛛精</td>
<td>女</td>
<td>17</td>
<td>盘丝洞</td>
<td>95</td>
</tr>
<tr>
<td>总成绩</td>
<td colspan="5">3045</td>
</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>
表单过滤选择器
| 表单属性选择器 | 语法 |
|---|---|
| 可用 | :enabled |
| 不可用 | :disabled |
| 选中（单选radio ，多选checkbox） | :checked |
| 选择（下列列表<select>中的<option>） | :selected |
注：表单过滤选择器用于表单中元素。可以使用length的属性获取该选择数组的长度。只有单选框和复选框有checked属性。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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() 方法改变表单内不可用 <input> 元素的值" 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>
<!--multiple表示多选-->
<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() 方法改变表单内可用文本框 <input> 元素的值
$("#b1").click(function () {
//val()作用，相当于value属性，既可设置值，也可以获取值
$("input[type=text]:enabled").val("天气不错");
});
//2) val() 方法改变表单内不可用 <input> 元素的值
$("#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>
注意：如果使用属性选择器那么只能取出已经在标签中已经存在的属性，如果遇到disabled、selected等有默认值的属性取不出值。会显示undefined，但是默认的属性是生效的。
<td><input type="checkbox" class="item"></td>
console.log($("input[type=checkbox]").attr("checked")); //打印undefined
事件
事件处理函数的命名
所有的事件处理函数前面都没有on
jQuery中常用的事件
| 事件方法 | 功能 |
|---|---|
| blur() | 失去焦点 |
| change() | 改变事件 |
| click() | 单击事件 |
| dblclick() | 双击事件 |
| focus() | 得到焦点 |
| keydown() | 键盘按下 |
| keyup() | 松开键盘 |
| mouseover() | 鼠标移上 |
| mouseout() | 鼠标移出 |
| submit() | 表单提交 |
| scroll() | 滚轮滑动 |
事件方法使用示例
输入框的改变
- 文本框得到焦点和失去焦点分别显示不同的背景色
- 松开按键，将字母转成大写，再显示在文本框中
- 使用链式写法实现相同的功能
<!DOCTYPE html>
<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>
表单项的效果显示
- 实现全选全不选的效果
- 实现全选全不选的效果
<!DOCTYPE html>
<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>分类ID</td>
<td>分类名称</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox" name="item"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="item"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="item"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="item"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
实现购物车
<!DOCTYPE html>
<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 = "<tr>" +
"<td><img src=\"img/girl.jpg\" /></td>" +
"<td>" + val + "</td>" +
"<td><input type=\"button\" value=\"删除\" οnclick=\"deleteRow(this)\"></td>" +
"</tr>";
//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>
<!--this表示当前按钮-->
<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绑定点击事件
$body.on("click", "#btn1", btnClick1);
function btnClick1() {
}
// 移除按钮1的点击事件
$body.off("click", "#btn1");
//错误：选择器不一致，无法解除绑定
$body.off("click", ":button");
注意：在解绑时，如果不写事件，那么默认该对象的所有事件都解绑
使用JQ遍历
注意：无论使用哪一种遍历方式，取出的元素都是JS对象，在回调函数中使用，要注意响应端是否是application/json否则无效
下面展示了总共四种。一般使用第四种。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遍历</title>
</head>
<body>
<input type="button" id="btn" value="遍历列表项">
<ul>
<li>传智播客</li>
<li>黑马程序员</li>
<li>传智专修学院</li>
</ul>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//方式一：传统方式
// $("#btn").click(function(){
// let lis = $("li");
// for(let i = 0 ; i < lis.length; i++) {
// alert(i + ":" + lis[i].innerHTML);
// }
// });
//方式二：对象.each()方法
// $("#btn").click(function(){
// let lis = $("li");
// lis.each(function(index,ele){
// alert(index + ":" + ele.innerHTML);
// });
// });
//方式三：$.each()方法
$("#btn").click(function(){
let lis = $("li");
$.each(lis,function(index,ele){
alert(index + ":" + ele.innerHTML);
});
});
//方式四：for of 语句遍历
$("#btn").click(function(){
let lis = $("li");
for(ele of lis){
alert(ele.innerHTML);
}
});
</script>
</html>
BOM
html()，text()，val()
操作方法的特点：所有的方法既可以设置值(set)，又可以获取值(get)
html() 类似于以前innerHTML，修改或获取元素内部的HTML的内容，标签是起作用的。
text() 类似于以前的innerText，标签是不起作用的
val() 类似于以前的value属性，设置或获取值。如：val("值")设置值 val()获取值
<!DOCTYPE html>
<html>
<head>
<title>html和text和val</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="设置值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("<h1 style='color: red'>寡妇追日</h1>");
});
//获取值html
$("#b4").click(function () {
alert($("#mydiv").html());
});
//设置text
$("#b5").click(function () {
$("#mydiv").text("<h1 style='color: red'>寡妇追日</h1>");
});
//获取text
$("#b6").click(function () {
alert($("#mydiv").text());
});
</script>
</html>
属性修改方法
attr()、removeAttr()、prop()、removeProp()方法的使用
attr() 修改，添加或获取元素的属性。
attr("属性名","值") 如果属性名不存在就是添加，如果存在就是修改。两个参数是添加或修改
attr("属性名") 一个参数就是获取属性的值
prop() 修改，添加或获取元素的属性。
prop("属性名","值") 如果属性名不存在就是添加，如果存在就是修改。两个参数是添加或修改
prop("属性名") 一个参数就是获取属性的值
removeAttr(),removeProp() 删除指定的属性
jq对象.removeAttr("src")
jq对象.removeProp("href")
什么时候使用attr()和prop()
如果属性值是true或false，建议使用prop()，编程更加方便
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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方法对样式style属性进行修改时，值为整个样式。并非单个。
attr("style","backgound:color;automat:auto;checked:checked");
样式的方法
| 方法名 | 功能 |
|---|---|
| addClass(类样式名) | 添加类样式 可以添加一个或多个 |
| removeClass(类样式名) | 移除类样式，让类样式不起作用 |
| toggleClass(类样式名) | 切换类样式，如果有这个class名就移除，如果没有就添加 |
| css(样式名) | 获取指定样式值 |
| css(样式名,样式值) | 设置指定的样式 |
js的样式修改
元素.style.样式名=样式值
元素.className=类名
注意： 当使用类样式时，必须在style标签中有对应的类样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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>
元素的创建和添加
$("标签内容") 创建一个元素
父元素.append(子元素) 添加到最后一个子元素，与js中appendChild()相同
父元素.prepend(子元素) 添加到第一个子元素
元素.before(元素) 添加到当前元素的前面，这两个元素是兄弟关系
元素.after(元素) 添加到当前元素的后面，这两个元素是兄弟关系
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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"));
});
//创建一个广州的节点，加到城市中：<li id="gz" name="guangzhou">广州</li>
$("#b5").click(function () {
//创建元素
//let gz = $("<li id=\"gz\" name=\"guangzhou\">广州</li>");
//$("#city").append(gz);
//直接使用字符串，append会将字符串创建成一个元素
$("#city").append("<li id=\"gz\" name=\"guangzhou\">广州</li>");
});
</script>
</html>
元素的删除
元素.remove() 删除本身
父元素.empty() 父元素清空所有的子元素，父元素还在
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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中删除<li id="bj" name="beijing">北京</li>节点
$("#b1").click(function () {
$("#bj").remove(); //删除自己
});
//删除city中所有的子节点，观察city本身有没有删除
$("#b2").click(function () {
$("#city").empty(); //清空
});
</script>
</html>
动画方法
动画效果可以在括号中指定毫秒值
show() 显示
hide() 隐藏
fadeIn() 淡入
fadeOut() 淡出
slideDown() / slideUp() 下滑和上滑
//$("#girl").css("display", "none"); 也可以使用attr进行修改style样式。
在css的style属性中有display的一个值可以指定为 none 不显示 block 显示
AJAX
同步和异步的区别
-
同步方式：正常情况下，浏览器与服务器之间是串行操作，类似于一个Java线程的操作。
-
异步方式：浏览器与服务器是并行操作，类似于Java中多个线路同时工作。
即浏览器后台发送数据给服务器，不是通过表单去提交数据给服务器。
用户在前台还是可以继续工作，用户感觉不到浏览器已经将数据发送给了服务器，并且服务器也已经返回了数据。
ajax使用的技术
- JavaScript：用于后台发送数据给服务器，并且对服务器返回的结果进行处理
- XML：用于接收服务器返回的数据，但是已经被JSON格式代替。
3.0以前的$.get()和$.post()方法的使用
$.get()
$.post()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户是否存在</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
用户名：<input type="text" id="user"> <span id="info"></span>
<script type="text/javascript">
/*
用户注册时输入一个用户名，失去焦点以后，通过ajax后台判断用户名是否存在。
服务器先不访问数据库，直接判断用户名，如果用户名为newboy，则表示用户已经存在，否则用户名可以注册使用。
$.get(url,data,callback,type) $.post(url,data,callback,type)
只有第1个是必须的选项
1. url: 表示请求服务器地址
2. data: 发送给服务器的数据
格式1：键1=值2&键2=值2
格式2：{键:值,键:值}
3. callback：回调函数，参数是服务器返回的数据
4. type：从服务器返回的数据类型，默认是字符串类型
取值：xml, html, script, json, text
*/
//用户名的改变事件
$("#user").change(function () {
//访问服务器获取数据，参数是服务器返回的数据，返回的类型是json格式
$.get("json/users.json", function (users) {
//判断用户名是否存在
let user = $("#user").val(); //得到文本框的值
//1.设置标记
let exists = false;
//2.遍历数组，查找名字是否存在
for (let u of users) {
if (u == user) {
exists = true; //找到
break;
}
}
//3.根据查找的结果显示信息
if (exists) { //用户存在
$("#info").text("用户名已经存在");
}
else {
$("#info").text("恭喜可以注册");
}
},"json");
});
</script>
</body>
</html>
AJAX方法的使用
ajax是通用，默认是get方法
| $.ajax({键:值,键:值}) 属性名称 | 解释 |
|---|---|
| url | 服务器访问地址 |
| async | 默认是异步，取值是true，设置为false表示同步 |
| method | GET或POST方法 |
| data | 发送给服务器的数据，2种格式： 1. 键=值&键=值 2. {键:值, 键:值} |
| dataType | 服务器返回的数据类型 取值：xml, html, script, json, text |
| success | 服务器正常响应的回调函数，参数就是服务器返回的数据 |
| error | 服务器出现异常的回调函数，参数是XMLHttpRequest对象 |
$.ajax
{
url: 访问地址
data: 发送数据
async: 同步或异步
dataType: 服务器返回的数据类型
success: 服务器正常响应的回调函数，参数：就是服务器返回的数据
error: 服务器出现异常回调函数，参数：XMLHttpRequest对象
}
以后常用的是以下三个属性：
url, data, success
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>用户登录</h2>
<form id="loginForm">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password"/></td>
</tr>
<tr>
<!--登录按钮是一个普通按钮-->
<td colspan="2" align="center"><input type="button" value="登录" id="btnLogin"/></td>
</tr>
</table>
</form>
<script type="text/javascript">
/*
$.ajax({键:值,键:值})
url ： 服务器访问地址
async ：默认是异步，取值是true，设置为false表示同步
异步：不会等服务器处理完，会一直向后执行
同步：等服务器处理完毕，才执行后面的JS代码
method： GET或POST方法，默认是get方法
data ： 发送给服务器的数据，2种格式：1. 键=值&键=值 2. {键:值, 键:值}
dataType ： 服务器返回的数据类型<br />取值：xml, html, script, json, text
success ： 服务器正常响应的回调函数，参数就是服务器返回的数据
error ： 服务器出现异常的回调函数，参数是XMLHttpRequest对象
*/
//登录按钮的点击事件
$("#btnLogin").click(function () {
//1.获取用户输入的用户名和密码
let username = $("#username").val();
let password = $("#password").val();
//2.使用$.ajax访问服务器
$.ajax({
url: "json/login.json",
data: "a=1&b=2", //发送的数据，可以在浏览器上按f12,选network可以看到
//async: false, //默认是true，表示异步
//服务器正常响应的回调函数，参数就是返回的用户数据
success: function (users) {
let exists = false;
//遍历数组中每个用户
for (let user of users) {
//比较用户名和密码是否相同
if (user.name == username && user.password == password) {
exists = true;
break;
}
}
//输出登录成功或失败
if (exists) {
alert("登录成功，欢迎您：" + username);
}
else {
alert("登录失败，请重试");
}
},
dataType: "json", //指定返回数据类型是json
error: function (request) { //出现异常回调函数，参数是XMLHttpRequest对象
alert("服务器出现异常，状态码是：" + request.status);
}
});
//alert("浏览器端的代码继续执行"); //不会等服务器处理完，会一直向后执行
});
</script>
</body>
</html>
get和post的区别： 一个会把参数显示在地址栏，一个是在请求信息当中传递。
案例：输入自动补全
[
"张三",
"李四",
"王五",
"赵六",
"田七",
"孙八",
"张三丰",
"张无忌",
"李寻欢",
"王维",
"李白",
"杜甫",
"李贺",
"李逵",
"宋江",
"王英",
"鲁智深",
"武松",
"张薇",
"刘小轩",
"刘浩宇",
"刘六"
]
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自动完成</title>
<style type="text/css">
.content {
width: 400px;
margin: 30px auto;
text-align: center;
}
input[type='text'] {
box-sizing: border-box;
width: 280px;
height: 30px;
font-size: 14px;
border: 1px solid #38f;
}
input[type='button'] {
width: 100px;
height: 30px;
background: #38f;
border: 0;
color: #fff;
font-size: 15px;
}
#show {
box-sizing: border-box;
position: relative;
left: 7px;
font-size: 14px;
width: 280px;
border: 1px solid dodgerblue;
text-align: left;
border-top: 0;
/*一开始是隐藏不可见*/
display: none;
}
#show div {
padding: 4px;
background-color: white;
}
#show div:hover {
/*鼠标移上去背景变色*/
background-color: #3388ff;
color: white;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content">
<img alt="传智播客" src="img/logo.png"><br/><br/>
<input type="text" name="word" id="word">
<input type="button" value="搜索一下">
<div id="show"></div>
</div>
<script type="text/javascript">
/*
alert(event.keyCode); //keyCode键盘码表，每个按键都会对应一个号码
*/
//不能使用change事件，因为change要失去焦点才激活，只要松开任何一个键就激活
$("#word").keyup(function () {
//判断文本框中是否有数据，如果不为空，才继续，去掉前后空格
let word = $("#word").val().trim();
if (word == "") {
//如果文本框中没有内容，也要隐藏div
$("#show").hide();
return; //不再继续
}
//表示有数据的，开始访问服务器
$.get({
url: "json/search.json", //服务器的访问地址
success: function (users) { //返回服务器上所有的数据
//使用正则表达式，只保留指定字符串开头的用户名
let reg = new RegExp("^" + word);
//创建一个数组，用来保存所有以word开头的用户
let arr = new Array();
//遍历整个数组
for (let user of users) {
//判断每个字符串是否匹配正则表达式
if (reg.test(user)) {
arr.push(user); //添加到数组中
}
}
//把arr数组显示在div中
//先判断数组中是否有元素，有元素才显示
if (arr.length > 0) {
//拼接字符串
let html="";
for (let name of arr) {
html+="<div>" + name + "</div>";
}
//放在#show的div中
$("#show").html(html); //括号中是一个变量名html
//显示div
$("#show").show();
//如果点击每个小的div，就把div中文本赋值给文本框的value
$("#show div").click(function () {
//this相当于你点击的那个div
$("#word").val($(this).text());
//隐藏大的div
$("#show").slideUp("normal"); //加个动画
});
}
else { //没有元素隐藏div
$("#show").hide();
}
}
});
});
</script>
</body>
</html>
案例：瀑布刷新显示
知识点：
DOM的方法
页面总高度
可视区域高度
已滑动高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站首页</title>
<script src="js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="css/tt.css">
</head>
<body>
<div class="top">
<span class="top-left">下载APP</span>
<span class="top-left"> 北京 晴天</span>
<span class="top-right">更多产品</span>
</div>
<div class="container">
<div class="left">
<a>
<img src="img/logo.png"><br/>
</a>
<ul>
<li>
<a class="channel-item active" href="#">
<span>
推荐
</span>
</a>
</li>
<li><a class="channel-item" href="#">
<span>
视频
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
热点
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
直播
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
图片
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
娱乐
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
游戏
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
体育
</span>
</a></li>
</ul>
</div>
<div class="center">
<ul class="news_list">
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实11”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实22”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实33”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实44”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实55”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实66”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实77”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实88”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实99”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实1010”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实1010”
<hr>
</a>
</div>
</li>
<li>
<div class="title-box">
<a href="#" class="link">
奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实1010”
<hr>
</a>
</div>
</li>
</ul>
<div class="loading" style="text-align: center; height: 80px">
<img src="img/loading2.gif" height="100%">
</div>
<div class="content">
<div class="pagination-holder clearfix">
<div id="light-pagination" class="pagination"></div>
</div>
</div>
<div id="no" style="text-align: center;color: red;font-size: 20px"></div>
</div>
</div>
</body>
<script>
//设置进入条件true
let comeInCondition = true;
//误差高度
let errorHeight = 20;
//设置起始页面和页面显示个数
let pageBegin = 1;
let pageSize = 40;
//设置滚轮滑动事件
$(function () {
$(window).scroll(function () {
//获得页面总高度 document
let totalHeight = $(document).height();
//获得可视区域高度
let viewHeight = $(window).height();
//获得滚轮已滚动区域高度
let slideHeight = $(window).scrollTop();
//判断是否>=页面总高度
if(errorHeight+slideHeight+viewHeight>=totalHeight){
//判断进入条件是否合格
if(comeInCondition==true){
//显示加载图片
$(".loading").show();
//修改进入条件 false
comeInCondition=false;
//调用方法后台访问
showMore(pageBegin,pageSize);
//页数+1
pageBegin++;
}
}
});
});
//方法
function showMore() {
//定义拼接字符串变量
let s = "";
//AJAX
$.ajax({
//遍历数据
url:"/newsServlet",
data:{"page":pageBegin,
"pageSize":pageSize
},
success:function (data) {
//如果数据为空直接判定
if(data==""||data==null){
//隐藏加载图标
$(".loading").hide();
$("#no").text("我也是有底线的...")
return;
}
//拼接字符串
for(let d of data){
s+=`<li>
<div class="title-box">
<a href="#" class="link">
${d.title}
<hr>
</a>
</div>
</li>`
}
//追加append
$(".news_list").append(s);
//隐藏加载图标
$(".loading").hide();
//设置进入条件true
comeInCondition=true;
}
})
}
// //1.定义发送请求标记
// let send = true;
//
// //2.定义当前页码和每页显示的条数
// let page = 1;
// let pageSize = 10;
//
// //3.定义滚动条距底部的距离
// let bottom = 1;
//
// //4.设置页面加载事件
// $(function () {
// //5.为当前窗口绑定滚动条滚动事件
// $(window).scroll(function () {
// //6.获取必要信息，用于计算当前展示数据是否浏览完毕
// //当前窗口的高度
// let windowHeight = $(window).height();
//
// //滚动条从上到下滚动距离
// let scrollTop = $(window).scrollTop();
//
// //当前文档的高度
// let docHeight = $(document).height();
//
// //7.计算当前展示数据是否浏览完毕
// //当 滚动条距底部的距离 + 当前滚动条滚动的距离 + 当前窗口的高度 >= 当前文档的高度
// if((bottom + scrollTop + windowHeight) >= docHeight) {
// //8.判断请求标记是否为true
// if(send == true) {
// //9.将请求标记置为false，当前异步操作完成前，不能重新发起请求。
// send = false;
// //10.根据当前页和每页显示的条数来 请求查询分页数据
// queryByPage(page,pageSize);
// //11.当前页码+1
// page++;
// }
// }
// });
// });
//
// //定义查询分页数据的函数
// function queryByPage(page,pageSize){
// //加载动图显示
// $(".loading").show();
// //发起AJAX请求
// $.ajax({
// //请求的资源路径
// url:"newsServlet",
// //请求的参数
// data:{"page":page,"pageSize":pageSize},
// //请求的方式
// type:"POST",
// //响应数据形式
// dataType:"json",
// //请求成功后的回调函数
// success:function (data) {
// if(data.length == 0) {
// $(".loading").hide();
// $("#no").html("我也是有底线的...");
// return;
// }
// //加载动图隐藏
// $(".loading").hide();
// //将数据显示
// let titles = "";
// for(let i = 0; i < data.length; i++) {
// titles += "<li>\n" +
// " <div class=\"title-box\">\n" +
// " <a href=\"#\" class=\"link\">\n" +
// data[i].title +
// " <hr>\n" +
// " </a>\n" +
// " </div>\n" +
// " </li>";
// }
//
// //显示到页面
// $(".news_list").append(titles);
// //将请求标记设置为true
// send = true;
// }
// });
// }
</script>
</html>
案例：分页插件使用
后端使用PageHelper 封装的页面对象，用ObjectMapper转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站首页</title>
<link rel="stylesheet" href="css/tt.css">
<link rel="stylesheet" href="css/simplePagination.css">
</head>
<body>
<div class="top">
<span class="top-left">下载APP</span>
<span class="top-left"> 北京 晴天</span>
<span class="top-right">更多产品</span>
</div>
<div class="container">
<div class="left">
<a>
<img src="img/logo.png"><br/>
</a>
<ul>
<li>
<a class="channel-item active" href="#">
<span>
推荐
</span>
</a>
</li>
<li><a class="channel-item" href="#">
<span>
视频
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
热点
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
直播
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
图片
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
娱乐
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
游戏
</span>
</a></li>
<li><a class="channel-item" href="#">
<span>
体育
</span>
</a></li>
</ul>
</div>
<div class="center">
<ul class="news_list">
</ul>
<div class="content">
<div class="pagination-holder clearfix">
<div id="light-pagination" class="pagination"></div>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.simplePagination.js"></script>
<script>
//1.定义当前页码和每页显示的条数
let start = 1;
let pageSize = 10;
//2.调用查询数据的方法
queryByPage(start,pageSize);
//3.定义请求查询分页数据的函数，发起AJAX异步请求，将数据显示到页面
function queryByPage(start,pageSize) {
$.ajax({
//请求的资源路径
url:"newsServlet2",
//请求的参数
data:{"start":start,"pageSize":pageSize},
//请求的方式
type:"POST",
//响应数据形式
dataType:"json",
//请求成功后的回调函数
success:function (pageInfo) {
//将数据显示到页面
let titles = "";
for(let i = 0; i < pageInfo.list.length; i++) {
titles += "<li>\n" +
" <div class=\"title-box\">\n" +
" <a href=\"#\" class=\"link\">\n" +
pageInfo.list[i].title +
" <hr>\n" +
" </a>\n" +
" </div>\n" +
" </li>";
}
$(".news_list").html(titles);
//4.为分页按钮区域设置页数参数（总页数和当前页）
$("#light-pagination").pagination({
pages:pageInfo.pages,
currentPage:pageInfo.pageNum
});
//5.为分页按钮绑定单击事件,完成上一页下一页查询功能
$("#light-pagination .page-link").click(function () {
//获取点击按钮的文本内容
let page = $(this).html();
//如果点击的是Prev，调用查询方法，查询当前页的上一页数据
if(page == "Prev") {
queryByPage(pageInfo.pageNum - 1,pageSize);
}else if (page == "Next") {
//如果点击的是Next，调用查询方法，查询当前页的下一页数据
queryByPage(pageInfo.pageNum + 1,pageSize);
} else {
//调用查询方法，查询当前页的数据
queryByPage(page,pageSize);
}
});
}
});
}
</script>
</html>
JSON转换
- 后端ObjectMapper
- writeValueAsString
- readValue（new TypeReferences<>(){}） 使用方式见JSON篇
其他知识点
-
在使用对象执行事件的时候，（）中使用function匿名函数时，是绑定事件，没有则是执行函数。
$("#b2").click(function () { //绑定点击事件 $("#city").empty(); }); $("#b2").click(); //执行点击事件。 （前面有代码已经定义过绑定事件） -
在前端调试前的console里面是可以写代码执行的。
-
标签中如果没有申明属性，使用attr获取出来的值为undefined，用prop获取出来时false。
url:“newsServlet2”,
//请求的参数
data:{“start”:start,“pageSize”:pageSize},
//请求的方式
type:“POST”,
//响应数据形式
dataType:“json”,
//请求成功后的回调函数
success:function (pageInfo) {
//将数据显示到页面
let titles = “”;
for(let i = 0; i < pageInfo.list.length; i++) {
titles += “
- \n” +
" <div class=“title-box”>\n" +
" <a href="#" class=“link”>\n" +
pageInfo.list[i].title +
"
\n" +
" \n" +
" \n" +
" - “;
}
$(”.news_list").html(titles);
```//4.为分页按钮区域设置页数参数（总页数和当前页） $("#light-pagination").pagination({ pages:pageInfo.pages, currentPage:pageInfo.pageNum }); //5.为分页按钮绑定单击事件,完成上一页下一页查询功能 $("#light-pagination .page-link").click(function () { //获取点击按钮的文本内容 let page = $(this).html(); //如果点击的是Prev，调用查询方法，查询当前页的上一页数据 if(page == "Prev") { queryByPage(pageInfo.pageNum - 1,pageSize); }else if (page == "Next") { //如果点击的是Next，调用查询方法，查询当前页的下一页数据 queryByPage(pageInfo.pageNum + 1,pageSize); } else { //调用查询方法，查询当前页的数据 queryByPage(page,pageSize); } }); } }); }JSON转换
- 后端ObjectMapper
- writeValueAsString
- readValue（new TypeReferences<>(){}） 使用方式见JSON篇
其他知识点
-
在使用对象执行事件的时候，（）中使用function匿名函数时，是绑定事件，没有则是执行函数。
$("#b2").click(function () { //绑定点击事件 $("#city").empty(); }); $("#b2").click(); //执行点击事件。 （前面有代码已经定义过绑定事件） -
在前端调试前的console里面是可以写代码执行的。
-
标签中如果没有申明属性，使用attr获取出来的值为undefined，用prop获取出来时false。
- 后端ObjectMapper
3846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
