对数组array中的每一个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新的数组。
var array = {1,2,3};
var array2 = $.map(array,function(item){return item*2;});
注意点：$.map();不能处理Dictionary风格的数组。
$.each(array,fn);
对数组array每个元素调用fn函数进行处理，没有返回值。
var array = {"tom":"汤姆","jack":"杰克"};
$.each(array,function(key,value){alert(key+"中文名是:"+value);});
注意点：
函数2个参数，是键值对
1个参数，是键(索引值0,1,2...) $.each(array,function(item){alert(item);});
0个参数，是值 $.each(array,function(){alert(this);});
普通数组土建使用无参，用Dictionary风格的使用key和value（键值对）
jquery对象和Dom对象：
jquery对象就是通过jquery包装DOM对象后产生的对象。
alert($("#div").html()); DOM对象要想通过jquery进行操作，要首先转换为jquery对象
无参数取值，有参数赋值
$("#div").css("background","red");
$("#div").text();
$("#div").val();
$("#div").val(new Date());
$("#div").html();
$("#div").html("<font color='red'>Hello</font>");
jquery选择器：
$(function(){
$("#btn").click(function(){ //#是getElementById
$("p").html("我们都是P标签！"); //getElementByTagName
});
});
CSS选择器：同时选择拥有样式的多个元素
<p class="test">AA</p>
<p class="test">BB</p>
<p class="test">CC</p>
$(function(){
$(".test").click(function(){
alert($(this).text());
});
});
多条件选择器：
$("p,div,span.menuItem");同时选择p标签，div标签和拥有menuItem样式的span标签元素
注意：选择器表达式中的空格不能多也不能少
层次选择器：
$("div li"); 获取div下的所有li元素（包括前套下的子嵌套）
$("div > li"); 获取div下的直接li子元素 标记之间有空格
$(".menuItem + div");获取样式名为menuItem之后的第一个div元素
$(".menuItem ~ div ");获取样式名为menuItem之后的所有div元素
判断对象是否存在，jquery选择器返回的是一个对象数组，调用text(),html(),click()之类方法的时候其实是对数组
中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，如
下：
if($("#btn").length<=0){
alert("id为btn的元素不存在！");
}
节点的遍历：
next()方法用于获取节点之后的紧挨着的第一个同辈元素
$(".menuItem").next("div");
nextAll()方法用于获取节点之后的所有同辈元素
$(".menuItem").nextAll("div");
siblings()方法用于获取所有同辈（兄弟）元素
$(".menuItem").siblings("li");
一系列div标记，当点击一个div时，其后面所有的div背景颜色变红色显示
$("div").click(function(){
$.each($(this).nextAll("div"),function(){
$(this).css("background","red");
});
});
高亮选择：
$("div").click(function(){
$(this).css("background","red");
$(this).siblings("div").css("background","white");
});
更简便的写法
$("div").click(function(){
$(this).css("background","red").siblings("div").css("background","white");
});
一个评分控件实现：
<table id="ratings">
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
$("#ratings td").html("<img src='images/empty.png'/>").onmouseover(function(){
$("#ratings td").html("<img src='images/fill.png'/>");
$(this).nextAll().html("<img src='images/empty.png'/>");
});
另一种写法：
$("#ratings td").html("<img src='images/empty.png'/>").onmouseover(function(){
$(this).html("<img src='images/fill.png'/>");
$(this).siblings().html("<img src='images/fill.png'/>");
$(this).nextAll().html("<img src='images/empty.png'/>");
});
高亮选中项：给所有的menuItem样式的元素添加Click监听事件，当click时，向被点击的元素添加这个highlight样式
，然后从其兄弟节点中移除highlight风格。
$(function(){
$(".menuItem").click(function(){
$(this).addClass("highlight").siblings().removeClass("highlight");;
});
});
一些基本的过滤器：
:first 选取第一个元素 $("div:first") 选择第一个div
:last 选取最后一个元素 $("div:last") 选择最后一个div
:not 选择不满足“选择器”条件的元素 $("input:not(.myClass)") 选择样式名不是myClass的input
:even(奇数) :odd（偶数）
:eq(索引序号) :gt(索引序号) :lt(索引序号)
选取索引序号等于、大于、小于索引序号的元素，比如$("input:lt(5)")选取索引号小于5的input
$(":header")选取所有的h1...h6元素
$("div:animated")选取正在执行动画的div元素
<div>
<div id="div1">
<ul>
<li>AA</li>
<li>BB</li>
</ul>
</div>
<div>
<ul>
<li>CC</li>
<li>DD</li>
</ul>
</div>
</div>
$("#div1").click(function(){
$("ul",$(this)).css("background","red");
});
属性过滤选择器
$("div[id]") 选择有id属性的<div>
$("div[title=test]")
$("div[title!=test]")
表单对象选择器：(注意没有空格)
$("#form1:enabled")选择id为form1的表单内所有启用的元素
$("#form1:disabled")
$("input:checked") Radio、CheckBox中选中元素
$("select:selected") 下拉列表中所有选择的元素
<input type="checkbox" name="names" value="tom"/>tom
<input type="checkbox" name="names" value="jack"/>jack
<input type="checkbox" name="names" value="jim"/>jim
<p id="msg"/>
$(function(){
$("input[name=names]").click(function(){
var names = $("input[name=names]:checked");
var arr = new Array();
names.each(function(key,value){arr[key]=$(value).val();});
$("#msg").text("共选中:"+names.length+"条数据:"+arr.join(','));
});
});
$(":input") 获取所有的<input>、<textarea>、<select>、<button>元素
$(":text") 选取所有单行文本框
$(":password")选取所有密码框
$(":radio")
$(":checkbox")
$(":submit")
$(":image")
$(":button")
$(":file")
$(":hidden")
$("a:first").attr("href"); //获取href属性
$("a:first").attr("href","http://www.baidu.com"); //设置href属性
使用removeAttr删除属性
$("div:first").append($("<a href='www.baidu.com'>百度</a>"));
append 追加在后面
prepend 追加在前面
before
after
<table id="tableSite">
</table>
$(function(){
var data = ["百度":"http://www.baidu.com","新浪":"http://www.sina.com"];
$.each(data,function(key,value){
var tr = $("<tr><td>"+key+"</td><td><a href="+value+">"+key+"</a></td></tr>");
$("#tableSite").append(tr);
});
});
<select style="float:left" id="select1" multiple="multiple">
<option>添加</option>
<option>修改</option>
<option>删除</option>
</select>
<div style="float:left">
<input type="button" id="moveToRight" value=">">
</div>
<div id="select2" multiple="multiple">
</div>
$(function(){
$("#moveToRight").click(function(){
var items = $("#select1 option:selected").remove();
$("#select2").append(items);
});
});
var v1 = parseInt(val,10); //转换十进制数字
<textarea>注册须知</textarea>
<input type="button" id="btnReg" value="注册"/>
<script type="text/javascript">
var intervalId;
var leftSecond = 10;
$(function(){
$("#btnReg").attr("disabled",true);
intervalId= setInterval("CountDown()",1000);
});
function CountDown(){
if(leftSecond<=0){
$("#btnReg").val("同意");
$("#btnReg").attr("disabled",false);
clearInterval(intervalId);
return;
}else {
leftSecond--;
$("#btnReg").val("请仔细阅读注册说明,还剩下:"+leftSecond+"秒结束!");
}
}
</script>
一系列文本框，当焦点离开时，没有填写的内容文本框背景颜色变红，填写过的为白色。
<input type="text"/><input type="text"/><input type="text"/><input type="text"/>
$(function(){
$(":text").blur(function(){
if($(this).val.length<=0){
$(this).css("background","red");
}else{
$(this).css("background","white");
}
});
});
球队选择
<ul id="ul1" style="float:left;width:200px">
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
</ul>
<ul id="ul2" style="float:left;width:200px">
</ul>
<script type="text/javascript">
$(function(){
$("#ul1 li").css("cursor","pointer").mouseover(function(){
$(this).css("background","red").siblings().css("background","white");
}).click(function(){
$(this).css("background","white").appendTo($("#ul2"));
});
});
</script>
节点操作
$("br").replaceWith("<hr/>"); 批量替换
$("b").wrap("<font color='red'></font>"); 包裹节点，将所有粗体字红色显示
获取样式 attr("class")设置样式 attr("class","myClass1")
追加样式 addClass("myClass1") 删除样式 removeClass("myClass1")
toggleClass("myClass")如果样式存在则去掉样式，没有则添加样式
hasClass("myClass")判断是否有样式
网页开关灯效果，利用toggleClass即可。
<style type="text/css">
body { filter:gray;} //灰白色的过滤器
.night {background-color:black;}
</style>
$(document.body).toggleClass("night");
找一个网页下所有控件
$("body *")
搜索框
<style type="text/css">
.waiting{color:gray;}
</style>
<script type="text/javascript">
$(function(){
$("#search").val("请输入关键词").addClass("waiting").blur(function(){
if($("#search").val()==""){
$("#search").val("请输入关键词").addClass("waiting");
}
}).focus(function(){
if($("#search").val()=="请输入关键词"){
$("#search").val("").removeClass("waiting");
}
});
});
</script>
<input type="text" id="search"/>
RadioButton操作：
取得RadioButton的选中值
<input type="radio" id="radio1" name="gender" checked="checked" value="男"/>男
<input type="radio" id="radio2" name="gender" value="女"/>女
$("input[name=gender]:checked").val();
设置选中值
$(":radio[name=gender]").val(["女"]); //注意加中括号
checkbox全选，全部选和反选
$(function(){
$("#selectAll").click(function(){
$("#div1 :checkbox").attr("checked",true);
});
$("#unselectAll").click(function(){
$("#div1 :checkbox").attr("checked",false);
});
$("#reverse").click(function(){
$("#div1 :checkbox").each(function(){
$(this).attr("checked",!$(this).attr("checked"));
});
});
});
hover(fun1,fun2)是mouseenter和mouseleave的综合
$("p").hover(functon(){$(this).text("鼠标进入")},function(){$(this).text("鼠标移出")});
事件冒泡：
<table onclick="alert('table')">
<tr onclick="alert('tr')">
<td onclick="alert('td')">
<p onclick="alert('p')"/>
</td>
</tr>
</table>
逐个输出提示 p->td->tr->table
使用事件对象的stopPropagation()方法终止冒泡
$("tr").click(function(e){alert("tr被点击!");e.stopPropagation();}); //注意函数的参数是e
阻止默认行为 preventDefault()方法
$("a").click(function(e){ alert("所有超链接暂时全部禁止点击!");e.preventDefault();});
阻止表单提交
<form action="www.baidu.com">
<input type="text" id="name"/>
<input type="submit" value="提交"/>
</form>
$(function(){
$(":submit").click(function(e){
if($("#name").length<=0){
alert("用户名不能为空!");
e.preventDefault();
}
});
});
事件的其他属性：
pageX pageY target获得触发事件的元素。which如果是鼠标事件获得按键（1：左键 2：中键 3：右键）
altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值，keyCode、charCode属性发生时间时的keyCode、charCode。
$("#p1").click(function(e){
alert(e.pageX+":"+e.pageY);
alert($(e.target).html());
});
one()方法，事件只触发一次（一次性触发事件）。
<input type="button" value="按钮"/>
$(function(){
$(":button").one("click",function(){
alert("按钮被点击了！");
});
});
跟着鼠标走的图片
<div id="fly" style="position:absolute"> //这里的position要设置成absolute，这样改变xy坐标才能跟着改变
<img src="logo.jpg"/>
</div>
$(function(){
$("document").mouseover(function(e){
$("#fly").css("left",e.pageX).css("top",e.pageY);
});
});
<div style="display:none;position:absolute" id="details">
<img src="" id="detailImg"/>
<p id="detailHeight"></p>
<p id="detailName"></p>
<p><input type="button" value="关闭" id="closeDetail"/></p>
</div>
var data = {"0.jpg":["00.jpg","AA","123"],"1.jpg":["11.jpg","BB","234"],"3.jpg":["33.jpg","AA","345"]};
$(fuction(){
$.each(data,function(key,value){
var smallImg = $("<img src='>"+key+"'/>");
smallImg.attr("bigImg",value[0]);
smallImg.attr("pname",value[1]);
smallImg.attr("pheight",value[2]);
smallImg.mouseover(function(e){
$("#detailImg").attr("src",$(this).attr("bigImg"));
$("#detailHeight").attr("src",$(this).attr("pheight"));
$("#detailName").attr("src",$(this).attr("pname"));
$("#details").css("top",e.pageY).css("left",e.pageX).css("display","");
});
$("body").append(smallImg);
});
$("#closeDetail").click(function(){
$("#details").css("display","none");
});
});
关于动画 show()和hide()方法
用toggle()方法在显示和隐藏之间切换
$("#div1").click(function(){
$(this).hide();
});
$("#btnToggle").click(function(){
$("#div1").toggle();
});
show和hide方法内不带参数就是立即显示和隐藏，如果带参数，有fast（200ms）、normal（400ms）和slow（600ms）或者是设置一个时间数值，如1000（1s）
类似QQ的Tab效果实现
<style type="text/css">
ul {list-style-type:none;} //去掉ul前面的小黑点
.header {background:grey;cursor:pointer;}
.body {border-color:blue;border-style:solid;border-width:1px;}
</style>
<ul id="QQ">
<li>我的好友</li>
<li>AA<br/>BB</li>
<li>我的同学</li>
<li>CC<br/>DD</li>
<li>陌生人</li>
<li>EE<br/>FF</li>
</ul>
$(function(){
$("#QQ li:odd").addClass("body");
$("#QQ li:even").addClass("header").click(function(){
$(this).next("li.body").show("fast").siblings("li.body").hide("fast");
});
$("#QQ li:first").click();//模拟点击事件
});
jquery cookie插件
使用方法，主要有三步：
1、添加对jquery.cookie.js
2、设置值 $.cookie('key','value'),cookie中保存的值都是文本。
3、读取值，var v = $.cookie('key');
设置值的时候还可以指定第三个参数：
$.cookie('key','value',{expires:7,path:'/',domain:'www.baidu.com',secure:true});
expires表示要求浏览器保留cookie几天，这个值只是给浏览器的建议。
