十一、jquery动画show,slideUp,fadeIn,fadeTo等对比
jquery的动画方法：
1.显示与隐藏
show([数值/预设],[fn])和hide([数值/预设],[fn])和toggle([数值/预设])，这些方法的实质其实就是设置display属性
2.向上滑动与向下展开
slideUp([数值/预设],[fn])和slideDown([数值/预设],[fn])和slideToggle([数值/预设])
3.淡入与淡出
fadeIn([数值/预设],[fn])和fadeOut([数值/预设],[fn])和fadeToggle([数值/预设])
以上三组的参数可以是毫秒数或者预设的fast(200ms) normal(400ms) slow(600ms)或者为空(normal).预设：slow normal(相当于400ms) fast，fn回调函数是前边效果出来后再被调用的，是异步的列队(串联)效果
4.fadeTo(数值/预设,opacity,[fn])
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
注意：opacity取值介于0-1之间，0.43表示褪色到43%的透明度。
我们看下边这个例子，演示了这些方法的用法，动态效果图见下方：
首先通过html和css定义要操作的红色方块：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
<style>
#div1{
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div id="div1">
</div>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="toggle">自动显示与隐藏</button>
<button id="slideUp">向上折叠</button>
<button id="slideDown">向下展开</button>
<button id="slideToggle">自动折叠与展开</button>
<button id="fadeIn">淡入</button>
<button id="fadeOut">淡出</button>
<button id="fadeToggle">自动淡入与淡出</button>
<button id="fadeTo">透明度到</button>
<button id="multi">连着一起写</button>
</body>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</html>
jquery动画相关的方法代码：
<script type="text/javascript">
$(function(){
$("#show").click(function(){
//$("#div1").show(500);
//$("#div1").show("slow");
$("#div1").show(400);
});
$("#hide").click(function(){
//$("#div1").hide(500);
$("#div1").hide("fast");
});
function toggleCall(){
$("#div1").toggle(3000,toggleCall);//3秒后再调用自己
}
$("#toggle").click(function(){
$("#div1").toggle(3000);
//$("#div1").toggle("fast");
//toggleCall();
});
$("#slideUp").click(function(){
//$("#div1").slideUp(500);
$("#div1").slideUp("slow");
});
$("#slideDown").click(function(){
//$("#div1").slideDown(500);
$("#div1").slideDown("fast");
});
$("#slideToggle").click(function(){
//$("#div1").slideToggle(500);
$("#div1").slideToggle("fast");
});
$("#fadeIn").click(function(){
//$("#div1").fadeIn(500);
// $("#div1").fadeIn("slow");
$("#div1").fadeIn(1500);
});
$("#fadeOut").click(function(){
//$("#div1").fadeOut(500);
$("#div1").fadeOut("fast");
});
$("#fadeToggle").click(function(){
//$("#div1").fadeToggle(500);
$("#div1").fadeToggle("fast");
});
$("#fadeTo").click(function(){
$("#div1").fadeTo(500,0.3);
});
$("#multi").click(function(){
$("#div1").fadeOut(1000).slideDown(1000);
});
});
</script>十二、jquery自定义动画animate以及stop、finish、clearQueue、delay方法
jquery自定义动画animate以及stop、finish、clearQueue、delay方法，这几个方法都是跟动画相关的，特别是自定义动画用到的概率还是相当大的，我们先看下他们的介绍，之后再来举举例子，纸上得来终觉浅，绝知此事要躬行才是硬道理。
自定义动画animate的格式：
animate(param,[speed],[easing],[fn])
animate参数解释：
param:{},键值对，一组属性和其值的集合，所有指定的属性(数字类)必须用驼峰表示法的形式，比如用marginLeft代替margin-left. 如果有多个属性，这里的改变是同步(并联)动画效果的，就是width、font-size同时发生改变，而不是像我们前边讲的异步效果，这点是自定义动画animate的亮点所在，要想自定义的动画具有列队的效果，可以使用连缀调用多次或者在fn中嵌套调用。
speed:预设或数值，数值类型
easing:linear 或者swing
fn:同预定义动画一样也是在动画执行完成后触发
stop([clearQueue],[jumpToEnd]):
同步（并联）的动画，stop()后就停在那里了，再次点击时从停止的状态开始继续改变。列队（串联）的动画效果，stop()后只是停止的当前正在执行的动画，后边的动画会继续执行。
clearQueue():
继续执行完当前正在执行的,并从动画队列中移除所有未执行项
delay(duration)：
设置一个延时来推迟执行队列中之后的动画
finish():
停止当前，移除所有未执行项，完成所有的动画
我举个例子，界面效果如下：
你可以点击不同的按钮来看看它的效果，并在代码中观察它是如何进行编写的，一一对应起来，下面是代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义动画</title>
<style>
*{
margin:0;
padding:0;
}
#div1{
width:100px;
height:100px;
background:red;
position:absolute;
margin-left:100px;
font-size:12px;
}
</style>
</head>
<body>
<div>
<button id="animate">自定义同步动画</button>
<button id="animate_chuanlian">自定义串联动画</button>
<button id="animate_chuanlian2">自定义串联动画第二种实现方式</button>
<button id="animate_effect">效果</button>
<button id="left">向左移动300px</button>
<button id="left2">不断向左移动300px</button>
<h3>clearQueue</h3>
<button id="dongqilai">动起来</button> <button id="clearQueue">clearQueue</button>
<button id="finish">finish</button> <button id="stop">stop</button>
</div>
<div id="div1">自定义动画</div>
</body>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</html>
涉及的jquery自定义动画相关的animate以及stop、finish、clearQueue、delay方法的javascript处理代码：
<script type="text/javascript">
$(function(){
//自定义同步动画
$("#animate").click(function(){
$("#div1").animate({
width:"300px",
height:"400px",
opacity:0.6,
fontSize:"40px"
});
});
//连缀调用多次实现自定义动画的列队效果
$("#animate_chuanlian").click(function(){
$("#div1").animate({
width:"300px"
}).animate({
height:"400px"
}).animate({
opacity:0.6
}).animate({
fontSize:"40px"
})
});
//在fn中实现自定义动画的列队效果
$("#animate_chuanlian2").click(function(){
$("#div1").animate({
width:"300px"
},function(){
$("#div1").animate({
height:"400px"
},function(){
$("#div1").animate({
opacity:0.6
},function(){
$("#div1").animate({
fontSize:"40px"
});
});
});
});
});
//easing参数控制动画效果:好像不起效果
$("#animate_effect").click(function(){
$("#div1").animate({
width:[300,"linear"],
height:[400,"swing"],
opacity:0.6,
fontSize:"40px"
},2000,"linear");
});
//动起来
$("#dongqilai").click(function(){
$("#div1").animate({
width:"300px",
height:"400px",
opacity:0.6,
fontSize:"40px"
},4000).delay(3000);
$("#div1").animate({
width:"100px",
height:"100px",
opacity:1,
fontSize:"12px"
},4000);
});
//当前正在执行的animate不会停止，如果后边还有就不会执行后边的了
$("#clearQueue").click(function(){
$("#div1").clearQueue();
});
$("#finish").click(function(){
$("#div1").finish();
});
$("#stop").click(function(){
$("#div1").stop();
});
$("#left").click(function(){
/*
$("#div1").animate({
left:"300px"
});
*/
$("#div1").animate({
left:"300px"
},1000,function(){
alert("动画效果执行完后执行我")
});
$("#div1").animate({
left:"300px"
},function(){
alert("动画效果执行完后执行我2")
});
});
$("#left2").click(function(){
$("#div1").animate({
left:"+=300px"
});
});
});
</script>
十三、利用jquery的show和hide动画方法制作闪屏效果
利用jquery的show和hide动画方法制作的闪屏效果如下：
实现的关键是使用jquery的show和hide动画方法就行了。先看看html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>闪屏效果</title>
<style>
.text{
width:30px;
height:30px;
line-height:30px;
margin-left:10px;
display:none;
padding:5px;
background:orange;
float:left;
}
</style>
</head>
<body>
<div class="text">利</div>
<div class="text">用</div>
<div class="text">show</div>
<div class="text">函</div>
<div class="text">数</div>
<div class="text">的</div>
<div class="text">回</div>
<div class="text">调</div>
<div class="text">实</div>
<div class="text">现</div>
<div class="text">闪</div>
<div class="text">屏</div>
<button id="Splash">闪屏显示</button>
<button id="Splash2">逐个隐藏</button>
</body>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</html>
jquery代码：
<script type="text/javascript">
$(function(){
$("#Splash").click(function(){
//回调函数是串联动画效果，要想实现并联动画效果，需要自定义动画
/*
$(".text").first().show("fast",function(){
$(this).next().show("fast",function(){
$(this).next().show("fast",function(){
alert("以此类推");
});
});
});*/
$(".text").first().show("fast",function showNext(){
$(this).next().show("fast",showNext);
});
});
$("#Splash2").click(function(){
$(".text").last().hide("fast",function hidePrev(){
$(this).prev().hide("fast",hidePrev);
});
});
});
</script>
十四、再说jquery控制动画的方法stop
前边说jquery里面animate自定义动画的时候，把stop与delay等相关方法连带着一起也给写了，总觉得有点太过轮廓化，这里我再专门把这个stop方法拎出来单独说一下。首先，再复习一下这两个方法是怎么个意思：
stop([clearQueue],[jumpToEnd]):
同步的动画，stop()后就停在那里了，再次点击时从停止的状态开始继续改变。列队动画，stop()后只是停止的当前正在执行的动画，后边的动画会继续执行.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义动画</title>
<style>
*{
margin:0;
padding:0;
}
#div1{
width:100px;
height:100px;
background:red;
position:absolute;
}
</style>
</head>
<body>
<div>
<button id="animate">自定义同步动画</button>
<button id="stop">停止</button>
</div>
<div id="div1">自定义动画</div>
</body>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</html>
jquery代码：
<script type="text/javascript">
$(function(){
$("#animate").click(function(){
//同步（即多种属性同时发生改变，又叫并联）的动画，stop()后就停在那里了，
//再次点击时从停止的状态开始继续改变
/*
$("#div1").animate({
width:"300px",
height:"400px",
opacity:0.6,
fontSize:"40px"
},3000);
*/
//列队(即按书写代码的先后顺序依次发生改变，又叫串联)动画，stop()后只是停止的当前正在执行的动画，
//如下面执行到第二个改变高度的动画时点了stop按钮后就直接执行
//第三个和第四个动画了.要想让后边的动画也不执行，需要stop(true),true表示清除队列。
//调用stop()或者stop(true)第二个
//动画都是直接中断了，可以传入第二个参数stop(true,true)让当前正在执行的动画立即完成。
$("#div1").animate({width:"300px"},2000)
.animate({height:"400px"},2000)
.animate({opacity:0.6},2000)
.animate({fontSize:"40px"},2000);
});
$("#stop").click(function(){
//$("#div1").stop();
$("#div1").stop(true);
//$("#div1").stop(true,true);
});
});
</script>
界面展示是很简单的：
我尽量在讲解一个知识点的时候不掺杂其他知识点，这样更有针对性，我认为，不然看起来代码既多又没有重点了。
十五、jquery实现图片放大镜的效果
这个案例注定又是一个吊炸天的分享，就不王婆卖瓜，自卖自夸了，好不好还是您说了算。如果您正好看到了这篇文章教程，感觉确实还不错的话，就多多浏览点其他文章教程，顺便评论几个字吧，您的支持是我继续写下去的最大动力。
先看下效果,动态图太大，我就没截取动态图了，放了个静态图，大致效果就跟淘宝上面一样，当鼠标移动到左边图片上的时候，会出现网格状的纱布，被纱布覆盖的区域会再右边做相应的放大处理，同时跟随鼠标移动而移动的纱布只能出现在左边的图片区域：
有了上面的效果我们来看下，如何实现？
首先是一些必要的布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜效果</title>
<style type="text/css">
*{margin:0;padding:0}
body{background-color:#fff}
.container{
width:418px;
height:500px;
margin-top:100px;
margin-left:200px;
}
.toppart{width:418px;height:418px;position:relative;}
.toppart > img{width:100%;height:100%;border:0 none;}
.slider{
width:139px;/*这里设置为图片显示区域的三分之一*/
height:139px;
left:0;
top:0;
background:url(px.png) repeat;
position:absolute;
cursor:move;
display:none;
}
.zoomin{
width:418px;
height:418px;
position:absolute;
left:418px;
top:0;
overflow:hidden;
display:none;
}
.zoomin > img{
width:1254px;/*图片放大3倍*/
height:1254px;
margin-left:0;
margin-top:0;
}
ul{list-style:none;}
ul > li{width:60px;height:60px;float:left;margin:5px 0 0 15px;cursor:pointer;border:2px solid #454545;}
ul > li > img{width:100%;height:100%}
ul > .active{border-color:red}
</style>
</head>
<body>
<div class="container">
<div class="toppart">
<img src="1_big.jpg"><!-- 正常现实的图片 -->
<div class="slider"></div><!-- 滑块 -->
<div class="zoomin"><!-- 放大镜显示的图片 -->
<img src="1_big.jpg">
</div>
</div>
<ul ><!-- 图片显示列表 -->
<li class="active"><img src="1_small.jpg"></li>
<li><img src="2_small.jpg"></li>
<li><img src="3_small.jpg"></li>
<li><img src="4_small.jpg"></li>
<li><img src="5_small.jpg"></li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</body>
</html>
接下来也是最核心的使用jquery来进行处理了：
<script type="text/javascript">
$(function(){
/*鼠标移入上边事件*/
$(".toppart").mousemove(function(e){
$(".slider").css('display','block');
$(".zoomin").css('display','block');
var iX = e.pageX - $(this).offset().left - $(".slider").width()/2,
iY = e.pageY - $(this).offset().top - $(".slider").height()/2,
MaxX = $(this).width()-$(".slider").width(),
MaxY = $(this).height()-$(".slider").height(),
multiple=$(".zoomin").width()/$(".slider").width();
iX = iX > 0 ? iX : 0;
iX = iX < MaxX ? iX : MaxX;
iY = iY > 0 ? iY : 0;
iY = iY < MaxY ? iY : MaxY;
$(".slider").css({left:iX+'px',top:iY+'px'});
$(".zoomin img").css({marginLeft:-multiple*iX+'px',marginTop:-multiple*iY+'px'});
});
/*鼠标移出上边事件*/
$(".toppart").mouseleave(function(){
$(".slider").css('display','none');
$(".zoomin").css('display','none');
});
/*下方小图片列表点击，切换上方两个img的内容并改变小图片的边框样式*/
$("ul>li>img").click(function(){
var nowSrc = $(this).attr('src');
var reg=/\d+/g;
var nowSrcNum=reg.exec(nowSrc)[0];
$(".toppart").find("img").attr('src',nowSrcNum+"_big.jpg");
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
</script>
上面这些代码就是jquery实现图片放大镜特效的全部代码了。
十六、jquery的$(选择器).load(url, [data], [callback])方法
jquery的$(选择器).load(url, [data], [callback])方法即jquery的load方法是jquery ajax家族里面的一个，它的格式如下：
$(选择器).load(url, [data], [callback])
功能：载入远程html代码并插入到dom中，jquery里面与ajax相关的方法都是全局的(指的是可以直接通过$.xxxx调用)，只有load是局部的(指的是需要通过$(选择器)得到选择集之后用选择集来调用load)，比较特殊。
参数解释：
url：参数，后边可以加入选择器，但需要以空格与url隔开
data:当为对象时，为post提交方式
callback:回调函数
load函数一般用于静态文件的获取，不过也可以请求动态的地址
举例：
页面展现并点击页面上的按钮即执行后的效果如下图：
我们来看看关于jquery load方法的使用细节。
一、首先编写load.html的html代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义动画</title>
<style>
*{
margin:0;
padding:0;
}
#div1{
width:100px;
height:100px;
background:red;
position:absolute;
}
</style>
</head>
<body>
<div>
<button id="load0">load从服务器加载内容到指定区域</button>
<button id="load">load从服务器加载内容并过滤到指定区域</button>
<button id="get">以get方式发出请求</button>
<button id="post">以post方式发出请求</button>
<button id="post2">以post方式发出请求2</button>
</div>
<div id="loadArea_load0"></div>
<hr/>
<div id="loadArea_load"></div>
<hr/>
<div id="loadArea_get"></div>
<hr/>
<div id="loadArea_post"></div>
<hr/>
<div id="loadArea_post2"></div>
</body>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</html>
二、还是在load.html中继续编写load方法的测试案例：
<script type="text/javascript">
$(function(){
$("#load0").click(function(){
$("#loadArea_load0").load("toLoaded.html");
});
$("#load").click(function(){
$("#loadArea_load").load("toLoaded.html .div2");
});
$("#get").click(function(){
$("#loadArea_get").load("/testAjax/loadServlet?p=getMethod");
});
$("#post").click(function(){
$("#loadArea_post").load("/testAjax/loadServlet",{p:"post方式"});
});
$("#post2").click(function(){
$("#loadArea_post2").load("/testAjax/loadServlet",{p:"post方式"},function(response,status,xhr){
console.log(response);
console.log(status);//success或者error
console.log(xhr);//responseText responseXML readyState status
});
});
});
</script>
三、toLoaded.html的内容如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="div1">
这是将要被jquery的load函数加载的内容1
</div>
<div class="div2">
这是将要被jquery的load函数加载的内容2
</div>
</body>
</html>
四、后台的程序是由java实现的servlet：
package cn.zhao.test.handler;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class LoadServlet
*/
public class LoadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public LoadServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,
IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
String parameter = request.getParameter("p");
writer.println("这是从后台响应get方式的数据,传入的参数是"+parameter);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,
IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
String parameter = request.getParameter("p");
writer.println("这是从后台响应post方式的数据,传入的参数是"+parameter);
}
}
完成了。大家完全可以拷贝在自己机器上运行(要有java知识)，学习ajax的知识是需要具备一点服务端的知识的。
十七、jquery使用ajax方法发送ajax请求
jquery里面的ajax方法介绍
$.ajax(settings)是get和post的底层形式，可以代替前边的所有方法（$.get()、$.post()）。
参数解释：
settings:对象，以键值对的方式设置请求属性，常见写法如：
$.ajax({
async:true,//默认为true
type: "POST",
url: "some.php",
data:{},//或者data: "name=John&location=Boston",
success: function(res,status,xhr){
alert( res);
},
beforeSend:function(){},
errror:function(){},
dataType:”xml/html/json/script/jsonp”
});
当为get方式提交时传递参数的方式跟get函数一样，可以是加?也可以是以对象也可以是字符串，post方式提交时参数传递的方法可以是以对象也可以是字符串。
下面是一个例子：
一、编写ajax.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ajax函数</title>
<style>
*{
margin:0;
padding:0;
}
#div1{
width:100px;
height:100px;
background:red;
position:absolute;
}
</style>
</head>
<body>
<div>
<!-- $.post()也是这两种方式 -->
<button id="ajax1">ajax函数post方式以对象传递参数</button>
<button id="ajax1StrParam">ajax函数post方式以字符串传递参数</button>
<!-- $.get()也是这3种方式 -->
<button id="ajax2">ajax函数get方式以？传递参数</button>
<button id="ajax2Obj">ajax函数get方式以对象传递参数</button>
<button id="ajax2Str">ajax函数get方式以字符串传递参数</button>
</div>
<div id="area_ajax1"></div>
<hr>
<div id="area_ajax1StrParam"></div>
<hr>
<div id="area_ajax2"></div>
<hr>
<div id="area_ajax2Obj"></div>
<hr>
<div id="area_ajax2Str"></div>
</body>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</html>
编写jquery 使用ajax方法请求的代码：
<script type="text/javascript">
$(function(){
$("#ajax1").click(function(){
$("#area").html("<img src='/testAjax/imgs/loading.gif' width='24px'>");
$.ajax({
//async:false,
type: "POST",
url: "/testAjax/ajaxServlet",
data:{
username:"zhaodaowen",
pwd:"12345ABC"
},
success: function(res,status,xhr){
$("#area_ajax1").html(res);
}
});
});
$("#ajax1StrParam").click(function(){
$("#area").html("<img src='/testAjax/imgs/loading.gif' width='24px'>");
$.ajax({
type: "POST",
url: "/testAjax/ajaxServlet",
data:"username=John&pwd=Boston",
success: function(res,status,xhr){
$("#area_ajax1StrParam").html(res);
}
});
});
$("#ajax2").click(function(){
$.ajax({
type: "get",
url: "/testAjax/ajaxServlet?username=John&pwd=Boston",
success: function(res,status,xhr){
$("#area_ajax2").html(res);
}
});
});
$("#ajax2Obj").click(function(){
$.ajax({
type: "get",
url: "/testAjax/ajaxServlet",
data:{
username:"zhaodaowen",
pwd:"12345ABC"
},
success: function(res,status,xhr){
$("#area_ajax2Obj").html(res);
}
});
});
$("#ajax2Str").click(function(){
$.ajax({
type: "get",
url: "/testAjax/ajaxServlet",
data:"username=John&pwd=Boston",
success: function(res,status,xhr){
$("#area_ajax2Str").html(res);
}
});
});
});
</script>
后台java代码：
package cn.zhao.test.handler;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 测试jquery的ajax函数
*/
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,
IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
String username = request.getParameter("username");
String pwd = request.getParameter("pwd");
writer.println("这是从后台响应get方式的数据,用户名："+username+",密码："+pwd);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,
IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
String username = request.getParameter("username");
String pwd = request.getParameter("pwd");
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
writer.println("这是从后台响应post方式的数据,用户名："+username+",密码："+pwd);
}
}
上面的例子中主要关注一点：
问：jquery使用ajax发送请求时如何传递参数？
答：get方式有三种方式来传递参数，post方式有两种方式来传递参数到后台。
十八、jquery post方法介绍
前边介绍jquery ajax方法的时候提到了$.post方法，已经说得比较详细，我这里就不着重对post方法进行举例了，只简单介绍一下即可。
$.post的格式：
$.post(url, [data], [callback], [type])与$.get(url, [data], [callback], [type])类似，只是提交方式为post。
参数解释：
data:可以是对象形式也可以是字符串形式。如{ name: "John", time: "2pm" }或者"name=John&location=Boston"
get与post方式提交的区别：
get方式有大小限制，不得超过2KB，POST方式没有限制
post方式相对安全
十九、ajaxSetup和serialize和serializeArray
$.ajaxSetup([options]) 设置全局 AJAX 默认选项
options:选项设置.如：
$.ajaxSetup({
url: "xxx",
type: "POST"
});
因为不管是get还是post还是ajax都支持字符串传参，为了简化操作，jquery才推出了ajaxSetup
serialize():表单序列化.
serializeArray()：返回的是JSON对象而非JSON字符串。
二十、jquery工具函数$.trim,$.each,$.extend,$.isNumeric,$.isArray介绍
$.trim(str):去掉左右空格
对象或数组操作：
$.each(object, [callback])
参数解释：
object:需要例遍的对象或数组。
callback:每个成员/元素执行的回调函数
var finalObj=$.extend(obj,obj1):用obj1扩展obj最终返回给finalObj
$.isNumeric(value):判断是否为数字
$.isArray(obj):判断obj是否为数组
二十一、jquery的get方法
格式：
$.get(url, [data], [callback], [type])
参数含义：
url:待载入页面的URL地址
data:待发送 Key/value 参数,注意这里与load不同，即便不通过?的形式附在url之后而写在这里，依然是get方式提交
callback:载入成功时回调函数。
type:返回内容格式,会自动匹配。常见格式如下：
xml：Extensible Markup Language
html, script,
json：JavaScript Object Notation
, text, _default。
相当于$.ajax()设置dataType设置为对应的属性。
当为json时等价于$.getJSON(url,data,fn)，都是以get方式得到json格式的数据。
jquery的get方法可以用来发起ajax请求，下面这个示例程序演示了如何使用$.get(url[,data][,fn])方法来传递参数（通过?附加在url之后、通过第二个参数data传递，data可以是字符串格式的，比如uname=a&pwd=b,也可以是对象格式的，比如{uname:'a'}）,同时也演示了如何通过$.get方法去请求xml，script，json等不同的类型。
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>get</title>
<style>
*{
margin:0;
padding:0;
}
</style>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</head>
<body>
<div>
<button id="get1">get函数以?方式传递参数</button>
<button id="get2">get函数以对象方式传递参数</button>
<button id="getxml">xml</button>
<button id="getscript">script</button>
<button id="getjson">json</button>
</div>
<div id="area1"></div>
<hr>
<div id="area2"></div>
<hr>
<div id="areaxml"></div>
<hr>
<div id="areajson"></div>
</body>
</html>
jquery代码：
<script type="text/javascript">
$("#get1").click(function(){
$.get("/testAjax/getAndPostServlet?username=zhaodaowen&pwd=123",function(res,sta,xhr){
console.log("get1----------");
$("#area1").html(res);
console.log(sta);
console.log(xhr);
});
});
$("#get2").click(function(){
$.get("/testAjax/getAndPostServlet",{
username:"zhaodaowen",
pwd:123
},function(res,sta,xhr){
console.log("get2----------");
$("#area2").html(res);
console.log(sta);
console.log(xhr);
});
});
$("#getxml").click(function(){
$.get("test.xml",function(res,sta,xhr){//res是xml对象
console.log("getxml----------");
console.log(res);
$("#areaxml").html($(res).find("name").text());
});//不写类型就默认会自动转换为从服务器得到的type
});
$("#getscript").click(function(){
$.get("test.js");//直接执行了
});
$("#getjson").click(function(){
$.get("test.json",function(res,sta,xhr){
console.log("getjson----------");
console.log(res);//
$("#areajson").html(res[0]["price"]);
});
});
</script>
实用浏览器打开并执行：
涉及到的java后台请求程序比较简单，就是一个普通的servlet，为了演示而已，代码如下，因为是get发送的请求嘛，自然都是进入到servlet的doGet方法里面去：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
String username = request.getParameter("username");
String pwd = request.getParameter("pwd");
writer.println("这是从后台响应get方式的数据,用户名："+username+",密码："+pwd);
}
test.xml:
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book>
<name>js权威指南</name>
<price>30.00</price>
</book>
</books>
test.json:
[{
"name":"js权威指南",
"price":30.00
}]
test.js,这里点击script按钮触发$.get("test.js")的时候，test.js的内容被引入同时也被执行了，将弹出如下的对话框:
alert("当文件可能比较大的时候在需要的时候再进行加载");
二十二、ajax换肤案例
ajax换肤，即更换网页的“皮肤”，下面是案例效果：
而且，换了皮肤之后，再次刷新页面依然是自己设置的效果，网页的皮肤并不会因为页面的刷新而重置，实现方法有很多，这里我是通过cookie来实现的，可以自定义设置保存的时间，不过要想cookie起作用需要把这个案例放在服务器上面来访问，不能通过右击文件浏览器打开的方式，因为cookie是需要服务器支持的。
核心实现代码如下：
<script type="text/javascript">
$(function(){
var d=new Date();
$("#now").text(d.getTime());//不变说明局部刷新
console.log(document.cookie);
//uname=zhaodwaiguoxue@163.com; pwd=abcdefg; tmp=1234567
var arr,reg=/\s*(\w+)=([^;]*);*/g;
while((arr=reg.exec(document.cookie))!=null){//arr
console.log(arr);
if(arr[1]=="skin"&&arr[2]){//skin&&skin1
$("#skin_link").attr("href",arr[2]+".css");
break;
}
}
//点击a换肤
$('a').click(function(){
var nowClass=$(this).attr("class");
var reg=/\d{1}/g;
var num=reg.exec(nowClass)[0];
$("#skin_link").attr("href","skin"+num+".css");
//更正a的选中状态
$("a").each(function(i){
var j=i+1;
if(num==j){//当前点击的a
$(this).removeClass();
$(this).addClass("skin"+num+"check");
}else{//处理当前未选中的a
$(this).removeClass();
$(this).addClass("skin"+j+"");
}
});
//设置cookie
var exp = new Date();
exp.setTime(exp.getTime() + 30*1000);//30s
document.cookie="skin=skin"+num+";expires="+exp.toGMTString()+";path=/";
console.log(document.cookie);
});
});
</script>二十三、jquery插件案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>插件</title>
</head>
<body>
<ul id="ul1"></ul>
</body>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</html>
jquery代码：
<script type="text/javascript">
(function($){
$.fn.nav=function(){
alert("局部");
};
$.nav2=function(){
alert(2);
};
})(jQuery);
$("#ul1").nav();
$.nav2();
</script>
解释：
jquery插件分为两种，一个是局部插件，一个是全局插件
局部插件
1.定义格式：
$.fn.插件名字m=function(){//....}
2.使用方法：
jquery选择集.m()
全局插件
1.定义格式：
$.插件名称m=function(){//...}
2.使用方法：
$.m()
案例：通过jquery局部插件和全局插件多种方式实现顶部导航菜单效果
效果图：
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多级菜单</title>
<style>
*{
margin:0;
padding:0;
font-family:"微软雅黑";
font-size:13px;
}
.nav{
list-style:none;
color:white;
width:400px;
margin:100px auto;
}
.nav li{
float:left;
width:100px;
height:30px;
line-height:30px;
background:#333;
text-align:center;
cursor:pointer;
}
.sub{
list-style:none;
display:none;
}
</style>
</head>
<body>
<ul class="nav">
<li>菜单
<ul class="sub">
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
</ul>
</li>
<li>菜单
<ul class="sub">
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
</ul>
</li>
<li>菜单
<ul class="sub">
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
</ul>
</li>
<li>菜单
<ul class="sub">
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
</ul>
</li>
</ul>
<a href="#">aaaaa</a>
</body>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</html>
jquery代码：
<script type="text/javascript">
//简单的动画实现
/*
$(function(){
$(".nav > li").hover(function(){
$(this).find("ul").stop().slideDown();
},function(){
$(this).find("ul").stop().slideUp();
});
});
*/
//局部插件开发
/*
(function($){
$.fn.nav=function(options){
var defaultObj={
speed:400
};
var opts=$.extend(defaultObj,options);
console.log(opts);
console.log(defaultObj);//defaultObj的值在每次执行的时候也改变了，如果在下边的代码中有使用到
//defaultObj里面的值，就不好了，
//所以一般写为var opts=$.extend({},defaultObj,options);
$(this).hover(function(){
$(this).find("ul").stop().slideDown(opts.speed);
},function(){
$(this).find("ul").stop().slideUp(opts.speed);
});
}
})(jQuery);
$("a").nav({
a:"a",
speed:500
});
$("a").nav();
$(".nav > li").nav({speed:4000});
$(".nav > li").nav({speed:400});
*/
//全局插件1：单个单个的来写
/**/
(function($){
$.nav=function(options){
var defaultObj={
speed:400,
select:".nav > li"
};
var opts=$.extend(defaultObj,options);
console.log(1);
console.log(2);//defaultObj的值在每次执行的时候也改变了
$(opts.select).hover(function(){
$(this).find("ul").stop().slideDown(opts.speed);
},function(){
$(this).find("ul").stop().slideUp(opts.speed);
});
}
})(jQuery);
$.nav({
a:"a",
speed:500
});
$.nav();
$.nav({speed:4000});
$.nav({speed:400,select:".nav > li"});
//全局插件1：通过extend写多个
//全局插件相当于给jquery添加静态方法,也可将插件更好的运用于所选择的元素身上
/*
(function($){
$.extend({
nav:function(options){
var defaultObj={
speed:400,
select:".nav > li"
};
var opts=$.extend(defaultObj,options);
$(opts.select).hover(function(){
$(this).find("ul").stop().slideDown(opts.speed);
},function(){
$(this).find("ul").stop().slideUp(opts.speed);
});
},
login:function(){
alert("可以通过ajax执行登录...");
},
log: function(message) {
var now = new Date(),
y = now.getFullYear(),
m = now.getMonth() + 1, //！JavaScript中月分是从0开始的
d = now.getDate(),
h = now.getHours(),
min = now.getMinutes(),
s = now.getSeconds(),
time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
console.log(time + ' 信息: ' + message);
}
});
})(jQuery);
$.nav({speed:400});
$.login();
$.log("开始提交...");
*/
$.fn.myPlugin = function() {
console.log( this);
console.log( $(this));
this.css('color', 'red');//不需要再包装了，包装一层也不报错
return $(this).css('color', 'orange'); //加入return使之支持链式调用
}
//$("a").myPlugin();
$("a").myPlugin().css("fontSize","30px")
</script>
上面的单是多种方式实现的，我注释掉了其他方式，只打开了上面看到的效果的代码部分，你也可以试着打开其他实现方式的注释，看一下。
二十四、$.each方法练习小例子
jquery的$.each(obj/arr,function(){})方法可以用来操作对象，也可以用来操作javascript数组，或者其他类数组（比如$("p")返回的结果集）、类对象的变量。下面是一个例子，
<script type="text/javascript">
$(function(){
//操作数组
$.each( [3,4,5], function(index, value){
alert( "Item #" + index + ": " + value );
});
//操作对象
$.each( {
user_name:'zdw',
pwd:"123abc"
}, function(shuxing, value){
alert( "Item #" + shuxing + ": " + value );
});
alert($.isNumeric("3a"));
});
</script>
二十五、jquery的概述与安装
JQuery概述
1、JQuery简介
前期我们学习了JavsScript的基础部分以及JS操作DOM,ajax等内容.但是也暴漏了不少问题,例如浏览器的兼容性问题,复杂的DOM操作和烦冗的ajax操作等.为了简化JS的开发,各种JS库诞生了.各种JS库都封装了很多预定义的对象和实用函数,能够帮助使用者建立具有高难度交互的Web2.0特性的客户端页面,并且兼容各大浏览器.
我们常见的JS库有Jquery,Prototype,Extjs,Dojo,YUI,Mootools 等.
JQuery是2006年1月诞生的一个开源项目,现在Jquery团队主要包括核心库,UI和插件开发等开发人员以及推广和网站设计人员. 团队中3个核心成员:Jhon Resig,Brandom Aaron和Jorn Zaeffefer.Jquery凭借简洁的语法和跨平台的兼容性,极大地简化了Javascript开发人员遍历HTML文档,操作DOM,处理事件,执行动画和开发Ajax的操作.其独特而又优雅的代码风格改变了javascript程序员的设计思路和编写程序的方式.总之,无论是网页设计师,后台开发人员,业余爱好者还是项目管理者,都具有足够的开发理由去学习jquery.
2、JQuery的优势
l 轻量级
l 强大的选择器
l 出色的DOM封装操作
l 可靠的事件处理机制
l 完善的Ajax.
l 不污染顶级变量
l 出色的浏览器兼容性
l 链式操作方式
l 隐式迭代
l 行为层和结构层分离
l 丰富的插件支持
l 完善的文档
l 开源
JQuery的下载与配置
Jquery的官方网站为: http://www.jquery.com 我们可以在其官方网站上下载Jquery的最新版本的文件.
我们将其放置在项目中之后在页面中加入以下代码就可以引入Jquery文件.
<script type=”text/javascript” src=”${pageContext.request.contextPath}/path/jquery.js”></script>
注意路径: path是我们放到工程中的路径
测试JQuery是否配置成功：
二十六、JQuery的第一个入门案例：使用window.onload绑定两个加载事件？
有没有想过window.onload如果在一个网页内写两次甚至写了多次会有什么样的效果，会执行多次吗？
既然window.onload不能执行多次，那么我们看下jquery的$(document).ready()是否能够执行多次呢？$(document).ready()也可以简化的写为$(function(){}),两种写法是完全一样的。
二十七、JQuery对象与DOM对象的区别
JQuery与DOM的区别
刚开始学习jquery经常分不清楚什么是Jquery对象,什么是DOM对象,因此需要重点了解Jquery对象和DOM对象以及它们之间的关系
5.1、 DOM对象
DOM,每一份DOM都可以表示成一颗树.下面来构建一个非常基本的网页
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
</head>
<body>
<h3>例子</h3>
<p title="选择你最喜欢的水果">你最喜欢的水果</p>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
</ul>
</body>
</html>
我们可以将上面的HTML结构描述为一棵DOM树.在这棵DOM树中,<h3>,<p>,<ul>以及<ul>的3个<li>子节点都是DOM元素节点.可以通过JavaScript中的getElementByTagName或者getElementById来获取元素节点, 像这样得到的DOM元素就是DOM对象.DOM对象可以使用JS中的方法,示例如下var domObj=docment.getElementById("id");//获取DOM对象var objHTML=domObj.innerHTML;//使用JavaScript中的方法--innerHTML
5.2、jquery对象
Jquery对象就是通过Jquery包装DOM对象后产生的对象.
Jquery对象是Jquery独有的.如果一个对象是Jquery对象,那么就可以使用Jquery里的方法.
例如:
$("#foo").html();//获取id为foo元素内的HTML代码,html()是jquery里的方法
这段代码等价于 document.getElementById("foo").innerHTML;
在Jquery对象中无法使用DOM对象的任何方法.例如:$("#id").innerHTML和$("#id").checked;之类的写法都是错误的.可以通过$("#id").html()和 $("#id").attr("checked");之类的jquery方法来代替.
同样DOM对象也不能使用 Jquery中的方法.例如document.getElementById("id").htm();只能用document.getElementById("id").innerHTML;语句
5.3、DOM对象和Jquery对象互换
在讨论jquery对象和DOM对象的相互转换之前,先约定好定义变量的风格,如果获取的对象是jquery对象,那么在变量名之前加上$ var $v=jquery对象;如果获取的DOM对象,则定义如下var v=DOM对象.
5.3.1、jquery对象转换成DOM对象
jquery对象不能使用dom对象的方法,但如果对jquery对象所提供的方法不熟悉,或者jquery没有封装想要的方法,不得不使用DOM对象的时候。有以下两种处理方式
a. jquery对象是一个数组对象,可以通过[index]的方法得到相应的DOM对象
b.另外一种方法是jquery本身所提供的.通过get(index);方法得到相应的DOM对象
5.3.2、DOM对象转换成Jquery对象
二十八、jquery的选择器总结分类
选择器 write less,do more
选择器是Jquery的根基,在jquery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器.如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.
1、JQuery选择器是什么?
jQuery选择器是jQuery库中非常重要的部分之一。它支持网页开发者所熟知的CSS语法快速轻松地对页面进行设置。了解jQuery选择器是打开高效开发jQuery之门的钥匙。
在前面的章节中，我们展示了一些有关如何选取 HTML 元素的实例。关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
选择器允许您对 HTML 元素组或单个元素进行操作。
在 HTML DOM 术语中：选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。
2、JQuery选择器
2.1、基本选择器
ID选择器 $(“#myID”);
标签选择器 $(“div”);
类选择器 $(“.className”)
通配符 $(“*”);
群组选择器 $(“h1,#two , .cc”);
2.2、层次选择器
$(“a b”); 选中a节点下的所有b节点，无论b节点是不是a的子节点。（也有有可能是孙节点）
$(“a > b”); 选中a节点下的所有b子节点。孙节点不算。
$(“a + b”); 选中a节点后的第一个b节点。（没有父子关系，是兄弟关系）
$(“a ~ b”); 选中a节点后的所有b兄弟节点。
2.3、过滤选择器
主要是通过特定的过滤规则筛选出所需要的DOM元素。
过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号:开头。
按照不同的过滤规则,过滤选择器可以分为基本选择器,内容过滤,可见性过滤,属性过滤,子元素过滤和表单属性过滤选择器
1.基本过滤选择器
2.内容过滤选择器
3.可见性过滤选择器
4.属性过滤选择器
5.子元素过滤选择器
6.表单对象属性过滤选择器
2.4、表单选择器
二十九、jquery的dom操作分类总结大全
JQuery的DOM操作
1、查找节点
使用jquery在文档树上查找节点非常容易,可以通过在第二章介绍的jquery选择器来完成.
1.1、查找元素节点
1.2、查找属性节点
2、创建节点
上面的程序告诉我们,Jquery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值。
真正的DOM操作并非没有这么简单.在DOM操作中,常常需要动态地创建HTML内容个，使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互的目的.
2.1、创建元素节点
2.2、创建文本节点
2.3、创建属性节点
3、插入节点
4、删除节点
4.1、remove方法
4.2、empty()方法.
5 复制节点
6 替换节点
7 包裹节点
8 属性操作
jquery用,用attr()方法来获取或者设置元素属性,removeAttr()方法来删除元素属性
8.1、获取属性和设置属性
8.2、删除属性
9 样式操作
10 设置和获取HTML,文本和值
10.1、html()方法
类似于js中的innerHTML属性,用来获取或设置某个元素的HTML内容
10.2、text()方法
类似于js中的innerText属性,用来获取或设置某个元素的文本内容
10.3、val()方法
11 遍历节点
11.1、children()方法: 取得匹配元素的子元素集合
11.2、next()方法:取得匹配元素后面紧邻的同辈元素
11.3、prev()方法:取得匹配元素前面紧邻的同辈元素
11.4、siblings()方法:取得匹配元素前后所有的同辈元素
11.5、closest()方法:取得最近的匹配元素
12 CSS-DOM操作:读取和设置style对象的各种属性.
style属性很有用,但最大不足是无法通过它来提取到通过外部CSS设置的样式信息,然而在jQuery中,这些都是非常简单
12.1、offset()方法
12.2、position()方法
12.3、scrollTop()方法和scrollLeft()方法
三十、jquery的data方法
data方法的使用，允许你将某些数据对象通过data方法绑定到DOM的Jquery对象上，然后在需要使用这个数据对象的地方再取出来使用。避免了在在js中定义变量或者增加额外的html属性来存放这些数据了。既然你做到了数据对象和与之相关的组件相关联，这样在将来的某个时间点，某个地方也很方便使用。说白了，jquery的这个data方法的作用就是用来缓存数据的。
格式：$(selector).data([key],[value])
key:存储的数据名
value:将要存储的任意数据
功能：向被选元素附加数据，或者从被选元素获取数据。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("div").data("greeting", "Hello World");//不会引起页面上的任何变化
});
$("#btn2").click(function(){
alert($("div").data("greeting"));//弹出 "Hello World"
});
});
</script>
</head>
<body>
<button id="btn1">把数据添加到 div 元素</button><br />
<button id="btn2">获取已添加到 div 元素的数据</button>
<div></div>
</body>
</html>
三十一、 jquery选中radio、checkbox、select以及获取它们的值
<script>
//如果之前有选中的，则把选中radio取消掉
$("#box1 .aihao").each(function(){
if ($(this).attr('checked')){
$(this).attr('checked' ,false);
}
});
//获取被选中的标签的值
var val=$('input:radio[name="sex"]:checked').val();
//或者
//var val=$('.aihao:checked').val();
//对于select 只需要把 :checked改为:selected即可
var sel_val=$(".con option:selected").val();
//或者
//var sel_val=$('.con option:selected').val();
</script>
三十二、jquery获取网页、文档document等的高度height总结
先看看JavaScript里面通过document和window能够获取的各种高度与宽度大集合：
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去（滚出，即滚动条滚出）的高： document.body.scrollTop
网页被卷去（滚出，即滚动条滚出）的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
jQuery是JavaScript库，为了简化JavaScript而生，它里面自然也少不了类似的方法：
jquery获取浏览器显示区域的高度 ： $(window).height();
获取浏览器显示区域的宽度 ：$(window).width();
获取页面的文档高度 ：$(document).height();
获取滚动条到顶部的垂直高度 ：$(document).scrollTop();
获取页面的文档宽度 ：$(document).width();
获取滚动条到左边的垂直宽度 ：$(document).scrollLeft();
offset()方法是一个用来计算元素位置和偏移量很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。
offset()返回的结果包含 top和left两个属性。
offset(options, results)
options.relativeTo 指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll 是否把 滚动条计算在内，默认TRUE
options.padding 是否把padding计算在内，默认false
options.margin 是否把margin计算在内，默认true
options.border 是否把边框计算在内，默认true
三十三、jquery实现全选与全不选
jquery实现全选与全不选，先看html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery全选，全不选</title>
<script src="jquery-1.12.4.min.js"></script>
</head>
<body>
<div class="components-list">
<input type="checkbox" name="checkbox_name" id="checkbox_name_1" />1<br />
<input type="checkbox" name="checkbox_name" id="checkbox_name_2" />2<br />
<input type="checkbox" name="checkbox_name" id="checkbox_name_3" />3<br />
<input type="checkbox" name="checkbox_name" id="checkbox_name_4" />4<br />
<input type="button" id="checkedAll" value="全选"/>
<input type="button" id="uncheckedAll" value="取消全选"/>
</div>
</body>
</html>
下面是JavaScript代码：
<script>
$(document).ready(function() {
$("#checkedAll").click(function(){//全选
$("input[name='checkbox_name']").each(function(){
$(this).prop("checked",true);
});
});
$("#uncheckedAll").click(function(){
$("input[name='checkbox_name']").each(function(){
$(this).prop("checked",false);
});
});
});
</script>
这里的关键之处在于要使用prop()方法来操作，而不要使用attr()方法来写。
三十四、jquery如何判断两次点击的对象是否是同一对象?
举个案例来说，针对下面的html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery如何判断两次点击的对象是否是同一对象?</title>
<script src="jquery-1.12.4.min.js"></script>
</head>
<body>
<div class="components-list">
<input type="checkbox" name="checkbox_name" id="checkbox_name_1" />1<br />
<input type="checkbox" name="checkbox_name" id="checkbox_name_2" />2<br />
<input type="checkbox" name="checkbox_name" id="checkbox_name_3" />3<br />
<input type="checkbox" name="checkbox_name" id="checkbox_name_4" />4<br />
<input type="button" id="checkedAll" value="全选"/>
<input type="button" id="uncheckedAll" value="取消全选"/>
</div>
</body>
</html>
现在有这样一个需求：怎么判断我当前点击的input是否是上次点击的那个input呢？当然我们可以操作一个隐藏dom，或者修改现有dom上的一个属性用以存放上次点击的元素，理论上实现这个需求是完全没有问题的，但是操作dom毕竟相对于操作内存来说还是比较慢的，此时我们可以使用data()函数，data()函数也是和dom元素绑定的，而且他是直接在内存中操作，非常快的速度让它使用起来非常受欢迎。实现代码如下：
<script>
$(document).ready(function() {
$("input").bind("click",function(){
if($(this).data("lastClick")){
alert("是上次点击的对象");
}else{
alert("不是上次点击的对象");
$("input").removeData("lastClick");
$(this).data("lastClick",true);
}
});
});
</script>
效果如下：
三十五、jQuery中e.preventDefault() 与 return false 的区别
还是看下面的jquery代码片段：
//阻止浏览器默认事件
$('a').click(function (e) {
// 业务代码
e.preventDefault();
});
//return false
$('a').click(function () {
// 业务代码
return false;
};
在jquery中，e.preventDefault() 和return false的关系与在原生的JavaScript里面是稍微有点不同的，是这样的：
jQuery中的return false相当于同时调用e.preventDefault() 和 e.stopPropagation()。而在原生js中，return false仅仅相当于调用了e.preventDefault()，并没有包含阻止事件传播的方法e.stopPropagation().
三十六、jQuery中如何取消一个ajax请求
var xhr = $.ajax({
type: "POST",
url: "test.php",
data: "name=test",
success: function(msg){
alert( msg );
}
});
//取消请求
xhr.abort();
这里xhr就是XMLHttpRequest对象了，最终也就是abort()方式是属于XMLHttpRequest对象的。
这里需要注意的是:
在ajax请求未响应之前可以用xhr.abort()取消，但如果请求已经到达了服务器端，这样做的结果仅仅是让浏览器不再监听这个请求的响应，但服务器端仍然会进行处理。
jquery可以设置请求超时时间通过timeout参数：
$.ajax({type:'POST',
url:'b.php',
data:'',
timeout:5000,
success:function(){
}
})
原生的JavaScript实现类似的功能：
xmlHttp.open("POST","theUrl",true);
xmlHttp.onreadystatechange=function(){
//得到响应之后的操作
}
xmlHttp.send();//设置8秒钟后检查xmlHttp对象所发送的数据是否得到响应.
setTimeout("CheckRequest()","8000");
function CheckRequest(){ //为4时代表请求完成了
if(xmlHttp.readyState!=4){
alert('响应超时'); //关闭请求 xmlHttp.close();
}
}
三十七、jQuery中each跟map的区别
jquery里面的each()与map()方法都可以用来遍历Array或Object，两者的区别是each不改变原来的Array或Object，map是操作给定的Array或Object并返回一个新Array或Object。下面是一个简单的小例子来说明each和map两者的区别:
var items = [1,2,3,4];
$.each(items, function() {
alert('this is ' + this);//alert 1,2,3,4
});
var items = $.map(items, function(i) {
return i + 1;
});
console.log(items); // items 输出:[2,3,4,5]
通过测试发现，map会占用更多的内存（因为他会生成新的引用对象），所以如果只是遍历建议用each。
815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
