在jQurey库中，$就是jQuery的一个简写形式，例如$(“#foo”)和jQuery(“#foo”)是等价的，$.ajax和jQuery.ajax是等价的。
$(document).ready(function(){});等价于$(function(){}); 也就类似于传统javascript中的window.onload方法。（P8）
DOM(Document Object Model,文档对象模型)，每一份DOM都可以表示成一棵树。
jQurey对象就是通过jQuery包装DOM对象后产生的对象。
$(“#foo”).html();等同于 document.getElementById(“foo”).innerHTML;
如果获取的对象是jQuery对象，那么在变量前面加上$,例如：
var $variable = jQuery 对象；
如果获取的是DOM对象，则定义如下：
var variable = DOM对象；
jQuery对象转换成DOM对象
jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index)。
(1)jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。
var $cr = $(“#cr”); //jQuery对象
var cr = $cr[0]; //DOM对象
alert(cr.checked) //检测这个checkbox是否被选中了
(2)另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。
var $cr = $(“#cr”); //jQuery对象
var cr = $cr.get(0); //DOM对象
alert(cr.checked)
DOM对象转成jQuery对象
对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为$(DOM对象)。
var cr = document.getElementById(“cr”); //DOM对象
var $cr = $(cr); //jQuery对象
转换后，可以任意使用jQuery中的方法。
当把jQuery和其他JavaScript库一起使用时，不会引起冲突。
jQuery的行为规则都必须在获取到元素后才能生效。
$(“#id”)用来代替document.getElementById()函数
$(“tagName”)用来代替document.getElementByTagName()函数
样式设置：
将所有段落字体设为红色：
$(“p”).css(“color”,”red”);
将所有段落的字体颜色设为红色并且背景为蓝色：
$(“p”).css({color:”#ff0011″,background:”blue”});
如果属性名包含”-“的话，必须使用引号：
$(“p”).css({“margin-left”:”10px”,”background-color”:”blue”});
=============jquery 选择器==========
jQuery的行为规则都必须在获取到元素后才能生效。
在网页中，每个id名称只能使用一次，class允许重复使用。
改变所有的<span>元素和id为two的元素的背景色：
$(“span,#two”).css(“background”,”#bbffaa”);
$(“body div”) 选取<body>里的所有的<div>元素。
$(“body > div”) 选取<span>里的所有子的<div>元素。
$(“.one + div”) 选取class为one的下一个<div>元素。
$(“#two~div”) 选取id为two的元素后面的所有<div>兄弟元素。
$(‘div:hidden’).show(3000); 显示隐藏的<div>元素。
show(speed,[callback])以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。
speed：三种预定速度之一的字符串（“show”，“normal”，or“fast”）或表示动画时长的毫秒数值（如：1000） callback（可选）在动画完成时执行的函数，每个元素执行一次。
如: <p style=”display:none”>Hello</p>
$(“p”).show(“show”) 或$(“p”).show(3000);//将隐藏的段落用将近3秒的时间显示出来。
或 $(p).show(3000,function(){
$(this).text(“Animation Done……”);
});//将隐藏的段落用将近3秒的时间显示出来…..并在之后执行一个反馈….
在可见性选择器中，需要注意选择器 :hidden，他不仅包括样式属性display为“none”的元素，也包括文本隐藏域（<input type=”hidden”/>）和visibility：hidden之类的元素。
基本过滤选择器：
$(“div:first”) 选取所有<div>元素中第一个<div>元素。
$(“div:last”) 选取所有<div>元素中最后一个<div>元素。
$(“input:not(.myClass)”) 选取class不是myClass的<input>元素。
$(“input:even”) 选取索引是偶数的<input>元素。
$(“input:odd”) 选取索引是奇数的<input>元素。
$(“input:eq(1)”) 选取索引等于1的<input>元素。
$(“input:gt(1)”) 选取索引大于1的<input>元素（注：大于1，而不包括1）
$(“input:lt(1)”) 选取索引小于1的<input>元素（注：小于1，而不包括1）
$(“:header”) 选取网页中所有的<h1>,<h2>,<h3>…..
$(“div:animated”) 选取正在执行动画的<div>元素。
内容过滤选择器：
$(“div:contains(‘我’)”) 选取含有文本“我”的<div>元素。
$(“div:empty”) 选取不包含子元素（包括文本元素）的<div>空元素。如<div></div>
$(“div:has(p)”) 选取含有<p>元素的<div>元素。
$(“div:parent”) 选取拥有子元素（包括文本元素）的<div>元素。
可见性过滤选择器：
$(“:hidden”) 选取所有不可见的元素。包括<input type=”hidden”/>,<div style=”display:none”>和<div style=”visibility:hidden”>等元素。如果只想选取<input>元素，可以是有$(“input:hidden”);
$(“div:visible”) 选取所有可见的<div>元素。
属性过滤选择器：
$(“div[id]”) 选取拥有属性id的元素。
$(“div[title=test]”) 选取属性title为“test”的<div>元素。
$(“div[title!=test]”) 选取属性title不等于“test”的<div>元素（注意：没有属性title的<div>元素也会被选取）。
$(“div[title^=test]”) 选取属性title以“test”开始的<div>元素。
$(“div[title$=test]”) 选取属性title以“test”结束的<div>元素。
$(“div[title*=test]”) 选取属性title含有“test”的<div>元素。
$(“div[id][title$=’test’]”) 选取拥有属性id，并且属性title以“test”结束的<div>元素。
子元素过滤选择器：
:nth-child :eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0算起的。
:first-child :first只返回单个元素，而:first-child选择符将为每个父元素匹配第一个子元素。例如$(“ul li:first-child”); 选取每个<ul>中第一个<li>元素。
:last-child 同样，:last只返回单个元素，而:last-child选择符将为每一个父元素匹配最后一个子元素。
:only-child 如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配。 $(“ul li:only-child”)在<ul>中选取是唯一子元素的<li>元素。
:nth-child(even)能选取每个父元素下的索引值是偶数的元素。
:nth-child(odd)能选取每个父元素下的索引值是奇数的元素。
:nth-child(2)能选取每个父元素下的索引值等于2的元素。
:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素，（n从0开始）。
:nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的倍数的元素，（n从0开始）。
表单对象属性过滤选择器：
:enabled 选取所有可用元素 $(“#form1 :enabled”) 选取id为“form1”的表单内的所有可用元素。
:disabled 选取所有不可用元素 $(“#form2 :disabled”) 选取id为“form2”的表单内的所有不可用元素。
:checked 选取所有被选中的元素（单选框，复选框） $(“input:checked”) 选取所有被选中的<input>元素。
:selected 选取所有被选中的选项元素（下拉列表） $(“select :selected”) 选取所有被选中的选项元素。
例如：$(“#form1 input:enabled”).val(“这里”)； 改变表单内可用<input>元素的值。
$(“#form1 input:disabled”).val(“这里”)；改变表单内不可用<input>元素的值。
$(“input:checked”).length; 获取多选框选中的个数。
$(“select:selected”).text(); 获取下拉框选中的内容。？
表单选择器：
:input 选取所有的<input>、<textarea>、<select>和<button>元素。
:text 选取所有的单行文本框。
:password 选取所有的密码框。
:radio 选取所有的单选框。
:checkbox 选取所有的多选框。
:submit 选取所有的提交按钮。
:image 选取所有的图像按钮。
:reset 选取所有的重置按钮。
:button 选取所有的按钮。
:file 选取所有的上传域。
:hidden 选取所有不可见元素。
使一个特定的表格（id为tb）隔行变色：
$(“#tb tbody tr:even”).css(“background-color”,”#888″);
<div id=”id#b”>bb</div>
<div id=”id[1]”></div>
正确的写法如下：(使用转义符转义)
$(‘#id\\#b’); $(‘#id\\[1\\]’);
—————-attr()方法 获取和设置元素属性—————
attr(key,fn):
为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。
如：<img src=”test.jpg”/> 把src属性的值设置为title属性的值。
$(“img”).attr(“title”,function(){return this.src});
结果:<img src=”test.jpg” title=”test.jpg”/>
attr(key,value):
为所有匹配的元素设置一个属性值。
如：<img/>
<img/> 为所有图像设置src属性。
$(“img”).attr(“src”,”test.jpg”);
结果：[<img src=”test.jpg”/>,<img src=”test.jpg”/>]
attr(name):
取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回undefined。
如：<img src=”test.jpg”/> 返回文档中第一个图像的src属性值。
$(“img”).attr(“src”);
结果：test.jpg
attr(properties):
将一个：”名/值“形式的对象设置为所有匹配元素的属性。
这是一种在所有匹配元素中批量设置很多属性的最佳方式。注意，如果你要设置对象的class属性，你必须使用‘className’作为属性名。或者你可以直接使用.addClass(class)和.removeClass(class).
如：<img/> 为所有图像设置src和alt属性。
$(“img”).attr({src:”test.jpg”,alt:”Test Image”});
结果：[<img src=”test.jpg” alt:=”Test Image”/>]
如果要删除<p>元素的title属性，可以使用下面代码：
$(“p”).removeAttr(“title”);
—————-end attr——————-
————第三章 jQuery中的DOM操作—————
例：<p title=”选择你最喜欢的水果。”>你最喜欢的水果是？</p>
<ul>
<li title=’苹果’>苹果</li>
<li title=’橘子’>橘子</li>
<li title=’菠萝’>菠萝</li>
</ul>
要获取<ul>元素里第2个<li>节点，并将它的文本内容“橘子”打印出来。
var $li = $(“ul li:eq(1)”);
var li_txt = $li.text();
alert(li_txt);
$(“ul li”).remove(“li[title!=菠萝]”); //将<li>元素中属性title不等于”菠萝”的<li>元素删
除。
$(“ul li”).click(function(){
$(this).clone().appendTo(“ul”);//复制当前单击的节点，并将它追加到<ul>元素中
})
上面的复制节点后，被复制的新元素并不具有任何行为。如果需要新元素也具有复制功能，可以使用jQuery代码：
$(this).clone(true).appendTo(“body”);//注意参数true
在clone()方法中传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件。因此该元素的副本也同样具有复制功能。
jQuery中替换某个节点：replaceWith()和replaceAll()。
如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。
jQuery中包裹节点：wrap()。
如： $(“strong”).wrap(“<b></b>”);//用<b>标签把<strong>元素包裹起来。
结果：<b><strong title=””></strong></b>
————-切换样式——-toggle()——
$toggleBtn.toggle(function(){代码3 //显示元素},function(){代码4 //隐藏元素})
toggle()方法此处的作用是交替执行代码3和代码4两个函数，如果元素原来是显示的，则隐藏它；如果元素原来是隐藏的，则显示它。此时，toggle()方法主要是控制行为上的重复切换。
toggleClass()方法控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。
例如：
对<p>元素进行toggleClass()方法操作。
$(“p”).toggleClass(“another”);//重复切换类名“another”
当单击“切换样式”按钮后，<p>元素的HTML代码由
<p title=”选择你最喜欢的水果。”>你最喜欢的水果是？</p>
变为
<p title=”选择你最喜欢的水果。”>你最喜欢的水果是？</p>
当再次单击“切换样式”按钮后，<p>元素的HTML代码又返回原来的状态：
<p title=”选择你最喜欢的水果。”>你最喜欢的水果是？</p>
当不断单击“切换样式”按钮时，<p>元素的class的值就会在“myClass”和“myClass another”之间重复切换。
———–判断是否含有某个样式———–
hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true，否则返回false。
例如：可以使用下面的代码来判断<p>元素中是否含有“another”的class：
$(“p”).hasClass(“another”);
—————-设置和获取HTML、文本和值——————–
html()方法：（此方法类似于JavaScript中的innerHTML属性）
如： <p title=”选择你最喜欢的水果。”><strong>你最喜欢的水果是？</strong></p>
var p_html = $(“p”).html();
alert(p_html);
结果：<strong>你最喜欢的水果是？</strong>
如果需要设置某元素的HTML代码，那么也可以使用该方法，不过需要为它传递一个参数。
如：$(“p”).html(“<a>aaa</a>”);
结果：<p title=”选择你最喜欢的水果。”><a>aaa</a></p>
text()方法：（此方法类似于JavaScript中的innerText属性）可以用来读取或者设置某个元素中的文本内容。
如： <p title=”选择你最喜欢的水果。”><strong>你最喜欢的水果是？</strong></p>
var p_text = $(“p”).text();
alert(p_text);
结果：你最喜欢的水果是？
如果需要设置文本内容，那么也需要传递一个参数。
$(“p”).text(“你最喜欢的水果是？”)
val():此方法类似于JavaScript中的value属性。可以用来设置和获取元素的值。无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。
例子：
<input type=”text” id=”address” value=”请输入邮箱地址”/>
$(function(){
$(“#address”).focus(function(){
var address_val = $(this).val();
if(address_val == “请输入邮箱地址”){
$(this).val(“”);
}
});
注意：this指向当前的文本框。
val()方法还有另外一个用处，就是它能使select（下拉列表框），checkbox（多选框）和radio（单选框）相应的选项被选中，在表单操作中会经常用到。
——–遍历节点———–
children()方法用于取得匹配元素的子元素集合。
next()方法用于取得匹配元素后面紧邻的同辈元素。
prev()该方法用于取得匹配元素前面紧邻的同辈元素。
siblings()方法用于取得匹配元素前后所有的同辈元素。
===========================第4章 jQuery中的事件和动画==========================
window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用。此时，网页的所有元素对jQuery而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。
需要注意的是，由于在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕，并且已经解析为DOM树了，但很有可能图片还未加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用jQuery中另一个关于页面加载的方法–load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容（包括窗口、框架、对象和图像等）加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。
事件绑定：
bind(type[,data],fn);
判断元素是否显示，可以使用jQuery中的is()方法来完成。
例如：<div id=”panel”>
<h5 style=”cursor:hand;”>什么是jQuery？</h5>
<div style=”display:none;”>jQuery是继Prototype之后又一个优秀的JavaScript库！</div>
</div>
$(function(){
$(“#panel h5.head”).bind(“click”,function(){
if($(this).next(“div.content”).is(“:visible”)){ //如果“内容”显示
$(this).next(“div.content”).hide();
}else{
$(this).next(“div.content”).show();
}
})
})
———–合成事件———–
jQuery有两个合成事件：hover()方法和toggle()方法。
hover(enter, leave);
hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数(enter);当光标移出这个元素时，会触发指定的第2个函数（leave）。
$(function(){
$(“#panel h5.head”).hover(function(){
$(this).next(“div.content”).show();
},function(){
$(this).next(“div.content”).hide();
})
})
toggle()方法语法结构为：
toggle(fn1,fn2,…fnN);
toggle()方法用于模拟鼠标连续单击事件。第一次单击元素，触发指定的第1个函数（fn1）；当再次单击同一个元素时，则触发指定的第2个函数（fn2）；如果有更多函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。
停止事件冒泡：
$(‘span’).bind(“click”,function(event){
…
event.stopPropagation();//停止事件冒泡
})
preventDefault()方法：阻止元素的默认行为。
例如：单击超链接后会跳转，单击“提交”按钮后表单会提交，有时需要阻止元素的默认行为。
———-jQuery中的动画————
********show()方法和hide()方法***********
show()方法和hide()方法是jQuery中最基本的动画方法。
注意：hide()方法在将“内容”的display属性值设置为“none”之前，会记住原先的display属性值（“block”或“inline”或其他除了“none”之外的值）。当调用show()方法时，就会根据hide()方法记住的display属性值来显示元素。
show()方法可以指定一个速度参数，例如一个速度关键字“slow”元素将在600毫秒内慢慢地显示出来，“normal”长度为400毫秒，“fast”长度为200毫秒。
show()方法会从上到下增大“内容”的高度，从左到右增大“内容”的宽度，同时增加“内容”的不透明度，直至内容完全显示。
********fadeIn()方法和fadeOut()方法***********
fadeIn()方法和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失(“display：none”)。fadeIn()方法则相反。
如果只想改变“内容”的不透明度，而不想改变其高度和宽度，就可以使用fadeOut()方法。
********slideUp()方法和slideDown()方法***********
slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的display属性值为“none”，当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下到上缩短隐藏。
注意：jQuery中的任何动画效果，都可以指定3种速度参数，即“slow”、“normal”和“fast”（时间长度分别是0.6秒、0.4秒和0.2秒）。当使用速度关键字时要加引号，例如：show(“slow”),如果用数字作为时间参数时就不需要加引号，例如show(1000)。
*************自定义动画方法animate()***************
animate(params, speed, callback);
参数说明：
params：一个包含样式属性及值的映射，比如{property1:”value1″,property2:”value2″,….}
speed:速度参数，可选。
callback:在动画完成时执行的函数，可选。
为了使元素动起来，要更改元素的“left”样式属性。需要注意的是在使用animate()方法之前，为了能影响该元素的“top”、“left”、“bottom”和“right”样式属性，必须先把元素的position样式设置为“relative”或者“absolute”。
$(function(){
$(“#panel”).click(function(){
$(this).animate({left:”500px”},3000);//使元素在3秒内，向右移动500像素。
})
})
{left:”500px”}，如果在500px之前加上“+=”或者“-=”符号即表示在当前位置累加或者累减。
如果要同时执行多个动画，在元素向右滑动的同时，放大元素的高度和宽度：
$(function(){
$(“#panel”).click(function(){
$(this).animate({left:”500px”,height:”200px”,width:”200px”},3000);
})
})
例子：
$(function(){
$(“#panel”).css(“opacity”,”0.5″);//设置不透明度
$(“#panel”).click(function(){
$(this).animate({left:”400px”,height:”200px”,opacity:”1″},3000)
.animate({top:”200px”,width:”200px”},3000)
.fadeOut(“slow”);
})
})
如果想在最后一步切换元素的CSS样式（css(“border”,”5px solid blue”)），而不是隐藏元素。
如果只是按照常规的方式，将fadeOut(“slow”)改为css(“border”,”5px solid blue”)，并不能得到预期效果。预期的效果是在动画的最后一步改变元素的样式，而实际的效果是，刚开始执行动画的时候，css()方法就被执行了。出现这个问题的原因是css()方法并不会加入到动画队列中，而是立即执行。可以使用回调函数（callback）对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可。如：
$(“#panel”).click(function(){
$(this).animate({left:”400px”,height:”200px”,opacity:”1″},3000)
.animate({top:”200px”,width:”200px”},3000,function(){$(this).css(“border”,”5px solid blue”);})
})
callback回调函数适用于jQuery所有的动画效果方法，例如slideDown()方法的回调函数：
$(“#element”).slideDown(“normal”,function(){})
停止元素的动画stop([clearQueue][,gotoEnd]);
$(“#panel”).hover(function(){
$(this).stop(true).animate({height:”150″},200).animate({width:”300″},300)},function(){
$(this).stop(true).animate({height:”22″},200).animate({width:”60″},300)}
}
})
在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致。当用户快速在某个元素上执行animate()动画时，就会出现动画积累。解决方法是判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。
if(!$(element).is(“:animated”)){ //判断元素是否正处于动画状态
//如果当前没有进行动画，则添加新动画
}
jQuery中3个专门用于交互的动画方法：
toggle(speed,[callback]);
slideToggle(speed,[callback]);
fadeTo(speed,opacity,[callback]);
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &
实例：
<div id=”pannel”>
<h5>什么是jQuery？</h5>
<div>
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由JohnResig创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &
toggle()方法可以切换元素的可见状态。如果元素是可见的，则切换为隐藏的；如果元素是隐藏的，则切换为可见的。
$(“#panel h5.head”).click(function(){
$(this).next(“div.content”).toggle();
})
相当于以下jQuery代码：
$(“#panel h5.head”).toggle(function(){
$(this).next(“div.content”).hide();
},function(){
$(this).next(“div.content”).show();
})
sildToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调用元素的高度。
$(“#panel h5.head”).click(function(){
$(this).next(“div.content”).slideToggle();
}）；
当单击“标题”连接后，“内容”会在可见和隐藏两种状态之间切换，不过是通过改变元素的高度来实现的。
相当于以下jQuery代码：
$(“#panel h5.head”).toggle(function(){
$(this).next(“div.content”).slideUp();
},function(){
$(this).next(“div.content”).slideDown();
})
fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度，即匹配的元素的高度和宽度不会发生
变化。
———–动画队列———-
(1)一组元素上的动画效果
当在一个animate()方法中应用多个属性时，动画是同时发生的。
当以链式的写法应用动画方法时，动画是按照顺序发生的。
（2）多组元素上的动画效果
默认情况下，动画都是同时发生的。
当以回调的形式应用动画方式时，动画是按照回调顺序发生的。
另外，在动画方法中，要注意其他非动画方法会插队，例如css()方法要使非动画方法也按照顺序执行，需要把这些方法写在动画方法的回调函数中。
=====================jQuery对表单、表格的操作及更多应用================
示例：
获取和失去焦点改变样式：
<body>
<form action=”#” method=”POST” id=”regForm”>
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for=”username”>名称：</label>
<input id=”username” type=”text”>
</div>
<div>
<label for=”pass”>密码：</label>
<input id=”pass” type=”password”>
</div>
<div>
<label for=”msg”>详细信息：</label>
<textarea id=”msg”></textarea>
</div>
<fieldset>
</form>
</body>
样式控制：
<style type=”text/css”>
input:focus, textarea:focus{
border:1px solid #f00;
background:#fcc;
}
.focus{
border:1px solid #f00;
background:#fcc;
}
</style>
<script type=”text/javascript”>
$(function(){
$(“:input”).focus(function(){
$(this).addClass(“focus”);
}).blur(function(){
$(this).removeClass(“focus”);
});
})
</script>
each(callback):
以每一个匹配的元素作为上下文来执行一个函数。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时元素集合中所处位置的数字值作为参数（从零开始的整形）。返回‘false’将停止循环（就像在普通的循环中使用‘break’）。返回‘true’跳至下一个循环（就像在普通的循环中使用‘continue’）。
==================jQuery与Ajax的应用======================
Ajax优点：
（1）不需要插件支持
（2）优秀的用户体验
（3）提高Web程序的性能
与传统模式相比，Ajax模式在性能上的最大区别就在于传输数据的方式，在传统模式中，数据提交是通过表单（Form）来实现的，而数据获取是靠全页面刷新来重新获取整页的内容。而Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的数据，即按需发送。
（4）减轻服务器和宽带的负担
Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。它在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担。
———-Ajax的XMLHttpRequest对象———-
Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键–发送异步请求、接收响应及执行回调都是通过它来完成的。
jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。第2层地方法使用频率很高。
load(url[, data] [, callback]) 方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入DOM中。
参数名称 类型 说明
url String 请求HTML页面的URL地址
data（可选） Object 发送至服务器的key/value数据
callback（可选） Function 请求完成时的回调函数，无论请求成功或失败
load()方法通常用来从Web服务器上获取静态的数据文件，如果需要传递一些参数给服务器中的页面，那么可以使用$.get()或者$.post()方法。
$.get(url[, data] [, callback] [, type]);
参数名称 类型 说明
url String 请求的HTML页地URL地址
data（可选） Object 发送至服务器的key/value数据会作为QueryString附加到请求URL中
callback（可选） Function 载入成功时回调函数（只有当Response的返回状态是success才调用 该方法）自动将请求结果和状态传递给该方法
type（可选） String 服务器端返回内容的格式,包括xml、html、script、json、text和_default
$.get()的回调函数只有两个参数：
function(data, textStatus){
//data: 返回的内容，可以是XML文档、JSON文件、HTML片段等等
//textStatus: 请求状态：success、error、notmodified、timeout4种
}