搜档网
当前位置:搜档网 › jquery2

jquery2

掌握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

Hello2

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]) 从每一个匹配的元素中删除绑定的事件。

事件委派

相关主题