重温jQuery
Write Less， Do More！
——John Resig(jQuery设计者)
目录
基础知识
概况
编程访问DOM节点
基础知识
Web网页是有结构的HTML文档。浏览器分析HTML文档，将其转换为一棵DOM树，提供一套API，通过JavaScript代码操纵这棵树。
概括
事件处理
不同浏览器之间的事件处理机制存在差异，jQuery统一规范了各种事件响应代码的编写方式，大大地提升了开发效率！
|
节点类型常量 |
值 |
|
Node.ELEMENT_NODE |
1 |
|
Node.ATTRIBUTE_NODE |
2 |
|
Node.TEXT_NODE |
3 |
|
Node.CDATA_SECTION_NODE |
4 |
|
de.ENTITY_REFERENCE_NODE |
5 |
|
Node.ENTITY_NODE |
6 |
|
Node.PROCESSING_INSTRUCTION_NODE |
7 |
|
Node.COMMENT_NODE |
8 |
|
Node.DOCUMENT_NODE |
9 |
|
Node.DOCUMENT_TYPE_NODE |
10 |
|
Node.DOCUMENT_FRAGMENT_NODE |
11 |
|
Node.NOTATION_NODE |
12 |
三种节点类型的区分
元素节点（element node）
- 每个HTML元素对象对应着一个DOM节点；
- 元素节点本身并不包容其内容，其内容是尤其文本子节点所提供的；
文本节点（text node）
- 文本节点构成树的叶子节点；
- 在HTML中，文本节点包容了元素的内容；
属性节点（attribute node）
- 属性节点对应着HTML文档中的元素属性；
- 一个元素节点可以包容多个属性节点，构成一个集合；
Ajax
封装了浏览器提供的XMLHttpRequest对象，以异步方式向Web Service 发出请求，通过“回调”方式进行后续处理，更新UI界面，整个流程简单明了。
jQuery命令链
jQuery采用一种声明式的编程风范，可以连续调用多个方法。
神奇的”$”
“$”是jQuery的“神奇字符”，通过它可以调用jQuery所提供的各种功能。
//调用函数
var trimmed=$.trim(“…”);
//操作DOM元素（支持CSS选择器，如id，class等）
$(“button.continue”).html(“…”)编程访问DOM节点
DOM编程的基本思路
- 访问DOM的入口点是document，它是window的属性，在JavaScript中，可以直接访问它；
- document对象还有一个body属性，直接引用<body>元素；
- document对象提供了一系列的方法，完成以下工作：
1. 从DOM树中选择特定的节点（或节点集合）
2. 设定这些节点对象的属性
3. 调用这些节点对象的方法
4. 响应这些节点对象特定的事件DOM 编程要点：操作元素
事件描述
DOM API 中可用的方法
获取特定元素的引用
getElementById、getElementByTagName、GetElementByClassName
要操作元素的属性
通过元素对象的attrbutes集合，对元素属性进行CRUD；
使用setAttribute/getAttribute处理单个属性；处理CSS样式
使用元素对象的style属性可以设定元素的CSS样式规则；
使用className可以设定元素的样式类；DOM API编程核心点：修改DOM树
直接使用DOM API开发存在的问题
- 浏览器的兼容性问题；
- 过于底层，开发效率不高，需要编写的代码量大；
jQuery访问DOM树
使用jQuery的 优点
- 灵活的元素选择能力；
- 具备强大CSS操控能力；
- 对DOM树节点的增删功能强大；
常用jQuery操作
-
事件
jQuery提供的方法
获取、创建元素
$()
处理属性
attr()、removeAttr()
操作属性内容
html()、text()、val()
处理样式
css()、addClass()、toggleClass()、removeClass()
外部插入节点
after()、before()、insertAfter()
复制节点
clone()
替换节点
replaceWith、replaceAll()
包裹节点
wrap()、unwrap()、wrapAll()、wrapInner()
移除节点
remove()和empty()
示例
1. 复制元素
<div id="divShow">
<b><i>This is a Div element!</i></b>
</div>
<div id="divHTML">
</div>
<div id="divText">
</div>
<!--引入jQuery-->
<script src="JS/jquery-3.1.1.min.js"></script>
<script>
$(function () {
//获取id为divShow的HTML内容
var strHTML = $('#divShow').html();
var strText = $('#divShow').text();
//设置id为divHTML的hHTML内容
$('#divHTML').html(strHTML);
$('#divText').text(strText);
})
</script>
2. 设置表格样式
jQuery支持CSS3的元素选择方式，可以使用非常灵活的方式选择特定的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>exploreDOMNode</title>
<link href="dist-Bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="dist-Bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<style>
#tbStu {
/*如果在table标签中直接设置border='1', 那么将会是整个表格的线条全部出现*/
/*如果在样式里面书写border:1px...,将表示只显示整个表格的外框线*/
border: 1px solid darkblue;
background-color: #9b9e9d;
width: 360px;
}
#tbStu tr {
line-height: 25px;
}
#tbStu tr th {
background-color: #2b669a;
text-align: center;
color: #f8f8f8;
}
#tbStu .trEven {
background-color: #f8f8f8;
}
</style>
</head>
<body class="container text-center">
<div class="row">
<table class="col-xs-4 col-xs-offset-4" id="tbStu" cellspacing="0">
<caption><h3>使用jQuery添加样式</h3></caption>
<!--第0行-->
<!--注意数字0是偶数-->
<tr>
<th>
学号
</th>
<th>
姓名
</th>
<th>性别</th>
<th>总分</th>
</tr>
<!--第1行-->
<tr>
<td>1001</td>
<td>张晓明</td>
<td>男</td>
<td>320</td>
</tr>
<!--第2行-->
<tr>
<td>1002</td>
<td>Jener</td>
<td>男</td>
<td>450</td>
</tr>
<!--第3行-->
<tr>
<td>1003</td>
<td>黄子玉</td>
<td>女</td>
<td>500</td>
</tr>
<!--第4行-->
<tr>
<td>1003</td>
<td>于文华</td>
<td>女</td>
<td>620</td>
</tr>
</table>
</div>
<script src="JS/jquery-3.1.1.min.js"></script>
<script>
$(function () {
//为序号为偶数的tr添加样式trEven
$("#tbStu tr:nth-child(even)").addClass("trEven");
})
</script>
</body>
</html>
3. 修改表格样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>exploreDOMNode</title>
<link href="dist-Bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="dist-Bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<style>
.divBtn {
width: 200px;
margin: 20px auto;
background-color: #e2ebff;
box-shadow: 5px 8px;
cursor: pointer;
}
.divBtnPressed {
width: 200px;
margin: 20px auto;
background-color: #d58512;
font-weight: bolder;
/* 取消阴影区 */
box-shadow: 0 0;
cursor: pointer;
}
</style>
</head>
<body class="container text-center">
<div class="divBtn">Click to Change Style!</div>
<script src="JS/jquery-3.1.1.min.js"></script>
<script>
$(function () {
$('.divBtn').click(function () {
$(this).toggleClass('divBtnPressed');
})
})
</script>
</body>
</html>
4. 复制DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>exploreDOMNode</title>
<link href="dist-Bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="dist-Bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<style>
.clicktoPate {
border: 1px solid darkgray;
border-radius: 25%;
padding: 5px;
width: 80px;
height: 80px;
background-color: #2b669a;
color: #fff;
display: inline;
cursor: pointer;
}
.divShow {
margin: 20px auto;
}
</style>
</head>
<body class="container text-center">
<script src="JS/jquery-3.1.1.min.js"></script>
<div class="clicktoPate">点击进行复制</div>
<!--指定复制内容的输出的区域-->
<div class="divShow">
</div>
<script>
$(function () {
$('.clicktoPate').click(function () {
//制定输出区域为.divShow
$(this).clone(true).appendTo('.divShow');
})
})
</script>
</body>
</html>
5. 动态创建DOM节点对象
<style>
ul {
list-style: none;
}
ul li {
line-height: 2em;
}
</style><fieldset>
<legend><h2>DynamicCreateDOMElement</h2></legend>
<ul>选择创建的DOM节点：
<li><select id="selectType">
<option value="p">P元素</option>
<option value="div">DIV元素</option>
</select>
</li>
输入节点的内容：
<li>
<input type="text" id="contentValue">
</li>
<li>
<button id="btn">创建节点</button>
</li>
</ul>
</fieldset>
<div id="showDiv"></div><script src="JS/jquery-3.1.1.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
/*获取参数*/
var str1 = $("#select1").val();//获取元素名
var str2 = $("#contentValue").val();//获取插入节点的内容
var div = $("<" + str1 + ">" + str2 + "</" + str1 + ">" + "<hr/>");//创建DOM对象
$("#showDiv").show().append(div);//c插入节点中
})
})
</script>
绕来绕去，还是回来了！
