1.JQuery简介
1.1JQuery概念
1.2JQuert优点
2.JQuery选择器
2.1JQuery基础选择器
2.2 JQuery筛选选择器
3.JQuery的筛选方法（重点）
4JQuery修改样式
4.1修改css样式
4.2修改类样式的方法
5修改属性方法
5.1prop()
若将 input 标签里的 type属性由password改为text，复选框 按钮 等属性修改其值时用prop()方法
5.2 attr()
6.JQuery的DOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery的DOM操作</title>
</head>
<body>
<div class="box">
<h3>学生信息表</h3>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
<th>课程</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a href="">点击</a>小明</td>
<td>18</td>
<td>软工01</td>
<td>Java</td>
</tr>
<tr>
<td>2</td>
<td>小红</td>
<td>19</td>
<td>数媒</td>
<td>PS</td>
</tr>
<tr>
<td>3</td>
<td>小丽</td>
<td>18</td>
<td>计科</td>
<td>Python</td>
</tr>
</tbody>
</table>
<img src="../../img/10.jpg" alt="" width="150px">
<ul>
<li>李白</li>
<li>杜甫</li>
</ul>
<span>王伟</span>
<ol class="tlbb">
<li>乔峰</li>
<li>段誉</li>
<li>虚竹</li>
</ol>
</div>
</body>
<style>
.box {
width: 680px;
}
table {
width: 680px;
height: 300px;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid #c9c9c9;
text-align: center;
}
h1 {
text-align: center;
}
</style>
<script src="../../JQuery/jquery-1.8.3.js"></script>
<script>
// html() 返回标签体内容,包括元素节点
console.log($("table>tbody tr:first").find("td:eq(1)").html());
//text() 返回标签体的文本内容, 只返回文本节点
console.log($("table>tbody tr:first").find("td:eq(1)").text());
// attr() 返回或设置属性节点
console.log("返回元素的属性值:", $("img").attr("width"));
// 设置属性
$("img").attr("title", "300px");
// 创建一个tr
var tr = document.createElement("tr");
tr.innerHTML = " <td>4</td><td> 小蓝 </td ><td>19</td> <td>软工</td><td>MySql</td>"
// document.querySelector("tbody").appendChild(tr)
// 内部插入
$("tbody").append(tr)
$("tbody").append("<tr> <td>5</td><td> 小灰</td ><td>19</td> <td>软工</td><td>MySql</td><tr>")
//外部末尾插入
$("tbody tr:last").after("<tr> <td>6</td><td> 小绿</td ><td>19</td> <td>软工</td><td>MySql</td><tr>")
//外部头部加入
$("tbody tr:first").before("<tr> <td>6</td><td> 小绿</td ><td>19</td> <td>软工</td><td>MySql</td><tr>")
//添加到指定元素的末尾，可以创建标签 内部后置
$("<li>白居易</li>").appendTo("ul")
$("span").appendTo("ul")
// 内部前置
$("ul").prepend("<li>孟郊</li>")
$("<li>崔护</li>").prependTo("ul")
// 外部前置
$("<li>丁春秋</li>").insertBefore(".tlbb")
$("<li>慕容复</li>").insertAfter(".tlbb")
</script>
