1 window.onload和$(document).ready()的比较
| 方法 | 执行时机 | 多次使用 | |
| javascript | window.onload | 网页所有元素全部加载到浏览器后才执行 | onload事件一次只能保存对一个函数的引用，他会自动用后面的函数覆盖前面的函数 |
| jQuery | $(document).ready() | dom完全就绪即可调用 | 会在现有行为上追加新的行为，并且这些行为函数会按照注册的顺序一次执行 |
要想两个函数顺序触发，使用：
window.onload=function(){
one();
two();
}等价于
$（document).ready(function(){
one();
})
$（document).ready(function(){
two();
});$(document).ready(function(){
//编写代码 })
可以简写为 $(function(){
//编写代码 })
2 事件绑定
bind(type [,data],fn); type指事件类型 第二个参数是可选参数 第三个参数石用来绑定的处理函数
举例如下：
$(function(){
$("#panel h5.head").bind("click",function(){
if ($(this).next().is(":visible")){
$(this).next().hide();
}else{
$(this).next().show();
}
})
})代码分析:为h5元素绑定单击事件，处理函数让标题元素的下一个元素显示。
为了使DOM元素可以使用jQuery中的方法，可以用$(this)将其转换为jQuery对象。
is(":visible")可以用来判断元素是否显示，如果显示则隐藏，如果隐藏则显示。
绑定的事件类型可以是click也可以是mouseover\mouseout 修改后代码如下：
$(function(){
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
}).bind("mouseout",function(){
$(this).next().hide();
})
})$(function(){
$("#panel h5.head").mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
})
});3 合成事件
| 事件 | 描述 | 语法 |
| hover() | 鼠标悬停事件 | hover(enter,leave) |
| toggle() | 鼠标连续单击事件 | toggle(fn1,fn2,...fnN); |
用hove 来实现上述鼠标事件，代码如下：
$(function(){
$("#panel h5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
});toggle()第一次单击触发第一个函数，第二次触发第二个函数，如果有更多函数，依次触发，随后的每次单击都重复对这几个函数的轮番调用。
用toggle()改写上面的例子：
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
});toggle()方法在jQuery中还有另外一个作用：切换元素的可见状态。为元素添加方法.toggle()即可。
4 事件冒泡和事件捕获
假定内部span元素和外部div 元素都绑定了单击事件，同时body元素也绑定了单击事件。
那么单击span元素的同时，也单击了div 和body元素，元素的click事件会按照以下顺序冒泡/
<span>-------<div>-------<body>
| 事件冒泡 | 会触发上级元素 | 有必要对事件的作用范围进行限制 |
| 事件捕获 | 与事件冒泡相反，从顶端向下触发 | jQuery不支持事件捕获 |
事件冒泡引发的问题处理：
event为事件对象，这个事件对象只有事件处理函数才可以访问到，当事件处理函数执行完毕后，事件对象就被销毁。
在程序中使用事件对象非常简单，只需要为函数添加一个参数event
停止事件冒泡 stopPropagation()方法 使用如下：
$("span").bind("click",function(event){
var txt=$("#msg").html()+"<p>内层元素被单击</p>";
$("#msg").html(txt);
event.stopPropagation();
});阻止默认行为 preventDefault()
如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false.
5 事件对象的属性
| event.type | 获取到事件类型 |
| event.preventDefault() | 阻止默认的事件行为 |
| event.stopPropagation() | 停止事件冒泡 |
| event.target | 获取到触发事件的元素 |
| event.relatedTarget | 相关元素通过此来访问 |
| event.pageX和event.pageY | 获取到光标相对于页面的x坐标和y坐标 |
| event.which | 在鼠标单击事件中获取到鼠标的左中右键、在键盘事件中获取键盘的按键 |
| event.metaKey | 为键盘事件中获取<ctrl>键 |
6 移除事件
unbind([type],[data]);第一个参数是事件类型，第二个参数是要移除的函数。使用如下：
$(function(){
$("#delbtn").click(function(){
$("#btn").unbind("click",myfun2); //删除绑定函数2
})
});对于只需触发一次，随后就要立即解除绑定的情况，可以使用one()方法，用法和bind()一样。
7 模拟操作
trigger() 当页面加载完毕后，立刻输出想要的结果。不仅能够触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。
triggle(type,[data])方法有两个参数，第一个参数是触发的事件类型，第二个是要传递给事件处理函数的附加数据，以数组形式传递。举例如下：
$("#btn").bind("myclick",function(event,message1,message2){
$("#test").append("<p>"+message1+message2+"</p>");
});
$("btn").triggle("myclick",["我的自定义","事件"]);8 绑定多个事件------链式操作
（1）一次性绑定多个事件
$("div").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
});
});（2）添加事件命名空间，便于管理
$(function (){
$("div").bind("click",function(){
$("body").append("<p>click</p>");
});
$("div").bind("mouseover.plugin",function(){
$("body").append("<p>mouseover</p>");
});
$("div").bind("dbclick",function(){
$("body").append("<p>dbclick</p>");
});
$("button").click(function(){
$("div").unbind(".plugin");
});
});
删除多个事件也可以写链式代码：$("div").unbind("click").unbind("mouseover");
可以为元素绑定相同的事件类型，然后以命名空间的不同按需调用。
如以下代码：单击div 元素会同时触发click事件和clcik.plugin事件。
$(function (){
$("div").bind("click",function(){
$("body").append("<p>click</p>");
});
$("div").bind("click.plugin",function(){
$("body").append("<p>click.plugin</p>");
});运行结果如下：
9 jQuery中的动画
| show() hide() | 控制内容的显示与隐藏， | 带参数后会有动画，指定一个速度关键字 |
| fadein() fadeout() | 只改变元素的不透明度 | |
| slideUp()slideDown() | 只会改变元素的高度 | 可以指定速度参数 |
| animate() | 自定义动画 | animate(params,speed,callback) |
animate(params,speed,callback) 第一个参数，一个包含样式属性及值的映射。第二个参数，速度参数，可选。第三个参数，在动画完成时执行的参数。
$(function(){
$("#panel").click(function(){
$("this").animate({left:"50px",height:"200px"},3000);
});
});(1)动画回调函数
如果想在最后一步切换元素的css样式，再最后添加代码css("border","5px solid blue"),实际上，在刚开始执行动画的时候，css（）方法就被执行了。
css()方法并不会加入到动画队列中，而是立即执行。这时可以利用回调函数对非动画方法实现排队。
$("#panel").click(function(){
$("this").animate({left:"50px",height:"200px",opacity:"1"},3000)
.animate({top:"50px",width:"200px"},3000, function(){
$(this).css("border","5px solid blue");})
});
(2)停止元素的动画
stop([clearQueue],[gotoEnd])，其中两个参数均为可选参数，为布尔值，第一个参数表示是否要清空动画队列，第二个参数表示是否将正在执行的动画直接跳转到末状态。
遇到组合动画，将将stop()方法的第一个参数设为true
判断元素是否处于动画状态
$(element).is(":animated"){}
延迟动画，用delay()
$("this").animate({left:"50px",height:"200px",opacity:"1"},3000)
.delay(1000)
.animate({top:"50px",width:"200px"},3000)
.delay(2000)
.fadeOut("slow");
});10 其它动画方法
toggle() slideToggle() |
切换元素的可见状态 改变元素的高度 |
fadeTo() fadeToggle() |
把元素的不透明度以渐近方式调整到指定的值 调整元素的不透明度 |
五 jQuery中的事件和动画
1 表单应用
（1）获取焦点和失去焦点
input:focus,textarea:focus{
border:1px solid #f00;
background:#ccc;
}（2）复选框应用
$("#checkAll").click(function(){
$("[name=items]:checkbox").attr("checked",true);
});
$("#checkNo").click(function(){
$("[name=items]:checkbox").attr("checked",false);
});
$("#checkRev").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",!this.attr("checked"));
});
});
复选框被选中以后，用户点击提交按钮，需要将选项中的值输出。
$("#send").click(function(){
var str="你选中的是：\r\n";
$("[name=items]:checkbox:checked").each(function(){
str+=$(this).val()+"\r\n";
});
alert(str);
});运行结果如下:
（3）下拉框应用
将选中的左边的选项添加到右边
$("#add").click(function(){
var $options=$("#selected1 option:selected");
var $remove=$options.remove();
$remove.appendTo("#selected2");
});删除和追加可以用appendTo()方法直接完成，上述代码可简化为：
$("#add").click(function(){
var $options=$("#selected1 option:selected");
$options.appendTo("#selected2");
});将全部的左边项添加到右边
$("#addAll").click(function(){
var $options=$("#selected1 option");
$options.appendTo("#selected2");
});双击某个选项将其添加给对方
$("#selected1").dbclick(function(){
var $options=$("option:selected",this);
$options.appendTo("#selected2");
});$("option:selected",this);
这里第二个this参数指作用域。
全部代码如下：
<div class="content fl">
<select multiple="multiple" id="selected1" style="width:100px; height:160px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
</select>
<div >
<span id="add">选中的添加到右边</span>
<span id="addAll">全部添加到右边</span>
</div>
</div>
<div class="content">
<select multiple="multiple" id="selected2" style="width:100px; height:160px;">
</select>
<div >
<span id="add1">选中的添加到左边</span>
<span id="addAll1">全部添加到左边</span>
</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
$("#add").click(function(){
var $options=$("#selected1 option:selected");
$options.appendTo("#selected2");
});
$("#addAll").click(function(){
var $options=$("#selected1 option");
$options.appendTo("#selected2");
});
$("#selected1").dblclick(function(){
var $options=$("option:selected",this);
$options.appendTo("#selected2");
});
$("#add1").click(function(){
var $options=$("#selected2 option:selected");
$options.appendTo("#selected1");
});
$("#addAll1").click(function(){
var $options=$("#selected2 option");
$options.appendTo("#selected1");
});
$("#selected2").dblclick(function(){
var $options=$("option:selected",this);
$options.appendTo("#selected1");
});
</script>运行结果如下：
2 表单验证
当用户在文本框填完信息以后，将光标移出时，即需判断所填字段是否合乎规则。.blur()
<form>
<div>
<label>用户名：</label>
<input type="text" id="username" class="required" value="" />
</div>
<div>
<label>密码：</label>
<input type="text" id="password" value="" />
</div>
<div>
<input type="submit" id="btnSubmit" value="提交" />
</div>
</form>
<script src="js/jquery-1.11.3.js"></script>
<script>
$("form :input.required").each(function(){ //往每个class有required样式的input元素后面添加*号
$(this).parent().append( $("<span class='star'>*</span>") );
});
$("form :input#username").blur(function(){ //失去焦点时验证域
if( this.value == ""||this.value.length<6 ){
$(this).parent().append( $("<span class='error'>请至少输入6位的用户名</span>") );
$(this).parent().find(".success").remove();
}
else{
$(this).parent().append( $("<span class='success'>验证正确</span>") );
$(this).parent().find(".error").remove();
}
});
$("form :input#password").blur(function(){ //失去焦点时验证域
if( this.value == ""&&!/^1\d{10}$/.test(this.value) ){
$(this).parent().append( $("<span class='error'>密码格式不正确</span>") );
$(this).parent().find(".success").remove();
}
else{
$(this).parent().append( $("<span class='success'>验证正确</span>") );
$(this).parent().find(".error").remove();
}
});
$("#btnSubmit").click(function(){
$("form :input.required").trigger("blur"); //让所有需要验证的域失去焦点
var errNum = $("form .error").length;
if( errNum ){
alert("有验证字段失败，请重新填写");
return false;
}
alert("注册成功");
});运行结果如下：
3 表格应用
（1）隔行变色
$(function(){
$("tbody>tr:odd).addClass("odd");
$("tbody>tr:even).addClass("even");
}将某一行高亮：
$("tr:contains("王五")).addClass("selected");（2）单选框控制表格高亮
当单击某一行时，该行被选中并高亮显示。
$("tbody>tr").click(function(){
$(this).addClass("selected")
.siblings()removeClass("selected")
.end()
.find(":radio").attr("checked",true);
});代码分析：一开始对象为$(this)，但经过siblings().removeClass("selected")操作后，对象已经变为$(this).siblings()。而用.end()方法就可以回到$(this)对象。
运行结果如下：
（3）复选框控制表格高亮
复选框可以多行变色，判断是否高亮，可以用hasClass()方法来完成。
$("tbody>tr").click(function(){
if($(this).hasClass("selected")){
$(this).removeClass("selected")
.find(":checkbox").attr("checked",false);
}else{
$(this).addClass("selected")
.find(":checkbox").attr("checked",true);
}
});运行结果如下：
再次单击高亮选项，则高亮消失，复选框不再选中。
（4）表格展开关闭
<table>
<thead>
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
</thead>
<tbody>
<tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
<tr class="child_row_01"><td>李四</td><td>男</td><td>19</td></tr>
<tr class="child_row_01"><td>张三</td><td>男</td><td>16</td></tr>
<tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
<tr class="child_row_02" ><td>小二</td><td>女</td><td>18</td></tr>
<tr class="child_row_02" ><td>小二</td><td>女</td><td>20</td></tr>
<tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
<tr class="child_row_03" ><td>Rain</td><td>女</td><td>16</td></tr>
<tr class="child_row_03" ><td>MAX</td><td>女</td><td>28</td></tr>
</tbody>
</table>$(function(){
$("tr.parent").click(function(){
$(this).toggleClass("selected")
.siblings(".child_"+this.id).toggle();
});
});
代码分析：tr.parent获取父行，即事件触发元素。点击以后，1，添加删除高亮2，隐藏显示子行。子行的class属性为child_加父行的id 属性。
运行结果如下：
（5）表格内容筛选
用jQuery的filter()筛选方法可以筛选出含有文本"李“的表格行
$(function(){
$("#filterName").keyup(function(){
$(table tbody tr").hide()
.filter(":contains("+($(this).val())+")").show();
});
});
当页面刷新后，表单所有元素都出现，解决：在代码最后加.keyup()，这样当页面被刷新后，就会立即执行keyup()事件。
4 其它应用
（1）网页字体大小
$(function(){
$("span").click(function(){
var thisEle=$("#para").css("font-size");
var textFontsize=parseInt(thisEle,10);
var unit=thisEle.slice(-2);
var cName=$(this).attr("class");
if(cName=="bigger"){
textFontsize+=2;}else if(cName=="smaller"){
textFontsize-=2;
}
$("#para").css("font-size",textFontsize+unit);
});
});代码分析：首先获取id为para的元素的字体大小，这是thisEle即为字体大小，带单位。然后使用parseInt()方法去掉单位，unit里面存储单位，利用slice(-2),指定字符从倒数第二个字符开始。最后在设置字体大小时，可以直接把单位拼接上。
（2）网页选项卡
var $div_li=$("div.tab_menu ul li");
$div_li.click(function(){
$(this).addClass("selected")
.siblings().removeClass("selected");
var index=$div_li.index(this);
//获取当前li元素在全部li元素中的索引
$("div.tab_box>div").eq(index).show()
.siblings().hide();
}).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});
总结：
$(this) 不要误写为$("this")
[name=items]而不是[name="items"]
$parent.append('span class="formtips onerror">'+erroMsg+'</span>');而不是$parent.append(“span class="formtips onerror">"+erroMsg+"</span>");