一、软件结构
1. C/S结构
C/S又称Client/Server或客户/服务器模式。
服务器通常采用高性能的PC、工作站或小型机，并采用大型数据库系统，如Oracle、Sybase、Informix或 SQL Server。客户端需要安装专用的客户端软件。
2. B/S结构
B/Ｓ是Brower/Server的缩写，是浏览器/服务器端模式。
客户机上只要安装一个浏览器（Browser），服务器安装Oracle、Sybase、Informix或 SQL Server等数据库。浏览器通过Web Server 同数据库进行数据交互。
常见的浏览器：
浏览器是指网页运行的平台（渲染）
五大最著名的浏览器：
Internet Explorer（IE）、FireFox（火狐）、Chrome（谷歌）、Safari、Opera
浏览器的内核：1) 渲染引擎 2) JS引擎（后被独立出去）
渲染引擎： 负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎： 解析和执行javascript来实现网页的动态效果
3、Web标准（W3C）
| 类型 | 作用 | 举例 | 备注 |
|---|---|---|---|
| 结构 | 对网页的元素进行整理和分类 | XML、HTML | 骨骼 |
| 样式 | 设置页面元素的版式、颜色、大小等外观样式 | CSS | 穿着 |
| 行为 | 网页模型的定义及交互的编写 | DOM、JavaScript | 行为动作 |
4、应用结构
二、HTML
HTML是超文本标记语言（通过标签来标记要显示在网页中的各个部分）。
*网页文件本身就是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。
1. html的基本语法骨架格式
<!DOCTYPE html> <!--约束，声明-->
<meta charset = "UTF-8"> <!--字符集 UTF-8是目前最常用的字符集编码方式-->
<html> <!--跟标签 代表html开始-->
<head> <!--头部信息 一般包括三部分，title标签、css样式、js代码-->
<title>标题</title> <!--网站标题-->
</head>
<body>
<!--主体部分-->
</body>
</html>
2. HTML标签介绍
① 标签的格式
<标签名>封装的数据</标签名> 注：标签名大小写不敏感
② 标签都拥有自己的属性
Ⅰ 基本属性（bgcolor）
Ⅱ 事件属性（onclick）
<body bgcolor="blue" onclick="alert(提示内容)">
alert() 是javascript语言提供的一个警告提示框函数
它可以接收任意参数，参数就是警告框的函数信息。
所有标签都拥有的属性：
id ：
通用属性（给前端JS使用的）
相当于身份证，js在查询元素时就是使用id来查询
name :
(给后端数据传输时使用)
提交给后端的
③ 标签的分类
| 序号 | 名称 | 格式 |
|---|---|---|
| 1 | 单标签 | </标签名> |
| 2 | 双标签 | <标签名> ...封装的数据... </标签名> |
3. HTML常用标签举例
① 正文部分
<!-- 标题标签 从h1到h6 -->
<h1></h1>---<h6></h6>
<!-- align 属性为对齐属性
left 左对齐（默认值）
center 居中
right 右对齐
-->
<!-- 段落标签 文本会根据浏览器窗口的大小自动换行 -->
段落<p></p>
注释<!-- 内容 -->
换行<br />
横线分割 <hr />
加粗<strong></strong>
② 网页布局的2个盒子
<div>这里是头部</div>
div 表示分割分区
<span> 今日价格 </span>
span表示跨度范围
③ 字体标签
<font color="red" face="宋体" size="7">字体标签</font>
<!-- font是字体标签，可以用来修改文本的字体，颜色，大小 -->
<!-- 其中size的取值为1-7，大于7时和7大小相同，若不修改，默认值为3 -->
<!-- 常用的文本格式化标签 -->
<b></b> 加粗
<i></i> 斜体
<em></em> 斜体
<del></del> 字体横线（删除线）
<ins></ins> 下划线
<sub></sub> 下浮
<sup></sup> 上浮
④ 特殊字符标签
空格
小于 <
大于 >
版权 ©
注册商标 ®
乘号 ×
除号 ÷
⑤ 图片标签
<img />
src 指定图片路径
关于路径分为相对路径和绝对路径；
在javaSE中：
相对路径：从工程名开始算
绝对路径：盘符:/目录/文件名
在web中：
相对路径：
. 表示当前文件所在的目录
.. 表示当前文件所在目录的上一级目录
文件名 表示当前文件所在目录的文件，相当于 ./文件名 ./可以省略
绝对路径：
格式：http://ip:port/工程名/资源路径
title 鼠标悬停文字
width 宽度
height 高度
border 边框宽度
alt 图像无法显示时的代替文本
title 鼠标悬停时显示的内容
⑥ 超链接标签
超链接 <a></a>
属性
href 设置指定目标的url地址
外部链接：需添加http://www.baidu.com
内部链接 直接写内部页面名称即可
不确定时，herf="#"暂时为空链接
target： 目标窗口的弹出方式
_self 表示当前页面进行 （默认）
_blank 表示打开新页面进行跳转
title
name
使用超链接实现锚点
<a href="#bottom" title="超链接" name="test">百度</a>
<a name="bottom">bottom</a>
⑦ 表格标签
表格
<table>
<th><!-- 表头标签 其中字体默认加粗居中 -->
<td></td>
<td></td>
</th>
<tr><!-- 行标签 -->
<td></td>
<td></td>
</tr>
</table>
属性
cellspacing：列元素向外扩展的距离 (默认为2)
cellpadding：列元素向内扩展的距离 (默认为1)
align：水平方向的位置
valign：垂直方向的位置
td 属性：colspan（跨列）、rowspan（跨行） 合并单元格
⑧ 表单标签
表单
<form></form>
action 要跳转的 url
method 请求类型 get（地址栏显示参数信息）/post（地址栏 不显示参数信息）
表单中需要添加标签
input 标签
type 指定不同的控件类型
text 文本输入框
password 密码输入框（看不到输入的内容，是*******）
radio 单选框 （如果是一组的，就通过相同的name值来实现）
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 表单重置
image 图像形式的提交
file 文件域
****若加上checked="checked"即为默认选中值
value="默认文本值"
maxlength为控件允许输入的最多字符数
select 标签 --> 下拉菜单
option为选项，至少包含1个
****若加上selected="selected"即为默认项
textarea 标签 （文本域）--> 输入大量信息（留言）
通常我们会使用表格标签包裹，使得这个表单整齐，好控制更改。
⑨ 其它
Ⅰ 换行的三种方式
第一种
<p></p>
中间的间距会比较大一点
第二种
<br />
只是简单的一个换行
第三种
<div>
......
</div>
分块
Ⅱ iframe标签
可以在页面上单独开辟一个小区域，来显示一个单独的页面
Ⅲ 开发者工具
打开方式：
点击右上角":" --> 更多工具 --> 开发者工具
使用快捷键： "Ctrl + Shift + I"
三、CSS
css是层叠样式表单。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。也就是相当于： 美化页面效果
1. css语法规则
p {
font-size:80px;
}
p叫做选择器，浏览器根据选择器决定受css样式影响的HTML元素。
font-size是属性，是想要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，就组成了完整的样式声明。
css注释：/* 注释的内容 */
2. css的使用方式
① 在div或者span中使用
在标签的style属性上设置"key:value value;",修改标签的样式。
行内样式，直接添加在HTML标签内部的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css使用</title>
</head>
<body>
<div style="border: 1px solid cadetblue ;height: 100px; width: 200px;background-color: bisque;">div标签1</div>
<div style="border: 1px solid cadetblue;">div标签2</div>
<span style="border:1px solid forestgreen;">span标签1<span>
<span style="border:1px solid forestgreen;">span标签2<span>
</span></span>
</body>
</html>
页面展示：
缺点：导致代码过长，可读性差，不能复用
② 在head中使用
在head标签中，使用style标签来定义自己需要的css样式
内部样式，在head中添加，将样式写入
<html>
<head>
<meta charset="utf-8">
<title>css使用</title>
<!-- style标签专门用来定义css样式代码 -->
<style type="text/css">
div{
border: 1px solid aqua;
width: 200px;
height: 100px;
background-color: bisque;
}
span{
border: 1px solid darkgreen;
}
</style>
</head>
缺点：
Ⅰ 只能在同一个页面内复用代码，不能在多个页面中复用css代码
Ⅱ 不便于维护代码，在实际的项目中有很多页面，不好修改。
③ 单独的css文件
把css样式写成一个单独的css文件，然后在heml中通过link标签引入。
外部样式，创建一个CSS文件，将样式写入
<link rel="stylesheet" type="text/css" href="css_style1.css" />
3. css的选择器
① 标签名选择器
格式：
标签名{
属性：值;
}
标签名选择器可以决定哪些标签被动的使用这个样式。
② id选择器 格式：
#id 属性值{
属性：值;
}
id选择器，可以让我们通过id属性选择性的去使用这个样式。
③ 类选择器
格式：
.class 属性值{
属性：值;
}
class 类型选择器，可以通过class属性有效地去使用这个样式
④ 复合选择器
同时选中多个元素，用分割；
选择器1，选择器2，选择器n{
属性：值;
}
4. css常用样式
① 颜色
color:red;
颜色的三种方式：
Ⅰ 名称：red，black，blue
Ⅱ 三原色rgb值 rgb(255,0,0)
Ⅲ 十六进制 #00F6DE
② 宽度及高度
width：30px;
height: 55px;
③ 边框
border:1px solid red;
④ DIV居中
margin-left:auto;
margin-right:auto;
⑤ 文本居中
text-align:center;
⑥ 超链接去下划线
a{
text-decoration:none;
}
⑦ 表格细线
table{
border:1px solid black;
border-collapse:collapse;/* 将边框合并 */
}
td,th{
border:1px solid black;
}
⑧ 列表去除修饰
ul{
list-style:none;
}
⑨ 页面背景样式
background-color 背景色
background-image 背景图片
background-repeat 图片重复
background-position 移动图片 水平方向+垂直方向
四、JS
1. 基本介绍
Javascript语言最早诞生是为了完成数据校验，它是运行在客户端的，需要运行浏览器来解析执行JavaScript代码。是一种脚本语言，不需要编译，可以直接运行。
① 作用
Ⅰ 前端：实现页面的动态效果
Ⅱ 后端：实现接口的调用
② 特点
Ⅰ 交互性：它可以做的就是信息的动态交互
Ⅱ 安全性：它不允许直接访问本地硬盘数据
Ⅲ 跨平台性：只要是可以解释JS的浏览器都可以执行，和平台无关。
JS与Java的关系？
没有任何关系。
Java是一种强类型的语言，JS是弱类型的语言。
强类型：定义变量的时候，类型就已经确定了，而且不可变。
弱类型：类型可变。
Java–class–执行；
js–浏览器读取一行一行执行；
③ 组成
Ⅰ ECMAScript：欧洲计算机协会，指定js语法的
Ⅱ BOM：浏览器对象模型，browser、object model将浏览器中的组建看成是一个个对象
Ⅲ DOM：文档对象模型，document、object model将HTML代码中的各个标签看成是一个个对象
2. JS的使用方式
① 嵌入HTML元素中
直接将事件写在div中进行操作
<div style="weith:300px;height:300px;background-color:#FFFF00;"
onclick="alert(123)"></div>
② head中添加script代码块
使用script标签来书写JavaScript的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text(){//方法的声明
alert(123);
}
</script>
</head>
<body>
<div style="weith: 300px;height: 300px;background-color: #FFFF00;"
onclick="test()"></div>
//方法的调用
</body>
</html>
③ 将js代码分离出来
使用script标签引入单独的js代码文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js_test.js" charset="utf-8">
</head>
<body>
<div style="weith: 300px;height: 300px;background-color: #FFFF00;"
onclick="test()"></div>
</body>
</html>
src属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）
3. JS的基本语法
① 变量
Ⅰ 分类
| JS中的变量类型： | ||
|---|---|---|
| 数值类型 | number | |
| 字符串类型 | String | |
| 对象类型 | object | |
| 布尔类型 | boolean | |
| 函数类型 | function |
Ⅱ 特殊的值
| 特殊的值 | ||
|---|---|---|
| undefined | 未定义，所有js变量未赋初值的时候，默认为undefined | |
| null | 空值 | |
| NAN | Not a Number 即非数字，非数值 |
NAN事例：
var a = 12;
var b = "abd";
alert(a * b);
此时浏览器显示为：NAN。
Ⅲ 定义变量
格式：
var 变量名；
var 变量名 = 值;
② 运算符
Ⅰ 关系运算
js中除了基本的运算符之外，还拥有一个全等于(===)运算符
| 操作符 | 符号 | 说明 |
|---|---|---|
| 等于 | == | 等于是简单的做字面值的比较 |
| 全等于 | === | 除了比较字面值之外，还会比较两个变量的数据类型 |
var a = 12;
var b = "12";
alert(a == b);//true
alert(a === b);//false
Ⅱ 逻辑运算
且（&&）、或（||）、取反（!）
在js中，所有的变量，都可以作为一个boolean类型的变量去使用。
其中，0、null、undefined、""（空串）都被认为是false。
且（&&）：
当表达式全为真的时候，返回最后一个表达式的值
当表达式中，有一个为假的时候，返回第一个为假的表达式的值
或（||）：
当表达式全为假的时候，返回最后一个表达式的值
只要有一个表达式为真，就返回第一个为真的表达式的值
③ 数组
格式：
var 数组名 = [];//空数组
var 数组名 = [1,'abc',true];//定义数组的同时赋值元素
注：在js中只要通过下标赋值，那么会根据最大的下标值，对数组进行扩容操作。
④ 函数
Ⅰ 函数的定义
第一种：使用function关键字来定义函数。
function 函数名(形参列表){
函数体
}
function fun1(a,b) {
alert(a + b);
//若想要带有返回值的函数，直接return语句返回就可以
return a + b;
}
第二种：
var 函数名 = function(形参列表) {
函数体
}
Ⅱ 注意事项
在js中不允许重载，它会直接覆盖掉上一次的定义。
在js中，函数的arguments隐形参数（只在function函数内）
在function函数中不需要定义，但是却可以直接用来获取所有参数的变量。
⑤ 注释
Java和HTML的注释都支持。
4. JS中的事件
事件是电脑的输入设备与页面进行交互的响应。
事件的注册（绑定）：告诉浏览器，当事件响应后要执行哪些代码。
分为静态注册和动态注册；
1) 静态注册是通过html标签的事件属性直接赋予事件响应后的代码
2) 动态注册时先通过js代码得到标签的dom对象，然后通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码。
① onload事件
加载完成事件，页面加载完成后，用于做页面js代码初始化操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onload</title>
<script type="text/javascript">
function onloadFun() {
alert("静态注册onload事件！");
}
//动态注册（固定写法）
window.onload = function() {
alert("动态注册onload事件！")
}
</script>
</head>
<body ><!-- onload="onloadFun(); "-->//静态注册
hello！
</body>
</html>
浏览器解析页面后会自动触发的事件。
② onclick事件
单击事件，常用于按钮的点击响应操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onclick事件</title>
<script type="text/javascript">
function onclickFun() {
alert("静态注册onclick事件");
}
/* 动态注册 */
window.onload = function() {
/* 1.获取标签对象 */
var btnObj = document.getElementById("btn");
/**
* document 是JS语言提供的一个对象（文档） --> 也就是指整个这个页面
* getElementById是指通过Id属性获取标签对象
*/
/* 2.通过标签对象.事件名 = function() {}; */
btnObj.onclick = function(){
alert("动态注册onclick事件");
}
}
</script>
</head>
<body>
<!-- 静态注册 -->
<button onclick="onclickFun();">按钮1</button>
<!-- 动态注册 -->
<button id="btn">按钮2</button>
</body>
</html>
③ onblur事件
失去焦点事件，常用于输入框离开后（失去焦点）验证其输入是否合法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onblur</title>
<script type="text/javascript">
function onblurFun() {
console.log("静态注册onblur事件");
/**
* console 是控制台对象，有JS语言提供，专门用来向浏览器的控制器打印输出，用于测试
* log();是打印的方法
*/
}
/* 动态注册 */
window.onblur = function() {
/* 1.获取标签对象 */
var pswObj = document.getElementById("password");
/* 2.通过标签对象.事件名 = function() {}; */
pswObj.onclick = function(){
console.log("动态注册onblur事件");
}
}
</script>
</head>
<body>
<!-- 静态注册 -->
用户名：<input type="text" onblur="onblurFun();"/><br />
<!-- 动态注册 -->
密 码：<input type="password" id="password" />
</body>
</html>
④ onchange事件
内容发生改变事件，常用于下拉列表和输入框内容发生改变后操作（操作同3）
⑤ onsubmit事件
表单提交事件，常用于表单提交前，验证所有的表单项是否合法（操作同3）
验证所有表单项是否合法，如果有一个不合法就组织表单提交
return false;//阻止提交
5.DOM模型
Document Object Model (文档对象模型)
也就是将文档的标签、属性、文本转换成对象来管理。
理解：
Ⅰ Document它管理了所有的HTML文档内容
Ⅱ 是一种树结构的文档（有层级关系）
Ⅲ 将所有的标签都对象化
Ⅳ 可以通过document访问所有的标签对象
Document三个对象查询方法 注意点：
Ⅰ 如果有id属性，优先使用id属性getElementById来查询。
Ⅱ 如果没有id属性， 则优先使用getElementsByName方法来查询
Ⅲ 如果id属性和name属性都没有，最后按标签名查getElementsByTagName
Ⅳ 以上三个方法，一定要在页面加载完成后，才能查询到标签对象。
如下面的写法alert，因为浏览器读到html对象的时候才知道有对象，不然就查询不到对象。
① 练习一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>验证用户名是否有效</title>
<script type="text/javascript">
/**
* 需求：输入一个密码，验证它的合法性。
* 验证要求：必须包含数字、字母、下划线，长度为5-12位
*/
function onclickFun() {
//1、获取标签对象
var paswObj = document.getElementById("password");
var paswText = paswObj.value;
//2.验证(需要使用正则表达式)
/**
* js中的RegExp对象，是正则表达式的缩写。
* 当检索某个文本时，可以使用一种模式来描述要检索的内容
* var patt = /e/;是指检查一个字符串中是否包含e。
* 元字符表示：\w 表示查找单词字符（包含小写字母，大写字母，数字，下划线）
* /^……$/表示从头到尾检查。
*/
var patt = /^\w{5,12}$/;
/**
* test()用于测试某个字符串，是不是匹配我的规则
* 匹配就返回true，不匹配就返回false
*/
var pwspanObj = document.getElementById("pwspan");
//innerHTML表示起始标签和结束标签中的内容
//这个属性可读可写
if(patt.test(paswText)) {
/* alert("密码是合法的！"); */
pwspanObj.innerHTML = "密码是合法的！";
} else {
/* alert("密码不是合法的！"); */
pwspanObj.innerHTML = "密码是不合法的！";
}
}
</script>
</head>
<body>
用户名：<input type="text" /><br />
密 码：<input type="password" id="password" />
<span id="pwspan" style="color: crimson;"></span>
<br />
<button onclick="onclickFun()">验证</button><br />
</body>
</html>
② 练习二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多选</title>
<script type="text/javascript">
//全选
function checkAll() {
//让所有复选框都选中
/**
* getElementsByName是根据指定的name值属性查询返回多个标签对象集合
* 操作和数组一样
* 集合中的每个元素都是dom对象
*/
var hobbies = document.getElementsByName("hobby");
//checked表示复选框的选中状态，true是选中，false是未选中
//这个属性可读可写
for(var i = 0;i < hobbies.length; i++) {
hobbies[i].checked = true;
}
}
//全不选
function checkNo() {
var hobbies = document.getElementsByName("hobby");
for(var i = 0;i < hobbies.length; i++) {
hobbies[i].checked = false;
}
}
//反选
function checkReverse() {
var hobbies = document.getElementsByName("hobby");
hobbies[i].checked = !hobbies[i].checked;
/* for(var i = 0;i < hobbies.length; i++) {
if(hobbies[i].checked) {
hobbies[i].checked = false;
}else {
hobbies[i].checked = true;
}
} */
}
</script>
</head>
兴趣爱好：
<input type="checkbox" name="hobby" value="sing" />唱歌
<input type="checkbox" name="hobby" value="dance" />跳舞
<input type="checkbox" name="hobby" value="rap" />说唱
<input type="checkbox" name="hobby" value="beauty" />美丽
<br /><br />
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
<body>
</body>
</html>
五、jQuery
1. 出现原因
① 存在问题
使用原生的JS存在的问题：
Ⅰ 操作比较繁琐，元素获取和属性设置比较麻烦
Ⅱ 不同厂家浏览器对JS执行不同(解析的方式不一样)
所以使用别人写好的jquery。
② 基本介绍
jQuery，就是JS和查询（Query）,辅助js开发的类库，主要实现了浏览器的兼容问题，它是开源免费的。
2. 基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FirstTest</title>
<!-- 使用jquery必须先导入jquery类库 -->
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
/* jQuery中的$是一个函数，源代码中把$赋值给了jQuery这个函数 ,
$是jQuery的核心函数，能完成jQuery的很多功能。$()就是调用$这个函数*/
$(function() {/* 表示页面加载完成后,相当于windows.onload = function() {} */
var $btnObj = $("#btnId"); //按id查询标签对象
$btnObj.click(function() { //绑定单击事件
alert("jQuery 的点击事件")
})
})
</script>
</head>
<body>
<button id="btnId">Hello,jQuery</button>
</body>
</html>
怎么按钮添加点击响应函数？
使用jquery查询到标签对象.
使用标签对象.click(function(){});
① 传入参数为 函数
页面加载完成之后，相当于window.onload = function() {}
$(function() {});
② 传入参数为 字符串
创建这个html标签对象
$("<div> hello </div>").appendTo("body");
③ 传入参数为 选择器字符串
$("#id属性值")； //id选择器，根据id查询标签对象
$("标签名")； //标签名选择器，根据标签名查询标签对象
$(".class属性值")； //类选择器，可以根据class属性查询标签对象
④ 传入参数为 DOM对象
会把这个dom对象转换成为jQuery对象
jQuery 对象本质是： dom 对象的数组 + jQuery 提供的一系列功能函数。
区别：
Ⅰ Dom对象
是通过getElementById() 、getElementsByName()、getElementsByTagName()、createElement()查询或创建的对象是Dom对象。
Ⅱ jQuery对象
是通过JQuery提供的API创建、通过JQuery包装的Dom对象以及通过JQuery提供的API查询到的对象，是jQuery对象。
Ⅲ 转换
1）dom对象转化为jQuery对象
1、先有DOM对象
2、$(dom对象) 就可以转换成为jQuery对象
var $obj = $(dom对象);
2）jQuery对象转化为dom对象
1、先有jQuery对象
2、jQuery对象[下标]取出对应的DOM对象
var dom = $obj[下标]
3. jQuery事件操作
jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行；而原生的js的页面加载完成后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成。
jQuery 常用的方法：
click() 单击
dblclick() 双击
focus() 获取焦点（光标）
blur() 失去焦点（光标）
hover() 鼠标悬停
remove() 移除节点
hide() 隐藏节点
show() 显示节点
empty() 清空
width() 设置宽度
height() 设置高度
