JQuery 部分常用方法速查

• css选择器：找到相应的节点包装成JQuery对象
• DOM对象：直接包装成JQuery对象
• 一段HTML代码：先创建DOM对象，再包装成JQuery对象
  如：$("<div></div>").appendTo($(obj))

Html:
<p class="red">你最喜欢的是？</p>
JQuery:
$("p").removeClass("red");
Result:
<p >你最喜欢的是？</p>

可以同时移除多个样式：
$("p").removeClass("red bold");

或者全部移除样式：
$("p").removeClass();

Html：
<input type="text" id="searchbox" value="搜索的内容…" />
JQuery:
$("searchbox").focus(function(){
if(this.val()=="搜索的内容…"){this.val("")}
});
$("searchbox").blur(function(){
if(this.val()==""){this.val(this.defaultValue)}
});
this.defaultValue 表示input文本框的默认value

通过val()还能做到将表单多选框,checkbox,radio事先选中：
$(":checkbox").val(["check2","check3"]);
$(":radio").val(["radio2"]);

迭代两个图像，并设置它们的 src 属性
注意此处 this 指代的是 DOM 对象而非 jQuery 对象

HTML:
<img/><img/>
jQuery:
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
Result:
[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

获取匹配的第二个元素

HTML:
<p> This is just a test.</p>
<p> So is this</p>
jQuery:
$("p").eq(1)
Result:
[ <p> So is this</p> ]

补充 .get(index)和.eq(index)的区别
.get(index)返回的是一个html数组
.eq(index)返回的是一个Jquery对象

$("ul li").get(1).css("color", "red");
//这个是错误的
$("ul li").eq(1).css("color", "red");
//这个是正确的 同理将JQuery对象转换为DOM对象可以使用get
alert一个非JQuery对象，如：
var $cr = $("#cr");
var cr = $cr.get(0);
alert(cr.checked);

保留子元素中不含有ol的元素。

HTML:
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
jQuery:
$("p").filter(function(index) {
return $("ol", this).length == 0;
});
Result:
[ <p>How are you?</p> ]

从p元素中删除带有 select 的ID的元素

HTML:
<p>Hello</p><p id="selected">Hello Again</p>
jQuery:
$("p").not( $("#selected")[0] )
Result:
[ <p>Hello</p> ]

从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。

HTML:
<p><span>Hello</span>, how are you?</p>
jQuery:
$("p").find("span")
Result:
[ <span>Hello</span> ]

找到每个段落的后面紧邻的同辈元素。
HTML:
<p>Hello</p><p>Hello Again</p>
<div><span>And Again</span></div>
jQuery:
$("p").next()
Result:
[ <p>Hello Again</p>,
<div><span>And Again</span></div> ]

找到每个段落的后面紧邻的同辈元素中类名为selected的元素。
HTML:
<p>Hello</p>
<p class="selected">Hello Again</p>
<div><span>And Again</span></div>
jQuery:
$("p").next(".selected")
Result:
[ <p class="selected">Hello Again</p> ]

找到每个div的所有同辈元素。

HTML:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
jQuery:
$("div").siblings()
Result:
[ <p>Hello</p>, <p>And Again</p> ]

所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。
如：add, andSelf, children, filter, find, map, next, nextAll, not, parent, parents, prev, prevAll, siblings, slice, clone。

选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素

HTML:
<p><span>Hello</span>,how are you?</p>
jQuery:
$("p").find("span").end()
Result:
[ <p><span>Hello</span> how are you?</p> ]

obj自身大小 + padding大小 + border大小

如果属性true：
obj自身大小 + margin大小 + padding大小 + border大小

$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});

多个事件捆绑，每个事件类型用空格分隔：
$('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});

在jQuery 1.4中，可以通过传入一个映射对来一次绑定多个事件处理函数：
$('#foo').bind({
click: function() {
// do something on click
},
mouseenter: function() {
// do something on mouseenter
}
});

事件处理函数：
$('#foo').bind('click', function() {
alert($(this).text());
});

这里的event是JQuery返回的一个事件对象，event有一个which属性，可以获得键盘按键的键值。

inputObj.keyup(function(event){
var keycode = event.which;
//处理回车的情况
if(keycode == 13){
var inputtext = $(this).val();
//将td的内容修改成文本框的内容
tdObj.html(inputtext);
}
//处理esc的情况
if(keycode == 27){
tdObj.html(text);
}
});

1 = 鼠标左键，2 = 鼠标中键，3 = 鼠标右键，13 = 回车，16 = shift，17 = ctrl，27 = ESC

另外event.pageX和event.pageY两个属性用于获得鼠标相对于页面的x坐标和y坐标。
$("a").click(function(event)){
alert("current mouse position:"+event.pageX+","+event.pageY);
return false;
}

使某个节点的某个css属性在设定时间内变化

JQuery:
$("myphoto").animate({opacity:0},300);
$("myphoto").animate({left:"400px"},300);

累加动画：
$(this).animate({left:"+=500px"},300);
+=累加 -=累减，表示在当前位置累加500像素

多重动画：
$(this).animate({left:"500px",height: "200px"},300);

综合动画：
$(this).animate({left:"400px",height: "200px",opacity:"1"},3000).fadeOut("slow");
当animate完成后，再执行fadeOut，这就是链式队列

回调函数callback：
以上列子如果将fadeOut("slow")
改成css("border","5px solid blue")
由于css方法并不是动画效果，并不会在链式队列中等待，而是直接实现了。如果想让它也在animate后执行，必须用callback
$(this).animate({left:"400px",height: "200px",opacity:"1"},3000,function(){
$(this).css("border","5px solid blue")});  

• clearQueue 表示是否要清空其他未完成的动画队列
• gotoEnd 表示是否将正在执行的动画跳转到末状态

$("#panel").hover(function(){
$(this).stop().animate({height: "150px", width: "300px"},200);
},function(){
$(this).stop().animate({height: "22px", widht: "60px"},300);
});
如果这里不使用stop()，那么鼠标频繁触发事件的话，前面0.2秒还没完成，后面紧跟着的0.3秒效果就出不来，只能排队，越排越长。

stop()在无参数情况下，只能停止正在进行的一个动画，碰到多动画效果需要加上true参数：
$("#panel").hover(function(){
$(this).stop(true).animate({height:"150px"},200).animate({width:"300px"},300);
},function(){
$(this).stop(true).animate({height:"22px"},300).animate({widht:"60px"},200);
});

第二个参数gotoEnd，一般用法是stop(false,true)，效果是不执行动画队列，但直接达到动画结束时的效果，如同直接用了css()设置了参数。

• callback 只有返回状态是success才调用
• type 返回内容的格式，包括xml, html, script, json, text 和_default

HTML:
<form id="form1" action="#">
<p>评论：</p>
<p>姓名：<input type="text" name="username" id="username" /></p>
<p>内容：<textarea name="content" id="content" rows="2" cols="20"></textarea></p>
<p><input type="button" id="send" value="提交" /></p>
</form>
<div class="comments">已有评论：
<div id="resText"></div>
</div>
JQuery:
$("#send").click(function(){
$.GET("GET1.PHP",{
username:$("#username").val(),
content:$("#conent").val()},
function(data,textStatus){
//data: 返回内容，HTML XML JSON 等
//textStatus: 请求状态4种success, error, notmodified, timeout
});
});

$.get("http://127.0.0.1/JQuery/userverify?username="+encodeURI(encodeURI(username)),null,function(response){ $("#result").html(response); });
//两次encodeURI转换编码，并在服务器代码中按utf-8方式做一次URLDecode可解决中文乱码问题。

GET与POST的区别：

• GET请求会将参数跟着URL后进行传递，POST请求则作为HTTP消失实体内容发送给服务器。
• GET方式传送的数据不能大于2KB，POST无限制
• GET方式请求的数据会被浏览器缓存，比如跟在URL后的用户名和密码，有安全隐患，POST不会

$(function(){
$("#send").click(function(){
$.post("post.php",{
//由于带参数的load也是用post传递，所以也可以是
//load("post.php",{
username:$("#username").val(),
conent:$( "content").val()
},function(data){
$("#resText").append(data);
});
});
});

1. type: GET/POST
2. url:
3. data:
4. dataType: html/xml/script/json/jsonp/text
5. success:function

用$.ajax()实现$.getScript()方法
$(function(){
$("#send").click(function(){
$.ajax({type:"GET", url:"test.js", dataType:"script"});
});
})

用$.ajax()实现$.getJSON()方法
$(function(){
$("#send").click(function(){
$.ajax({
type:"GET",
url:"test.json",
dataType:"json",
success:function(data){
$("#resText").empty();
var html = "";
$.each(data,function(index,comment){
html+="<div class=comment><h6>"+comment["username"]+":</h6>"
+"<p class=para>"+comment["content"]+"</p></div>"
});
$("#resText").html(html);
}
});
});
})

保存数据到服务器，成功时显示信息。
jQuery:
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});

如果表单中的元素非常多，那么使用{key:value}的赋值方法就相当繁琐，所以可以改成：
HTML:
<p id="results"><b>Results: </b></p>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2" checked="checked"/> check2
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2<br />
<input type="submit" name="" value="submit" />
</form>
jQuery:
$("input[type=submit]").click(function(){
$.get("get1.php",$("form").serialize(),function(data,textStatus){
$("#results").html(data);
});
})

serialize()可以查找form1表单下的所有元素值并转化成字符串 当我们处理中文数据时，需要使用encodeURIComponent进行转换，但是如果使用serialize()则会自动进行了编码。

serialize()方法，还可以用来选取元素，如：$(":checkbox, :radio").searialize();
复选框和单选框选中的值序列化成字符串形式