JQ(下)
jQuery事件
blur()
focus()
click()
dblclick()
keyup()
keydown()
mouseenter()
mouseleave()
mouseover()
mouseout()
mousedown()
mousemove()
mouseup()
change()
select()
submit()
scroll()
resize()
ready()
load()
... ...
事件绑定及移除
bind( ) 为每个匹配的元素绑定一个或多个事件处理函数
语法：bind( event , fn ) //不能给未来元素添加事件
$("p").bind("click", function(){
alert( $(this).text() );
});
$('h2').bind({
mouseover: function (){
alert('移上');
},
mouseout: function (){
alert('移出');
}
})
unbind( ) 与 bind( ) 反向的操作，删除元素的一个或多个事件
语法：unbind(event , fn )
live( ) 把事件绑定到当前及以后添加的元素上面
语法：live( event , fn ) // 1.9.x已经放弃
$("p").live("click", function(){
alert( $(this).text() );
});
JQ1.4之前用得比较多，现在已被放到不推荐使用列表中
die(event , fn ) 与 live() 反向的操作，删除先前用live()绑定的事件
delegate( ) 把事件绑定到当前及以后添加的元素上面
语法：delegate( selector , event , fn )
$("ul").delegate("li", "click", function(){
alert( $(this).html() );
});
JQ1.4之后加入的，和live有点相似
undelegate( selector , event , fn ) 删除由 delegate() 方法添加的一个或多个事件处理程序
on( ) 把事件绑定到当前及以后添加的元素上面
语法：on( event , selector , fn )
$("p").on("click", function(){ //未来元素无效
alert( $(this).text() );
});
$(“ul”).on( “click” , “li”, function(){ //未来元素有效
alert( $(this).html() );
});
JQ1.7开始引入了全新事件绑定机制
off( event , selector , fn ) on()的反向操作，移除用on()绑定的事件
建议:
从jQuery1.7开始，jQuery引入了全新的事件绑定机制，on()和off()两个函数统一处理事件绑定。
jQuery推出on()的目的有2个，一是为了统一接口，二是为了提高性能，所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了，因为它已经放入不推荐使用列表中，随时会被弃用。
一次性事件
one( ) 为匹配的元素绑定一次性的事件处理函数
语法：one( event , fn ) //未来元素无效
$("p").one("click", function(){
alert( $(this).html() );
});
当使用 one() 方法时，每个元素只能运行一次事件处理器函数，执行完之后事件就会被移除
合成事件:
hover( )方法
语法：hover(fn1,fn2); // 鼠标进入时执行fn1，鼠标离开时执行fn2
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
toggle( )方法
语法：toggle(fn1,fn2,fn3,fn4...);
$("li").toggle( // 响应匹配元素的轮流的click事件
function () { $(this).addClass(“show”); },
function () { $(this).removeClass(“show”); }
);
$(“div”).toggle( ); //显示隐藏
事件流
事件对象
事件对象存储了和事件相关的信息
原生JS事件对象:
oDiv.onclick=function (ev){
var oEvent=ev||window.event;
console.log(oEvent); //oEvent即为事件对象
}
JQ处理了其中的兼容问题，可以直接使用
$(‘body’).click(function(e){
console.log(e); //e即为事件对象
});
阻止冒泡/传播：e.stopPropagation()
阻止默认行为：e.preventDefault();
事件类型：e.type
触发事件的元素：e.target ( 原生DOM对象 )
指示按了哪个键或按钮：e.which
鼠标的相对坐标：e.clientX/Y e.pageX/Y
事件发生时的时间戳：e.timeStamp（返回总毫秒数）
鼠标事件中离开或者进入的DOM元素：e.relatedTarget
... ...
转换：
在实际工作中，我们可能会有这样的需求
使用JQ获取DOM对象，然后在JS使用
或者JS获取的DOM对象，然后在JQ使用
var box = document.querySelector('#box'); // js dom
var $box = $('#box'); // jq dom
$box[0].style.color = 'blue';
$box.get(0).style.color = 'blue';
$(box).css('color','red');
$符冲突问题
在jQuery中，$符是jQuery的别名
所有使用$符的地方都可以使用jQuery来替换
例如：
$('#div').click(....);
等同于
jQuery('#div').click(....);
当我们引入多个js库后，在另一个js库中也定义了$符的话，我们使用$符号时就会发生冲突。
<script src="prototype-1.6.0.js"></script>
<script src="jquery-1.8.3.js"></script>
jquery最后引入
此时，$符指向jquery中定义的$符号
<script src="jquery-1.8.3.js"></script>
<script src="prototype-1.6.0.js"></script>
prototype最后引入
此时，$符指向prototype中定义的$符号
noConflict()方法
jQuery中的noConflict( )方法的作用就是让jQuery放弃对$符的所有权
当代码中调用该方法后，不可以使用$来调用jQuery方法
$.noConflict( );
$(‘#div’).click(....); //无效
jQuery(‘#div’).click(....); //有效
jQuery别名
jQuery中允许我们自定义jQuery的别名
var jq=$.noConflict();
jq(‘#div’).click(....); //有效
jQuery(‘#div’).click(....); //有效
$(‘#div’).click(....); //无效 报错
如何继续使用$符
如果jQuery代码习惯使用$符号，并且不愿意改变这种习惯，可以把$符号作为变量传递给ready方法，函数内可以正常使用$符
$.noConflict( );
jQuery(function ($){
$(‘h1’).click( function (){ alert($(this).html( ) );
});
jQuery扩展 ( 插件开发接口 )
$.extend()方法
jQuery.extend（target [，object1] [，objectN]）
当提供两个或多个对象参数时，其他对象的属性将合并到目标对象。
var obj1 = {a: 1, b: 2, c: {d: 4, e: 5}};
var obj2 = {c: {g: 7}, d: 8};
$.extend(obj1,obj2);
console.log(obj1);
Object.assign(obj1,obj2);
console.log(obj1);
如果只提供一个参数对象，则表示省略了target参数。在这种情况下，jQuery对象本身被假定为目标。
通过这样做，您可以向jQuery名称空间添加新功能。这对于希望向JQuery添加新方法的插件非常有用。
$.extend({
fly:function (){
alert('I can fly');
}
})
$.fly();
$.fn.extend()方法
jQuery源码如下:
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
......
jQuery.fn = jQuery.prototype // 原型对象
jQuery.fn.extend = jQuery.prototype.extend
$.fn.extend扩展的是 jQuery 实例对象的方法
$.fn.extend({
rclick:function (fn){
$(this).mousedown(function (e){
if (e.which == 3) {
fn();
}
})
}
})
$('#box').rclick(function (){
alert('右键点击');
})
插件概述
JQ插件是以 jQuery 的核心代码为基础，编写出复合一定规范的应用程序。也就是说，插 件也是 jQuery 代码，通过都 js 文件引入的方式植入即可。 插件的种类很多，主要大致可以分为：UI 类、表单及验证类、输入类、特效类、Ajax 类、滑动类、图形图像类、导航类、综合工具类、动画类等等。
引入插件的步骤，基本如下：
1.必须先引入 jquery.js 文件，而且在所有插件之前引入；
2.引入插件；
3.引入插件的周边，比如皮肤、中文包等。
jQuery validate 表单验证插件
插件文档：
|
序号
|
规则
|
描述
|
|
1
|
required=true
|
必须输入的字段。
|
|
2
|
remote="check.php"
|
使用 ajax 方法调用 check.php 验证输入值。
|
|
3
|
email=true
|
必须输入正确格式的电子邮件。
|
|
4
|
url=true
|
必须输入正确格式的网址。
|
|
5
|
date=true
|
必须输入正确格式的日期。日期校验 ie6 出错，慎用。
|
|
6
|
dateISO=true
|
必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
|
|
7
|
number=true
|
必须输入合法的数字（负数，小数）。
|
|
8
|
digits=true
|
必须输入整数。
|
|
9
|
creditcard:
|
必须输入合法的信用卡号。
|
|
10
|
equalTo="#field"
|
输入值必须和 #field 相同。
|
|
11
|
accept:
|
输入拥有合法后缀名的字符串（上传文件的后缀）。
|
|
12
|
maxlength=5
|
输入长度最多是 5 的字符串（汉字算一个字符）。
|
|
13
|
minlength=10
|
输入长度最小是 10 的字符串（汉字算一个字符）。
|
|
14
|
rangelength=[5,10]
|
输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
|
|
15
|
range=[5,10]
|
输入值必须介于 5 和 10 之间。
|
|
16
|
max=5
|
输入值不能大于 5。
|
|
17
|
min=10
|
输入值不能小于 10。
|
jQuery AJAX
$.ajax( options ) 通过 HTTP 请求加载远程数据
url：请求的url地址
type：请求类型（get/post...）
cache：是否读取缓存，默认true
data：要发送给服务器的数据，示例：
"name=jack&age=19"
string或Object
{name:"jack",age:"19"}
async：默认true，为异步请求
dataType：服务器返回的数据类型
特殊的格式JQ会进行预解析和兼容性修复。
可选择的值："xml" , "html" , "script" , "json" , "text"，”jsonp”等
timeout：设置超时（毫秒）
success：请求成功的回调函数
error：请求失败的回调函数
complete：请求完成后的回调函数，无论成功与失败
beforeSend：发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义 HTTP头。
在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
$('#login').click(function (){
$.ajax({
type:'get',
url:'test.php',
dataType:'json',
cache:false, //不使用缓存
success:function (json){
$('h1').html(json.name+json.sex+json.age);
},
error:function (){
alert('请求失败');
}
});
})
serialize( )
将一个form表单内的所有数据转换为可以发送给服务器的字符串
示例：$("form").serialize()
"name=小明&age=19&msg=abc"
$.get()
$.get( url [, data] [, callback] [, dataType]);
url : 请求的URL
data ： 可选，发送至服务器的数据
callback ： 可选，请求完成时的回调函数
dataType ： 可选，参照$.ajax参数中的dataType
$.get(“act.php”,{user:“cainiao”,pass:“123”},function (data){
alert(data.msg);
},“json”);
$.post()
$.post 与 $.get 语法相同，唯一的不同就是请求是以post方式进行。
示例：
$.post(“act.php”,{user:“cainiao”,pass:“123”},function (data){
alert(data.msg);
}, ”json”);
$.getJSON()
$.getJSON(url [, callback]);加载一段JSON并解析
jsonp：
ipt.onkeyup=function (){
$.ajax({
type:'get',
dataType:'jsonp',
jsonp:'cb',
// jsonpCallback:'mycallback',
success:function (json){
// $('#list').empty();
$('#list').html('');
for (var i = 0; i < json.s.length; i++) {
$('#list').append('<li>'+json.s[i]+'</li>');
}
}
});
}
