jQuery看这篇就够

本文已参与「新人创作礼」活动，一起开启掘金创作之路

官网下载

jquery-3.6.0.min.js

离线文档查看器

常用

$ (selector).load（URL，data，callback）; 表示从服务器加载数据，并把返回的数据放入被选元素中

$ (#div).load（"test.txt"）;

jQuery的选择器

jQuery 的 $

$ 是 jQuery 选取元素的符号，用来选择某一类或某一个元素

标签名 $("div")
ID属性 $("#bug")
CSS类名 $(".btn")

<!DOCTYPE html>
<html>
  <head>
    <!--指定页面编码格式-->
    <meta charset="UTF-8">
    <!--指定页头信息-->
    <title>去除字符串前后的空格</title>
    <script language="javascript" src="jquery.min.js"></script>
    <script language="javascript">
      
      var String = "     飞云当面化龙蛇，夭矫转空碧。     ";
      String = $.trim(String);
      alert(String);
    </script>
  </head>
  <body>
    <p>字符串清除空格前：“     飞云当面化龙蛇，夭矫转空碧。     ”</p>
    
  </body>
</html>

$(document).ready(function()详解

$就是jquery的简写，$ ()就是一个选择器，document是html的所有元素， $(document）返回一个数组，而这个数组是一个对象，这个对象调用ready方法，function则是ready里面的参数，就是说等这个页面全部加载完之后再去执行写入的js。而且在$ (document).ready(function(){ })；里面写入的js特效是和下一个里面写入的特效是不冲突的，俩者之间是不影响的，因此可以通过$(function(){});在一个页面中加载多个js。

要写一个js特效，就加一个 $(document）.ready(function(){ });，简写的，就是$ (function(){});

创建DOM元素

// 原生js
var NewElement=document.createElement("p");
var NewText=document.createTextNode("Hello World");
NewElement.appendChild(NewText);

// jQuery
var NewElement=$("<p>Hello World</p>")

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>创建DOM元素</title>
    <script language="javascript" src="jquery.min.js"></script>
    <script language="javascript">
      $(document).ready(function() {
        var New = $("<a>(添加新文本内容)</a>"); //创建DOM元素
        New.insertAfter("#target"); //insertAfter()方法
      });
    </script>
  </head>
  <body>
    <a id="target" href="https://www.google.com.hk/">Google</a>
    <a href="http://www.baidu.com">Baidu</a>
  </body>
</html>

基本选择器

ID选择器
元素选择器
类名选择器
复合选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通配符选择器</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("body *").css("background-color", "#B2E0FF");
			});
		</script>
	</head>
	<body>
		<h1>老码识途课堂</h1>
		<p class="intro">公众号介绍</p>
		<p>名称：老码识途课堂</p>
		<p>发表文章的范围：网站开发、人工智能和网络安全</p>
		<div id="choose">
			课程分类:
			<ul>
				<li>网站开发训练营</li>
				<li>网络安全训练营</li>
				<li>人工智能训练营</li>
			</ul>
		</div>
	</body>
</html>

ID选择器（#id）

$(document).ready(function(){
$("#choose").css("background-color","#B2E0FF");});

类名选择器（.class）

 $(document).ready(function(){
        $(".intro").css("background-color","#B2E0FF");
    });

元素选择器（element）

$(document).ready(function(){
  $("h1").css("background-color","#B2E0FF");
});

复合选择器（ 多个选择器组合在一起）

$(document).ready(function(){
  $("#choose,.intro").css("background-color","#B2E0FF");
});

层级选择器

后代元素
子元素
相邻元素
兄弟元素

祖先后代选择器（ancestor descendant）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>祖先后代选择器</title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        #top{
            background-color: #B2E0FF; 	 /*设置背景颜色*/
            width: 450px;	             /*设置宽度*/
            height: 180px;	            /*设置高度*/
            clear: both;	            /*设置左右两侧无浮动内容*/
            padding-top: 10px;          /*设置顶边距*/
            font-size: 13pt;	        /*设置字体大小*/
        }
        .css{
            color: #B71C1C;	             /*设置文字颜色*/
            line-height: 22px;	         /*设置行高*/
        }
    </style>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("div ul").addClass("css"); //为div元素的子元素ul添加样式
        });
    </script>
</head>
<body>
<ul>
    <li>品质厨房如何打造？高颜值厨电“三件套”暖心支招</li>
    <li>冲奶粉不做这个动作，奶粉最贵都放浪费</li>
    <li>秋季养生正当时，顺季食补滋阴养肺</li>
    <li>撼动无线耳机市场，三动铁耳机靓丽呈现</li>
    <li>侧着也能投，不受环境束缚的投影设备</li>
    <li>各家大牌秋冬新鞋款，简直好看到爆炸！</li>
</ul>
<div id="top">
    <ul>
        <li>品质厨房如何打造？高颜值厨电“三件套”暖心支招</li>
        <li>冲奶粉不做这个动作，奶粉最贵都放浪费</li>
        <li>秋季养生正当时，顺季食补滋阴养肺</li>
        <li>撼动无线耳机市场，三动铁耳机靓丽呈现</li>
        <li>侧着也能投，不受环境束缚的投影设备</li>
        <li>各家大牌秋冬新鞋款，简直好看到爆炸！</li>
    </ul>
</div>
</body>
</html>

父子选择器（parent > child）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>父子选择器</title>
    <style type="text/css">
        input{
            margin: 5px;						/*设置input元素的外边距为5像素*/
        }
        .input{
            font-size: 12pt;					/*设置文字大小*/
            color: #333333;						/*设置文字颜色*/
            background-color: #cef;	            /*设置背景颜色*/
            border: 1px solid #000000;           	/*设置边框*/
        }
    </style>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#change").ready(function(){
//为表单元素的直接子元素input添加样式
                $("form>input").addClass("input");
            });
        });
    </script>
</head>
<body>
<h1 align=center>用户反馈表单</h1>
<form id="form1" name="form1" method="post" action="">
    会员昵称：<input type="text" name="name" id="name" />
    <br />
   反馈主题：<input type="text" name="test" id="test" />
    <br />
    邮箱地址：<input type="text" name="email" id="email" />
    <br />
    请输入您对网站的建议<br/>
    <textarea name="yourworks" cols ="50" rows = "5"></textarea>
    <br/>
    <input type="submit" name="submit" value="提交"/>
    <input type="reset" name="reset" value="清除" /></p>
</form>
</body>
</html>

相邻元素选择器（prev+next）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>相邻元素选择器</title>
		<style type="text/css">
			.background {
				background: #cef
			}

			body {
				font-size: 20px;
			}
		</style>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("label+p").addClass("background");
			});
		</script>
	</head>
	<body>
		<h1 align="center">商品快报</h1>
		<label>品质厨房如何打造？高颜值厨电“三件套”暖心支招</label>
		<p>冲奶粉不做这个动作，奶粉最贵都放浪费</p>
		<label>秋季养生正当时，顺季食补滋阴养肺</label>
		<p>撼动无线耳机市场，三动铁耳机靓丽呈现</p>
		<label>侧着也能投，不受环境束缚的投影设备</label>
		<p>各家大牌秋冬新鞋款，简直好看到爆炸！</p>
	</body>
</html>

兄弟选择器（prev~siblins）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>兄弟元素选择器</title>
		<style type="text/css">
			.background {
				background: #cef
			}

			body {
				font-size: 20px;
			}
		</style>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("div~p").addClass("background");
			});
		</script>
	</head>
	<body>
		<h1 align="center">商品快报</h1>
		<div>
			<p>品质厨房如何打造？高颜值厨电“三件套”暖心支招</p>
			<p>冲奶粉不做这个动作，奶粉最贵都放浪费</p>
			<p>秋季养生正当时，顺季食补滋阴养肺</p>
		</div>
		<p>撼动无线耳机市场，三动铁耳机靓丽呈现</p>
		<p>侧着也能投，不受环境束缚的投影设备</p>
		<p>各家大牌秋冬新鞋款，简直好看到爆炸！</p>
	</body>
</html>

过滤选择器

简单过滤选择器
内容过滤选择器
可见性过滤器
表单过滤器
子元素选择器

简单过滤选择器

通常以冒号开头，

常见：

:last 选择最后一个元素
:fast 选择第一个元素
:even 选择偶数
:odd 选择奇数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>制作偶数行变色的销售表</title>
    <script language="javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("tr:even").css("background-color", "#B2E0FF");
        });
    </script>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        body{
            font-family: "黑体";
            font-size: 20px;
        }
        table{
            text-align: center;
            width: 500px;
            border: 1px solid green;
        }
        td{
            border: 1px solid green;
            height: 30px;
        }
        h2{
            text-align: center;
        }
    </style>
</head>
<body>
<h2>商品销售表</h2>
<table>
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>价格</th>
        <th>产地</th>
        <th>销量</th>
    </tr>
    <tr>
        <td>10001</td>
        <td>洗衣机</td>
        <td>5900元</td>
        <td>北京</td>
        <td>1600台</td>
    </tr>
    <tr>
        <td>10002</td>
        <td>冰箱</td>
        <td>6800元</td>
        <td>上海</td>
        <td>1900台</td>
    </tr>
    <tr>
        <td>10003</td>
        <td>空调</td>
        <td>8900元</td>
        <td>北京</td>
        <td>3600台</td>
    </tr>
    <tr>
        <td>10004</td>
        <td>电视机</td>
        <td>2900元</td>
        <td>北京</td>
        <td>8800台</td>
    </tr>
</table>
</body>
</html>

内容过滤选择器

内容过滤选择器是通过DOM元素包含的文本内容以及是否含有匹配的元素来获取内容的

:contains（text）包含指定字符串的元素
:empty 不包含子元素或文本的空元素（即无内容）
:parent 包含子元素或文本的元素（即包含内容）
:has（selector）

:contains（text）包含指定字符串的元素

$(document).ready(function() {
  $("td:contains(9)").css("background-color", "#B2E0FF");
});

可见性过滤器

元素的可见状态有显示和隐藏两种

:hidden
:visible

var hiddenElements = $("body").find(":hidden").not("script");
$("span:first").text("发现" + hiddenElements.length + "个隐藏元素");
$("div:hidden").show(3000);
$("span:last").text("发现" + $("input:hidden").length + "个隐藏input元素");

$(document).ready(function(){
  $("table:visible").css("background-color","#B2E0FF");
});

表单过滤器

:enabled 获取所有被选中的元素
:disabled 获取所有不可用的元素
:checked 获取所有被选中的元素
selected 获取所有选中的 option 元素

$(document).ready(function() {
  $("input:checked").css("background-color","red");//设置选中的复选框的背景色
  $("input:disabled").val("不可用按钮");         	//为灰色不可用按钮赋值
});
function selectVal(){						       //下拉列表框变化时执行的方法
  alert($("select option:selected").val());   	//显示选中的值
}

表单选择器

:input 选取表单元素
:text 选取类型为text的所有元素
:password 选取类型为password的所有元素
:radio 选取类型为radio的所有元素
:checkbox
:submit
:reset
:button
:image
:file

$(document).ready(function(){
  $(":text").css("background-color","#B2E0FF");
});
$(document).ready(function(){
  $(":password").css("background-color","#B2E0FF");
});
$(document).ready(function(){
  $(".btn1").click(function(){
    $(":radio").hide();
  });
});

属性选择器

属性选择器是通过元素的属性作为过滤条件来进行筛选对象的选择器

[attribute] 用于选择每个带有指定属性的元素，可以选取任何属性的元素

[attribute=value] 选取每个带有指定属性和值的元素

[attribute != value] 选取每个不带有指定属性和值的元素，不带指定属性和值也会被选

[attribute $= value] 选取指定属性，且以属性值结尾的元素

     $(document).ready(function(){
            $("[id]").css("background-color","#B2E0FF");
        });
    $(document).ready(function(){
            $("[id=choose]").css("background-color","#B2E0FF");
        });
     $(document).ready(function(){
            $("body [id!=names]").css("background-color","#B2E0FF");
        });

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>为带有id属性且属性值以“name”结尾的元素添加背景色</title>
    <script language="javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("[id$=name]").css("background-color","#B2E0FF");
        });
    </script>
</head>
<body>
<h1 id="name">老码识途课堂</h1>
<p id="sname">公众号介绍</p>
<p id="qname">名称：老码识途课堂</p>
<p>发表文章的范围：网站开发、人工智能和网络安全</p>
<div id="choose">
    课程分类:
    <ul>
        <li>网站开发训练营</li>
        <li>网络安全训练营</li>
        <li>人工智能训练营</li>
    </ul>
</div>
<div id="books">
    教程分类:
    <ul>
        <li>网站开发教材</li>
        <li>网络安全教材</li>
        <li>人工智能教材</li>
    </ul>
</div>
</body>
</html>

jQuery注意事项

多使用ID选择器大大缩短节点的访问路径
尽量少使用Class选择器
通过缓存jQuery对象，可以提高系统性能

使用jQuery控制页面

对文本内容进行操作

获取文本内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>获取文本内容</title>
    <script language="javascript" src="jquery.min.js"></script>
    <script language="javascript">
        $(document).ready(function(){
            $("#btn1").click(function(){
                alert("文本内容为: " + $("#test").text());
            });
        });
    </script>

</head>
<body>
<p id="test">鸣筝金粟柱，素手玉房前。欲得周郎顾，时时误拂弦。</p>
<button id="btn1">获取文本内容</button>
</body>
</html>

修改文本内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>修改文本内容</title>
    <script language="javascript" src="jquery.min.js"></script>
    <script language="javascript">
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#test1").text("商品当前的价格是2999元");
            });
        });
    </script>

</head>
<body>
<p id="test1">商品原来的价格是3999元</p>
<button id="btn1">修改文本内容</button>
</body>
</html>

对HTML内容进行操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>获取HTML内容</title>
    <script language="javascript" src="jquery.min.js"></script>
    <script language="javascript">
        $(document).ready(function(){
            $("#btn1").click(function(){
                alert("HTML内容为: " + $("#test").html());
            });
        });
    </script>

</head>
<body>
<p id="test">今日商品秒杀价格是：<b>12.88元</b> </p>
<button id="btn1">获取HTML内容</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>修改HTML内容</title>
    <script language="javascript" src="jquery.min.js"></script>
    <script language="javascript">
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#test1").html("<b>莫学武陵人，暂游桃源里。</b> ");
            });
        });
    </script>
</head>
<body>
<p id="test1">归山深浅去，须尽丘壑美。</p>
<button id="btn1">修改HTML内容</button>
</body>
</html>

对标签的属性进行操作

jQuery提供 prop() 方法用于设置或返回被选元素的属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>获取图片的属性值</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("button").click(function() {
					alert("图像宽度为：" + $("img").prop("width") + "，高度为：" + $("img").prop("height"));
				});
			});
		</script>
	</head>
	<body>
		<img src="1.jpg" />
		<br />
		<button>查看图像的属性</button>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>改变图像的宽度</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("img").prop("width", "300");
				});
			});
		</script>
	</head>
	<body>
		<img src="2.jpg" />
		<br />
		<button>修改图像的宽度</button>
	</body>
</html>

attr（name，value）方法也可以设置属性值

删除属性的值

jQuery提供 removeAttr(name) 方法用来删除属性的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>删除所有p元素的style属性</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p").removeAttr("style");
				});
			});
		</script>
	</head>
	<body>
		<h1>听弹琴</h1>
		<p style="font-size:26px;color:red;font-weight:bold">泠泠七弦上，静听松风寒。</p>
		<p style="font-size:20px;color:blue;font-weight:bold">古调虽自爱，今人多不弹。</p>
		<button>删除所有p元素的style属性</button>
	</body>
</html>

对表单元素进行操作

获取表单元素的值

val() 方法返回或设置被选元素的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>获取表单元素的值</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("button").click(function() {
					alert($("input:text").val());
				});
			});
		</script>
	</head>
	<body>
		商品名称: <input type="text" name="name" value="洗衣机" /><br />
		商品价格: <input type="text" name="pirce" value="6888元" /><br />
		<button>获得第一个文本域的值</button>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>修改表单元素的值</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$(":text").val("4888元");
				});
			});
		</script>
	</head>
	<body>
		<p>商品的最新价格为: <input type="text" name="user" value="5999元" /></p>
		<button>更新文本域的值</button>
	</body>
</html>

对元素的CSS样式进行操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>向不同的元素添加class属性</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("h1,h2,p").addClass("blue");
					$("div").addClass("important");
				});
			});
		</script>
		<style type="text/css">
			.important {
				font-weight: bold;
				font-size: xx-large;
			}

			.blue {
				color: blue;
			}
		</style>
	</head>
	<body>
		<h1>山中雪后</h1>
		<h3>清代：郑燮</h3>
		<p>晨起开门雪满山，雪晴云淡日光寒。</p>
		<p>檐流未滴梅花冻</p>
		<div>一种清孤不等闲</div>
		<br />
		<button>向元素添加CSS类</button>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>同时添加多个CSS类</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("#div2").addClass("important blue");
				});
			});
		</script>
		<style type="text/css">
			.important {
				font-weight: bold;
				font-size: xx-large;
			}

			.blue {
				color: blue;
			}
		</style>
	</head>
	<body>
		<div id="div1">雨打梨花深闭门，孤负青春，虚负青春。</div>
		<div id="div2">赏心乐事共谁论？花下销魂，月下销魂。</div>
		<br>
		<button>向div2元素添加多个CSS类</button>
	</body>
</html>

jQuery提供 removeClass() 方法用来删除属性的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>删除CSS类</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("h1,h3,p").removeClass("important blue");
				});
			});
		</script>

		<style type="text/css">
			.important {
				font-weight: bold;
				font-size: xx-large;
			}

			.blue {
				color: blue;
			}
		</style>

	</head>
	<body>
		<h1 class="blue">春江花月夜</h1>
		<h3 class="blue">春江潮水连海平</h3>
		<p class="blue">海上明月共潮生</p>
		<p class="important ">滟滟随波千万里</p>
		<p class="important ">何处春江无月明</p>
		<button>从元素上删除CSS类</button>
	</body>
</html>

动态切换CSS类

jQuery提供 toggleClass() 方法用来对设置或移除被选元素的一个或多个CSS类进行切换。该方法检测每个元素指定的类，不存在则添加，存在则移除，通swith参数，可以规定只删除或添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态切换CSS类</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p").toggleClass("c1");
				});
			});
		</script>
		<style type="text/css">
			.c1 {
				font-size: 150%;
				color: blue;
			}
		</style>
	</head>
	<body>
		<h1>春江花月夜</h1>
		<p>不知江月待何人，但见长江送流水。</p>
		<p>白云一片去悠悠，青枫浦上不胜愁。</p>
		<button>切换到"c1" 类样式</button>
	</body>
</html>

获取和设置CSS样式

jQuery提供 css(name) 方法用来获取或设置匹配的元素的一个或多个样式属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>获取p段落的颜色</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("button").click(function() {
					alert($("p").css("color"));
				});
			});
		</script>
	</head>
	<body>
		<p style="color:blue">斜月沉沉藏海雾，碣石潇湘无限路。</p>
		<button type="button">返回段落的颜色</button>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设置CSS样式</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p").css("font-size", "150%");
				});
			});
		</script>
	</head>
	<body>
		<p>玉户帘中卷不去，捣衣砧上拂还来。</p>
		<p>此时相望不相闻，愿逐月华流照君。</p>
		<button type="button">改变段落文字的大小</button>
	</body>
</html>

获取与编辑DOM节点

在元素内部插入节点的方法

方法	功能
append()	在被选元素的结尾插入内容
appendTo()	在被选元素的结尾插入HTML
prepend()	在备选元素的开头插入内容
prependTo()	在被选元素的开头插入HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用appendTo()方法插入节点</title>
		<script src="jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("<span>(春江花月夜)</span>").appendTo("p");
				});
			});
		</script>
	</head>
	<body>
		<p>空里流霜不觉飞</p>
		<p>汀上白沙看不见</p>
		<p>江天一色无纤尘</p>
		<p>皎皎空中孤月轮</p>
		<button>插入节点</button>
	</body>
</html>

在元素外部插入节点的方法

方法	功能
after()	在被选元素后插入内容
insertAfter()	在被选元素后插入HTML
before()	在备选元素前插入内容
insertBefore()	在被选元素前插入HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在被选元素后插入内容</title>
		<script src="jquery.min.js">
		</script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").after("<p>春江花月夜</p>");
				});
			});
		</script>
	</head>
	<body>
		<p>玉户帘中卷不去，捣衣砧上拂还来。</p>
		<p>此时相望不相闻，愿逐月华流照君。</p>
		<p>鸿雁长飞光不度，鱼龙潜跃水成文。</p>
		<p>昨夜闲潭梦落花，可怜春半不还家。</p>
		<button>插入节点</button>
	</body>
</html>

删除节点

方法	功能
remove()	移除被选元素（不保留数据和事件）
detach()	移除被选元素（保留数据和事件）
empty()	从被选元素移除所有子节点和内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用remove()方法移除元素</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p").remove();
				});
			});
		</script>
	</head>
	<body>
		<h1>春江花月夜</h1>
		<h3>春江潮水连海平，海上明月共潮生。</h3>
		<p>滟滟随波千万里，何处春江无月明！</p>
		<p>江流宛转绕芳甸，月照花林皆似霰。</p>
		<p>空里流霜不觉飞，汀上白沙看不见。</p>
		<button>移除所有P元素</button>
	</body>
</html>

复制节点

jQuery提供 clone() 方法用来复制节点操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>复制节点</title>
		<script src="jquery.min.js">
		</script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").clone().appendTo("body");
				});
			});
		</script>
	</head>
	<body>
		<p>晨起开门雪满山，雪晴云淡日光寒。</p>
		<p>檐流未滴梅花冻，一种清孤不等闲</p>
		<button>复制</button>
	</body>
</html>

替换节点

方法	功能
replaceAll()	把被选元素替换为新的HTML元素
replaceWith()	把被选元素替换为新的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用replaceAll()方法替换节点</title>
		<script src="jquery.min.js">
		</script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("<span><b>有约不来过夜半，闲敲棋子落灯花。</b></span>").replaceAll("p:last");
				});
			});
		</script>
	</head>
	<body>
		<p>黄梅时节家家雨，青草池塘处处蛙。</p>
		<p>黄梅时节家家雨，青草池塘处处蛙。</p>
		<button>替换节点</button><br>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用replaceWith()方法替换节点</title>
		<script src="jquery.min.js">
		</script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p:first").replaceWith("黄梅时节家家雨，青草池塘处处蛙。");
				});
			});
		</script>
	</head>
	<body>
		<p>有约不来过夜半，闲敲棋子落灯花。</p>
		<p>有约不来过夜半，闲敲棋子落灯花。</p>
		<button>替换节点</button><br>
	</body>
</html>

事件处理

切换事件是指在一个元素上绑定了两个以上的事件，各个事件之间进行切换动作

在jQuery中，hover() 方法用于事件的切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>hover()切换事件</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$(".clsContent").hide();
			});
			$(function() {
				$(".clsTitle").hover(function() {
						$(".clsContent").show();
					},
					function() {
						$(".clsContent").hide();
					})
			})
		</script>
	</head>
	<body>
		<div class="clsTitle">
			<h1>老码识途课堂</h1>
		</div>
		<div class="clsContent">网络安全训练营</div>
		<div class="clsContent">网站前端训练营</div>
		<div class="clsContent">PHP网站训练营</div>
		<div class="clsContent">人工智能训练营</div>
	</body>
</html>

事件冒泡

从里向外，子向父一级一级传播如：地方法院诉讼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件冒泡</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			function add(Text) {
				var Div = document.getElementById("display");
				Div.innerHTML += Text; //输出点击顺序
			}
		</script>
	</head>
	<body onclick="add('第三层事件<br />');">
		<div onclick="add('第二层事件<br />');">
			<p onclick="add('第一层事件<br />');">事件冒泡</p>
		</div>
		<div id="display"></div>
	</body>
</html>

页面加载响应事件

jQuery 中的 $(document).ready()事件是页面加载响应事件，ready() 是 jQuery 事件模块中最重要的一个函数，这个方法可以看作是对window.onload注册事件替代方法

ready() 函数

$ (document).ready(function)
$ ().ready(function)
$ (function)

function 是必选项，规定当文档加载后要运行的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用ready()函数</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$(".btn1").click(function() {
					$("p").slideToggle();
				});
			});
		</script>
	</head>
	<body>
		<p>客从远方来，遗我一端绮。</p>
		<p>相去万余里，故人心尚尔。</p>
		<p>文采双鸳鸯，裁为合欢被。</p>
		<p>著以长相思，缘以结不解。</p>
		<p>以胶投漆中，谁能别离此？</p>
		<button class="btn1">隐藏文字</button>
	</body>
</html>

jQuery 事件函数

触发或将函数绑定到指定元素的事件

方法	功能
keydown()	按下键盘时触发
keypress()	按下某个按键并产生字符时触发
keyup()	释放某个按键时触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用keydown()和keyup()事件函数</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("input").keydown(function() {
					$("input").css("background-color", "yellow");
				});
				$("input").keyup(function() {
					$("input").css("background-color", "red");
				});
			});
		</script>
	</head>
	<body>
		请输入商品名称: <input type="text" />
		<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用keypress()事件函数</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			i = 0;
			$(document).ready(function() {
				$("input").keypress(function() {
					$("span").text(i += 1);
				});
			});
		</script>
	</head>
	<body>
		请输入商品名称: <input type="text" />
		<p>按键次数:<span>0</span></p>
	</body>
</html>

鼠标操作事件

触发或将函数绑定到指定元素的事件

方法	功能
mousedown()	鼠标的按键被按下
mouseenter()	当鼠标指针进入（穿过）目标时
mouseleave()	当鼠标指针离开目标时
mousemove()	鼠标在目标的上方移动
mouseout()	鼠标移出目标的上方
mouseover()	鼠标移到目标的上方
mouseup()	鼠标的按键被释放弹起
click()	单击鼠标的按键
dblclick()	双击鼠标的按键

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用mousemove事件函数</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$(document).mousemove(function(e) {
					$("span").text(e.pageX + ", " + e.pageY);
				});
			});
		</script>
	</head>
	<body>
		<p>当前鼠标的坐标：<span></span>.</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用mouseover和mouseout事件函数</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("p").mouseover(function() {
					$("p").css("background-color", "yellow");
				});
				$("p").mouseout(function() {
					$("p").css("background-color", "#E9E9E4");
				});
			});
		</script>
	</head>
	<body>
		<h2>醉桃源·元日</h2>
		<p>五更枥马静无声。邻鸡犹怕惊。日华平晓弄春明。暮寒愁翳生。</p>
		<p>新岁梦，去年情。残宵半酒醒。春风无定落梅轻。断鸿长短亭。</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用click和dblclick事件函数</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("#btn1").click(function() {
					$("#id1").slideToggle();
				});
				$("#btn2").dblclick(function() {
					$("#id2").slideToggle();
				});
			});
		</script>
	</head>
	<body>
		<div id="id1">垂緌饮清露，流响出疏桐。</div>
		</p>
		<button id="btn1">单击隐藏</button></p>
		<div id="id2">居高声自远，非是藉秋风。</div>
		</p>
		<button id="btn2">双击隐藏</button></p>
	</body>
</html>

其他常用的事件

表单提交，焦点触发等事件

方法	功能
blur()	有元素或者窗口失去焦点时触发事件
change()	文本框内容改变时触发事件
error()	脚本或者图片加载错误、失败后触发事件
resize()
scroll()
focus()	有元素或者窗口获取焦点时触发事件
select()	文本框中的字符被选择之后触发事件
submit()	表单“提交”之后触发事件
load()	页面加载完成后在window上触发，图片加载完自身触发
upload()	与load相反，即卸载完成后触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用blur()函数</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("input").focus(function() {
					$("input").css("background-color", "#FFFFCC");
				});
				$("input").blur(function() {
					$("input").css("background-color", "#D6D6FF");
				});
			});
		</script>
	</head>
	<body>
		请输入商品的名称: <input type="text" />
		<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用change()函数</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$(".field").change(function() {
					$(this).css("background-color", "#FFFFCC");
				});
			});
		</script>
	</head>
	<body>
		<p>在某个域被使用或改变时，它会改变颜色。</p>
		请输入姓名: <input class="field" type="text" />
		<p>选修科目:
			<select class="field" name="cars">
				<option value="volvo">C语言</option>
				<option value="saab">Java语言</option>
				<option value="fiat">Python语言</option>
				<option value="audi">网络安全</option>
			</select>
		</p>
	</body>
</html>

绑定事件

在 jQuery 中，bind() 函数给DOM对象绑定一个事件，bind() 函数为被选元素添加一个或多个事件处理程序

格式：$ (selector).bind（event，data，function）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用bind()函数绑定事件</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("button").bind("click", function() {
					$("p").slideToggle();
				});
			});
		</script>
	</head>
	<body>
		<h2>春游湖</h2>
		<p>双飞燕子几时回？夹岸桃花蘸水开。</p>
		<p>春雨断桥人不渡，小舟撑出柳阴来。</p>
		<button>隐藏文字</button>
	</body>
</html>

触发事件

使用trigger()函数来触发事件

格式：$ (selector).trigger（event，[param1,param2,...]）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用trigger()函数来触发事件</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("input").select(function() {
					$("input").after("文本被选中！");
				});
				$("button").click(function() {
					$("input").trigger("select");
				});
			});
		</script>
	</head>
	<body>
		<input type="text" name="FirstName" size="35" value="正是霜风飘断处，寒鸥惊起一双双。" />
		<br />
		<button>激活事件</button>
	</body>
</html>

移除事件

使用 unbind() 方法移除被选元素的事件处理程序
格式：$ (selector).unbind（event，function）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用unbind()方法</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			$(document).ready(function() {
				$("p").click(function() {
					$(this).slideToggle();
				});
				$("button").click(function() {
					$("p").unbind();
				});
			});
		</script>
	</head>
	<body>
		<p>今古河山无定据。画角声中，牧马频来去。</p>
		<p>满目荒凉谁可语？西风吹老丹枫树。</p>
		<p>从前幽怨应无数。铁马金戈，青冢黄昏路。</p>
		<p>一往情深深几许？深山夕照深秋雨。</p>
		<button>删除 p 元素的事件处理器</button>
	</body>
</html>

屏蔽右键

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用unbind()方法</title>
		<script language="javascript" src="jquery.min.js"></script>
		<script language="javascript">
			function block(Event) {
				if (window.event)
					Event = window.event;
				if (Event.button == 2)
				alert("右键被屏蔽")
			}
			document.onmousedown = block;
		</script>
	</head>
	<body>
		<p>今古河山无定据。画角声中，牧马频来去。</p>
		<p>满目荒凉谁可语？西风吹老丹枫树。</p>
		<p>从前幽怨应无数。铁马金戈，青冢黄昏路。</p>
		<p>一往情深深几许？深山夕照深秋雨。</p>
		<button>删除 p 元素的事件处理器</button>
	</body>
</html>

设计网页中动画特效

animator.css

script.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>金币抽奖动画特效</title>
		<link href="css/animator.css" rel="stylesheet" />
		<style type="text/css">
			.main {
				width: 200px;
				margin: 0 auto;
			}

			.item1 {
				height: 150px;
				position: relative;
				padding: 30px;
				text-align: center;
				-webkit-transition: top 1.2s linear;
				transition: top 1.2s linear;
			}

			.item1 .kodai {
				position: absolute;
				bottom: 0;
				cursor: pointer;
			}

			.item1 .kodai .full {
				display: block;
			}

			.item1 .kodai .empty {
				display: none;
			}

			.item1 .clipped-box {
				display: none;
				position: absolute;
				bottom: 40px;
				left: 80px;
				height: 540px;
				width: 980px;
			}

			.item1 .clipped-box img {
				position: absolute;
				top: auto;
				left: 0;
				bottom: 0;
				-webkit-transition: -webkit-transform 1.4s ease-in, background 0.3s ease-in;
				transition: transform 1.4s ease-in;
			}
		</style>

	</head>
	<body style="padding:100px 0 0 0;">

		<div class="main">
			<div class="item1">
				<div class="kodai">
					<img src="images/kd2.png" class="full" />
					<img src="images/kd1.png" class="empty" />
				</div>
				<div class="clipped-box"></div>
			</div>
			<p id="html"></p>
		</div>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript" src="js/script.js"></script>
		</div>
	</body>
</html>

jQuery基本动画效果

隐藏元素

jQuery提供 hide() 方法用来隐藏匹配元素，相当于CSS的 display：none;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设计简单隐藏特效</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("p").click(function() {
					$(this).hide();
				});
			});
		</script>
	</head>
	<body>
		<h1>寒菊 </h1>
		<p>花开不并百花丛</p>
		<p>独立疏篱趣未穷</p>
		<p>宁可枝头抱香死</p>
		<p>何曾吹落北风中</p>
	</body>
</html>

部分隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页元素的部分隐藏</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$(".ex .hide").click(function() {
					$(this).parents(".ex").hide();
				});
			});
		</script>
		<style type="text/css">
			div .ex {
				background-color: #e5eecc;
				padding: 7px;
				border: solid 1px #c3c3c3;
			}
		</style>
	</head>
	<body>
		<h3>苹果</h3>
		<div class="ex">
			<button class="hide" type="button">隐藏</button>
			<p>产品名称：苹果<br />
				价格：58元一箱<br />
				库存：5600箱</p>
		</div>

		<h3>香蕉</h3>
		<div class="ex">
			<button class="hide" type="button">隐藏</button>
			<p>产品名称：香蕉<br />
				价格：69元一箱<br />
				库存：1900箱</p>
		</div>
	</body>
</html>

设置隐藏参数

格式：$ (selector).hide（speed，callback）;

speed：slow，fast

callback：规定隐藏完成后所执行的函数名称

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设置网页元素的隐藏参数</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$(".ex .hide").click(function() {
					$(this).parents(".ex").hide("slow");
				});
			});
		</script>
		<style type="text/css">
			div .ex {
				background-color: #e5eecc;
				padding: 7px;
				border: solid 1px #c3c3c3;
			}
		</style>
	</head>
	<body>
		<h3>洗衣机</h3>
		<div class="ex">
			<button class="hide" type="button">隐藏</button>
			<p>产地：北京<br />
				价格：5800元<br />
				库存：5000台</p>
		</div>

		<h3>冰箱</h3>
		<div class="ex">
			<button class="hide" type="button">隐藏</button>
			<p>产地：上海<br />
				价格：8900<br />
				库存：1900</p>
		</div>
	</body>
</html>

显示元素

jQuery提供 show() 方法用来显示匹配元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>显示或隐藏网页中的元素</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#hide").click(function() {
					$("p").hide();
				});
				$("#show").click(function() {
					$("p").show();
				});
			});
		</script>
	</head>
	<body>
		<p id="p1">高阁客竟去，小园花乱飞。</p>
		<p id="p2">参差连曲陌，迢递送斜晖。</p>
		<button id="hide" type="button">隐藏</button>
		<button id="show" type="button">显示</button>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>显示或隐藏网页中的元素</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#hide").click(function() {
					$("p").hide("6000");
				});
				$("#show").click(function() {
					$("p").show("6000");
				});
			});
		</script>
	</head>
	<body>
		<p id="p1">肠断未忍扫，眼穿仍欲归。</p>
		<p id="p2">芳心向春尽，所得是沾衣。</p>
		<button id="hide" type="button">隐藏</button>
		<button id="show" type="button">显示</button>
	</body>
</html>

状态切换

使用 toggle() 方法可以切换元素的可见与隐藏状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>切换网页中的元素</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p").toggle();
				});
			});
		</script>
	</head>
	<body>
		<h2>暮江吟</h2>
		<p>一道残阳铺水中，半江瑟瑟半江红。</p>
		<p>可怜九月初三夜，露似真珠月似弓。</p>
		<button type="button">切换</button>
	</body>
</html>

淡入淡出动画效果

淡入隐藏元素

fadeIn() 通过增大不透明度来实现匹配元素淡入效果参数可选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>淡入隐藏元素</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("#div1").fadeIn();
					$("#div2").fadeIn("slow");
					$("#div3").fadeIn(3000);
				});
			});
		</script>
	</head>
	<body>
		<h3>以不同参数方式淡入网页元素</h3>
		<button>单击按钮，使矩形以不同的方式淡入</button><br><br>
		<div id="div1" style="width:80px;height:80px;display:none;background-color:red;">
		</div><br>
		<div id="div2" style="width:80px;height:80px;display:none;background-color:green;">
		</div><br>
		<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;">
		</div>
	</body>
</html>

淡出可见元素

fadeOut() 通过增大不透明度来实现匹配元素淡出效果参数可选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>淡出可见元素</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("#div1").fadeOut();
					$("#div2").fadeOut("slow");
					$("#div3").fadeOut(3000);
				});
			});
		</script>
	</head>
	<body>
		<h3>以不同参数方式淡出网页元素</h3>
		<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
		<br>
		<div id="div2" style="width:80px;height:80px;background-color:green;">
		</div><br>
		<div id="div3" style="width:80px;height:80px;background-color:blue;"></div><br />
		<button>淡出矩形</button>
	</body>
</html>

切换淡入淡出效果

fadeToggle() 方法在fadeIn() 与 fadeOut() 方法之间进行切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>切换淡入淡出元素</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("#div1").fadeToggle();
					$("#div2").fadeToggle("slow");
					$("#div3").fadeToggle(3000);
				});
			});
		</script>
	</head>
	<body>
		<p>以不同参数方式淡入淡出网页元素</p>
		<button>淡入淡出矩形</button><br /><br />
		<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br />
		<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br />
		<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
	</body>
	</body>
</html>

淡入淡出元素至指定数值

使用 fadeTo() 方法可以将网页元素淡入/淡出至指定不透明度

格式：$ (selector).fadeTo（speed，opacity，callback）;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>淡入淡出元素至指定数值</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("#div1").fadeTo("slow", 0.6);
					$("#div2").fadeTo("slow", 0.4);
					$("#div3").fadeTo("slow", 0.7);
				});
			});
		</script>
	</head>
	<body>
		<p>以不同参数方式淡出网页元素</p>
		<button>单击按钮，使矩形以不同的方式淡出至指定参数</button>
		<br><br />
		<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
		<br>
		<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
		<br>
		<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
	</body>
</html>

滑动效果

jQuery 提供 slideDown() slideUp() slideToggle()

滑动显示匹配元素

使用 slideDown() 可以向下增加元素的高度，动态显示匹配元素

格式：$ (selector).slideDown（speed，callback）;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滑动显示网页元素</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$(".flip").click(function() {
					$(".panel").slideDown("slow");
				});
			});
		</script>
		<style type="text/css">
			div.panel,
			p.flip {
				margin: 0px;
				padding: 5px;
				text-align: center;
				background: #e5eecc;
				border: solid 1px #c3c3c3;
			}

			div.panel {
				height: 200px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="panel">
			<h3>春日</h3>
			<p>一春略无十日晴，处处浮云将雨行。</p>
			<p>野田春水碧于镜，人影渡傍鸥不惊。</p>
			<p>桃花嫣然出篱笑，似开未开最有情。</p>
			<p>茅茨烟暝客衣湿，破梦午鸡啼一声。</p>
		</div>
		<p class="flip">显示古诗内容</p>
	</body>
</html>

自定义动画效果

格式：$ (selector).animate（{params}，speed，callback）;

提示：默认情况下，所有HTML元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的CSS position属性设置为relative.、fixed或absolute。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自定义动画效果</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					var div = $("div");
					div.animate({
						left: '100px'
					}, "slow");
					div.animate({
						fontSize: '4em'
					}, "slow");
				});
			});
		</script>
	</head>
	<body>
		<button>开始动画</button>
		<div style="background:#F2861D;height:80px;width:300px;position:absolute;">滕王阁序</div>
	</body>
</html>

格式：$ (selector).stop（stopAll，goToEnd）;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>停止动画效果</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#flip").click(function() {
					$("#panel").slideDown(5000);
				});
				$("#stop").click(function() {
					$("#panel").stop();
				});
			});
		</script>
		<style type="text/css">
			#panel,
			#flip {
				padding: 5px;
				text-align: center;
				background-color: #e5eecc;
				border: solid 1px #c3c3c3;
			}

			#panel {
				padding: 60px;
				display: none;
			}
		</style>
	</head>
	<body>
		<button id="stop">停止滑动</button>
		<div id="flip">显示古诗内容</div>
		<div id="panel">
			<h3>姑苏怀古</h3>
			<p>夜暗归云绕柁牙，江涵星影鹭眠沙。</p>
			<p>行人怅望苏台柳，曾与吴王扫落花。</p>
		</div>
	</body>
</html>

jQuery的功能函数

功能函数概述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>合并数组</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				var first = ['苹果', '香蕉', '橘子'];
				var second = ['葡萄', '柚子', '橙子'];
				$("p:eq(0)").text("数组a：" + first.join());
				$("p:eq(1)").text("数组b：" + second.join());
				$("p:eq(2)").text("合并数组：" +
					($.merge($.merge([], first), second)).join());
			});
		</script>
	</head>
	<body>
		<p></p>
		<p></p>
		<p></p>
	</body>
	<html>

操作数组和对象

jQuery提供 each() 方法用于每个匹配元素规定运行的函数，可以有 each() 遍历数组和对象

格式：$ each.animate（object，fn）; 对象，函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用each()方法遍历数组</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("li").each(function() {
						alert($(this).text())
					});
				});
			});
		</script>
	</head>
	<body>
		<button>按顺序输出古诗的内容</button>
		<ul>
			<li>少年易老学难成</li>
			<li>一寸光阴不可轻</li>
			<li>未觉池塘春草梦</li>
		</ul>
	</body>
</html>

jQuery提供 grep() 方法用于数组元素过滤筛选

格式：$ grep（array，fn，invert）; 带过滤数组，过滤函数，true or false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用grep()方法过滤数组中的奇数</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			var Array = [10, 11, 12, 13, 14, 15, 16, 17, 18];
			var Result = $.grep(Array, function(value) {
				return (value % 2);
			});
			document.write("原数组: " + Array.join() + "<br />");
			document.write("过滤数组中的奇数: " + Result.join());
		</script>
	</head>
	<body>
	</body>
</html>

jQuery提供 map() 方法用于把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新jQuery对象

格式：$ map（array，fn）; 目标数组，转化函数，fn接受两个参数，一个是元素的值，另一个是序号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用map()方法筛选并修改数组的值</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				var arr1 = [7, 9, 10, 15, 12, 19, 5, 4, 18, 26, 88];
				arr2 = $.map(arr1, function(n) {
					return n > 10 ? n + 10 : null; //原数组中大于10 的元素加 10 ，否则删除。
				});
				$("p:eq(0)").text("原数组值：" + arr1.join());
				$("p:eq(1)").text("筛选并修改数组的值：" + arr2.join());
			});
		</script>
	</head>
	<body>
		<p></p>
		<p></p>
	</body>
</html>

jQuery提供 inArray(value，array) 方法用于数组元素搜索功能，找到返回下标，未找到返回-1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用inArray()函数搜索数组元素</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				var arr = ["苹果", "香蕉", "橘子", "葡萄"];
				var add1 = $.inArray("香蕉", arr);
				var add2 = $.inArray("葡萄", arr);
				var add3 = $.inArray("西瓜", arr);
				$("p:eq(0)").text("数组：" + arr.join());
				$("p:eq(1)").text("“香蕉”的位置：" + add1);
				$("p:eq(2)").text("“葡萄”的位置：" + add2);
				$("p:eq(3)").text("“西瓜”的位置：" + add3);
			});
		</script>
	</head>
	<body>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
	</body>
</html>

操作字符串

使用 trim() 可以去除前后端的空格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用trim()方法</title>
		<script type="text/javascript" src="jquery.min.js"></script>
	</head>
	<body>
		<pre id="original"></pre>
		<pre id="trimmed"></pre>
		<script>
			var str = "         檐流未滴梅花冻，一种清孤不等闲。       ";
			$("#original").html("原始字符串: /" + str + "/");
			$("#trimmed").html("去掉首尾空格: /" + $.trim(str) + "/");
		</script>
	</body>
</html>

使用 substr() 方法可以在字符串中抽取指定下标的字符串片段

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用substr()方法</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			var str = "晨起开门雪满山，雪晴云淡日光寒。";
			document.write("原始内容：" + str);
			document.write("截取内容：" + str.substr(0, 10));
		</script>
	</head>
	<body>
	</body>
</html>

使用 replace() 方法可以在字符串中用一些字符替换另一些字符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用replace()方法</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			var str = "本次采购的商品是：风云牌洗衣机和风云牌电视机";
			document.write(str);
			document.write(str.replace(/风云/g, "墨韵"));
		</script>
	</head>
	<body>
	</body>
</html>

序列化操作

jQuery提供的param（object）方法用于将表单元素数组或者对象序列化，返回string，其中，数组或者jQuery对象会按着name，value进行序列化，普通对象会按着key，value进行序列化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>序列化操作</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				personObj = new Object();
				personObj.name = "Television";
				personObj.price = "7600";
				personObj.num = 12;
				personObj.eyecolor = "red";
				$("button").click(function() {
					$("div").text($.param(personObj));
				});
			});
		</script>
	</head>
	<body>
		<button>序列化对象</button>
		<div></div>
	</body>
</html>

jQuery与Ajax技术的应用

Ajax优缺点

优点：

减轻服务器负担，提高web性能

不需要插件支持

调用外部数据方便，容易页面与数据分离

缺点：

大量的JavaScript代码

可视化设计上比较困难

会给搜索引擎带来困难

jQuery中的Ajax

$ (selector).load（URL，data，callback）; 表示从服务器加载数据，并把返回的数据放入被选元素中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用load()方法</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("#div1").load("test.txt");
				});
			});
		</script>
	</head>
	<body>
		<div id="div1">
			<h2>使用load()方法获取文本的内容</h2>
		</div>
		<button>更新页面</button>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>加载元素到指定的<div>元素中</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("#div1").load("test.txt #p1");
				});
			});
		</script>
	</head>
	<body>

		<div id="div1">
			<h2>使用load()方法获取文本的内容</h2>
		</div>
		<button>更新页面</button>

	</body>
</html>

load（）方法可选参数callback规定load（）方法完成后调用的函数，该调用函数可以设置的参数

responseTxt：包含调用成功时的结果内容
statusTXT：包含调用的状态
xhr：包含XMLHttpRequest对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示加载提示框</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		</script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("#div1").load("test.txt", function(responseTxt, statusTxt, xhr) {
						if (statusTxt == "success")
							alert("加载内容已经成功了!");
						if (statusTxt == "error")
							alert("Error: " + xhr.status + ": " + xhr.statusText);
					});
				});
			});
		</script>
	</head>
	<body>
		<div id="div1">
			<h2>检验load()方法是否执行成功</h2>
		</div>
		<button>更新页面</button>
	</body>
</html>

$.get()$ .post()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用$.get()方法</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$.get("test.txt", function(data, status) {
						alert("数据: " + data + "\n状态: " + status);
					});
				});
			});
		</script>
	</head>
	<body>
		<button>通过$.get()方法请求并获取结果</button>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用$.post()方法获取服务器上的数据</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$.post("mytest.php", {
							name: "zhangxiaoming",
							age: "26"
						},
						function(data, status) {
							alert("数据: \n" + data + "\n状态: " + status);
						});
				});
			});
		</script>
	</head>
	<body>
		<button>通过$.post()方法发生请求并获取结果</button>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用$.getScript()方法加载JavaScript 文件</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$.getScript("myscript.js");
				});
			});
		</script>
	</head>
	<body>
		<button>通过$.getScript()方法请求并执行一个JavaScript文件</button>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用$.getJson()方法加载JavaScript 文件</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$.getJSON("myjson.js", function(result) {
						$.each(result, function(i, field) {
							$("p").append(field + " ");
						});
					});
				});
			});
		</script>
	</head>
	<body>
		<button>获取JSON数据</button>
	</body>
</html>

$.ajax() 方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用$.ajax()加载JavaScript文件</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$.ajax({
						url: "myscript.js",
						dataType: "script"
					});
				});
			});
		</script>
	</head>
	<body>
		<div id="div1">
			<h2>使用$.ajax()方法获取文本的内容</h2>
		</div>
		<button>更新部分页面内容</button>
	</body>
</html>

jQuery的经典交互特效案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab页面切换效果</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				width: 400px;
				margin: 15px;
			}

			ul li {
				list-style: none;
			}

			.main li {
				text-align: center;
				float: left;
				width: 100px;
				border: 1px solid #000000;
				box-sizing: border-box;
				cursor: pointer;
			}

			.main .style1 {
				width: 100px;
				color: #fff;
				font-weight: bold;
				background-color: blue;
			}

			.box {
				width: 400px;
				height: 200px;
				background-color: #f3f2e7;
				border: 1px solid #837979;
				box-sizing: border-box;
				padding: 50px;
			}

			.box li {
				display: none;
			}

			p {
				margin-top: 15px;
			}
		</style>
	</head>
	<body>
		<ul class="main">
			<li class="style1">家用电器</li>
			<li>办公设备</li>
			<li>食品酒类</li>
			<li>玩具乐器</li>
		</ul>
		<ul class="box">
			<li>
				<p>电视机</p>
				<p>空调</p>
				<p>洗衣机</p>
				<p>豆浆机</p>
			</li>
			<li>
				<p>电脑</p>
				<p>笔记本</p>
				<p>投影仪</p>
				<p>路由器</p>
			</li>
			<li>
				<p>牛肉</p>
				<p>鱼类</p>
				<p>白酒</p>
				<p>葡萄酒</p>
			</li>
			<li>
				<p>智益玩具</p>
				<p>拼装玩具</p>
				<p>钢琴</p>
				<p>电子琴</p>
			</li>
		</ul>
	</body>
</html>
<script src="jquery.min.js"></script>
<script>
	$(function() {
		//页面加载完成后，页面默认的效果
		$(".box li:eq(0)").show();
		//利用each方法遍历main中的每个li
		$(".main li").each(function(index) {
			//为每个li绑定mouseover
			$(this).mouseover(function() {
				//addClass()增加当前样式，removeClass()移除除当前点击之外的其他兄弟元素的样式
				$(this).addClass("main style1").siblings().removeClass("style1");
				$(".box li:eq(" + index + ")").show().siblings().hide();
			})
		})
	})
</script>

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>滑动门特效</title>
		<style>
			#container {
				position: relative;
				width: 850px;
				height: 400px;
				overflow: hidden;
			}

			.div1 {
				position: absolute;
				width: 400px;
				height: 400px;
				color: white;
				font-size: 30px;
				font-weight: bold;
			}

			.first {
				background: #FF69B4;
			}

			.two {
				background: #00FF7F;
			}

			.three {
				background: #7A67EE;
			}

			.four {
				background: #B23AEE;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div class="div1 first">滑动门一</div>
			<div class="div1 two">滑动门二</div>
			<div class="div1 three">滑动门三</div>
			<div class="div1 four">滑动门四</div>
		</div>
	</body>
</html>
<script src="jquery.min.js"></script>
<script>
	$(function() {
		//获取每个div的宽度
		var width = $('.div1').eq(0).width();
		//设置叠在一起的div的宽度
		var overlap = 150;
		//初始化每个div的定位。
		function position() {
			//第一个div的left为0，第二个为width+0*overlap，第三个为width+1*overlap，第四个为width+2*overlap。
			for (var i = 0; i < $('.div1').length; i++) {
				if (i > 0) {
					$('.div1').eq(i).css("left", (width + overlap * (i - 1) + "px"))
				} else {
					$('.div1').eq(i).css("left", 0)
				}
			}
		}
		//调用初始化函数
		position();
		//计算鼠标滑过时需要移动的div移动的距离
		var move = width - overlap;
		for (var i = 0; i < $('.div1').length; i++) {
			//使用闭包，为每个div添加mouseover事件
			(function(i) {
				$('.div1').eq(i).mouseover(function() {
					//每次移动先初始化位置
					position();
					//除了第一个div之外，第i个div之前的图片都向左移动move
					if (i >= 1) {
						for (var j = 1; j <= i; j++) {
							$('.div1').eq(j).css(
								"left", $('.div1').eq(j).offset().left - move + 'px'
							)
						}
					}
				})
			})(i);
		}
	})
</script>

数据存储和读取技术

本地存储和Cookies的区别

本地存储是仅存储在用户的硬盘上，并等待用户读取，而Cookics是在服务器上读取
本地存储仅供客户端使用，如果需要服务器端根据存储数值做出反应，就应该使用Cookies。
读取本地存储不会影响到网络带宽，但是使用Cookies将会发送到服务器，这样会影响到网络带宽，无形中增加了成本。
从存储容量上看，本地存储可存储多达5MB的数据，而Cookies最多只能存储4KB的数据信息。

Web存储方法

在HTML5标准中，提供了以下两种在客户端存储数据的新方法。

（1）sessionStorage：sessionStorage是基于session的数据存储，在关闭或者离开网站后，数据将会被删除，也被称为会话存储。

（2）localStorage：没有时间限制的数据存储，也被称为本地存储。

与会话存储不同，本地存储将在用户计算机上永久保持数据信息。关闭浏览器窗口后，如果再次打开该站点，将可以检索所有存储在本地的数据。

在HTML5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据，因此，存储大量数据时不会影响网站性能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

使用HTML Web Storage API

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
    </head>
<body>
    <script type="text/javascript">
      sessionStorage.name = "努力过好每一天！";
document.write(sessionStorage.name);
</script>
</body>
</html>

关闭浏览器，再次打开网页，将重置为1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>>
	<body>
		<script type="text/javascript">
			if (sessionStorage.count) {
				sessionStorage.count = Number(sessionStorage.count) + 1;
			} else {
				sessionStorage.count = 1;
			}
			document.write("您访问该网站的次数为：" + sessionStorage.count);
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<script type="text/javascript">
			localStorage.name = "学习HTML5最新的技术：Web存储";
			document.write(localStorage.name);
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<script type="text/javascript">
			if (localStorage.count) {
				localStorage.count = Number(localStorage.count) + 1;
			} else {
				localStorage.count = 1;
			}
			document.write("您访问该网站的次数为：" + localStorage.count ");
		</script>
	</body>
</html>

Web Storage API的其他操作

Web Storage API的localStorage和sessionStorage对象除了以上基本应用外，还有以下两个方面。

清空localStorage数据

localStorage的clearO函数用于清空同源的本地存储数据，比如localStorage.clearO，它将删除所有本地存储的localStorage数据。而Web Storage的另外一部分Session Storager中的clearo函数只清空当前会话存储的数据。

遍历localStorage数据
遍历localStorage数据可以查看localstrage对象保存的全部数据信息。在遍历过程中，需要访问localStorage对象的另外两个属性length与key。length表示对象中保存数据量，key表示保存数据时的键名项

Web SQL DataBase

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			table {
				border-collapse: collapse;
			}

			td {
				border: 1px solid #0000cc;
				padding: 5px
			}

			#message {
				color: #ff0000
			}
		</style>
		<script src="jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//打开数据库
				var dbSize = 2 * 1024 * 1024;
				db = openDatabase('myDB', '', '', dbSize);
				db.transaction(function(tx) {
					//创建数据表
					tx.executeSql(
						"CREATE TABLE IF NOT EXISTS student (id integer PRIMARY KEY,name char(10),colleges varchar(50))"
						);
					showAll();
				});

				$("button").click(function() {
					var name = $("#name").val();
					var colleges = $("#colleges").val();
					if (name == "" || colleges == "") {
						$("#message").html("**请输入姓名和学院**");
						return false;
					}

					db.transaction(function(tx) {
						//新增数据
						tx.executeSql("INSERT INTO student(name,colleges) values(?,?)", [name, colleges],
							function(tx, result) {
								$("#message").html("新增数据完成!")
								showAll();
							},
							function(e) {
								$("#message").html("新增数据错误:" + e.message)
							});
					});
				})

				$("#showData").on('click', ".delItem", function() {
					var delid = $(this).prop("id");
					db.transaction(function(tx) {
						//刪除数据
						var delstr = "DELETE FROM student WHERE id=?";
						tx.executeSql(delstr, [delid], function(tx, result) {
							$("#message").html("刪除数据完成!")
							showAll();
						}, function(e) {
							$("#message").html("刪除数据错误:" + e.errorCode);
						});
					});
				})

				function showAll() {
					$("#showData").html("");
					db.transaction(function(tx) {
						//显示student数据表全部数据
						tx.executeSql("SELECT id,name,colleges FROM student", [], function(tx, result) {
							if (result.rows.length > 0) {
								var str =
									"现有数据：<br><table><tr><td>id</td><td>姓名</id><td>学院</id><td>&nbsp;</id></tr>";
								for (var i = 0; i < result.rows.length; i++) {
									item = result.rows.item(i);
									str += "<tr><td>" + item["id"] + "</td><td>" + item["name"] +
										"</td><td>" + item["colleges"] +
										"</td><td><input type='button' id='" + item["id"] +
										"' class='delItem' value='刪除'></td></tr>";
								}
								str += "</table>";
								$("#showData").html(str);
							}
						}, function(e) {
							$("#message").html("SELECT语法出错了!" + e.message)
						});
					});
				}

			})
		</script>
	</head>
	<body>
		<h2 align="center">简易学生管理系统</h2>
		<h3>添加学生信息</h3>
		请输入姓名和学院：
		<table>
			<tr>
				<td>姓名：</td>
				<td><input type="text" id="name"></td>
			</tr>
			<tr>
				<td>学院：</td>
				<td><input type="text" id="colleges"></td>
			</tr>
		</table>
		<button id='new'>新增学生信息</button>
		<p>
		<div id="message"></div>
		<div id="showData"></div>
	</body>
</html>

使用FileReader方法读取文本文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用readAsText方法读取文本文件</title>
	</head>
	<body>
		<script type="text/javascript">
			var result = document.getElementById("result");
			var file = document.getElementById("file");

			//判断浏览器是否支持FileReader接口
			if (typeof FileReader == 'undefined') {
				result.InnerHTML = "<p>你的浏览器不支持FileReader接口！</p>";
				//使选择控件不可操作
				file.setAttribute("disabled", "disabled");
			}

			function readAsText() {
				var file = document.getElementById("file").files[0];
				var reader = new FileReader();
				//将文件以文本形式读入页面
				reader.readAsText(file, "gb2312");
				reader.onload = function(f) {
					var result = document.getElementById("result");
					//显示文件
					result.innerHTML = this.result;
				}
			}
		</script>
		<p>
			<label>请选择一个文件：</label>
			<input type="file" id="file" />
			<input type="button" value="读取文本文件" onclick="readAsText()" />
		</p>
		<div id="result" name="result"></div>
	</body>
</html>

jQuery看这篇就够

常用

jQuery的选择器

jQuery 的 $

创建DOM元素

基本选择器

层级选择器

过滤选择器

内容过滤选择器

可见性过滤器

表单过滤器

表单选择器

属性选择器

jQuery注意事项

使用jQuery控制页面

对文本内容进行操作

对标签的属性进行操作

删除属性的值

对表单元素进行操作

获取表单元素的值

对元素的CSS样式进行操作

获取与编辑DOM节点

在元素内部插入节点的方法

在元素外部插入节点的方法

删除节点

复制节点

替换节点

事件处理

页面加载响应事件

jQuery 事件函数

鼠标操作事件

其他常用的事件

绑定事件

屏蔽右键

设计网页中动画特效

jQuery基本动画效果

隐藏元素

显示元素

状态切换

淡入淡出动画效果

淡入隐藏元素

淡出可见元素

切换淡入淡出效果

淡入淡出元素至指定数值

滑动效果

自定义动画效果

jQuery的功能函数

操作数组和对象

操作字符串

序列化操作

jQuery与Ajax技术的应用

Ajax优缺点

jQuery中的Ajax

.get().get() .get().post()

jQuery的经典交互特效案例

数据存储和读取技术

本地存储和Cookies的区别

Web存储方法

Web Storage API的其他操作

$.get()$ .post()