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>
