jQuery操作DOM
DOM文档对象模型，为文档提供了一种结构化表示方法，通过该方法可以改变文档的内容和展示形式。
在实际运用中，DOM更像是桥梁，通过它可以实现跨平台，跨语言的标准访问。
DOM基础
单词Document即文档，当我们创建一个页面并加载到web浏览器时，DOM模型则根据该页面的内容创建了一个文档文件。
单词Object即对象，是指具有独立特性的一组数据集合，如，我们把新建的页面文档称之为文档对象，与对象相关联的特征称之为对象属性，访问对象的函数称之为对象方法。
单词Model即模型，在页面文档中，通过树状模型展示页面的元素和内容，其展示的方式则是通过节点
（node）来实现。
创建一个DOM文档页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM树状文档</title>
<style>
body{
font-size:13px;
}
table,div,p,ul{
width:280px;
border:solid 1px #666;
margin:10px 0px 10px 0px;
padding:0px;
background-color:#eee;
}
</style>
</head>
<body>
<table>
<tr><td>TD1</td></tr>
<tr><td>TD2</td></tr>
</table>
<div>DIV</div>
<p>P</p>
<div><span>Span</span></div>
<ul>
<li>Li1</li>
<li>Li2</li>
</ul>
</body>
</html>
访问元素
在访问页面时，需要与页面中的元素进行交互式的操作。在操作中，元素的访问是最频繁，最常用的，主要包括对元素属性，内容，值，CSS的操作。
元素属性操作
在jQuery中，可以对元素的属性执行获取，设置，删除的操作，通过attr()方法可以对元素属性执行获取和设置操作，而removeAttr()方法则可以删除某一指定的属性。
1.获取元素的属性
获取元素属性的语法格式如下：
attr(name)
参数name表示属性的名称。
通过attr(name)方法获取元素的属性
1.功能描述
在一个页面中，创建一个img标记，通过jQuery中的attr()方法获取标记的src和title属性值，并显示在页面中。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素的属性</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body{
font-size:12px;
}
div{
float:left;
padding-left:10px;
}
img{
border:solid 1px #ccc;
padding:3px;
float:left;
}
</style>
<script type="text/javascript">
$(function(){
var strAlt = $("img").attr("src"); //属性值一
strAlt += "<br/><br/>" + $("img").attr("title"); //属性值二
$("#divAlt").html(strAlt); //显示在页面中
})
</script>
</head>
<body>
<img alt="" title="这是一幅风景画" src="Image/a5.jpg"/>
<div id="divAlt"></div>
</body>
</html>
2.设置元素的属性
在页面中，attr()方法不仅可以获取元素的属性值。还可以设置元素的属性，其设置属性语法格式如下：
attr(key,value)
参数key表示属性的名称，value表示属性的值。如果要设置多个属性，也可以通过attr()方法实现，其语法格式如下：
attr({key0:value0,key1:value1})
设置元素的属性(一)
1.功能描述
在页面中，创建一个标记，通过jQuery中的attr()方法，在页面加载时，设置该标记的img和title属性值，并显示在页面中。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置元素的属性</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body{
font-size:12px;
}
.clsSpn{
float:left;
padding-top:10px;
padding-left:10px;
}
.clsImg{
border:solid 1px #ccc;
padding:3px;
float:left;
}
</style>
<script type="text/javascript">
$(function(){
// $("img").attr("src","Image/a5.jpg"); //设置src属性
// $("img").attr("title","这是一幅风景画"); //设置title属性
$("img").attr({
src:"Image/a4.jpg",
title:"这是一幅风景画"
}) //同时设置两个属性
$("img").addClass("clsImg"); //增加样式
$("span").html("加载完毕"); //显示加载状态
})
</script>
</head>
<body>
<img alt="" src="Image/a1.gif" style="float:left"/>
<span class="clsSpn">正在加载图片......</span>
</body>
</html>
3.设置元素的属性(二)
attr()方法还可以绑定一个function()函数，通过该函数返回的值作为元素的属性值，其语法格式如下：
attr(key,function(index))
参数index为当前元素的索引号，整个函数返回一个字符串作为元素的属性值
1.功能描述
在页面中，通过function()随机函数返回一个随机数字，依据该数字组成一个字符串作为标记img属性src的值，由于是随机数字，因此每次获取的src属性值都不一样，从而实现在页面中随机展示图效果。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置元素的属性值(2)</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body{
font-size:12px;
}
.clsSpn{
float:left;
padding-top:10px;
padding-left:10px;
}
.clsImg{
border:solid 1px #ccc;
padding:3px;
float:left;
}
</style>
<script type="text/javascript">
$(function(){
$("img").attr("src",function(){
return "Image/a5.jpg" //Math.floor(Math.random() * 2 + 1)
}); //设置src属性
$("img").attr("title","这是一幅风景画"); //设置title属性
$("img").addClass("clsImg"); //增加样式
})
</script>
</head>
<body>
<img alt="" src="Image/a2.gif" style="float:left"/>
</body>
</html>
删除元素的属性
jQuery中通过attr()方法设置元素的属性后，使用removeAttr()方法可以将元素的属性删除，其使用的语法格式为：
removeAttr(name)
其中参数name为元素属性的名称
可以通过如下的代码删除标记img中的src属性：
KaTeX parse error: Can't use function '$' in math mode at position 2: $̲("img").removeA…
元素内容操作
在jQuery中，操作元素内容的方法包括html()和text().前者与JavaScript中的innerHTML属性类似，即获取或设置元素的HTML内容；后者类似于JavaScript中的innerText属性，即获取或设置元素的文本内容。
html()和text()方法的区别
| 语法格式 | 参数说明 | 功能描述 |
|---|---|---|
| html() | 无参数 | 用于获取元素的HTML内容 |
| html(val) | val参数为元素的HTML内容 | 用于设置元素的HTML内容 |
| text() | 无参数 | 用于获取元素的文本内容 |
| text(val) | val参数为元素的文本内容 | 用于设置元素的文本内容 |
说明：html()方法仅支持XHTML的文档，不能用于XML文档，而text()则即支持HTML文档，也支持XML文档。
设置或获取元素的内容
1.功能描述
在页面中，用html()和text()方法获取div标记中的内容，并将内容分别作为html(val)和text(val)的参数，分别设置元素的内容，并将结果显示在页面中。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取或设置元素的内容</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body{
font-size:15px;
text-align:center;
}
div{
border:solid 1px #666;
padding:5px;
width:220px;
margin:5px;
}
</style>
<script type="text/javascript">
$(function(){
var strHTML = $("#divShow").html(); //获取HTML内容
var strText = $("#divShow").text(); //获取文本内容
$("#divHTML").html(strHTML); //设置HTML内容
$("#divText").text(strText); //设置文本内容
})
</script>
</head>
<body>
<div id="divShow"><b><i>Write Less Do More</i></b></div>
<div id="divHTML"></div>
<div id="divText"></div>
</body>
</html>
获取或设置元素值
在jQuery中，如果要获取元素的值，是通过val()方法实现的，其语法格式如下所示：
val(val)
如果不带参数val，则是获取某元素的值，反之，则是将参数val的值赋给某元素，即设置元素的值。该方法常用于表单中获取或设置对象的值。
通过val()方法还可以获取select标记中的多个选项值，其语法格式如下所示：
val().join(",")
设置或获取元素的值
1.功能描述
在页面中，创建一个可以多选的select标记，设置该标记的change事件，当按Ctrl键选择多项时，通过P标记将获取的选项值显示在页面中，另外，创建一个文本框元素，设置该文本框的change和focus事件，当文本框获得焦点时，清空文本框中的内容；当在文本框输入字符时，通过另外一个P标记将所获取的文本的值即时显示在页面中。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body{
font-size:12px;
text-align:center;
}
div{
padding:3px;
margin:3px;
width:120px;
float:left;
}
.txt{
border:#666 1px solid;
padding:3px;
}
</style>
<script type="text/javascript">
$(function(){
$("select").change(function(){
//设置列表框change事件
//获取列表框所选中的全部选项的值
var strSel = $("select").val().join(",");
$("#p1").html(strSel); //显示列表框所选中的全部选项的值
})
$("input").change(function(){
//设置文本框focus事件
var strTxt = $("input").val(); //获取文本框的值
$("#p2").html(strTxt); //显示文本框输入的值
})
$("input").focus(function(){
//设置文本框focus事件
$("input").val(""); //清空文本框的值
})
})
</script>
</head>
<body>
<div>
<select multiple="multiple" style="height:96px; width:85px">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
<option value="5">Item 5</option>
<option value="6">Item 6</option>
</select>
<p id="p1"></p>
</div>
<div>
<input type="text" class="txt"/>
<p id="p2"></p>
</div>
</body>
</html>
在val(val)方法中，如果有参数，其参数还可以是数组的形式，即val(array),其作用是设置元素被选中。因此
**$(":radio").val([“radio2”,“radio3”])**的意思为：ID号为radio2和radio3的单选框被选中。
元素样式操作
在页面中，元素样式的操作包含：直接设置样式，增加css类别，类别切换，删除类别及部分。
1.直接设置元素样式值
在jQuery中，可以通过css()方法为某个指定的元素设置样式值，其语法格式如下：
css(name,value)
name为样式名称，value为样式的值
直接设置元素样式值
1.功能说明
在页面中，创建一个P标记，单击该元素时，其中的文字加粗，斜体及增加背景色。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>直接设置元素样式值</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body{
font-size:15px;
}
p{
padding:5px;
width:220px;
}
</style>
<script type="text/javascript">
$(function(){
$("p").click(function(){
$(this).css("font-weight","bold"); //字体加粗
$(this).css("font-style","italic"); //斜体
$(this).css("background-color","#eee"); //增加背景色
})
})
</script>
</head>
<body>
<p>Write Less Do More</p>
</body>
</html>
2.增加CSS类别
通过addClass()方法增加元素类别的名称，其语法如下：
addClass(class)
参数class为类别的名称，也可以增加多个类别名称，只需要用空格将其隔开即可：
addClass(class0 class1 …)
使用addClass()方法仅时追加样式类别，即它还保存原有的类别
1.功能描述
在页面中，设置两个样式类cls1和cls2，当点击页面中p元素时，增加这两个样式类别，并将其改变后的效果显示在页面中。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>增加css类别</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body{
font-size:15px;
}
p{
padding:5px;
width:220px;
}
.cls1{
font-weight:blod;
font-style:italic;
}
.cls2{
border:solid 1px #666;
background-color:#eee;
}
</style>
<script type="text/javascript">
$(function(){
$("p").click(function(){
$(this).addClass("cls1 cls2"); //同时新增两个样式类别
})
})
</script>
</head>
<body>
<p>Write LESS do more</p>
</body>
</html>
3.类别切换
通过toggleClass()方法切换不同元素的类别，其语法格式如下：
toggleClass(class)
参数class为类别名称，其功能是当元素中含有名称为class的CSS类别时，删除该类别，否则增加一个该名称的CSS类别。
类别切换
1.功能描述
在页面中，创建一个图片标记，通过toggleClass()方法实现对该标记中图片的切换显示。
2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类别切换</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
.clsImg {
border: solid 1px #666;
padding: 3px;
}
</style>
<script type="text/javascript">
$(function () {
$("img").click(function () {
$(this).toggleClass("clsImg"); //切换样式类别
})
})
</script>
</head>
<body>
<img src="Image/logo.gif" alt="" title="jQuery"/>
</body>
</html>
4.删除类别
removeClass([class])
参数class为类别名称，该名称是可选项，当选该名称时，则删除名称时class的类别，有多个类别时用空格隔开，如果不选名称，则删除元素中的所有类别。
要删除p标记是cls0的类别，可以使用如下代码：
$("p").removeClass("cls0");
创建节点元素
整个页面是一个DOM模型，页面中的各个元素通过模型的节点相互关联形成树，因此，如果要在页面中增加某个元素，只需要找到元素的上级节点，通过函数$(html)完成元素的创建后，增加到该节点中。
函数$()用于动态创建页面元素，其语法格式如下：
$(html)
参数html表示用于动态创建DOM元素的html标记字符串，即如果要在页面中动态创建一个div标记，并设置其内容和属性，可以加入如下代码：
var $div = $("<div title="jquery 理念">Write less do More</div>");
$("body").append($div);
执行上述代码后，将在页面文档body中创建一个div标记，其内容为Write less do More
动态创建节点元素
1.功能描述
在页面中，分别设置左右两个部分，左边部分设置需要创建的元素对应的参数，如元素名，内容等，当用户设置完成后，单击"创建"按钮，则在页面的右边即时显示创建的元素。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态创建节点元素</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body{
font-size:13px;
}
ul{
padding:0px;
list-style:none;
}
ul li{
line-height:2.0em
}
.divL{
float:left;
width:200px;
background-color:#eee;
border:solid 1px #666;
margin:5px;
padding:0px 8px 0px 8px;
}
.divR{
float:left;
width:200px;
display:none;
border:solid 1px #ccc;
margin:5px;
padding:0px 8px 0px 8px;
}
.txt{
border:#666 1px solid;
padding:3px;
width:120px;
}
.btn{
border:#666 1px solid;
padding:2px;
width:60px;
}
</style>
<script type="text/javascript">
$(function(){
$("#Button1").click(function(){
//获取参数
var $str1 = $("#select1").val(); //获取元素名
var $str2 = $("#text1").val(); //获取内容
var $str3 = $("#select2").val(); //获取属性名
var $str4 = $("#text2").val(); //获取属性值
var $div = $("<" + $str1 +" " +$str3+"='" +$str4 + "'>" +$str2 +"</" +$str1 + ">"); //创建DOM对象
$(".divR").show().append($div); //插入节点中
})
})
</script>
</head>
<body>
<div class="divL"><p></p>
<ul>
<li>元素名：
<select id="select1">
<option value="p">p</option>
<option value="div">div</option>
</select>
</li>
<li>内容为：
<input type="text" id="text1" class="txt"/>
</li>
<li>
属性名：
<select id="select2">
<option value="title">title</option>
</select>
</li>
<li>
属性值：
<input type="text" id="text2" class="txt"/>
</li>
<li style="text-align:center;padding-top:5px">
<input id="Button1" type="button" value="创建" class="btn"/>
</li>
</ul>
</div>
<div class="divR"></div>
</body>
</html>
插入节点
按照插入元素的顺序来分，可以分为内部和外部两种插入方法。
内部插入节点语法格式
| 语法格式 | 参数说明 | 功能描述 |
|---|---|---|
| append(content) | content表示追加到目标中的内容 | 向所选择的元素内部插入内容 |
| append(function(index,html)) | 通过function函数返回追加到目标中的内容 | 向所选择的元素内部插入function函数所返回的内容 |
| appendTo(content) | content表示被追加的内容 | 把所选择的元素追加到另一个指定的元素集合中 |
| prepend(content) | content表示插入目标元素内部前面的内容 | 向每个所选择的元素内部前置内容 |
| prepend(function(index,html)) | 通过function函数返回插入目标元素内部前面的内容 | 向所选择的元素内部前置function函数所返回的内容 |
| prependTo(content) | content表示用于选择元素的jQuery | 将所选择的元素前置到另一个指定的元素集合中 |
下面结合示例介绍几个最新的节点插入方法
1.append(function(index,html))
将一个function函数作为append方法的参数，该函数的功能必须返回一个字符串，作为append方法插入的内容
其中index参数为对象在这个集合中的索引值，html参数为该对象原有的html值。
插入节点(一)
1.功能说明
在页面中，通过一个function函数返回一段字符串，并将该字符串插入指定的div
标记元素内容中。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态插入节点方法</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body{
font-size:13px;
}
</style>
<script type="text/javascript">
$(function(){
$("div").append(retHtml); //插入内容
function retHtml(){
var str = "<b> Write less Do More</b>";
return str;
}
})
</script>
</head>
<body>
<div>jQuery</div>
</body>
</html>
2.appendTo(content)
该方法用于将一个元素插入另一个指定的元素内容中，即如果要将span标记插入div标记中，执行代码：
$("span").appendTo($("div"));
插入节点(二)
1.功能描述
在一个页面中，创建一个img和两个span标记，通过appendTo()方法将img标记插入span标记中。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态插入节点方法</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body{
font-size:13px;
}
img{
border:solid 1px #ccc;
padding:3px;
margin:5px;
}
</style>
<script type="text/javascript">
$(function(){
$("img").appendTo($("span")); //插入内容
})
</script>
</head>
<body>
<img title="2020年都鼠于你" src="Image/a4.jpg" alt=""/>
<span><img title="1999年都鼠于你" src="Image/a5.jpg" alt=""/></span>
</body>
</html>
外部插入节点方法
| 语法格式 | 参数说明 | 功能描述 |
|---|---|---|
| after(content) | content表示插入目标元素外部后面的内容 | 向所选择的元素外部后面插入内容 |
| after(function) | 通过function函数返回插入目标外部后面的内容 | 向所选择的元素外部后面插入function函数所返回的内容 |
| before(content) | content表示插入目标元素外部前面的内容 | 向所选择的元素外部前面插入内容 |
| before(function) | 通过function函数返回插入目标外部前面的内容 | 向所选择的元素外部前面插入function函数所返回的内容 |
| insertAfter(content) | content表示插入目标元素外部后面的内容 | 将所选择的元素插入另一个指定的元素外部后面 |
| insertBefore(content) | content表示插入目标元素外部前面的内容 | 将所选择的元素插入另一个指定的元素外部前面 |
after(function)
其function()参数将返回插入元素外部后面部分的内容。
外部插入节点
1.功能说明
在页面中，创建一个span标记，然后通过function函数返回另外一个span标记，并将该标记插入页面中的span标记后。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态插入节点方法</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body{
font-size:13px;
}
</style>
<script type="text/javascript">
$(function(){
$("span").after(retHtml); //插入内容
function retHtml(){
var str = "<span><b> Write less do more</b></span>";
return str;
}
})
</script>
</head>
<body>
<span>jQuery</span>
</body>
</html>
复制节点
在页面中，有时需要将某个元素节点复制到另一个节点后，如购物网站中购物车的设计，在传统javascript中，语法较为复杂，而在jQuery中，可以通过方法clone()轻松实现，该方法的语法格式为：
clone()
复制匹配的DOM元素并且选中复制成功的元素，该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。如果需要在复制时将该元素的全部行为也进行复制，可以通过方法clone(true)实现：格式为：
clone(true)
参数设置为true就可以复制元素的所有事件处理。
复制元素节点
1.功能描述
在页面中，创建一个img标记，显示一幅图片，当单击该图片时，在其右侧通过clone()方法复制一幅图片。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
img{
border:solid 1px #ccc;
padding:3px;
margin:5px;
}
</style>
<script type="text/javascript">
$(function(){
$("img").click(function(){
$(this).clone(true).appendTo("span");
})
})
</script>
</head>
<body>
<span><img title="2020" src="Image/a5.jpg" alt=""/></span>
</body>
</html>
替换节点
在jQuery中，如果要替换元素中的节点，可以使用replaceWith()和replaceAll()这两个方法，语法格式：
replaceWith(content)
该方法的功能是将所有选择的元素替换成指定的HTML或DOM元素，其中参数content为被所选择元素替换的内容。
replaceAll(selector)
该方法是将所有选择的元素替换成指定selector的元素，其中参数selector为需要被替换的元素。
替换元素节点
1.功能描述
在页面中，创建两个span标记，id号分别为span1和span2，然后，通过jQuery中的两种替换元素的方法，分别替换元素span1和span2.
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>替换元素节点</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body{
font-size:13px;
}
span{
font-weight:bold;
}
p{
background-color:#eee;
padding:5px;
weight:200px;
}
</style>
<script type="text/javascript">
$(function(){
$("#Span1").replaceWith("<span title='replaceWith'>陶国荣</span>");
$("<span title='replaceAll'>tao@163.com</span>").replaceAll("#Span2");
})
</script>
</head>
<body>
<p>姓名：<span id="Span1"></span></p>
<p>邮箱：<span id="Span2"></span></p>
</body>
</html>
包裹节点
在jQuery不仅可以通过方法替换元素节点，还可以根据需求包裹某个指定的节点，对节点的包裹也是DOM对象操作中很重要的一项。
| 语法格式 | 参数说明 | 功能描述 |
|---|---|---|
| wrap(html) | html参数为字符串代码，用于生成元素并包裹所选参数 | 把所有选择的元素用其他字符串代码包裹起来 |
| wrap(elem) | elem参数用于包装所选元素的DOM元素 | 把所有选择的元素用其他DOM元素包裹起来 |
| wrap(fn) | fn参数为包裹结构的一个函数 | 把所有选择的元素用function函数返回的代码包裹起来 |
| unwrap() | 无参数 | 移除所选元素的父元素或包裹标记 |
| wrapAll(html) | html参数为字符串代码，用于生成元素并包裹所选参数 | 把所有选择的元素用单个元素包裹起来 |
| wrapAll(elem) | elem参数用于包装所选元素的DOM元素 | 把所有选择的元素用单个DOM元素包裹起来 |
| wrapInner(html) | html参数为字符串代码，用于生成元素并包裹所选元素 | 把所有选择的元素的子内容(包括文本节点)用字符串代码包裹起来 |
| wrapInner(elem) | elem参数用于包装所选元素的DOM元素 | 把所有选择的元素的子内容(包括文本节点)用DOM元素包裹起来 |
| wrapInner(fn) | fn参数为包裹结构的一个函数 | 把所有选择的元素的子内容(包括文本节点)用function函数返回的代码包裹起来 |
包裹元素节点
1.功能描述
在页面中放置两个段落p标记，并在该标记内分别设置两个span标记，通过wrap()与wrapInner()两种方法，改变标记中的外部元素与内部文本的字体显示方式。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body{
font-size:13px
}
p{
background-color:#eee;
padding:5px;
width:200px;
}
</style>
<script type="text/javascript">
$(function(){
$("p").wrap("<b></b>"); //所有段落标记字体加粗
$("span").wrapInner("<i></i>"); //所有段落中的span标记斜体
})
</script>
</head>
<body>
<p>最喜爱的体育运动：<span>羽毛球</span></p>
<p>最爱看的书籍：<span>青年文摘</span></p>
</body>
</html>
遍历元素
在DOM元素操作中，有时需要对同一标记的全部元素进行统一操作。在传统的JavaScript中，先获取元素的总长度，然后，以for循环语句，递减总长度，访问其中的某一个元素，代码复杂，而在jQuery中，可以直接使用each()方法实现元素的遍历。其语法格式如下：
each(callback)
参数callback是一个function函数，该函数还可以接受一个形参index，此形参为遍历元素的序号(从0开始)；如果需要访问元素中的属性，可以借助形参index，配合this关键字来实现元素属性的设置或获取。
遍历元素
1.功能描述
在页面中，设置几幅图片，通过each()方法遍历全部的图片，并设置每幅图片的title属性
2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body{
font-size:13px;
}
img{
border:solid 1px #ccc;
padding:3px;
margin:5px;
width:143px;
height:101px;
}
</style>
<script type="text/javascript">
$(function(){
$("img").each(function(index){
//根据形参index设置元素的title属性
this.title = "第" + index +"幅风景图片，alt内容是" + this.alt;
})
})
</script>
</head>
<body>
<p>
<img src="Image/a5.jpg" alt="第0幅风景画"/>
<img src="Image/a4.jpg" alt="第1幅风景画"/>
<img src="Image/a2.gif" alt="第2幅风景画"/>
</p>
</body>
</html>
删除元素
在DOM操作页面时，删除多余或指定的页面元素是非常必要的，jQuery提供了两种删除方法，remove和empty。
remove()方法的语法格式如下：
remove([expr])
参数expr为可选项，如果接收参数，则该参数为筛选元素的jQuery表达式，通过该表述式获取指定的元素，并进行删除。
empty()方法的语法格式如下:
empty()
其功能为清空所选择的页面元素或所有的后代元素。
删除元素
1.功能说明
在页面中，通过ul标记展示列表式的数据信息，并设置一个按钮。单击该按钮时，将删除指定的标记元素。
2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除元素</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body{
font-size:13px;
}
ul{
width:200px;
}
ul li{
list-style:none;
padding:0px;
height:23px;
}
span{
padding-left:20px;
}
.btn{
border:#666 1px solid;
padding:2px;
width:60px;
}
</style>
<script type="text/javascript">
$(function(){
$("ul li:first").css("font-weight","bold"); //设置首行
$("#Button1").click(function(){
$("ul li").remove("li[title=t]"); //删除指定属性的元素
$("ul li:eq(1)").remove(); //删除节点中第二个元素
})
})
</script>
</head>
<body>
<ul>
<li>学号</li>
<li title="t">1001</li>
<li>1002</li>
<li>1003</li>
<li style="text-align:center;padding-top:5px">
<input id="Button1" type="button" value="删除" class="btn"/>
</li>
</ul>
</body>
</html>
综合案例分析–数据删除和图片预览在项目中的 应用
需求分析
1.在页面中创建一个表格，用于展示多项数据信息，各行间采用隔行变色的方法展示每一行的数据。
2.如果选中表格中某行的复选项，并单击表格下面的“删除”按钮，那么将删除其选中的行，选中“全选”复选框后，再次单击“删除”按钮时，将删除表格的全部行数据。
3.如果将鼠标移到表格中某行的小图片上，将在该图片的右下角出现一幅与之相对应的大图片，用以实现图片预览的效果。
功能实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据管理</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body {
font-size: 12px;
}
table {
width: 360px;
border-collapse: collapse;
}
tr th, td {
border: solid 1px #666;
text-align: center;
}
table tr td img {
border: solid 1px #ccc;
padding: 3px;
width: 42px;
height: 60px;
cursor: hand;
}
table tr td span {
float: left;
padding-left: 12px;
}
table tr th {
background-color: #ccc;
height: 32px;
}
.clsImg {
position: absolute;
border: solid 1px #ccc;
padding: 3px;
width: 85px;
height: 120px;
background-color: #eee;
display: none
}
.btn {
border: #666 1px solid;
padding: 2px;
width: 50px;
}
</style>
<script type="text/javascript">
$(function () {
$("table tr:nth-child(odd)").css("background-color", "#eee");//隔行变色
// 全选复选框单击事件
$("#chkAll").click(function () {
if (this.checked) {
//如果自己被选中
$("table tr td input[type=checkbox]").attr("checked", true);
} else {
//如果自己没有被选中
$("table tr td input[type=checkbox]").attr("checked", false);
}
})
//删除按钮单击事件
$("#btnDel").click(function(){
var intL = $("table tr td input:checked:not('#chkAll')").length; //获取除全选复选框外的所有选中项
if(intL != 0){
//如果有选中项
$("table tr td input[type=checkbox]:not('#chkAll')").each(function(index){
//遍历除全选复选框外的行
if (this.checked){
//如果选中
$("table tr[id="+ this.value +"]").remove(); //获取选中的值，并删除该值所在的行。
}
})
}
})
//小图片鼠标移动事件
var x = 5;
var y = 15; //初始化提示图片位置
$("table tr td img").mousemove(function(e){
//设置提示图片src属性 设置提示图片的位置
$("#imgTip").attr("src",this.src).css({"top":(e.pageY + y) + "px","left":(e.pageX +x) +"px"}).show(3000); //显示图片
})
//小图片鼠标移出事件
$("table tr td img").mouseout(function(){
$("#imgTip").hide(); //隐藏图片
})
})
</script>
</head>
<body>
<table>
<tr>
<th>选项</th>
<th>编号</th>
<th>封面</th>
<th>购书</th>
<th>性别</th>
<th>购书价</th>
</tr>
<tr id="0">
<td><input id="Checkbox1" type="checkbox" value="0"/></td>
<td>1001</td>
<td><img src="Image/a1.gif" alt=""/></td>
<td>李小萌</td>
<td>女</td>
<td>35.6元</td>
</tr>
<tr id="1">
<td>
<input id="Checkbox2" type="checkbox" value="1"/>
</td>
<td>1002</td>
<td><img src="Image/a4.jpg" alt=""/></td>
<td>刘明</td>
<td>男</td>
<td>37.9元</td>
</tr>
<tr id="2">
<td><input id="Checkbox3" type="checkbox" value="2"/></td>
<td>1003</td>
<td><img src="Image/a5.jpg" alt=""/></td>
<td>张晓</td>
<td>女</td>
<td>45.6元</td>
</tr>
</table>
<table>
<tr>
<td style="text-align:left;height:28px">
<span>
<input id="chkAll" type="checkbox"/> 全选
</span>
<span>
<input id="btnDel" type="button" value="删除" class="btn"/>
</span>
</td>
</tr>
</table>
<img id="imgTip" class="clsImg" src="Image/a2.gif"/>
</body>
</html>
在实际的项目开发中，如果要删除某行数据，先获取该行数据选中后的id号即this.value值，然后将该值通过Ajax技术传给后台页面，执行数据库中的删除操作，即真实实现记录的删除功能，本示例仅是实现页面中行的删除。
jquery中的事件与应用
当用户浏览页面时，浏览器会对页面代码进行解释或编译，这个过程实质上是通过事件来驱动的，即页面在加载时，执行一个Load事件。在这个事件中实现浏览器编译页面代码的过程。
事件机制
页面在加载时，会触发Load事件，当用户单击某个按钮时，触发该按钮的Click事件，通过种种事件实现各项功能或执行某项操作。事件在元素对象与功能代码中起着重要的作用。
事件被触发后是如何执行代码的呢？
严格来说：事件在触发后被分为两个阶段，一个是捕获（Capture），另一个是冒泡（Bubbling），但遗憾的是，大多数浏览器都不支持捕获阶段，jQuery也不支持，因此事件触发后，往往执行冒泡过程。，所谓的冒泡其实质就是事件执行中的顺序。
事件中的冒泡现象
1.功能描述
在页面中创建一个div标记，并在该标记中创建一个按钮。当用户单击页面或者div标记或者按钮时，都在页面中显示一句问候语：xxxxxx。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件中的冒泡现象</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body{
font-size:13px;
}
.clsShow{
border:#ccc 1px solid;
background-color:#eee;
margin-top:15px;
padding:5px;
width:220px;
line-height:1.8em;
display:none;
}
.btn{
border:#666 1px solid;
padding:2px;
width:50px;
}
</style>
<script type="text/javascript">
$(function(){
var intI = 0; //记录执行次数
$("body,div,#btnShow").click(function(){
//单击事件
//次数累加
intI++;
$(".clsShow").show().html("您好，欢迎来到jQuery世界！").append("<div>执行次数<b>" + intI + "</b></div>"); //显示 设置内容 追加文本
})
})
</script>
</head>
<body>
<div>
<input id="btnShow" type="button" value="点击" class="btn"/>
</div>
<div class="clsShow"></div>
</body>
</html>
仅是单击按钮，但却执行了三次同样的程序。在事件执行过程中存在冒泡现象，即虽然单机的是按钮，但是按钮的外围div元素的事件也被触发，同时div元素的外围body元素的事件也随之被触发。整个事件波及的过程就像水泡一样向外冒，称为冒泡过程。
在实际需要中，我们不希望冒泡事件的发生，可以通过stopPropagation()方法来实现。 还可以用return flase实现停止事件的冒泡过程。
<script type="text/javascript">
$(function(){
var intI=0;
$("body,div,#btnShow").click(function(event){
intI++;
$(".clsShow").show().html("您好，欢迎来到jQuery世界！").append("<div>执行次数<b>" + intI + "</b></div>");
event.stopPropagation(); //阻止冒泡过程
})
})
</script>
页面载入事件
ready()方法的工作原理
在jQuery脚本加载到页面时，会设置一个isReady的标记，用于监听页面加载的进度，当遇到执行ready()方法时，通过查看isReady值是否被设置，如果未被设置，说明页面未加载完成，在此情况下，将未完成的部分用一个数组缓存起来，当全部加载完成后，再将未完成的部分通过缓存执行。
ready()方法的几种相同写法。
<script type="text/javascript">
//写法一
$(document).ready(function(){
//代码部分
})
//写法二
$(function(){
//代码部分
})
//写法三
jQuery(document).ready(function(){
//代码部分
})
//写法四
jQuery(function(){
//代码部分
})
</script>
绑定事件
使用如下代码绑定按钮的单击事件：
<script type="text/javascript">
$(function(){
$("#btnShow").click(function(){
//执行代码
})
})
</script>
在jQuery中，还可以使用bind()方法进行事件的绑定。下面是对该方法的介绍：
bind()功能时为每个元素的事件绑定处理函数，其语法格式如下：
bind(type,[data],fn)
参数type为一个或多个类型的字符串，如：“click”或“change”，也可以自定义类型，可以被参数type调用的类型包括blur，focus，load, resize, srcoll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover,mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.
参数data是作为event.data属性值传递给事件对象的额外数据对象。
参数fn是绑定到每个选择元素的事件中的处理函数。
用bind方法绑定事件
1.功能描述
在页面中，设置一个按钮，通过bind方法给按钮绑定一个click事件，在该事件中，将自身的是否可用属性设置成false，即单击按钮后就不可使用。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bind方法绑定事件</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
.btn{
border:#666 1px solid;
padding:2px;
width:50px;
}
</style>
<script type="text/javascript">
$(function(){
$("#btnBind").bind("click",function(){
$(this).attr("disabled","disabled"); //按钮不可用
})
})
</script>
</head>
<body>
<input id="btnBind" type="button" value="Button" class="btn"/>
</body>
</html>
用映射方式绑定不同的事件
1.功能描述
在页面中，设置一个文本框，通过映射的方式，给文本框绑定两个事件。一个是focus事件，另一个是change事件，这两个事件执行时，均为显示事件的名称。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>映射方式绑定不同的事件</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
.clsTip {
border: #ccc 1px solid;
background-color: #eee;
margin-top: 15px;
padding: 5px;
width: 185px;
display: none;
}
.txt {
border: #666 1px solid;
padding: 3px;
}
</style>
<script type="text/javascript">
$(function () {
$(".txt").bind({
focus: function () {
$("#divTip").show().html("执行的是focus事件"); //显示 设置文本
},
change: function () {
$("#divTip").show().html("执行的是change事件"); //显示 设置文本
}
})
})
</script>
</head>
<body>
<div>姓名：<input type="text" class="txt"/></div>
<div id="divTip" class="clsTip"></div>
</body>
</html>
<script type="java/javascript">
$(function () {
var message = "执行的是focus事件";
$(".txt").bind("focus", {msg: message}, function (event) {
$("#divTip").show().html(event.data.msg);
})
message = "执行的是change事件";
$(".txt").bind("change", {msg: message}, function (event) {
$("#divTip").show().html(event.data.msg);
});
})
切换事件
在jQuery中，有两个方法用于事件的切换，一个方法是hover(),另一个是方法toggle().
所谓的切换事件，即有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。
hover()方法
调用jQuery中的hover()方法可以使元素在鼠标悬停于鼠标移出的事件中进行切换，该方法在现实中使用，也可以通过jQuery中的事件mouseenter于mouseleaver进行替换。
hover(over,out)
参数over为鼠标移到元素时触发的函数，参数out为鼠标移出元素时触发的函数。
用hover方法绑定事件
1.功能描述
在页面中，创建一个div标记，在该标记中，设置另外两个div元素，一个用于显示标题，另一个则用于显示内容，调用jQuery中的hover()方法。将鼠标移到标题时，自动显示内容，鼠标移出标题时，关闭现实的内容。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>切换事件hover</title>
<script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
<style type="text/css">
body{
font-size:13px;
}
.clsFrame{
border:solid 1px #666;
width:220px;
}
.clsFrame .clsTitle{
background-color:#eee;
padding:5px;
font-weight:bold
}
.clsFrame .clsContent{
padding:5px;
display:none
}
</style>
<script type="text/javascript">
$(function(){
$(".clsTitle").hover(function(){
$(".clsContent").show();
},function(){
$(".clsContent").hide();
})
})
</script>
</head>
<body>
<div class="clsFrame">
<div class="clsTitle">jQuery简介</div>
<div class="clsContent">以更少的代码，实现更多的功能</div>
</div>
</body>
</html>
toggle()方法
toggle()方法的功能是每次单击后依次调用函数。
toggle(fn,fn2,[fn3,fn4,…]),其中参数fn，fn2，为单击时被依次调用的函数。
用toggle方法绑定事件
1.功能描述
在页面中，设置一个img标记，当用户第一次单击该图片时，变换另外一幅图片；，第二次单击图片时，变换第三幅图片，第三次单击时，返回第一次单击前的图片，依次轮番显示。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>切换时间toggle</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
img {
border: solid 1px #ccc;
padding: 3px;
width: 220px;
height: 100px;
}
</style>
<script type="text/javascript">
$(function () {
$("img").toggle(function () {
$("img").attr("src", "Image/a4.jpg");
$("img").attr("title", this.src);
}, function () {
$("img").attr("src", "Image/a4.jpg");
$("img").attr("title", this.src);
}, function () {
$("img").attr("src", "Image/a5.jpg");
$("img").attr("title", this.src);
})
})
</script>
</head>
<body>
<img src="Image/a4.jpg" />
</body>
</html>
移除事件
unbind([type],[fn])
参数type为移除的事件类型，fn为需要移除的事件处理函数；如果该方法没有参数，则移除所有绑定的事件
如果带有参数type，则移除该参数所指定的事件类型；如果带有参数fn，则只移除绑定时指定的函数fn。
用unbind方法移除事件
1.功能描述
在页面中，设置三个按钮，前两个按钮分别执行各自的事件，第三个按钮通过unbind方法移除所绑定的全部事件，即点击第三个按钮后，前两个按钮的事件将不会执行。
2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移除事件unbind</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px
}
.btn {
border: #666 1px solid;
padding: 2px;
width: 80px;
}
div {
line-height: 1.8em
}
</style>
<script type="text/javascript">
$(function () {
function oClick() { //自定义事件
$("#divTip").append("<div>按钮二的单击事件</div>");
}
$("input:eq(0)").bind("click", function () { //绑定点击事件
$("#divTip").append("<div>按钮一的单击事件</div>");
});
$("input:eq(1)").bind("click", oClick); //绑定自定义事件
$("input:eq(2)").bind("click", function () {
$("input").unbind(); //移出全部单击事件
});
})
</script>
</head>
<body>
<div>
<input id="Button1" type="button" value="按钮1" class="btn"/>
<input id="Button2" type="button" value="按钮2" class="btn"/>
<input id="Button3" type="button" value="删除事件" calss="btn"/>
</div>
<div id="divTip" style="padding-top:10px"></div>
</body>
</html>
如果将上述代码修改成下面的代码：
$("input:eq(2)").bind("click",
function () {
$("input").unbind("click",oClick); //移出全部单击事件
});
})
</script>
</head>
<body>
<div>
<input id="Button1" type="button" value="按钮1" class="btn"/>
<input id="Button2" type="button" value="按钮2" class="btn"/>
<input id="Button3" type="button" value="删除事件" calss="btn"/>
</div>
<div id="divTip" style="padding-top:10px"></div>
</body>
</html>
当单击“删除事件”按钮后,单击"按钮一"将有对应事件的响应，而单机“按钮二”将无对应时间的响应，因为在“删除事件”的按钮中，移出的仅仅是“按钮二”的自定义事件，因此，只有该按钮没有时间的响应。
方法one()
one()方法功能是为所选元素绑定一个仅触发一次的处理函数，其调用的语法格式为：
one(type,[data],fn)
type为事件类型，即需要出发什么类型的事件，参数data为可选参数，表示作为event.data属性值传递给事件对象的额外数据对象，fn为绑定事件时索要触发的函数。
用one方法绑定事件
1.功能描述
在页面中，设置一个按钮，初始值为“点击查看联系方式”，当单击该按钮时，通过jquery中one方法，将联系方式显示在该按钮上，再次点击则不响应任何事件。
2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他时间one</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
.btn{
border:#666 1px solid;
padding:2px;
width:160px;
}
</style>
<script type="text/javascript">
$(function(){
function btn_click(){
this.value = "123456"
}
$("input").bind("click",btn_click);
})
</script>
</head>
<body>
<input id="Button" type="button" value="点击查看联系方式" class="btn"/>
</body>
</html>
方法trigger()
在所选择的元素上触发指定类型的事件。其调用格式为：
trigger(type,[data])
参数type为触发事件的类型，参数data为可选项，表示在触发事件时，传递给函数的附加参数。
用trigger方法绑定事件
1.功能描述
在页面中，创建一个文本框，并给文本框设置一个默认值，当该页面加载时，自动获取文本框中的值，显示在页面中，同时，文本框处于选中状态。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他时间tigger</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px
}
.txt {
border: #666 1px solid;
padding: 3px
}
</style>
<script type="text/javascript">
$(function(){
var oTxt = $("input"); //获取文本框
oTxt.trigger("select"); //自动选中文本框
oTxt.bind("btn_click",function(){ //编写文本框自定义事件
var txt = $(this).val(); //获取自身内容
$("#divTip").html(txt); //显示在页面中
})
oTxt.trigger("btn_click")
})
</script>
</head>
<body>
姓名：<input id="Text1" type="text" class="txt" value="陶国荣"/>
<div id="divTip" style="padding-top:5px"></div>
</body>
</html>
表单应用
文本框中的事件应用
1,功能描述
在页面中，创建一个用于输入邮箱地址的文本框，使用jquery与css结合，当用文本框获取时，样式发生变化，同时提示用户输入邮箱的方法。
当用户在文本框中输入邮箱后，丢失焦点时，将检测其内容是否为空，如果不为空或邮箱格式不符，样式将再次发生变化，同时提示出错信息，如果输入正确，样式将返回初始状态，并显示一个打勾的图片。
2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框中的事件应用</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px
}
/*元素初始状态*/
.divInit {
width: 390px;
height: 55px;
line-height: 55px;
padding-left: 20px
}
.txtInit {
border: #666 1px solid;
padding: 3px;
background-image: url('Image/a1.gif')
}
.spnInit {
width: 179px;
height: 40px;
line-height: 40px;
float: right;
margin-top: 8px;
padding-left: 10px;
background-repeat: no-repeat
}
/*元素丢失焦点样式*/
.divBlur {
background-color: #FEEEC2
}
.txtBlur {
border: #666 1px solid;
padding: 3px
background-image: url('Image/a2.gif')
}
.spnBlur {
background-image: url('Image/a5.gif')
}
.divFocu {
background-color: #EDFFD5
}
.spnSucc {
background-image: url('Image/a7.gif');
margin-top: 20px /*验证成功时span样式*/
}
</style>
<script type="text/javascript">
$(function () {
$("#txtEmail").trigger("focus"); //默认时文本框获取焦点
$("#txtEmail").focus(function () { //文本框获取焦点事件
$(this).removeClass("txtBlur").addClass("txtInit");
$("#email").removeClass("divBlur").addClass("divFocu");
$("#spnTip").removeClass("spnBlur").removeClass("spnSucc").html("请输入常用的邮箱地址");
})
$("#txtEmail").blur(function () {
var vtxt = $("#txtEmail").val();
if (vtxt.length == 0) {
$(this).removeClass("txtInit").addClass("txtBlur");
$("#email").removeClass("divFocu").addClass("divBlur");
$("#spnTip").addClass("spnBlur").html("邮箱地址不能为空");
}
else {
if (!chkEmail(vtxt)) { //检测邮箱格式是否正确
$(this).removeClass("txtInit").addClass("txtBlur");
$("#email").removeClass("divFocu").addClass("divBlur");
$("#spnTip").addClass("spnBlur").html("邮箱格式不正确");
}
else { //如果正确
$(this).removeClass("txtBlur").addClass("txtInit");
$("#email").removeClass("divFocu");
$("#spnTip").removeClass("spnBlur").addClass("spnSucc").html("");
}
}
})
// 验证邮箱格式是否正确
function chkEmail(strEmail) {
if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(strEmail)) {
return false;
}
else {
return true;
}
}
})
</script>
</head>
<body>
<form id="form1" action="#">
<div id="email" class="divInit">邮箱：
<span id="spnTip" class="spnInit"></span>
<input id="txtEmail" type="text" class="txtInit"/>
</div>
</form>
</body>
</html>
4.代码分析
在代码中，为了提升用户页面体验度，针对文本框编写了两个事件，一个是focus事件，另一个是blur事件，在foucus事件中，加入了一下代码：
<script type="text/javascript">
$(function () {
$("#txtEmail").trigger("focus"); //默认时文本框获取焦点
$("#txtEmail").focus(function () { //文本框获取焦点事件
$(this).removeClass("txtBlur").addClass("txtInit");
$("#email").removeClass("divBlur").addClass("divFocu");
$("#spnTip").removeClass("spnBlur").removeClass("spnSucc").html("请输入常用的邮箱地址");
})
</script>
在文本框中的focus获取焦点事件代码中，涉及三个元素样式发生变化，一个是文本框自身，用this表示，在获取焦点时，又可能来源于丢失焦点，因此，首先删除丢弃焦点的样式，然后再加入获取焦点的样式，及带啊吗：
$(this).removeClass("txtBlur").addClass("txtInit");
第二个元素是外层DIV区域，同理也是先删除丢弃焦点的样式，然后再加入获取焦点的样式，其代码如下：
$("#email").removeClass("divBlur").addClass("divFocu");
第三个元素是用于文本框的提示信息span元素，同理也是删除全部加载过的样式，使其恢复到初始样式，并显示相关的提示信息，其代码如下：
$("#spnTip").removeClass("spnBlur").removeClass("spnSucc").html("请输入常用的邮箱地址");
在文本框的blur丢失焦点事件中，其代码与foucs事件有相似之处，都是先清理原先加载过的页面样式，然后增加本身事件中的样式，不同之处在于，在文本框的blur事件中，还要进行文本框内容是否为空和邮箱格式是否符合的检测操作。如果不为空，在进行检测，其代码如下：
if (vtxt.length) == 0{
//文本内容不为空时执行代码
}
else{
//如果不为空时
if （！chkEmail(vtxt)）{
//检测邮箱格式是否正确
//邮箱格式不正确时执行的代码
}
else{
//如果正确
//邮箱格式正确时执行的代码
}
}
在jquery中，addClass方法的功能是增加某种css样式，为了更好的体现设置的样式，在增加新的css样式前，应先通过removeClass方法，删除已加载过的页面样式，以达到预期的页面效果。
下拉列表框中的事件应用
下拉列表框中的事件应用
1.功能描述
为实现根据厂商 名牌 型号查询车型的功能，在页面中，设置三个下拉列表框，分别用于保存厂商，名牌，型号的数据。当用户在选择厂商时，名牌和型号下拉列表框随其数据变化而变化，当用户选择名牌时，型号下拉列表框随其所选数据变化而变化，从而实现了三个下拉列表框联动展示数据的功能。单击查询按钮时，显示用户所选择的全部选项。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表框中事件应用select</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
.clsInit {
width: 435px;
height: 35px;
line-height: 35px;
padding-left: 10px
}
.clsTip {
padding-top: 5px;
background-color: #eee;
display: none
}
.btn {
border: #666 1px solid;
padding: 2px;
width: 65px;
float: right;
margin-top: 6px;
margin-right: 6px;
}
</style>
<script type="text/javascript">
$(function () {
function objInit(obj) {
//下拉列表初始化
return $(obj).html("<option> 请选择 </option>");
}
var arrData = {
//定义一个数组保存相关数据
厂商1: {
品牌1_1: "型号 1_1_1,型号 1_1_2",
品牌1_2: "型号 1_2_1,型号 1_2_2"
},
厂商2: {
品牌2_1: "型号 2_1_1,型号 2_1_2",
品牌2_2: "型号 2_2_1,型号 2_2_2"
},
厂商3: {
品牌3_1: "型号 3_1_1,型号 3_1_2",
品牌3_2: "型号 3_2_1,型号 3_2_2"
}
};
//遍历数据增加厂商项
$.each(arrData, function (pF) {
$("#selF").append("<option>" + pF + "</option>");
});
//厂商列表框选项改变事件
$("#selF").change(function () {
objInit("#selT");
objInit("#selC");
$.each(arrData, function (pF, pS) {
//如果厂商选择de数据与数据匹配
if ($("#selF option:selected").text() == pF) {
//遍历数据增加品牌项
$.each(pS, function (pT, pC) {
$("#selT").append("<option>" + pT + "</option>");
});
//品牌列表框选项改变事件
$("#selT").change(function () {
objInit("#selC");
$.each(pS, function (pT, pC) {
//如果品牌选中的项与数据匹配
if ($("#selT option:selected").text() == pT) {
//遍历数据增加型号项目
$.each(pC.split(","), function () {
$("#selC").append("<option>" + this + "</option>");
});
}
});
});
}
});
});
//查询按钮单击事件
$("#Button1").click(function () {
var strValue = "您选择的厂商：";
strValue += $("#selF option:selected").text();
strValue += " 您选择的品牌：";
strValue += $("#selT option:selected").text();
strValue += " 您选择的型号：";
strValue += $("#selC option:selected").text();
$("#divTip").show().addClass("clsTip").html(strValue);//显示提示信息并且增加样式
})
})
</script>
</head>
<body>
<div class="clsInit">
厂商:<select id="selF"><option>请选择</option></select>
品牌:<select id="selT"><option>请选择</option></select>
型号:<select id="selC"><option>请选择</option></select>
<input id="Button1" type="button" value="查询" class="btn"/>
</div>
<div class="clsInit" id="divTip"></div>
</body>
</html>
3.页面效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8xoIdB8s-1603935780800)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1591778369821.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-APJI0kl2-1603935780801)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1591778942891.png)]
列表应用
介绍在jquery中如何使用列表ul标记实现导航菜单的功能
列表中的导航菜单应用
1.功能描述
在页面表单中，分别展示某类产品的全部子类项，当用户将鼠标移动某项子类时，所选子类样式发生变化，并在该子类的右边以浮动的形式展示该类的全部产品，当用户将鼠标移出某项子类时，所选子类样式恢复到初始值，同时，隐藏以显示的全部子类产品。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表中的导航菜单应用</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px
}
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.menu {
width: 190px;
border: solid 1px #E5D1A1;
background-color: #FFFDD2
}
.optn {
width: 190px;
line-height: 28px;
border-top: dashed 1px #ccc
}
.content {
padding-top: 10px;
clear: left
}
a {
text-decoration: none;
color: #666;
padding: 10px
}
.optnFocus {
background-color: #fff;
font-weight: bold
}
div {
padding: 10px
}
div img {
width: 50px;
height: 25px;
float: left;
padding-right: 6px;
}
span {
padding-top: 3px;
font-size: 14px;
font-weight: bold;
float: left;
}
.tip {
width: 190px;
border: solid 2px #ffa200;
position: absolute;
padding: 10px;
background-color: #fff;
display: none
}
.tip li {
line-height: 23px;
}
#sort {
position: absolute;
display: none
}
</style>
<script type="text/javascript">
$(function () {
var curY;//获取所选项的top的值
var curH;//获取所选项的height的值
var curW;//获取所选项的width的值
var strY;//获取提示箭头的top的值
var strX;//获取提示箭头的left的值
var objL;//获取当前对象
// 设置往前位置数值
// 参数obj为当前对象名称
function setInitValue(obj) {
curY = obj.offset().top
//offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。
curH = obj.height();
curW = obj.width();
strX = curY + (curH / 2) + "px";//设置提示箭头的top值
strY = curW - 5 + "px";//设置提示箭头的left值
}
//设置当前所选取的项的鼠标移入事件
$(".optn").mouseover(function () {
objL = $(this);//获取当前对象
setInitValue(objL);//设置当前对象
var allY = curY - curH + "px";//设置提示框top的值
objL.addClass("optnFocus");//增加获取焦点时的样式
objL.next("ul").show().css({"top": allY, "left": curW})//显示并且设置提示框的坐标
$("#sort").show().css({"top": strY, "left": strX})//显示并且设置提示箭头的坐标
})
//设置当前所选项的鼠标移出事件
.mouseout(function () {
//删除获得焦点时的样式
$(this).removeClass("optnFocus");
$(this).next("ul").hide();//隐藏提示框
$("#sort").hide();//隐藏提示箭头
})
$(".tip").mousemove(function () {
$(this).show();//显示提示框
objL = $(this).prev("li");//获取当前的上一级对象li
setInitValue(objL);//设置当前位置
//增加上级li对象获取焦点时的样式
objL.addClass("optnFocus");
//显示并且设置提示箭头的坐标
$("#sort").show().css({"top": strY, "left": strX})
})
.mouseout(function () {
$(this).hide();//隐藏提示框
//删除获取焦点时的样式
$(this).prev("li").removeClass("optnFocus");
$("#sort").hide();//隐藏提示箭头
})
})
</script>
</head>
<body>
<ul>
<li class="menu">
<div>
<img alt="" src="Image/test1.gif"/>
<span>电脑数码类产品</span>
</div>
<ul class="content">
<li class="optn"><a href="#">笔记本</a></li>
<ul class="tip">
<li><a href="#">笔记本1</a></li>
<li><a href="#">笔记本2</a></li>
<li><a href="#">笔记本3</a></li>
<li><a href="#">笔记本4</a></li>
<li><a href="#">笔记本5</a></li>
</ul>
<li class="optn"><a href="#">移动硬盘</a></li>
<ul class="tip">
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘2</a></li>
<li><a href="#">移动硬盘3</a></li>
<li><a href="#">移动硬盘4</a></li>
<li><a href="#">移动硬盘5</a></li>
</ul>
<li class="optn"><a href="#">电脑软件</a></li>
<ul class="tip">
<li><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件2</a></li>
<li><a href="#">电脑软件3</a></li>
<li><a href="#">电脑软件4</a></li>
<li><a href="#">电脑软件5</a></li>
</ul>
<li class="optn"><a href="#">数码产品</a></li>
<ul class="tip">
<li><a href="#">数码产品1</a></li>
<li><a href="#">数码产品2</a></li>
<li><a href="#">数码产品3</a></li>
<li><a href="#">数码产品4</a></li>
<li><a href="#">数码产品5</a></li>
</ul>
</ul>
<img id="sort" src="Image/test2.gif" alt=""/>
</li>
</ul>
</body>
</html>
3.页面效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iP78a9bk-1603935780802)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1591869510729.png)]
网页选项卡的应用
1.功能描述
在页面中，设置三个不同名称的选项卡，当单击某个选择项卡时，下面相对应的区域显示其内容信息，同时选项卡的背景色与内容信息的背景色浑然一体，并且字体加粗，并且处于选中状态
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页选项卡应用</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body{
font-size:13px
}
ul,li{
margin:0;
padding:0;
list-style:none
}
#menu li{
text-align:center;
float:left;
padding:5px;
margin-right:2px;
width:50px;
cursor:pointer
}
#menu li .tabFocus{
width:50px;
font-weight:bold;
background-color:#f3f2e7;
border:solid 1px #666;
border-bottom:0;
z-index:100;
position:relative
}
#content{
width:260px;
height:80px;
padding:10px;
background-color:#f3f2e7;
clear:left;
border:solid 1px #666;
position:relative;
top:-1px
}
#content li{
display:none
}
#content li .conFocus{
display:block
}
</style>
<script type="text/javascript">
$(function(){
//带参数遍历各个选项卡
$("#menu li").each(function(index){
$(this).click(function(){ //注册每个选项卡的单击事件
//移除已选中的样式
$("#menu li .tabFocus").removeClass("tabFocus");
$(this).addClass("tabFocus"); //增加当前选中的样式
//显示选项卡对应的内容并隐藏未被选中的内容
$("#content li:eq(" +index+")").show()
.siblings().hide();
});
});
})
</script>
</head>
<body>
<ul id="menu">
<li class="tabFocus">家居</li>
<li>电器</li>
<li>二手</li>
</ul>
<ul id="content">
<li class="conFocus">我是家居的内容</li>
<li>欢迎您来到电器城</li>
<li>二手市场，产品丰富多彩</li>
</ul>
</body>
</html>
3.页面效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nHb96jXm-1603935780803)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1592190490110.png)]
综合案例分析-删除数据时的提示效果在项目中的应用
1.需求分析
1）当用户单击“删除”按钮时，整个页面背景类似于关机效果，“删除”t提示框突出显示，用户可以选关闭按钮，或单击确定或取消的操作。
2）删除提示框一直居中显示，不论页面大小发生如何变化，这个提示框始终居中显示
3）如果对某条记录打勾，当用户单击提示框中的确定按钮时，将在页面中删除该条记录，同时关闭提示框，页面背景恢复正常。
2.效果页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VqbUJHqK-1603935780804)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1592214326725.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q65eOSqN-1603935780805)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1592214361348.png)]
3.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除记录时的提示效果</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
.title img {
width: 30px;
height: px;
float: right;
margin-top: -1px;
}
.content img {
width: 30px;
height: 30px;
float: left;
}
.divShow {
line-height: 32px;
height: 32px;
background-color: #eee;
width: 280px;
padding-left: 10px;
}
.divShow span {
margin-left: 30px;
}
.divShow a {
text-decoration: none;
}
.dialog {
width: 360px;
border: solid 5px #666;
position: absolute;
display: none;
z-index: 101;
}
.dialog .title {
background-color: #fbaf15;
padding: 10px;
color: #fff;
font-weight: bold;
}
.dialog .content {
background-color: #fff;
padding: 25px;
height: 60px;
}
.dialog .content span {
float: left;
padding-top: 10px;
padding-left: 10px;
}
.dialog .bottom {
text-align: right;
padding: 10px 10px 10px 0;
background-color: #eee;
}
.mask {
width: 100%;
height: 100%;
/*background-color: grey;*/
position: absolute;
top: 0;
left: 0;
/*filter: Alpha(Opacity="30");*/
background-color: rgba(128, 123, 123, 0.5);
display: none;
z-index: 100;
}
.btn {
border: #666 1px solid;
padding: 2px;
width: 65px;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#ece9d8);
}
}
</style>
<script type="text/javascript">
$(function () {
$("#Button1").click(function () {
//注册删除按钮点击事件
$(".mask").show();//显示背景色
showDialog(); //设置提示对话框的top和left
$(".dialog").show(); //显示提示对话框
})
//根据当前页面与滚动条位置，设置提示对话框的top和left
function showDialog() {
var objW = $(window); //当前窗口
var objC = $(".dialog"); //对话框
var brsW = objW.width();
var brsH = objW.height();
var sclL = objW.scrollLeft();
var sclT = objW.scrollTop();
var curW = objC.width();
var curH = objC.height();
//计算对话框居中时的左边距
var left = sclL + (brsW - curW) / 2;
//计算对话框居中时的上边距
var top = sclT + (brsH - curH) / 2;
//设置对话框在页面中的位置
objC.css({
"left": left,
"top": top
});
}
$(window).resize(function () {
//页面窗口大小改变事件
if (!$(".dialog").is(":visible")) {
return;
}
showDialog(); //设置提示对话框的top和left
});
$(".title img").click(function () {
//注册关闭图片点击事件
$(".dialog").hide();
$(".mask").hide();
})
$("#Button3").click(function () {
//注册取消按钮点击事件
$(".dialog").hide();
$(".mask").hide();
})
$("#Button2").click(function () {
//注册确定按钮点击事件
$(".dialog").hide();
$(".mask").hide();
if ($("input:checked").length != 0) {
//如果选择了删除行
$(".divShow").remove(); //删除某行数据
}
})
})
</script>
</head>
<body>
<div class="divShow">
<input id="Checkbox1" type="checkbox"/>
<a href="#">这是一条可删除的记录</a>
<span>
<input id="Button1" type="button" value="删除" class="btn"/>
</span>
</div>
<div class="mask"></div>
<div class="dialog">
<div class="title">
<img src="Image/a1.gif" alt="点击可以关闭"/>删除时提示
</div>
<div class="content">
<img src="Image/a4.jpg" alt="删除"/>
<span>您真的要删除该条记录吗？</span>
</div>
<div class="bottom">
<input id="Button2" type="button" value="确定" class="btn"/>
<input id="Button3" type="button" value="取消" class="btn"/>
</div>
</div>
</body>
</html>
jquery的动画与特效
显示与隐藏
在页面中，元素的显示与隐藏是使用最频繁的操作，在传统的JavaScript中，一般是通过改变元素的方式实现，下列代码将ID号为“p1”的元素显示出来：
document.getElementById("p1").style.display = "block";
如果想隐藏该元素，则可以通过下列代码：
document.getElementById("p1").style.display = "none";
下面介绍在jQuery中如何实现元素的显示与隐藏的方法
show()和hide()方法
1.功能描述
在显示大量文本内容时，为了能显示更多的段落内容，有时仅显示一部分的提要，隐藏另一部分的内容，当用户需要查看这些隐藏的内容时，只要单击页面中的“显示”连接就可以，查案，再点击“隐藏”连接就可以将该部分内容再次隐藏起来。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>show和hide方法</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
.artFram {
border: solid 1px #ccc;
background-color: #eee;
width: 260px;
padding: 8px;
word-break: break-all
}
.artList {
line-height: 1.8em
}
</style>
<script type="text/javascript">
$(function () {
var $link = $(".artList a"); //获取单击文本
var $hide = $(".artList :eq(2)"); //获取隐藏的段落
$link.click(function () { //文本单击事件
if ($(this).html() == "显示") {
//如果未显示
$(this).html("隐藏"); //改变文本内容
$hide.show(); //显示隐藏的文本
} else {
$(this).html("显示");
$hide.hide();
}
})
})
</script>
</head>
<body>
<div class="artFram">
<div class="artList">
<span> </span>
<span>一个优秀的程序开发员，除了需要掌握专业的开发语言，还要具有</span>
<span style="display:none">执着，沉着，细致的专业素质</span>
<a href="javascript:void(0)">显示</a>
</div>
</div>
</body>
</html>
3.页面效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ib8J2ujR-1603935780806)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1592276886984.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0meCRC16-1603935780807)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1592276907316.png)]
动画效果的show()与hide()方法
其调用的语法格式如下:
动画效果的显示功能如下所示：
show(speed,[callback])
动画效果的隐藏功能如下所示
hide(speed,[callback])
参数speed表示执行动画时的速度，该速度有三个默认字符值“show”“normal”，“fast”对应的速度分别是
0.6秒，0.4秒，0.2秒
动画效果的show和hide方法
1.功能描述
再页面中，“显示”连接，通过show方法，以动画的方法显示一幅图片，同时，在方法中执行一个回调函数用于改变图片的边框样式，当单击已显示的图片时，通过hide方法，以动画的方式隐藏该图片。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>show和hide方法</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
img {
display: none;
cursor: pointer
}
</style>
<script type="text/javascript">
$(function () {
$("a").click(function () {
//显示链接点击事件
$("img").show(3000, function () {
//显示完成时执行的函数
$(this).css("border", "solid 1px #ccc");
})
})
$("img").click(function () {
//显示图片的点击效果
$(this).hide(3000); //动画效果隐藏
})
})
</script>
</head>
<body>
<a href="javascript:void(0)">显示</a>
<img src="Image/a4.jpg"/>
</body>
</html>
toggle()方法
使用toggle方法的功能时切换元素可见状态，即如果是显示状态，则变成隐藏状态，如果是隐藏状态，则变成显示状态。该方法有三种调用方法
1.无参数调用格式：
toggle()
2.逻辑参数调用格式：
toggle(switch)
参数switch为一个布尔值，即true或false。当该值为true时，显示元素，否则，隐藏元素
3.动画效果调用格式：
toggle(speed,[callback])
toggle方法的使用
1.功能描述
在页面中设置三个按钮分别对应三种调用的形式。通过单击按钮，触发toggle方法。实现图片的切换显示效果。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>show和hide方法</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
.divFrame {
width: 180px
}
.divFrame .divMenu {
float: left
}
.divFrame .divContent {
float: right
}
.divFrame .divContent img {
display: none
}
.btn {
border: #666 1px solid;
padding: 2px;
width: 80px;
margin-bottom: 5px;
}
</style>
<script type="text/javascript">
$(function () {
$("input:eq(0)").click(function () {
//无参数方法
$("img").toggle();
})
$("input:eq(1)").click(function () {
//根据参数switch显示
var intI = 2;
var blnA = intI > 1; //获取逻辑值
$("img").toggle(blnA);
})
$("input:eq(2)").click(function () {
//动画方式显示 并执行回调函数
$("img").toggle(3000, function () {
$(this).css({
"border": "solid 1px #ccc",
"padding": "2px"
});
});
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divMenu">
<input id="Button1" type="button" value="无参数" class="btn"/><br/>
<input id="Button2" type="button" value="逻辑显示" class="btn"/><br/>
<input id="Button3" type="button" value="动画显示" class="btn"/><br/>
</div>
<div class="divContent">
<img src="Image/a4.jpg" alt=""/>
</div>
</div>
</body>
</html>
滑动
slideDown() 与slideUp()方法
实现元素的滑动效果，其语法格式如下：
slideDown()方法的格式如下：
slideDown(speed,[callback])
slideUp(speed,[callback])
1.功能描述
在页面中，单击标题栏时，通过slideUP方法，以动画效果将内容栏中的图片向上滑动，直到完全看不见，并改变标题栏中的内容，再次单击标题栏时，通过slideDown方法，将内容栏中的图片向下滑动，直到全部显示，标题栏中的内容也同时发生相应改变。
2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>show和hide方法</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
.divFrame {
width: 520px;
border: solid 1px #666
}
.divFrame .divTitle {
padding: 5px;
background-color: #eee
}
.divFrame .divContent {
padding: 8px;
}
.divFrame .divContent img {
border: solid 1px #ccc;
padding: 2px
}
</style>
<script type="text/javascript">
$(function () {
var blnShow = false; //初始化一个布尔变量值
var $Title = $(".divTitle"); //定义变量获取标题部分
var $Tip = $("#divTip"); //定义变量获取提示元素
$Title.click(function () {
//点击标题部分事件
if (!blnShow) {
//图片高度向上减小，执行完成后，回调一个函数
$("img").slideUp(3000, function () {
$Tip.html("关闭成功！");
})
$(this).html("显示图片"); //改变标题内容
blnShow = true; //改变布尔变量值
} else {
$Tip.html(""); //清空提示内容
$("img").slideDown(3000); //图片高度向下增大
$(this).html("隐藏图片");
blnShow = false;
}
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">隐藏图片</div>
<div class="divContent">
<img src="Image/a4.jpg" alt=""/>
<div id="divTip"></div>
</div>
</div>
</body>
</html>
slideToggle()方法
slideToggle(speed,[callback])
功能是以动画效果切换所选择的高度，即，如果高，则减小，如果低，则增加。
1.功能描述
在页面中，使用一个div标记包含一个img图片，当单击div元素时，通过slideToggle方法，以动画的效果自动切换图片高度状态。
2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>show和hide方法</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
.divFrame {
border: solid 1px #666;
background-color: #eee;
padding: 5px;
width: 149px
}
.divFrame img {
border: solid 1px #eee;
padding: 2px
}
</style>
<script type="text/javascript">
$(function () {
$(".divFrame").click(function () {
//div元素点击事件
//图片高度状态自动切换，并执行一个回调函数
$("img").slideToggle(3000, function () {
$("img").css("border", "solid 1px #ccc");
})
})
})
</script>
</head>
<body>
<div class="divFrame">
<img src="Image/a4.jpg" alt="风景图"/>
</div>
</body>
</html>
淡入淡出
fadeIn() 与fadeOut()方法
fadeIn(speed,[callback])
该方法是通过改变元素透明度，实现淡入的动画效果，并在完成时，可执行一个回调函数。
fadeOut(speed,[callback])
该方法是通过改变所选元素透明度，实现淡出的动画效果
1.功能描述
在页面中，设置两个按钮，一个用于淡入图片，另一个用于淡出图片，同时，无论是淡入还是淡出图片，效果完成后，都执行一个回调函数，显示当前操作的结果。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>show和hide方法</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
.divFrame {
border: solid 1px #666;
width: 188px;
text-align: center;
}
.divFrame .divTitle {
background-color: #eee;
padding: 5px 0px 5px 0px;
}
.divFrame .divContent {
padding: 5px 0px 5px 0px
}
.divFrame .divContent img {
border: solid 1px #eee;
padding: 2px
}
.divFrame .divTip {
position: absolute;
padding：90px 0px 0px 60px;
font-size: 13px;
font-weight: bold
}
.btn {
border: #666 1px solid;
padding: 2px;
width: 80px;
}
</style>
<script type="text/javascript">
$(function () {
$img = $("img"); //获取图片元素对象
$tip = $(".divTip"); //获取提示元素对象
$("input:eq(0)").click(function () {
//第一个按钮单击事件
$tip.html(""); //清空提示内容
//在3000毫秒中淡入图片，在执行一个回调函数
$img.fadeIn(3000, function () {
$tip.html("淡入成功");
})
})
$("input:eq(1)").click(function () {
//第二个按钮单击事件
$tip.html(""); //清空提示内容
//在3000毫秒中淡出图片，在执行一个回调函数
$img.fadeOut(3000, function () {
$tip.html("淡出成功");
})
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" value="fadeIn" class="btn"/>
<input id="Button2" type="button" value="fadeOut" class="btn"/>
</div>
<div class="divContent">
<div class="divTip"></div>
<img src="Image/a4.jpg" alt="风景图" title="风景图片"/>
</div>
</div>
</body>
</html>
fadeTo()方法
将透明度指定到某一个值，语法格式为：
fadeTo(speed,opacity,[callback])
该方法的功能是将所选择元素的不透明度以动画的效果调整到指定的不透明度值，动画完成时，可以执行一个回调函数，参数speed为动画效果的速度，参数opacity为指定的不透明值，取值范围0.0-1.0.
-
功能描述
在页面中创建一个下拉列表框，用于保存各种透明度值，当选择下拉列表框中某选项时，页面中图片的透明度值便指定为该选项值。
-
实现代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>show和hide方法</title> <script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script> <style type="text/css"> .divFrame { border: solid 1px #666; width: 510px; text-align: center; } .divFrame .divTitle { background-color: #eee; padding: 5px 0px 5px 0px; } .divFrame .divContent { padding: 5px 0px 5px 0px } .divFrame .divContent img { border: solid 1px #eee; padding: 2px } </style> <script type="text/javascript"> $(function () { var $img = $("img"); //获取图片元素对象 var $sel = $("select"); //获取下拉列表框对象 $sel.change(function () { //下拉列表框选项改变事件 var fltValue = $sel.val(); //获取选中的值 $img.fadeTo(3000, fltValue); //改变图片的透明度 }) }) </script> </head> <body> <div class="divFrame"> <div class="divTitle"> <select id="Select1"> <option value="0.2">0.2</option> <option value="0.4">0.4</option> <option value="0.6">0.6</option> <option value="0.8">0.8</option> <option value="1.0" selected="selected">1.0</option> </select> </div> <div class="divContent"> <img src="Image/a4.jpg" alt="" title="风景图片"/> </div> </div> </body> </html>
自定义动画
简单的动画
animate()方法，其调用语法格式为：
animate(params,[duration],[easing],[callback])
参数params表示用于制作动画效果的属性样式和值的集合。可选项【duration】表示三种默认的速度字符“slow”，“normal”，“fast”或自定义的数字。可选项【easing】为动画插件使用，用于控制动画的表现效果。通常有“linear”和“swing”字符值.可选项【callback】为动画完成后，执行的回调函数。
1.功能描述
在页面中，单击某块div元素，其自身的高度与宽度以动画的效果增大，动画完成后，元素的边框加粗，并且边框颜色及div元素内容发生变化。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>show和hide方法</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
.divFrame {
border: solid 1px #ccc;
background-color: #eee;
width: 60px;
height: 60px;
font-size: 13px;
padding: 5px
}
</style>
<script type="text/javascript">
$(function () {
$(".divFrame").click(function () {
//div元素点击事件
$(this).animate({
//宽与高变化的动画效果
width: "20%",
height: "70px"
}),
3000, function () {
//动画完成后执行的回调函数
$(this).css({
"border": "solid 3px #666"
})
.html("变大了");
}
})
})
</script>
</head>
<body>
<div class="divFrame">
点击变大
</div>
</body>
</html>
移动位置的动画
1.功能描述
在页面中，创建两个按钮，单击第一个“左移”按钮后，将页面中的div元素在当前的位置上，以动画的效果向左移动52个像素，单击第二个“向右”按钮后，页面中的div元素在当前的位置上，以动画的效果向右移动52个像素。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>show和hide方法</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px
}
.divFrame {
border: solid 1px #666;
width: 168px;
text-align: center;
}
.divFrame .divTitle {
background-color: #eee;
padding: 5px 0px 5px 0px;
}
.divFrame .divContent {
width: 108px;
height: 52px;
padding: 5px 0px 5px 0px;
margin: 0px 30px 0px 30px;
overflow: hidden
}
.divFrame .divContent .divList {
width: 162px;
position: relative
}
.divFrame .divContent .divList span {
border: solid 1px #ccc;
background-color: #eee;
width: 50px;
height: 50px;
float: left;
margin-right: 2px;
}
.btn {
border: #666 1px solid;
padding: 2px;
width: 60px;
}
</style>
<script type="text/javascript">
$(function () {
$("input:eq(0)").click(function () {
//按钮左移点击事件
//在3000毫秒内，以动画的形式向左移动52个像素
$(".divList").animate({left: "-=52px"}, 3000);
})
$("input:eq(1)").click(function () {
//按钮右移点击事件
//在3000毫秒内，以动画的形式向右移动52个像素
$(".divList").animate({left: "+=52px"}, 3000);
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" value="左移" class="btn"/>
<input id="Button2" type="button" value="右移" class="btn"/>
</div>
<div class="divContent">
<div class="divList">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>
</div>
</body>
</html>
队列中的动画
所谓”队列“动画，是指在元素中执行一个以上的多个动画效果，即有多个animate方法在元素中执行，因此，根据这些animate方法执行的先后顺序，形成了动画”队列“，产生”队列“后，动画的效果便按照”队列“的顺序进行展示。
1.功能描述
在页面中，单击某个固定宽高的div标记，首先，以动画的效果，将宽高在原有基础上加大一倍，然后，再以动画的效果，将宽高在原有的基础上减小1倍。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>show和hide方法</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
div {
border: solid 1px #666;
background-color: #eee;
width: 50px;
height: 50px;
font-size: 13px;
padding: 5px
}
</style>
<script type="text/javascript">
$(function () {
$("div").click(function () {
//div快单击事件
$(this)
.animate({height: 100}, "slow")
.animate({width: 100}, "slow")
.animate({height: 50}, "slow")
.animate({width: 50}, "slow")
})
})
</script>
</head>
<body>
<div>队列</div>
</body>
</html>
动画停止和延时
stop()方法的格式如下：
stop([clearQueue],[gotEnd])
该方法的功能时停止所选元素中正在执行的动画，其中可选参数clearQueue是一个布尔值表示是否停止正在执行的动画。
delay()方法的格式如下：
delay(duration,[queueName])
该方法的功能时设置一个延时值来推迟后续队列中动画的执行，其中参数duration为延时的时间值，单位是毫秒
可选参数queueName表示队列名词即动画队列
1.功能描述
在页面中，设置三个超级链接，分别为”开始，停止，延时，单击开始后，页面中的图片以拉窗帘的方式切换显示状态，单击停止后，立刻停止了正在执行中的动画效果，单击延时后，动画切换显示效果在延时时2000毫秒后，再执行。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>show和hide方法</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px
}
.divFrame {
border: solid 1px #666;
width: 233px;
text-align: center;
}
.divFrame .divTitle {
background-color: #eee;
padding: 5px 0px 5px 0px
}
.divFrame .divContent {
padding: 5px 0px 5px 0px
}
.divFrame .divContent img {
border: solid 1px #eee;
padding: 2px
}
</style>
<script type="text/javascript">
$(function () {
$("a:eq(0)").click(function () {
//点击开始连接事件
$("img").slideToggle(3000); //拉窗帘方式切换图片
})
$("a:eq(1)").click(function () {
//停止正在执行的动画
$("img").stop();
})
$("a:eq(2)").click(function () {
//延时切换图片
$("img").delay(2000).slideToggle(3000);
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<a href="javascript:void(0)">开始</a> |
<a href="javascript:void(0)">停止</a> |
<a href="javascript:void(0)">延时</a>
</div>
<div class="divContent">
<img src="Image/a2.gif" alt="" title="图片"/>
</div>
</div>
</body>
</html>
使用animate方法代替其他动画效果
1.animate方法代替hide()方法，代码如下：
$("页面元素").animate({height:"hide",width:"hide",opacity:"hide"},600);
等价于下列代码：
$("页面元素").hide(600);
2.animate方法代替fadeOut方法。代码如下：
$("页面元素").animate({opacity:"hide"},600);
等价于下列代码：
$("页面元素").fadeOut(600);
3.animate方法代替slideUp方法，代码如下：
$("页面元素").animate({height:"hide"},600);
等价于下列代码：
$("页面元素").slideUp(600);
4.animate方法代替fadeTo方法，代码如下：
$("页面元素").animate({opacity:"0.8"},600);
等价于下列代码：
$("页面元素").fadeTo(600，"0.8");
综合案例分析-动画效果浏览相册中的图片
需求分析
1.将尺寸不同的相片统一成宽度与高度相同的缩略图片，展示在页面中。
2.当单击点击放大链接时，以动画的效果放大致其原始图片，同时，隐藏点击放大图片中的链接，显示改图的基本信息。
3.当点击原始图片中的“关闭”按钮时，以动画的效果将图片缩小成单击前的缩略图，即返回到图片初始状态。
4.再浏览放大后的原始图片时，又单击其他缩略图片，那么，处于放大状态的原始图片自动以动画的效果进行关闭，使整个相册始终只有一个图片处于放大状态。
功能实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画方式浏览图片</title>
<link type="text/css" href="Css/css_Animate.css" rel="Stylesheet"/>
<script type="text/javascript" src="Jscript/js_Animate.js"></script>
</head>
<body>
<div class="p_Lst">
<img alt="" src="Image/a7.jpg"/>
<div class="p_Alt">
<h3>风景一</h3>
</div>
</div>
<div class="p_Lst">
<img alt="" src="Image/a1.gif"/>
<div class="p_Alt">
<h3>风景二</h3>
</div>
</div>
<div class="p_Lst">
<img alt="" src="Image/a2.gif"/>
<div class="p_Alt">
<h3>风景三</h3>
</div>
</div>
<div class="p_Lst">
<img alt="" src="Image/a5.gif"/>
<div class="p_Alt">
<h3>风景四</h3>
</div>
</div>
</body>
</html>
为了代码的调用方便和后续维护的快捷，在html中，单独调用了两个辅助文件，一个使用于控制页面样式的css文件css_Animate.css，另一个是用于实现页面功能的JS文件js_Animate.js。
CSS文件css_Animate.css
body {
font-size: 13px
}
/*图片外框样式*/
.p_Lst {
position: relative;
float: left;
width: 90px;
height: 98px;
padding: 8px;
border: 1px solid #666;
margin: 10px 8px 20px 8px;
}
/*图片最近外框样式*/
.p_Img {
width: 90px;
height: 90px;
margin-bottom: 5px;
overflow: hidden;
}
/*图片信息样式*/
.p_Alt {
text-align: center;
display: none;
}
/*缩略图中点击放大的链接样式*/
.p_Big {
display: block;
width: 90px;
height: 23px;
cursor: pointer;
}
/*关闭按钮的样式*/
.p_Cls {
position: absolute;
right: 10px;
bottom: 10px;
display: block;
width: 90px;
height: 21px;
}
JS文件js_Animate.js
///<reference path="jquery-1.4.2.js"/>
$(function (){
var curIndex = -1; //初始化当前打开的图片值
var intImgL = "-120px";
var intImgT = "-120px";
//带参数index遍历图片外框div
$(".p_Lst").each(function (index) {
var $this = $(this); //获取每个外框div
var $img = $this.find("img"); //查找其中的图片元素
var $info = $this.find(".p_Alt"); //查询其中的图片信息元素
var arrPic = {}; //定义一个空数组保存初始的长和宽
arrPic.imgw = $img.width();
arrPic.imgh = $img.height();
arrPic.orgw = $this.width();
arrPic.orgh = $this.height();
$img.css({
//设置初始时的图片外边距位置
marginLeft:intImgL,
marginTop:intImgT
});
//将图片，点击放大链接，关闭按钮放入外框div中
var $drag = $("<div class='p_Img'>").append($img).prependTo($this);
var $open = $("<a href='javascript:void(0)' class='p_Big' title='点击放大'></a>").appendTo($this);
var $clos = $("<a href='javascript:void(0)' class='p_Cls' title='点击关闭'></a>").appendTo($info);
//保存放入元素后的外框div的长和宽
arrPic.dragw = $drag.width();
arrPic.dragh = $drag.height();
//放大按钮单击事件
$open.click(function(){
$this.animate({
//外框动画
width:arrPic.imgw,
height:(arrPic.img+85), //85是图片信息的高度
borderWidth:"5"
},3000);
$open.fadeOut(); //点击放大链接淡出
$(".p_Alt",$this).fadeIn(); //图片提示信息淡入
$drag.animate({
//加入图片后的div框动画
width:arrPic.imgw,
height:arrPic.imgh
},3000);
$img.animate({
//以动画的形式自动调整位置
marginTop:"0px",
marginLeft:"0px"
},3000);
//获取当前被放大成原始图的图片各组成部分
var $f_this = $(".p_Lst:eq("+curIndex+")");
var $f_open = $(".p_Big:eq("+curIndex+")");
var $f_drag = $(".p_Img:eq("+curIndex+")");
var $f_larg = $(".p_Alt:eq("+curIndex+")");
var $f_imgs = $("img:eq("+curIndex+")");
if (curIndex != -1){
//如果当前已有放大的图片 自动以动画形式关闭该图片
cls_Click($f_this,$f_open,$f_drag,$f_imgs,$f_larg);
}
//重新获取当前放大图片的索引号
curIndex = index;
});
//关闭按钮单击事件
$clos.click(function(){
//以动画的形式缩小当前所点击的图片
cls_Click($this,$open,$drag,$img,1);
//初始化索引号
curIndex = -1;
});
/*
参数pF表示图片最外层的div
参数pO表示图片点击前的放大按钮
参数pW表示紧邻图片层div
参数pI表示紧邻选中的图片元素
参数blnS表示图片中的说明内容
*/
function cls_Click(pF,pO,pW,pI,blnS){
var $strInit;
pF.animate({
width:arrPic.orgw,
height:arrPic.orgw,
broderWidth:"1"
},3000);
pO.fadeIn();
if (blnS){
$strInit = $(".p_Alt",PF);
}else{
$strInit=blnS;
}
$strInit.fadeOut();
pW.animate({
width:arrPic.dragw,
height:arrPic.dragh
},3000);
pI.animate({
marginTop:intImgT,
marginLeft:intImgL
},3000);
}
});
});
4.代码分析
在js文件中，为了实现各个相册中的图片点击放大查看的动画效果，先带参数index遍历整个图片最外框的div元素，其代码如下：
$(".p_Lst").each(function(index){
//代码执行部分
})
在遍历过程中，先获取设置好的外框与图片的长和款，并将改变后的图片和相关元素先放入类别为“p_Img”的div中，然后全部放入最外框的div元素中，从而完成图片初始化的页面效果。
var $this = $(this); //获取每个外框div
var $img = $this.find("img"); //查找其中的图片元素
var $info = $this.find(".p_Alt"); //查询其中的图片信息元素
var arrPic = {}; //定义一个空数组保存初始的长和宽
arrPic.imgw = $img.width();
arrPic.imgh = $img.height();
arrPic.orgw = $this.width();
arrPic.orgh = $this.height();
$img.css({
//设置初始时的图片外边距位置
marginLeft:intImgL,
marginTop:intImgT
});
//将图片，点击放大链接，关闭按钮放入外框div中
var $drag = $("<div class='p_Img'>").append($img).prependTo($this);
var $open = $("<a href='javascript:void(0)' class='p_Big' title='点击放大'></a>").appendTo($this);
var $clos = $("<a href='javascript:void(0)' class='p_Cls' title='点击关闭'></a>").appendTo($info);
//保存放入元素后的外框div的长和宽
arrPic.dragw = $drag.width();
arrPic.dragh = $drag.height();
当单击图片初始状态中的点击放大链接时，首先，以3000毫秒的速度放大图片最外框div元素，接着以同样的速度放大最近一层包含图片的div，与此同时，以同样的速度显示或隐藏相应的页面内容
$open.click(function(){
$this.animate({
//外框动画
width:arrPic.imgw,
height:(arrPic.img+85), //85是图片信息的高度
borderWidth:"5"
},3000);
$open.fadeOut(); //点击放大链接淡出
$(".p_Alt",$this).fadeIn(); //图片提示信息淡入
$drag.animate({
//加入图片后的div框动画
width:arrPic.imgw,
height:arrPic.imgh
},3000);
$img.animate({
//以动画的形式自动调整位置
marginTop:"0px",
marginLeft:"0px"
},3000);
为了在单击点击放大链接时，缩小正在放大的图片，使仅有一个图片处于放大显示状态中，首先，需要获取当前处于放大显示图片的索引号，然后，根据做银行获取图片的各个组成部分，再将这些部分以动画效果进行缩小。
定义一个变量，记录当前放大显示图片索引号，并赋初始值为-1.
Ajax在jQuery中的应用
Ajax其核心是通过XMLHttpRequest对象，以一种异步的方式，向服务器发送数据请求，并通过该对象接收请求返回的数据，从而完成人机交互的数据操作。
加载异步数据
在页面开发过程中，为了加快整体页面打开的速度，对于某局部的数据采用异步读取的方法获取。
传统的JavaScript方法实现Ajax
1.功能描述
创建两个新页面a/b.html，前者用于加载，在该页面中，单击加载按钮后，在不刷新的情况下，将b页面中的内容显示出来
2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>传统JavaScript实现Ajax</title>
<style type="text/css">
body{
font-size: 13px;
}
.divFrame{
width: 260px;
border: solid 1px #666;
}
.divFrame .divTitle{
padding: 5px;
background-color: #eee;
}
.divFrame .divContent{
padding: 8px;
}
.divFrame .divContent .clsShow{
font-size: 14px;
}
.btn{
border: #666 1px solid;
padding: 2px;
width: 80px;
}
</style>
<script type="text/javascript">
var objXmlHttp = null; //声明一个空的xmlhttp变量
function CreateXMLHTTP() {
//根据浏览器不同，返回该变量的实体对象
if(window.ActiveXObject){
objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
if(window.XMLHttpRequest){
objXmlHttp =new XMLHttpRequest();
}
else {
alert("初始化错误")
}
}
}
function GetSendData() {
document.getElementById("divTip").innerHTML = "<img alt='' title='正在加载中......' src='Image/a5.jpg'/>"; //初始化内容
//设置发送地址变量并赋初始值
var strSendUrl = "b.html?data="+Date();
CreateXMLHTTP(); //实例化XMLHttpRequest对象
//open方法初始化XMLHttpRequest
objXmlHttp.open("GET",strSendUrl,true);
objXmlHttp.onreadystatechange = function () {
//回调函数
if (objXmlHttp.readyState == 4){
//如果请求完成加载
if(objXmlHttp.status ==200){
//如果响应已成功 显示获取数据
document.getElementById("divTip").innerHTML =objXmlHttp.responseText;
}
}
}
objXmlHttp.send(null); //send发送设置的请求
}
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button" type="button" onclick="GetSendData()" class="btn" value="获取数据"/>
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
</body>
</html>
为了能即时获取被加载页面b变化了的数据，在设置发送地址url时，后面跟有一参数date，即"b.html?data="+Date()，功能是清空缓存中已加载的变量数据信息，重新获取新的即时数据。
jQuery中的load方法
使用load方法实现获取异步数据的功能
load(url,[data],[callback])
参数url为被加载的页面地址，可选项【data】参数表示发送到服务器的数据，其格式为key/value
load方法实现异步获取数据
1.功能描述
创建两个新页面a/b.html，前者用于加载，在该页面中，单击加载按钮后，在不刷新的情况下，将b页面中的内容显示出来
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>load实现Ajax</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js">
</script>
<style type="text/css">
body{
font-size: 13px;
}
.divFrame{
width: 260px;
border: solid 1px #666;
}
.divFrame .divTitle{
padding: 5px;
background-color: #eee;
}
.divFrame .divContent{
padding: 8px;
}
.divFrame .divContent .clsShow{
font-size: 14px;
}
.btn{
border: #666 1px solid;
padding: 2px;
width: 80px;
}
</style>
<script type="text/javascript">
$(function () {
$("#Button").click(function () {
//按钮点击事件
$("#divTip").load("b.html"); //load方法加载数据
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button" type="button" onclick="GetSendData()" class="btn" value="获取数据"/>
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
</body>
</html>
jQuery中的去全局函数getSON()
虽然使用load方法可以很快的加载数据到页面中，但有时需要对获取的数据进行处理，如果用laod方法获取的内容进行遍历，也可以进行数据的处理，但是这样获取的内容必须先插入页面中，然后才能进行，因此，执行效率不高。
为了解决这个问题，采用将要获取的数据另存为一种轻量级的数据交互格式即JSON文件格式。
$.getJSON(url,[data],[callback])
参数url表示请求的地址，可选项data参数表示发送到服务器的数据，其格式为key/value
全局函数getJSON实现异步获取数据
1.功能描述
实现一个JSON格式的文件UserInfo.json，用于保存人员资料信息，另外，新建一个页面，当单击页面中的“获取数据”按钮时，将通过全局函数getJSON获取文件UserInfo.json中的全部数据，并展示在页面中。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>load实现Ajax</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js">
</script>
<style type="text/css">
body{
font-size: 13px;
}
.divFrame{
width: 260px;
border: solid 1px #666;
}
.divFrame .divTitle{
padding: 5px;
background-color: #eee;
}
.divFrame .divContent{
padding: 8px;
}
.divFrame .divContent .clsShow{
font-size: 14px;
}
.btn{
border: #666 1px solid;
padding: 2px;
width: 80px;
}
</style>
<script type="text/javascript">
$(function () {
$("#Button").click(function () {
//按钮点击事件
//打开文件，并通过回调函数处理获取的数据
$.getJSON("UserInfo.json",function (data) {
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
//变量获取的数据
$.each(data,function (InfoIndex,Info) {
strHTML += "姓名：" + Info["name"]+"<br/>";
strHTML += "性别：" + Info["sex"]+"<br/>";
strHTML += "邮箱：" + Info["email"]+"<hr/>";
})
$("#divTip").html(strHTML); //显示处理后的数据
})
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button" type="button" onclick="GetSendData()" class="btn" value="获取数据"/>
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
</body>
</html>
另外创建一个文本，另存为.json格式命名为：UserInfo.json
[
{
"name": "逃过",
"sex": "男",
"email": "11113huu163.com"
},
{
"name": "嘀咕嘀咕",
"sex": "女",
"email": "xsdff@163.com"
}
]
jQuery中的全局函数getScript()
在jQuery中，除通过全局函数getJSON获取.json格式的文件内容外，还可以通过另外一个全局函数getScript获取js文件的内容。其次，在页面中获取js文件的内容有很多方法，入下列代码
<script type="text/javascript" src="Jscript/xx.js"></script>
动态设置的代码如下：
$("<script type="text/javascript" src="Jscript/xx.js" />").appendTo("head");
但这样的调用方法并不是最理想的。在jQuery中通过全局函数getScript()加载.JS文件后，不仅可以像加载页面片段页面一样轻松地注入脚本，而且所注入地脚本自动执行，大大提高了页面地执行效率，函数getScript地调用格式如下所示：
$.getScript(url,[callback])
参数url为等待加载的JS文件地址，可选项【callback】参数表示加载成功时执行的回调函数。
全局函数getScript()实现异步获取数据
1.功能描述
创建一个UserInfo.js文件，在该文件中，以数组的方式保存人员资料信息，然后，通过$.each()方法遍历各元素，将每次遍历元素的内容，以叠加的方式保存至变量strHTML，并将该变量的值作为ID号为“divTip”元素的内容显示在页面中，另外，新建一个页面，在该页面中，单击“获取数据”按钮后，打开UserInfo.js文件。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数获取数据</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
.divFrame {
width: 260px;
border: solid 1px #666;
}
.divFrame .divTitle {
padding: 5px;
background-color: #eee;
}
.divFrame .divContent {
padding: 8px;
}
.divFrame .divContent .clsShow {
font-size: 14px;
}
.btn {
border: #666 1px solid;
padding: 2px;
width: 80px;
}
</style>
<script type="text/javascript">
$(function () {
$("#Button").click(function () {
//按钮单击事件
//打开已获取返回数据的文件
$.getScript("UserInfo_a.js",function () {
alert("加载成功")
})
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button" type="button" onclick="GetSendData()" class="btn" value="获取数据"/>
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
</body>
</html>
新建一个JS文件UserInfo_a.js文件，该文件的代码内容如下所示：
var data = [
{
"name": "逃过",
"sex": "男",
"email": "11113huu163.com"
},
{
"name": "嘀咕嘀咕",
"sex": "女",
"email": "xsdff@163.com"
}
]
var strHTML = ""; //初始化保存内容变量
$.each(data, function () {
//遍历获取的数据
strHTML += "姓名：" + this["name"] + "<br/>";
strHTML += "性别：" + this["sex"] + "<br/>";
strHTML += "邮箱：" + this["email"] + "<hr/>";
})
$("#divTip").html(strHTML); //显示处理后的数据
jQuery中异步加载XML文档
jQuery中使用全局函数$.get进行访问，其调用格式为：
$.get(url,[data],[callback],[type])
参数url表示等待加载的数据地址，data参数表示发送到服务器的数据，其格式为key/value，callback表示回调函数，type参数表示返回的数据格式，入html，xml，js，json，text。
全局函数get实现异步获取XML文档数据
1.功能描述将人员资料信息保存到XML格式的文档UserInfo.xml中，另外，新建一个页面，在页面中，单击“获取数据”按钮，通过全局函数$.get()打开XML格式的文档UserInfo.XML,并获取文档中的全部数据，显示在页面中。
2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数获取数据</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
.divFrame {
width: 260px;
border: solid 1px #666;
}
.divFrame .divTitle {
padding: 5px;
background-color: #eee;
}
.divFrame .divContent {
padding: 8px;
}
.divFrame .divContent .clsShow {
font-size: 14px;
}
.btn {
border: #666 1px solid;
padding: 2px;
width: 80px;
}
</style>
<script type="text/javascript">
$(function () {
$("#Button").click(function () {
//按钮单击事件
//打开文件并通过回调函数处理获取的数据
$.get("UserInfo.xml", function (data) {
$("#divTip").empty(); //清空标记中的数据
var strHTML = ""; //初始化保存内容变量
$(data).find("User").each(function () {
//遍历获取数据
var $strUser = $(this);
strHTML += "姓名：" + $strUser.find("name").text() + "<br/>";
strHTML += "性别：" + $strUser.find("sex").text() + "<br/>";
strHTML += "邮箱：" + $strUser.find("email").text() + "<hr/>";
})
$("#divTip").html(strHTML); //显示处理后的数据
})
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button" type="button" onclick="GetSendData()" class="btn" value="获取数据"/>
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
</body>
</html>
新建另外一个XML文件UserInfo.XML，该文件的代码内容如下所示：
<?xml version="1.0" encoding="utf-8" ?>
<Info>
<User id="1">
<name>陶国荣</name>
<sex>男</sex>
<email>huiyiniman@163.com</email>
</User>
<User id="2">
<name>李建中</name>
<sex>女</sex>
<email>xiaot@163.com</email>
</User>
</Info>
3.页面执行效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jubg6qEr-1603935780809)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1593481074336.png)]
请求服务器数据
Ajax技术最终体现在与服务器的动态数据实现人机交互中，即客户端传递带有参数的请求，服务器接收后，分析所传递来的请求，并做出相应的响应，发送对应数据至客户端，客户端接收请求返回的数据，从而实现了数据的双向传递。
$.get()请求数据
通过调用全局函数 . g e t ( ) , 实 现 了 x m l 文 档 的 加 载 ， 除 了 加 载 数 据 外 ， .get(),实现了xml文档的加载，除了加载数据外， .get(),实现了xml文档的加载，除了加载数据外，.get()函数还可以实现数据的请求。
1.功能描述
创建一个服务器页面UserInfo.aspx，该页面的功能是获取客户端发送的请求，并分析传来的参数值，返回对应的结果，另外，在客户端html页面的文本框中，输入传递的参数值，单击“请求数据”按钮后，显示服务器返回的数据结果。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数获取数据</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
.divFrame {
width: 260px;
border: solid 1px #666;
}
.divFrame .divTitle {
padding: 5px;
background-color: #eee;
}
.divFrame .divContent {
padding: 8px;
}
.divFrame .divContent .clsShow {
font-size: 14px;
}
.btn {
border: #666 1px solid;
padding: 2px;
width: 80px;
}
</style>
<script type="text/javascript">
$(function () {
$("#Button").click(function () {
//按钮单击事件
//打开文件，并通过回调函数返回服务器响应后的数据
$.get("UserInfo.aspx",
{name:encodeURI($("#txtName").val())
},function (data) {
$("#divTip").empty() //先清空标记中的内容
.html(data); //显示服务器返回的数据
})
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button" type="button" onclick="GetSendData()" class="btn" value="获取数据"/>
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
</body>
</html>
新建一个userInfo.aspx
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["name"]); //解码姓名字符
string strHTML = "<div class='clsShow'>"; //初始化保存内容变量
if(strName == "陶国荣"){
strHTML += "姓名：陶国荣<br/>";
strHTML += "性别:男<br/>";
strHTML += "邮箱：hhhhjlkj@163.com<hr/>";
}
else if (strName=="李建周"){
strHTML += "姓名：李建周<br/>";
strHTML += "性别:男<br/>";
strHTML += "邮箱：hhhhjlkj@163.com<hr/>";
}
strHTML += "</div>";
Response.Write(strHTML);
%>
$.post()请求数据
$.post()请求也是带参数向服务器发出数据请求，get方式不适合传输数据量较大的数据，其请求的历史信息会保存在浏览器的缓存中，有一点的安全风险，而post方式向服务器发送请求数据，则不存在这方面的不足。
$.post()函数调用的语法格式如下所示：
$.post(url,[data],[callback],[type])
1.功能描述
2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数获取数据</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
.divFrame {
width: 260px;
border: solid 1px #666;
}
.divFrame .divTitle {
padding: 5px;
background-color: #eee;
}
.divFrame .divContent {
padding: 8px;
}
.divFrame .divContent .clsShow {
font-size: 14px;
}
.btn {
border: #666 1px solid;
padding: 2px;
width: 80px;
}
</style>
<script type="text/javascript">
$(function () {
$("#Button").click(function () {
//按钮单击事件
//打开文件，并通过回调函数返回服务器响应后的数据
$.post("UserInfo.aspx",
{
name: encodeURI($("#txtName").val()),
sex: encodeURI($("selSex").val())
},
function (data) {
$("#divTip").empty() //先清空标记中的内容
.html(data); //显示服务器返回的数据
})
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button" type="button" onclick="GetSendData()" class="btn" value="获取数据"/>
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
</body>
</html>
新建一个服务器文件UserInfo.ASPX，
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["name"]); //解码姓名字符
string strSex = System.Web.HttpUtility.UrlDecode(Request["sex"]);
//解码性别字符
string strHTML = "<div class='clsShow'>"; //初始化保存内容变量
if(strName == "陶国荣"&& strSex == "男"){
strHTML += "姓名：陶国荣<br/>";
strHTML += "性别:男<br/>";
strHTML += "邮箱：hhhhjlkj@163.com<hr/>";
}
else if (strName=="李建周" && strSex == "男"){
strHTML += "姓名：李建周<br/>";
strHTML += "性别:男<br/>";
strHTML += "邮箱：hhhhjlkj@163.com<hr/>";
}
strHTML += "</div>";
Response.Write(strHTML);
%>
serialize()序列化表单
使用全局函数 . g e t ( ) 和 .get()和 .get()和.post()向服务器传递参数时，其中的参数是通过名称属性逐个搜索输入字段的方式进行传输的，如果表单的输入字段过多，这种方式就比较麻烦，而且不利于拓展，为了解决这个问题，jQuery引入serialize方法，该方法可以简化参数传值的方式，其调用的语法如下：
serialize()
该方法的功能是将所选择的DOM元素转换成能随Ajax传递的字符串，即序列化所选择的DOM元素。
serialize()序列化表单
1.功能描述
在客户端页面中，在增加一个邮箱复选框，用于控制页面是否显示邮箱地址，当点击请求按钮时，通过调用表单的serialize方法，获取全部的输入字段值，并向服务器页面userinfo.aspx发出数据请求，服务器页面接收参数值后，响应请求，将相应的数据发送到客户端。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数获取数据</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
.divFrame {
width: 260px;
border: solid 1px #666;
}
.divFrame .divTitle {
padding: 5px;
background-color: #eee;
}
.divFrame .divContent {
padding: 8px;
}
.divFrame .divContent .clsShow {
font-size: 14px;
}
.btn {
border: #666 1px solid;
padding: 2px;
width: 80px;
}
</style>
<script type="text/javascript">
$(function () {
$("#Button").click(function () {
//按钮单击事件
//打开文件，并通过回调函数返回服务器响应后的数据
$.post("UserInfo.aspx",
$("#frmUserInfo").serialize(), //序列化表单数据
function (data) {
$("#divTip").empty() //先清空标记中的内容
.html(data); //显示服务器返回的数据
})
})
})
</script>
</head>
<body>
<form id="frmUserInfo">
<div class="divFrame">
<div class="divTitle">
<input id="Button" type="button" onclick="GetSendData()" class="btn" value="获取数据"/>
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
</form>
</body>
</html>
服务器端文件
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["txtName"]); //解码姓名字符
string strSex = System.Web.HttpUtility.UrlDecode(Request["selSex"]);
//解码性别字符
string strHTML = Request["chkEmail"]; //是否显示邮件字符
string strHTML = "<div class=''clsShow"; //初始化保存内容变量
if(strName == "陶国荣"&& strSex == "男"){
strHTML += "姓名：陶国荣<br/>";
strHTML += "性别:男<br/>";
if(strEmail == "1")
{
strHTML += "邮箱：hhhhjlkj@163.com<hr/>";
}
strHTML += "<hr/>"
}
else if (strName=="李建周" && strSex == "男"){
strHTML += "姓名：李建周<br/>";
strHTML += "性别:男<br/>";
if(strEmail == "1"){
strHTML += "邮箱：hhhhjlkj@163.com<hr/>";
}
strHTML += "<hr/>"
}
strHTML += "</div>";
Response.Write(strHTML);
%>
$.ajax()方法
除了可以使用load，post，get方法实现页面的异步调用和服务器交互数据外，在jQuery中，还有一个功能$.ajax()，该方法不仅可以实现上述三个全局函数完成的功能，还更多的关注实现过程中的细节。
$,ajax([option])
可选参数【option】为$.ajax()方法中放入请求设置，其格式为key/value，即包含发送请求的参数，也含有服务器响应后回调的数据
| 参数名 | 类型 | 描述 |
|---|---|---|
| url | String | 发送请求的地址（默认为当前页面） |
| type | String | 数据请求方式（post或get）默认为get |
| data | String或Object | 发送到服务器的数据，如果不是字符串则自动转成字符串格式，如果是get请求方式，那么，该字符串将附在url页面 |
| dataType | String | 服务器返回的数据类型，如果没有指定，jQuery将自动根据HTTP包MIME信息自动判断，服务器返回的数据根据自动判断的结果进行分析，传递给回调函数，其可用类型为：html：返回纯文本的html信息，包含的script标记会在插入页面时被执行，script：返回纯文本JavaScript代码，text：返回纯文本字符串，xml：返回可被jQuery处理的xml文档，json：返回json格式的数据。 |
| beforeSend | Function | 该函数用于发送请求前修改XMLHttpRequest对象，其中的参数就是XMLHttpRequest对象，由于该函数本身时jQuery事件，因此，如果函数返回false，则表示取消本次事件。 |
| copmlete | Function | 请求完成后调用的回调函数，该函数无论数据发送成功还是失败都会调用，其中有两个参数，一个是XMLHttpRequest对象，另外一个是strStatus，用于描述成功请求类型的字符串。 |
| success | Function | 请求成功后调用的回调函数，该函数有两个参数，一个是根据参数dataType处理后服务器返回的数据，两外一个时strStatus，用于描述状态的字符串 |
| error | Function | 请求失败后调用的回调函数，该函数有三个参数，第一个是XMLHttpRequest对象，第二个是strError，第三个是扑捉到的错误对象strObject |
| timeout | Number | 请求超时的时间是（毫秒），该设置将覆盖$.ajaxSetup()方法中的同样设置 |
| global | Boolean | 是否响应全局事件，默认是true，表示响应，如果设置成false，表示不响应，那么，全局事件$.ajaxStart等将不响应 |
| async | Boolean | 是否为异步请求，默认是true，表示是异步，如果是false，表示是同步请求 |
| cache | Boolean | s是否进行页面缓存，true表示进行缓存，false表示不进行页面缓存 |
1.功能描述
创建一个用于登录的html也login.html，在页面中设置用于输入“用户名”和“密码”的文本框及“登录”和“取消”按钮，该页面不做任何数据处理。
另外，创建一个服务器端页面login.aspx，用于处理静态页面发送来的登录请求，同时，再创建一个HTML页面，在页面中，使用ajax方法请求调用login.html页面。然后，通过页面中“登录”按钮的单击事件，将获取的用户名称和密码发送到服务器，服务器响应请求，向客户端发送处理后的数据，客户端根据回调的数据，显示不同的页面效果。
2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax方法发送请求</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
.divFrame {
width: 260px;
border: solid 1px #666;
}
.divFrame .divTitle {
padding: 5px;
background-color: #eee;
}
.divFrame .divContent {
padding: 8px;
}
.divFrame .divContent .clsShow {
font-size: 14px;
}
.btn {
border: #666 1px solid;
padding: 2px;
width: 80px;
}
</style>
<script type="text/javascript">
$(function () {
$.ajax({
//请求登录页
url:"login.html", //登录静态页
dataType:"html",
success:function (HTML) {
//返回页面内容
//将页面内容置入表单
$("#frmUserLogin").html(HTML);
//登录按钮单击事件
$("#btnLogin").click(function () {
//获取用户名称
var strTxtName = encodeURI($("#txtName").val());
//获取输入密码
var strTxtPass = encodeURI($("#txtPass").val());
//开始发送数据
$.ajax({
//请求登录处理页面
url:"UserInfo.aspx", //登录处理页
dataType:"html",
//传送请求数据
data:{
txtName:strTxtName,
txtPass:strTxtPass
},
//登录成功后返回的数据
success:function (strValue) {
//根据返回值进行状态显示
if (strValue == "True"){
$(".clsShow").html("操作提示，登录成功");
}else{
$("#divError").show().html("用户名或密码错误");
}
}
})
})
}
})
})
</script>
</head>
<body>
</body>
</html>
新建一个html页面login.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<span>用户登录</span>
</div>
<div class="divContent">
<div class="clsShow">
<div id="divError" class="clsError"></div>
<div>名称：<input id="txtName" type="text" class="txt" /></div>
<div>密码：<input id="txtPass" type="password" class="txt" /></div>
<div>
<input id="btnLogin" type="button" value="登录" class="btn"/>
<input id="btnReset" type="reset" value="取消" class="btn"/>
</div>
</div>
</div>
</div>
</body>
</html>
再建一个服务器端文件login.ASPX，该文件的代码内容如下所示：
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["txtName"]); //解码姓名字符
string strPass = System.Web.HttpUtility.UrlDecode(Request["txtPass"]);
//解码性别字符
bool blnLogin = false;
if(strName == "admin"&& strPass == "123456"){
blnLogin = true;
}
Response.Write(blnLogin);
%>
$.ajaxSetup()设置全局Ajax
可以使用$.ajaxSetup()方法设置全局性的ajax默认选项，一次设置，全局有效
$.ajaxSetup([options])
可选参数【options】是一个对象，通过该对象可以设置$.ajax()方法中的参数。
1.功能描述
在页面中，设置三个按钮，分别通过 . a j a x ( ) 方 法 请 求 一 个 X M L 文 档 中 的 某 部 分 数 据 ， 并 将 回 调 的 数 据 展 示 在 页 面 中 ， 在 请 求 前 ， 使 用 .ajax()方法请求一个XML文档中的某部分数据，并将回调的数据展示在页面中，在请求前，使用 .ajax()方法请求一个XML文档中的某部分数据，并将回调的数据展示在页面中，在请求前，使用.ajaxSetup()方法进行一些参数项的全局性设置。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax方法发送请求</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
</style>
<script type="text/javascript">
$(function () {
$.ajaxSetup({
//设置全局性的ajax选项
type:"GET",
url:"UserInfo.xml",
dataType:"xml"
})
$("#Button1").click(function () {
//姓名按钮单击事件
$.ajax({
success:function (data) {
//传回请求响应的数据
ShowData(data,"姓名","name"); //显示姓名部分
}
})
})
$("#Button2").click(function () {
//姓别按钮单击事件
$.ajax({
success:function (data) {
//传回请求响应的数据
ShowData(data,"姓别","sex"); //显示姓别部分
}
})
})
$("#Button3").click(function () {
//邮箱按钮单击事件
$.ajax({
success:function (data) {
//传回请求响应的数据
ShowData(data,"邮箱","email"); //显示邮箱部分
}
})
})
// 根据名称与值，获取请求响应数据中的某部分
// d为请求响应后的数据
// n为数据中文说明字符
// d为数据在响应数据中的元素名称
function ShowData(d,n,v) {
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$(d).find("User").each(function () {
//遍历获取的数据
var $strUser = $(this);
strHTML += n + ":" + $strUser.find(v).text() +"<hr/>";
})
$("#divTip").html(strHTML); //显示处理后的数据
}
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<span><input id="Button1" type="button" value="姓名" class="btn"/></span>
<span><input id="Button2" type="button" value="性别" class="btn"/></span>
<span><input id="Button3" type="button" value="邮箱" class="btn"/></span>
</div>
<div class="divContent">
<div id="divTip" class="clsShow"></div>
</div>
</div>
</body>
</html>
新建一个UserInfo.xml文件
<?xml version="1.0" encoding="utf-8" ?>
<Info>
<User id="1">
<name>陶国荣</name>
<sex>男</sex>
<email>huiyiniman@163.com</email>
</User>
<User id="2">
<name>李建中</name>
<sex>女</sex>
<email>xiaot@163.com</email>
</User>
</Info>
Ajax中的全局事件
| 事件名称 | 参数 | 功能描述 |
|---|---|---|
| ajaxComplete(callback) | callback | ajax请求完成时执行函数 |
| ajaxError(callback) | callback | ajax请求发生错误时执行函数，其中捕捉到的错误可以作为最后一个参数进行传递 |
| ajaxSend(callback) | callback | Ajax请求发送前执行函数 |
| ajaxStart(callback) | callback | Ajax请求开始时执行函数 |
| ajaxStop(callback) | callback | Ajax请求结束时执行函数 |
| ajaxSuccess(callback) | callback | Ajax请求成功时执行函数 |
在jQuery中，所有的全局事件都是以 XMLHttpRequest对象和设置作为参数传递给回调函数，在处理回调函数时，只要分析其传回的参数值即可。
jQuery中的全局事件
1.功能描述
创建一个HTML页面，设置一个文本框和一个按钮，单击请求按钮后，获取文本框数据，向服务器发送请求，服务器响应请求，返回对应的数据，在数据交互过程中，请求开始时，触发绑定的ajaxStart全局事件，将“正在发送数据请求。。。。”的字样改成“已成功获取数据”并隐藏起来。
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax方法发送请求</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
</style>
<script type="text/javascript">
$(function () {
//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function () {
$(this).show(); //显示元素
})
//元素绑定全局ajaxStop事件
$("#divMsg").ajaxStop(function () {
$(this).html("已成功获取数据").hide();
})
//按钮的单击事件
$("#Button1").click(function () {
$.ajax({
//带参数请求服务器
type:"GET",
url:"GetData.aspx",
//获取加码后的数据并作为参数传给服务器
data:{
txtData:
encodeURI($("#txtData").val())
},
dataType:"html",
success:function (data) {
//显示解码后的返回数据
$("#divTip").html(decodeURI(data));
}
})
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<span>数据：<input id="txtData" type="text" class="txt" /></span>
<span><input id="Button1" type="button" value="发送" class="btn"/></span>
</div>
<div class="divContent">
<div id="divMsg" class="clsTip">正在发送数据请求。。。</div>
<div id="divTip" class="clsShow"></div>
</div>
</div>
</body>
</html>
新建一个服务器端文件GetData.aspx。该文件内容如下：
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = Request["txtData"]; //返回传回的参数
Response.Write(strName);
%>
综合案例分析-用Ajax实现新闻点评即时更新
1.需求分析
1）使用xml文档保存新闻点评数据，在初始化页面和发表点评内容时，使用无刷新的方式调用该数据
2）使用无刷新的方式，获取页面中提交的数据，通过服务器文件，写入保存新闻点评数据的xml文档中。
3）无论是获取数据，还是请求服务器响应，在页面中都有人性化的提示信息侦察进程的状态，即操作时显示，操作完成后则隐藏。
2.功能实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻点评功能</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<link type="text/css" href="Css/css_Ajax.css" rel="Stylesheet"/>
<script type="text/javascript" src="Jscript/js_Ajax.js"></script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<span>最新点评</span>
</div>
<div class="divContnt">
</div>
<div class="divSubmit">
<div class="SubTitle">发表评论
<span id="divMsg" class="clsTip"> 正在发送数据请求。。。。。。 </span>
</div>
<div class="SubContent">
<textarea id="txtContent" rows="6" class="txt"></textarea>
<div class="SubBtn">
<span style="float:left">用户名：
<input id="txtName" type="text" class="txt" />
</span>
<span style="float:right">
<input id="Button1" type="button" value="发表" class="btn" /></span>
</div>
</div>
</div>
</div>
</body>
</html>
新建一个js_Ajax.js文件
///<reference path="jquery-1.8.2.min.js"/>
$(function () {
//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function () {
$(this).show(); //显示元素
})
//元素绑定全局ajaxStop事件
$("#divMsg").ajaxStop(function () {
$(this).html("数据处理已完成").hide();
})
//初始化点评数据
LoadData();
$("#Button1").click(function () { //点击“发表”按钮事件
//获取加码后的用户名
var strName = encodeURI($("#txtName").val());
//获取加码后的发表内容
var strContent = encodeURI($("#txtContent").val());
$.ajax(
{
type: "GET",
url: "CommentData.xml", //请求XML格式数据
dataType: "html",
data: {name: strName, content: strContent},
success: function (msg) {
alert(msg);
LoadData();
$("#txtName").val("");
$("#txtContent").val("");
}
})
})
/*动态加载XML格式的点评数据*/
function LoadData() {
$.ajax(
{
type: "GET",
url: "CommentData.xml", //请求XML格式数据
dataType: "xml",
cache: false,
success: function (data) {
$(".divContent").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
//如果没有找到数据
if ($(data).find("Data").length == 0) {
strHTML = "<div style='text-align:center'>目前还没有找到点评数据！</div>";
}
//遍历获取的数据
$(data).find("Data").each(function () {
var $strUser = $(this);
strHTML += "<div class='clsShow'>";
strHTML += "<div class='ShowTitle'>荣拓网友 " +
" <a href=''> " + $strUser.find("name").text() + "</a></div>";
strHTML += "<div class='ShowContent'>" + $strUser.find("content").text() + "</div>";
strHTML += "<div class='ShowBottom'>发送时间 " + $strUser.find("date").text() + "</div>"
strHTML += "</div>"
})
$(".divContent").html(strHTML); //显示处理后的数据
}
})
}
})
新建一个css文件
body {
font-size: 13px
}
a {
text-decoration: none
}
/*外框样式*/
.divFrame {
width: 572px;
border: solid 1px #666;
background-color: #fafcff;
}
/*外框主题样式*/
.divFrame .divTitle {
padding: 5px;
background-color: #eee;
}
.divFrame .divTitle span {
padding: 2px;
padding-top: 5px;
font-family: 黑体;
font-size: 14px;
}
/*外框中内容样式*/
.divFrame .divContent {
padding: 8px;
}
.divFrame .divContent .clsShow .ShowBttom {
text-align: right;
font-size: 12px;
color: #555;
}
/*外框中提交点评内容样式*/
.divFrame .divSubmit {
padding: 20px;
}
.divFrame .divSubmit .SubContent .SubBtn {
padding-top: 10px;
padding-bottom: 12px;
font-size: 12px;
color: #555;
font-weight: bold;
}
/*侦察请求状态样式*/
.clsTip {
position: absolute;
width: 160px;
text-align: center;
font-szie: 13px;
border: solid 1px #cc3300;
padding: 2px;
margin-bottom: 5px;
backgrou-color: #ffe0a3;
}
用于响应客户端请求，并处理数据的服务器端页面AddData.aspx，其实现代码：
<%@ Page Language="#C" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Xml" %>
<%@ Import Namespace="System.IO"%>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["name"]); //解码点评用户名称
string strContent = System.Web.HttpUtility.UrlDecode(Request["content"]); //解码点评提交内容
string strFileName = "CommentData.xml";
//定义xml文档变量
XmlDocument xmlDoc = new XmlDocument();
//打开指定的XML文档
XmlDoc.Load(Server.MapPath(strFileName));
//查找根节点元素
XmlNode xmlN = xmlDoc.SelectSingleNode("Comment");
//加入一个节点元素
XmlElement xmlE = xmlDoc.CreateElement("Data");
//创建一个子节点
XmlElement xmlEn = xmlDoc.CreateElement("name");
//设置节点文本
xmlEn,InnerText = strName;
//添加到节点中
xmlE.AppendChild(xmlEn);
//创建一个节点
XmlElement xmlEc = xmlDoc.CreateElement("content");
//设置节点文本
xmlEc.InnerText = strContent;
//添加到节点中
xmlE.AppendChild(xmlEc);
//创建一个子节点
XmlElement xmlEd = xmlDoc.CreateElement("date");
//获取时间的时分秒
string strSendTime = DateTime.Now.Hour + ":" + DateTime.Now.Minute + ":" + DateTime.Now.Second;
xmlEd.InnerText = strSendTime;
//添加到节点中
xmlE.AppendChild(xmlEd);
//将节点加入根节点中
xmlN.AppendChild(xmlE);
//保存创建好的XML文件
xmlDoc.Save(Sever.MapPath(strFileName));
Response.Write("您的点评已成功发表！");
%>
jQuery常用插件
jQuery插件概述
插件是以jQuery的核心代码为基础，编写出符合一定规范的应用程序，并将程序进行打包，调用时，仅需要包含该打包后的JS文件即可。如需要使用表单插件，按下列步骤就可以实现插件的调用。
第一步：在页面中导入包含表单插件的JS文件，并确定它位于主jQuery库后，其代码如下：
<head>
<script type="text/javascript" sec="Jscript/jquery-1.4.2.js">
</script>
<script type="text/javascript" src="Jscript/jquery.from.js">
</script>
</head>
第二步：在JS文件或者页面JS代码中，编号如下代码，便完成了插件的调用:
$(function(){
$("form").ajaxSubmit();
})
代码中.ajaxSubmit()就是调用插件中的方法，其作用就是获取表单中的字段值，向服务器发送请求。
验证插件validate
validate是一个十分优秀的表单验证插件之一。
1）自带验证规则：其中包含必填，数字，URL等众多验证规则。
2）验证信息提示：可以使用默认的提示信息，也可以自定义提示信息，覆盖默认的内容
3）多种事件触发：不仅在表单提交时触发验证，而且在“keyup”或“blur”事件中也能触发。
4）允许自定义验证规则，除使用自带的验证规则外，开发者还可以很方便的自定义验证规则。
示例 验证插件的使用
- 插件文件
Js-7-1/jquery.validate.js
Js-7-1/jquery.validate.messages_cn.js
- 下载地址
3）功能描述
在页面中，创建一个表单标记，ID号为“frmV”，在表单中设置两个文本框，一个用于输入“姓名”，另一个用于输入“邮箱”，当单击“提交”按钮，提交表单数据时，通过validate插件，根据设置的验证规则，检测表单中的各个字段元素。
4）实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>validate验证插件</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Js-7-1/jquery.validate.js"></script>
<script type="text/javascript" src="Js-7-1/jquery.validate.messages_cn.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function () {
$("#frmV").validate({
//自定义验证规则
rules:{
username:{required:true,minLength:6},
email:{required:true,email:true}
},
//错误提示位置
errorPlacement:function (error,element) {
error.appendTo(element.siblings("span"));
}
})
})
</script>
</head>
<body>
<form id="frmV" method="get" action="#">
<div class="divFrame">
<div class="divTitle">
请输入下列资料
</div>
<div class="divContent">
<div>
用户名：<br/>
<input id="username" name="username" type="text" class="txt" />
<font color="red">*</font><br/>
<span></span>
</div>
<div>
邮箱：<br/>
<input id="email" name="email" type="text" class="txt" />
<font color="red">*</font><br/>
<span></span>
</div>
</div>
<div class="divBtn">
<input id="sbtUser" type="submit" value="提交" class="btn" />
</div>
</div>
</form>
</body>
</html>
由于validate验证插件默认的提示信息是英文版的，因此为了汉化验证提示信息，需要页面部分引用一个中文验证信息库，其代码如下：
<script type="text/javascript" src="Js-7-1/jquery.validate.messages_cn.js"></script>
表单插件form
form插件是专门为页面的表单而设计的，引入该插件后，通过调用ajaxForm()或ajaxSubmit()两个方法，可以很容易实现ajax方式提交数据，并通过方法中的option对象，设置参数，获取服务器返回的数据，同时，该插件还包含一些重要的方法。
1）formSerialize():用于格式化表单中有用的数据，并将其自动整理成适合Ajax异步请求的URL地址格式。
2）clearForm()：清除表单中所有输入值的内容。
3）restForm()：重置表单中所有的字段内容，即将所有表单中的字段内容都恢复到页面加载时的默认值。
表单插件的使用
1）.插件文件
Js-7-2/jquery.form.js
- 功能描述
在页面中创建一个ID号为“frmUserInfo”的表单，在表单中新建一个文本框，用于输入“用户名”，新建一个密码文本框，用于输入“密码”，当单击“提交”按钮后，将服务器文件Login.aspx发送请求，提交表单中的各个元素值，服务器响应请求，将返回的内容显示在id号为“divData”页面元素中。
3）实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单插入</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Js-7-2/jquery.form.js"></script>
<style type="text/css"></style>
<script type="text/javascript">
$(function () {
//定义一个表单提交时的对象
var options = {
//默认为form中的action，设置后便覆盖默认值
url:"Login.aspx",
//将服务器返回的数据显示在id号为divData元素中
target:"#divData"
}
//以AJAX的方式提交表单
$("#frmUserInfo").ajaxForm(options);
})
</script>
</head>
<body>
<form id="frmUserInfo" method="get" action="#">
<div class="divFrame">
<div class="divTitle">
用户登录
</div>
<div class="divContent">
<div>
用户名：<br/>
<input id="username" name="username" type="text" class="txt"/>
</div>
<div>
密码：<br/>
<input id="userpass" name="userpass" type="password" class="txt"/>
</div>
</div>
<div class="divBtn">
<input id="sbtUser" type="submit" value="提交" class="btn"/>
</div>
<div id="divData">
</div>
</div>
</form>
</body>
</html>
服务器端文件Login.aspx的代码如下列清单所示：
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = Request["username"]; //姓名字符
string strPass = Request["userpass"]; //密码字符
string strRetValue = "用户名："+strName+"<br/>密码："+strPass;
Response.Write(strRetValue);
%>
4）代码说明
在导入form表单插件后，提交数据变得十分轻松,进一行代码：
$("#frmUserInfo").ajaxForm();
这行代码也等于如下代码：
$("#frmUserInfo").submit(function(){
$("#frmUserInfo").ajaxSubmit();
return false;
})
表单插件form中的ajaxForm()与ajaxSubmit()方法中，即可以没有参数，也能传递1个参数，该参数即可以是一个回调函数，也可以是一个option对象，通过该对象可以实现更多的互动功能，该对象常用的属性如下所示:
var options = {
url:url, //formt提交数据的地址
type:type, //form提交的方式
target:target, // 显示服务器返回数据的元素id号
beforeSubmit:function(), //提交前执行的回调函数
success:function(), //提交成功后执行的回调函数
dataType:ull， //服务器返回的数据类型
clearForm:true, //提交成功后，清空表单中的字段值
restForm:true， //提交成功后，重置表单中的字段值
timeout:6000, //设置请求时间，超过该时间后，自动推出请求，单位（毫秒
}
Cookie插件cookie
在jQuery中，引入cookie插件后，可以很方便的定义某个人cookie名称，并设置cookie值，通过设置好的cookie，可以很遍历地保存用户地页面浏览记录，在用户选择保存的情况下，还可以保存用户的登录信息。
cookie插件的使用
1）插件文件
Js-7-3/jquery.cookie.js
2）下载地址
3）功能描述
在上个示例中，在增加一个是否保存用户名的复选框，当选中复选框时，单击提交按钮，将完成cookie的设置，当重新打开浏览器时，由于使用了cookie保存用户名，因此，在用户名文本框中，显示上次登录的用户名，如果输入用户名后，不选中复选框，则单击提交按钮，将销毁已存在的cookie对象。
4）实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单插入</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Js-7-3/jquery.cookie.js"></script>
<style type="text/css"></style>
<script type="text/javascript">
$(function () {
if ($.cookie("UserName")){
//如果有值，则显示在文本框中
$("#UserName").val($.cookie("UserName"));
}
$("#sbtUser").submit(function () {
//表单提交事件
//如果选中了保存用户名项
if($("#chkSave").attr("checked")){
//设置cookie值
$.cookie("UserName",$("#UserName").val(),{
path:"/",expires:7
})
}
else {
//销毁cookie值
$.cookie("UserName",null,{
path:"/"
})
}
return false; //表单不提交
})
})
</script>
</head>
<body>
<form id="frmUserInfo" method="get" action="#">
<div class="divFrame">
<div class="divTitle">
用户登录
</div>
<div class="divContent">
<div>
用户名：<br/>
<input id="UserName" name="UserName" type="text" class="txt"/>
</div>
<div>
密码：<br/>
<input id="UserPass" name="UserPass" type="password" class="txt"/>
</div>
<div>
<input id="chkSave" type="checkbox"/>
是否保存用户名
</div>
</div>
<div class="divBtn">
<input id="sbtUser" type="submit" value="提交" class="btn"/>
</div>
<div id="divData">
</div>
</div>
</form>
</body>
</html>
搜索插件AutoComplete
在jQuery中，引入该插件后，用户在使用文本框搜索信息时，使用插件中的autocomplete方法绑定文本框，当文本框中输入某个字符时，通过该方法中的指定的数据URL，返回相匹配的数据，自动显示在文本框下，提醒用户进行选择。
搜索插件的使用
1）插件文件
Js-7-4/jquery.autocomplete.js
Css-7-4/jquery.autocomplete.css
Images-7-4/indicator.gif
2）功能描述
在页面中，创建一个文本框，用于输入查询信息，当在文本框中输入字符时，通过autocomplete插件，绑定设置好的数组信息，并与文本框中的字符匹配，将匹配后的结果序列化后，展示在文本框的底部，供用户选择。
3）实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单插入</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Js-7-4/jquery.autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="Css-7-4/jquery.autocomplete.css" />
<style type="text/css"></style>
<script type="text/javascript">
$(function () {
var arrUserName = ["张三","王小五","长得","速度","张大富","里斯","完给","杰克","肉丝","丽丽","玛丽","爱迪达","阿德","表格","微软"];
$("#txtSearch").autocomplete(arrUserName,{
minChars:0 //双击空白文本框时显示全部提示数据
});
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
搜索用户
</div>
<div class="divContent">
<span style="padding: 0 5px 0 10px"><a href="#">新闻</a></span>
<span style="padding: 0 5px 0 5px"><b>用户</b></span>
<div>
<input type="text" id="txtSearch" class="txt" />
<input type="button" id="btnSearch" value="查一下" class="btn" />
</div>
</div>
</div>
</body>
</html>
图片灯箱插件
Notesforlightbox是一个基于jQuery基础开发的图片放大浏览插件，它支持大部分浏览器，
1.以圆角的方式展示选中的图片
2.以按钮样式查看上一张或下一张图片
3.加载图片时带有进度条，显示加载进度
4.可以采用自动播放的方式浏览图片
5.多个样式属性可以随意设置
图片灯箱插件的使用
1）插件文件
Js-7-5/jquery.notesforlightbox.js
Css-7-5/jquery.notesforlightbox.css
Images-7-5/全部图片
Pic-7-5/全部图片
2）功能描述
在页面中，以列表的方式，展示某个相册中的全部图片，当用户单击其中某张图片时，通过引入的noteforlightbox插件，采用“灯箱”式显示所选中的图片。
3）实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单插入</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Js-7-5/jquery.notesforlightbox.js"></script>
<link rel="stylesheet" type="text/css" href="Css-7-5/jquery.notesforlightbox.css"/>
<style type="text/css"></style>
<script type="text/javascript">
$(function () {
$(".divPics a").lightBox({
overlayBgColor:"#666", //浏览图片时的背景色
overlayOpacity:0.5, //背景色的透明度
containerResizeSpeed:600 //图片切换时的速度
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
我的相册
</div>
<div class="divContent">
<div class="divPics">
<ul>
<li><a href="Image/a1.gif" title="第一张风景图片"><img src="Image/a1.gif" alt=""/></a></li>
</ul>
<ul>
<li><a href="Image/a5.jpg" title="第一张风景图片"><img src="Image/a5.jpg" alt=""/></a></li>
</ul>
<ul>
<li><a href="Image/a4.jpg" title="第一张风景图片"><img src="Image/a4.jpg" alt=""/></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
右键菜单插件contextmenu
contextmenu是一款轻量型，功能完善的插件，利用该插件可以在页面的任何位置，设置一个触发右键事件的元素，当选中该元素，单击鼠标右键时，通过插件中的contextMenu方法，弹出一个设计精美快捷菜单，
1）可以在同一个页面中设置多个不同样式的菜单
2）一个菜单可以绑定页面中的多个元素
3）可随意设置菜单样式
4）轻松访问与绑定菜单中的各选项
右键菜单插件的使用
1）插件文件
Js-7-6/jquery.contextmenu.js
Css-7-6/jquery.contextmenu.css
Images-7-6/全部图片
2）功能描述
在页面中，创建一个文本编辑框，选中该文本框，单击鼠标右键，弹出一个设置好的快捷菜单，单击菜单选项时，显示所选择的选项内容。
3）实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单插入</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Js-7-6/jquery.contextmenu.js"></script>
<link rel="stylesheet" type="text/css" href="Css-7-6/jquery.contextmenu.css"/>
<style type="text/css"></style>
<script type="text/javascript">
$(function () {
$("#txtContent").contextMenu("sysMenu",{
bindings:{
"Li1":function (Item) {
alert("在id号为："+Item.id+"编辑框中，您点击了新建项");
},
"Li2":function (Item) {
alert("在id号为："+Item.id+"编辑框中，您点击了打开项");
},
"Li3":function (Item) {
alert("在id号为："+Item.id+"编辑框中，您点击了保存项");
},
"Li4":function (Item) {
alert("在id号为："+Item.id+"编辑框中，您点击了退出项")
}
}
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">点击右键</div>
<div class="divContent">
<textarea id="txtContent" cols="30" rows="5"></textarea>
</div>
</div>
<div class="contextMenu" id="sysMenu">
<ul>
<li id="Li1"><img src="Image/a4.jpg" />新建</li>
<li id="Li2"><img src="Image/a5.jpg" />打开</li>
<li id="Li3"><img src="Image/a1.gif" />保存</li><hr/>
<li id="Li4"><img src="Image/a8.jpg" />退出</li>
</ul>
</div>
</body>
</html>
图片放大镜插件jqzoom
jqzoom是一款基于jQuery库的图片放大插件，在页面中实现放大的方法是：先准备2张一大一小的相同图片，在页面打开时，展示小图片，当鼠标在小图片的任意位置移动时，调用插件中的jqzoom方法，绑定另外一张相同的大图片，在指定位置显示与小图片所选区域相同的大图片区域，从而实现逼真的放大效果。
图片放大镜插件的使用
1）插件文件
Js-7-7/jquery.jqzoom.js
Css-7-7/jquery.jqzoom.css
2）功能描述
在页面中，放置一张图片，当鼠标在图片中移动时，出现一块选择区域，在图片的右边，显示放大后的所选区域
3）实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单插入</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Js-7-6/jquery.jqzoom.js"></script>
<link rel="stylesheet" type="text/css" href="Css-7-6/jquery.jqzoom.css"/>
<style type="text/css"></style>
<script type="text/javascript">
$(function () {
$("#jqzoom").jqzoom(
//绑定图片放大插件jqzoom
{
zoomWidth:230,
zoomHeight:230
}
);
});
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
图片放大镜
</div>
<div class="divContent">
<a href="Image/a8.jpg" id="jqzoom" title="我的图片">
<img src="Image/a2.gif" />
</a>
</div>
</div>
</body>
</html>
jQuery自定义插件
插件的种类：封装方法插件，封闭函数插件，选择器插件。
1）封装方法插件
是一个对象级别的插件，该类插件首选通过jQuery选择器获取对象，并为对象添加方法，然后，将方法进行打包，封装成一个插件，这种类型的插件编写简单，容易调用。
2）封闭函数插件
封闭函数插件是一个现象级别的插件，该插件最大的特点是可以直接给jQuery添加静态方法，并且可以将函数置于jQuery命名空间中，如最为常见地$.ajax() $.trim()全局性函数，都是以内部插件的形式植入jQuery内核中。
对象级插件的开发
1）功能描述
在列表ul元素中，鼠标在表项li元素移动时，可以自定义其获取焦点focus时的背景颜色，即设置表项li元素选中时的背景色。
2）搭建框架
新建一个js文件，命名为jquery.lifocuscolor.js，并在文件中使用$.fn.extend()方法完成框架的搭建，其实现的代码如下：
/*----------------------------/
功能：设置列表中表项获取鼠标焦点时的背景色
参数：li_col【可选】鼠标所在表项行的背景色
返回：原调用对象
示例：$("ul").focusColor("red");
/---------------------------------*/
;(function ($) {
$.fn.extend({
"yourPluginName":function (param_value) {
//各种默认属性或参数的设置
this.each(function () {
//插件实现的代码
})
}
})
})(jQuery);
3）代码编写
;(function ($) {
$.fn.extend({
"focusColor":function (li_col) {
var def_col = "#ccc"; //默认获取焦点的色值
var lst_col = "#fff"; //默认丢失焦点的色值
//如果设置的颜色值不为空，使用设置的颜色，否则为默认色
li_col = (li_col == undefined)?def_col:li_col;
//遍历表项li中的全部元素
$(this).find("li").each(function () {
//获取鼠标焦点事件
$(this).mouseover(function () {
$(this).css("background-color",li_col); //使用设置的颜色
})
.mouseout(function () {
//鼠标焦点移除事件
$(this).css("background-color","#fff"); //恢复原来的颜色
})
});
return $(this); //返回jquery对象，保持链式操作
}
});
})(jQuery);
4）引用插件
创建一个html文件，添加代码
<script type="text/javascript" src="Plugin/jquery.lifocuscolor.js"></script>
<script type="text/javascript">
$(function(){
$("#ul").focusColor(); //调用自定义的插件
//$("#ul").focusColor("red");
})
</script>
类级别插件的开发
1）功能描述
新增两个类级别的全局函数，分别用于计算两数字和与两数之差，并将结果返回调用的页面中。
2）搭建框架
新建一个js文件，命名为jquery.twoaddresult.js，并在文件中，使用$.extend()方法完成框架的搭建，其实现的代码如下：
/*----------------------------/
功能：计算两个数字相加或相减的结果
参数：数字p1，p2
返回：两数相加后的结果
示例：$.AddNum(1,2);
/---------------------------------*/
;(function ($) {
$.extend({
"yourPluginName":function (pram_value) {
//插件实现的代码
}
});
})(jQuery);
3）代码编写
/*----------------------------/
功能：计算两个数字相加或相减的结果
参数：数字p1，p2
返回：两数相加后的结果
示例：$.AddNum(1,2);
/---------------------------------*/
;(function ($) {
$.extend({
"addNum":function (p1,p2) {
//如果传入的数字不为空，使用传入的数字，否则为0
p1 = (p1 == undefined)?0:p1;
p2 = (p2 == undefined)?0:p2;
var intResult = parseInt(p1) +parseInt(p2);
return intResult;
},
"subNum":function (p1,p2) {
//如果传入的数字不为空，使用传入的数字，否则为0
var intResult = 0;
p1 = (p1 == undefined)?0:p1;
p2 = (p2 == undefined)?0:p2;
if (p1>p2){
//如果传入的参数前者大于后者
intResult = parseInt(p1) - parseInt(p2);
}
return intResult;
}
});
})(jQuery);
综合案例分析-使用uploadify插件实现文件上传功能
需求分析
1）可以选择上传的文件类型，限制上传文件的大小，实现单个或多个文件同时上传功能，在上传过程中显示文件上传进度比例信息。
2）文件成功上传后，如果是图片文件，则可以进行图片预览功能
3）无论是单个或多个文件成功上传后，可删除其队列中的某一个文件。
功能实现
- 插件下载
Js/jquery.uploadify.v2.1.0.js
Js/swfobject.js
Css/uploadify.css
2）插件使用
$(".divPics a").lightBox({
overlayBgColor:"#666", //浏览图片时的背景色
overlayOpacity:0.5, //背景色的透明度
containerResizeSpeed:600 //图片切换时的速度
})
})
</script>
<ul>
<li><a href="Image/a5.jpg" title="第一张风景图片"><img src="Image/a5.jpg" alt=""/></a></li>
</ul>
<ul>
<li><a href="Image/a4.jpg" title="第一张风景图片"><img src="Image/a4.jpg" alt=""/></a></li>
</ul>
</div>
</div>
右键菜单插件contextmenu
contextmenu是一款轻量型，功能完善的插件，利用该插件可以在页面的任何位置，设置一个触发右键事件的元素，当选中该元素，单击鼠标右键时，通过插件中的contextMenu方法，弹出一个设计精美快捷菜单，
1）可以在同一个页面中设置多个不同样式的菜单
2）一个菜单可以绑定页面中的多个元素
3）可随意设置菜单样式
4）轻松访问与绑定菜单中的各选项
右键菜单插件的使用
1）插件文件
Js-7-6/jquery.contextmenu.js
Css-7-6/jquery.contextmenu.css
Images-7-6/全部图片
2）功能描述
在页面中，创建一个文本编辑框，选中该文本框，单击鼠标右键，弹出一个设置好的快捷菜单，单击菜单选项时，显示所选择的选项内容。
3）实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单插入</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Js-7-6/jquery.contextmenu.js"></script>
<link rel="stylesheet" type="text/css" href="Css-7-6/jquery.contextmenu.css"/>
<style type="text/css"></style>
<script type="text/javascript">
$(function () {
$("#txtContent").contextMenu("sysMenu",{
bindings:{
"Li1":function (Item) {
alert("在id号为："+Item.id+"编辑框中，您点击了新建项");
},
"Li2":function (Item) {
alert("在id号为："+Item.id+"编辑框中，您点击了打开项");
},
"Li3":function (Item) {
alert("在id号为："+Item.id+"编辑框中，您点击了保存项");
},
"Li4":function (Item) {
alert("在id号为："+Item.id+"编辑框中，您点击了退出项")
}
}
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">点击右键</div>
<div class="divContent">
<textarea id="txtContent" cols="30" rows="5"></textarea>
</div>
</div>
<div class="contextMenu" id="sysMenu">
<ul>
<li id="Li1"><img src="Image/a4.jpg" />新建</li>
<li id="Li2"><img src="Image/a5.jpg" />打开</li>
<li id="Li3"><img src="Image/a1.gif" />保存</li><hr/>
<li id="Li4"><img src="Image/a8.jpg" />退出</li>
</ul>
</div>
</body>
</html>
图片放大镜插件jqzoom
jqzoom是一款基于jQuery库的图片放大插件，在页面中实现放大的方法是：先准备2张一大一小的相同图片，在页面打开时，展示小图片，当鼠标在小图片的任意位置移动时，调用插件中的jqzoom方法，绑定另外一张相同的大图片，在指定位置显示与小图片所选区域相同的大图片区域，从而实现逼真的放大效果。
图片放大镜插件的使用
1）插件文件
Js-7-7/jquery.jqzoom.js
Css-7-7/jquery.jqzoom.css
2）功能描述
在页面中，放置一张图片，当鼠标在图片中移动时，出现一块选择区域，在图片的右边，显示放大后的所选区域
3）实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单插入</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Js-7-6/jquery.jqzoom.js"></script>
<link rel="stylesheet" type="text/css" href="Css-7-6/jquery.jqzoom.css"/>
<style type="text/css"></style>
<script type="text/javascript">
$(function () {
$("#jqzoom").jqzoom(
//绑定图片放大插件jqzoom
{
zoomWidth:230,
zoomHeight:230
}
);
});
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
图片放大镜
</div>
<div class="divContent">
<a href="Image/a8.jpg" id="jqzoom" title="我的图片">
<img src="Image/a2.gif" />
</a>
</div>
</div>
</body>
</html>
jQuery自定义插件
插件的种类：封装方法插件，封闭函数插件，选择器插件。
1）封装方法插件
是一个对象级别的插件，该类插件首选通过jQuery选择器获取对象，并为对象添加方法，然后，将方法进行打包，封装成一个插件，这种类型的插件编写简单，容易调用。
2）封闭函数插件
封闭函数插件是一个现象级别的插件，该插件最大的特点是可以直接给jQuery添加静态方法，并且可以将函数置于jQuery命名空间中，如最为常见地$.ajax() $.trim()全局性函数，都是以内部插件的形式植入jQuery内核中。
对象级插件的开发
1）功能描述
在列表ul元素中，鼠标在表项li元素移动时，可以自定义其获取焦点focus时的背景颜色，即设置表项li元素选中时的背景色。
2）搭建框架
新建一个js文件，命名为jquery.lifocuscolor.js，并在文件中使用$.fn.extend()方法完成框架的搭建，其实现的代码如下：
/*----------------------------/
功能：设置列表中表项获取鼠标焦点时的背景色
参数：li_col【可选】鼠标所在表项行的背景色
返回：原调用对象
示例：$("ul").focusColor("red");
/---------------------------------*/
;(function ($) {
$.fn.extend({
"yourPluginName":function (param_value) {
//各种默认属性或参数的设置
this.each(function () {
//插件实现的代码
})
}
})
})(jQuery);
3）代码编写
;(function ($) {
$.fn.extend({
"focusColor":function (li_col) {
var def_col = "#ccc"; //默认获取焦点的色值
var lst_col = "#fff"; //默认丢失焦点的色值
//如果设置的颜色值不为空，使用设置的颜色，否则为默认色
li_col = (li_col == undefined)?def_col:li_col;
//遍历表项li中的全部元素
$(this).find("li").each(function () {
//获取鼠标焦点事件
$(this).mouseover(function () {
$(this).css("background-color",li_col); //使用设置的颜色
})
.mouseout(function () {
//鼠标焦点移除事件
$(this).css("background-color","#fff"); //恢复原来的颜色
})
});
return $(this); //返回jquery对象，保持链式操作
}
});
})(jQuery);
4）引用插件
创建一个html文件，添加代码
<script type="text/javascript" src="Plugin/jquery.lifocuscolor.js"></script>
<script type="text/javascript">
$(function(){
$("#ul").focusColor(); //调用自定义的插件
//$("#ul").focusColor("red");
})
</script>
类级别插件的开发
1）功能描述
新增两个类级别的全局函数，分别用于计算两数字和与两数之差，并将结果返回调用的页面中。
2）搭建框架
新建一个js文件，命名为jquery.twoaddresult.js，并在文件中，使用$.extend()方法完成框架的搭建，其实现的代码如下：
/*----------------------------/
功能：计算两个数字相加或相减的结果
参数：数字p1，p2
返回：两数相加后的结果
示例：$.AddNum(1,2);
/---------------------------------*/
;(function ($) {
$.extend({
"yourPluginName":function (pram_value) {
//插件实现的代码
}
});
})(jQuery);
3）代码编写
/*----------------------------/
功能：计算两个数字相加或相减的结果
参数：数字p1，p2
返回：两数相加后的结果
示例：$.AddNum(1,2);
/---------------------------------*/
;(function ($) {
$.extend({
"addNum":function (p1,p2) {
//如果传入的数字不为空，使用传入的数字，否则为0
p1 = (p1 == undefined)?0:p1;
p2 = (p2 == undefined)?0:p2;
var intResult = parseInt(p1) +parseInt(p2);
return intResult;
},
"subNum":function (p1,p2) {
//如果传入的数字不为空，使用传入的数字，否则为0
var intResult = 0;
p1 = (p1 == undefined)?0:p1;
p2 = (p2 == undefined)?0:p2;
if (p1>p2){
//如果传入的参数前者大于后者
intResult = parseInt(p1) - parseInt(p2);
}
return intResult;
}
});
})(jQuery);
综合案例分析-使用uploadify插件实现文件上传功能
需求分析
1）可以选择上传的文件类型，限制上传文件的大小，实现单个或多个文件同时上传功能，在上传过程中显示文件上传进度比例信息。
2）文件成功上传后，如果是图片文件，则可以进行图片预览功能
3）无论是单个或多个文件成功上传后，可删除其队列中的某一个文件。
功能实现
- 插件下载
Js/jquery.uploadify.v2.1.0.js
Js/swfobject.js
Css/uploadify.css
2）插件使用
13万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
