1 jQuery主架
jQuery是一个封装JS的框架。
使用jQuery可以更方便的编写JS脚本实现的功能。
2 jQuery框架
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
3 jQuery可以做什么？
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX（重要）
4 如何在HTML页面中使用jQuery框架
jQuery是一个封装了JS脚本的框架。
也就是说是已经写好的JS代码。
.js就是JavaScript的外部脚本文件。
.min.js 这是压缩的版本。
需要在HTML页面中导入相应的js文件。
<script src="js/jquery-3.5.1.js" >中间是空的！！！</script>
5 jQuery的核心方法
在jQuery中封装了一系列的方法。
核心方法： jquery();
简化格式： $(); 合作$代替jQuery这个方法名。
$(参数)：参数可以是选择器，还可以直接就是一个函数。
6 jQuery中事件方法
在jQuery中将HTML中事件都封装成了一系统的事件方法。
例：表示页面输载入事件：ready(函数)
<script type="text/javascript">
$(document).ready(function(){
alert("msg");
});
</script>
//简化版
<script type="text/javascript">
$(function(){
alert("msg");
});
</script>
7 jQuery的选择器
选择器的作用是用来在HTML页面上查找元素。
jQuery的选择器与CSS内嵌样式选择器是一样的。
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它
基于已经存在的CSS选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
8 jQuery的方法
8.1 值的方法
HTML代码/文本/值
html()====>innerHTML
text()====>innerText
val()====>value
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
font-family:'Courier New', Courier, monospace;
}
#myspan {
font-size: 36px;
color: darkorange;
font-family: "楷体";
}
</style>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
console.log($("#myspan").html());
$("#myspan").text("<i>这是使用jQuery加的HTML</i>");
$("#myText").blur(function() {
$("#myspan").html("<B>" + $(this).val() + "</B>");
});
});
</script>
</head>
<body>
<span id="myspan"><b>这是SPAN标签</b></span><br>
<input type="text" name="userName" value="peter" id="myText" />
</body>
</html>
8.2 CSS样式的方法
使用css()的方法可以设置和获取对象的样式。
css() 方法设置或返回被选元素的一个或多个样式属性。
返回CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：
css("propertyname");
例子：将返回首个匹配元素的 background-color 值：
$("p").css("background-color");
设置单个CSS属性
如需设置指定的 CSS 属性，请使用如下语法：
css("propertyname","value");
下面的例子将为所有匹配元素设置 background-color 值：
$("p").css("background-color","yellow");
设置多个 CSS 属性
如需设置多个 CSS 属性，请使用如下语法：
css({"propertyname":"value","propertyname":"value",...});
下面的例子将为所有匹配元素设置 background-color 和 font-size：
$("p").css({"background-color":"yellow","font-size":"200%"});
8.3 属性
attr方法可以获取属性的值，也可以设置属性的值，也可以获取一个我们自己新定义的属性
的值。
获取xo标签attribute属性的值：xo可以是ID可以是类。如下：
$(xo).attr(attribute)
设置attribute属性的值为value
$(xo).attr(attribute, value)
设置多个attribute属性的值value们
$(xo).attr({attribute1: value1, attribute2: value2})
8.4 类样式的使用
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。在添加类时，您也可以选取多个元素：
$("button").click(function(){ $("h1,h2,p").addClass("blue");$("div").addClass("important");
});
也可以在 addClass() 方法中规定多个类：
$("button").click(function(){
$("body div:first").addClass("important blue");
});
jQuery - 添加元素
通过 jQuery，可以很容易地添加新元素/内容。
添加新的 HTML 内容时学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
jQuery removeClass() 方法
下面的例子演示如何在不同的元素中删除指定的 class 属性：
$("button").click(function(){ $("h1,h2,p").removeClass("blue"); });
jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：
$("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });
jQuery - 删除元素
通过 jQuery，可以很容易地删除已有的 HTML 元素。
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
9 实现动态表格
步骤：①创建一个表格
②编写数据
③在页面加载完成之后初始化表格
④将表单中的数据加到表格
⑤为每一行增加一个删除按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.c1 {
background-color: #00FFFF;
}
.c2 {
background-color: burlywood;
}
thead {
background-color: fuchsia;
}
</style>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script>
let stuArr = [{
'sid': 1,
'sname': '残念',
'ssex': '1',
'sscore': 60
},
{
'sid': 2,
'sname': '白茶',
'ssex': '0',
'sscore': 90
},
{
'sid': 3,
'sname': '八碗',
'ssex': '1',
'sscore': 100
}
];
$(function(){
$("#btnAdd").click(function(){
let trObj = $("<tr></tr>");
let sidTd = $("<td></td>").html($("#sid").val());
let snameTd = $("<td></td>").html($("#sname").val());
let ssexTd = $("<td></td>").html($(".radioCls:checked").val());
let sscoreTd = $("<td></td>").html($("#sscore").val());
let delTd = $("<td></td>");
let delBtn = $("<input>").attr("type","button").val("删除");
delTd.append(delBtn);
trObj.append(sidTd).append(snameTd).append(ssexTd).append(sscoreTd).append(delTd);
$("#tabData").append(trObj);
delBtn.click(function(){
if(confirm("是否删除"+$(this).parent().parent().find("td:eq(1)").text()+"？")){
$(this).parent().parent().remove();
$("#tabData tr").removeClass("c1");
$("#tabData tr").removeClass("c2");
$("#tabData tr:even").addClass("c1");
$("#tabData tr:odd").addClass("c2");
}
});
$("#tabData tr:even").addClass("c1");
$("#tabData tr:odd").addClass("c2");
});
$.each(stuArr,function(i,jsonObj){
//在jQuery中如何创建一个tr标签对象
let trObj = $("<tr>");
let sidTd = $("<td>").html(jsonObj.sid);
let snameTd = $("<td>").html(jsonObj.sname);
let ssexTd = $("<td>").html(jsonObj.ssex);
let sscoreTd = $("<td>").html(jsonObj.sscore);
let delTd = $("<td></td>");
let delBtn = $("<input/>").attr("type","button").val("删除");
delTd.append(delBtn);
trObj.append(sidTd).append(snameTd).append(ssexTd).append(sscoreTd).append(delTd);
$("#tabData").append(trObj);
delBtn.click(function(){
if(confirm("是否删除"+$(this).parent().parent().find("td:eq(1)").text()+"？")){
$(this).parent().parent().remove();
$("#tabData tr").removeClass("c1");
$("#tabData tr").removeClass("c2");
$("#tabData tr:even").addClass("c1");
$("#tabData tr:odd").addClass("c2");
}
});
});
$("#tabData tr:even").addClass("c1");
$("#tabData tr:odd").addClass("c2");
})
</script>
</head>
<body>
<table width="60%" border="1px" cellpadding="3px" cellspacing="0px">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>积分</th>
<th>删除</th>
</tr>
</thead>
<tbody id="tabData">
</tbody>
</table>
<hr>
<form>
编号：<input type="text" name="sid" id="sid" value="" /><br>
姓名：<input type="text" name="sname" id="sname" value="" /><br>
性别：<input type="radio" name="ssex" value="1" id="ssex" />男
<input type="radio" name="ssex" value="0" id="ssex" />女<br>
积分：<input type="text" name="sscore" id="sscore" value="" /><br>
<input type="button" id="btnAdd" name="btnAdd" value="保存" />
</form>
</body>
</html>
