掌握jQuery的事件响应
掌握使用jQuery实现ajax的请求
4.支持aJax,支持文件格式:xml/html/script/json/jsonp
$("#feeds").load("feeds.html");//相应区域导入静态页内容
$.ajax({
type: "POST",
url: "data.json",
success: function(data){
//data形参接受传回的数据(json格式的字符串)
eval('var obj='+data)
alert(https://www.sodocs.net/doc/9313053486.html,);
},
failure: function(){
alert('https://www.sodocs.net/doc/9313053486.html,');
}
});
// failure是无效的设置
5. 支持事件的响应:
页面载入。当DOM载入就绪可以查询及操纵时绑定一个要执行的函数, 99.99%的JavaScript函数都需要在那一刻执行.以下四个函数等价。
jQuery(document).ready(function(){ });
可简写为$ (document).ready(function(){ });
可简写为jQuery(function(){ });
可简写为$(function(){ });
记住:$()如果选择了函数实例则表示在载入时执行该函数
$(function() {
$("p:last").text("2.The DOM is now loaded and can be manipulated(受控).");
});
jQuery(function(){ });用于存放操作DOM对象的代码,执行其中代码时DOM 对象已存在。不可用于存放开发插件的代码,因为jQuery对象没有得到传递,外部通过jQuery.method也调用不了其中的方法(函数)。
(function(){ })(jQuery);用于存放开发插件的代码,执行其中代码时DOM 不一定存在,所以直接自动执行DOM操作的代码请小心使用。
事件处理
bind(type,[data],fn):为每个匹配元素的特定事件绑定事件处理函数.
参数:
type:用字符串指定事件。多个事件用空格间隔,不是逗号。
data:可以为json格式的数据或字符串
fn:指定事件处理函数实例(函数变量)
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
$('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});//在鼠标移入移出时切换
p1
var message = 'Spoon!';
$('#foo').bind('click', {msg: message}, function(event) {
alert(event.data.msg);
});//客户端事件,通过event对象形参的data属性读取
unbind([type], [fn]): bind的反向操作,从每一个匹配的元素中删除绑定的事件。
$("p").unbind()
one(type,[data],fn) 为每个匹配元素的特定事件绑定一次性的事件处理函数。
用one替换bind
var message = 'Spoon!';
$('#foo'). one('click', {msg: message}, function(event) {
alert(event.data.msg);
});//客户端事件,通过event对象形参的data属性读取
事件切换
hover(over,out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。
$("p").hover(function () {
$(this).addClass("hilite");//鼠标放上去时
}, function () {
$(this).removeClass("hilite");//移开鼠标
});//鼠标放上去和移开的不同效果
live(type,[data],fn), 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效,这是与bind不同之处。
$('.clickme').live('click', function() {
alert("Live handler called.");
});
die([type],[fn]) 此方法与live正好完全相反。
function aClick() {
$("div").show().fadeOut("slow");
}
$("#unbind").click(function () {
$("#theone").die("click", aClick)
});
浏览器事件
blur触发每一个匹配元素的blur事件
$("p").blur();
blur(fn)在每一个匹配元素的blur事件中绑定一个处理函数。
$("p").blur( function () { alert("Hello World!"); } );
6.动画:
$("p").show("slow");//隐藏对象(慢速渐变,slow持续时间为600ms,fast200ms,normal)
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em"
}, 1000 );
});//鼠标点击后宽、高、字体的动态变化
动画类型:
基本:show,hide,toggle
Hello1
Hello3
Hello4
var flip = 1;
$("button").click(function () {
flip=++flip % 4;
$("p").each(function(){
$(this).toggle($(this).index()!=flip);//只隐藏其中之一。
});
});
滑动:slideDown,slideUp,slideToggle
淡入淡出:fadeIn,fadeout,fadeTo
自定义:animate,stop,delay
7.扩展:
扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。
定义
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
使用
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
用来在jQuery命名空间上增加新函数。
定义
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
使用
alert(jQuery.max(2,3));//输出结果为3
为每一个jQuery 对象添加一个函数
定义
$.fn.background = function(bg){
return this.css('background', bg);
};
使用
$("#element").background("red");
如果要为每一个jQuery 对象添加一个函数,必须把该函数指派给 $.fn,同时这个函数必须要返回一个 this(jQuery 对象)
var params = { width:1680, height:1050 };
var str = jQuery.param(params);
$(".result").text(str);// width=1680&height=1050
jQuery中将识别button标签。
var flip = 0;
$("button").click(function () {
$("p").toggle( flip++ % 3 == 0 );
});
作业:
为id为p1的标签绑定一个单击事件
在单击事件时产生ajax请求,用data.htm文件更新id为p2的显示内容。
trigger(type,[data]) 在每一个匹配的元素上触发浏览器某类事件,也会产生事件冒泡,只触发一次。
triggerHandler(type,[data]) 不会执行浏览器默认动作,也不会产生事件冒泡。
示例一给一个事件传递参数
$("p").click( function (event, a, b) {
// 一个普通的点击事件时,a和b是undefined类型
// 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
alert(String.format(" a={0},b={1}",a,b));
}).trigger("click", ["foo", "bar"]);
示例二触发自定义事件类型:
第一步
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2);
});//自定义事件myEvent
第二步
$("p:first").trigger("myEvent", ["Hello","World!"]); //触发自定义事件myEvent,传入参数数组
注意:两步不能倒置
示例三触发系统事件:
$("#old").click(function(){
$("input").trigger("focus");
});// click触发focus
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("Focused!").appendTo("body").fadeOut(1000);
});
unbind([type],[fn]) 从每一个匹配的元素中删除绑定的事件。
事件委派