了解了这些才能开始发挥jQuery的威力

2020-05-23 06:15:57易采站长站整理


Attach a handler to an event for the elements.



$( “#foo” ).bind( “click”, function() {
  alert( “User clicked on ‘foo.'” );
});


.delegate( selector, eventType, handler(eventObject) ) 这个看官方解释吧


Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.



$( “table” ).on( “click”, “td”, function() {//这样把td的click事件处理程序绑在table上
  $( this ).toggleClass( “chosen” );
});


.on( events [, selector ] [, data ], handler(eventObject) ) 1.7后推荐使用,取代bind、live、delegate


Attach an event handler function for one or more events to the selected elements.



$( “#dataTable tbody” ).on( “click”, “tr”, function() {
  alert( $( this ).text() );
});


关于bind、live、delegate、on的区别可以看看 jQuery三种事件绑定方式.bind(),.live(),.delegate()


.trigger( eventType [, extraParameters ] ) JavaScript出发元素绑定事件


Execute all handlers and behaviors attached to the matched elements for the given event type.



$( “#foo” ).trigger( “click” );


.toggle( [duration ] [, complete ] ) / .toggle( options ) 隐藏或显示元素


Display or hide the matched elements.



$( “.target” ).toggle();$( “#clickme” ).click(function() {
  $( “#book” ).toggle( “slow”, function() {
    // Animation complete.
  });
});


动画/Ajax
这两部分内容比较多,不是简单的一个function就可以的,这里只是列举一下常用方法名,关于其使用可以看看 jQuery API animation ajax ,或者 jQuery的动画处理总结,ASP.NET 使用Ajax动画


queue/dequeue/clearQueue


delay/stop


fadeIn/fadeOut/fadeTo/fadeToggle


slideUp/slideDown/slideToggle


show/hide


Ajax


$.ajax


$.load


$.get


最后


了解了上面这些内容,使用jQuery进行web开发的时候就可以体验到jQuery的威力了。本文不是jQuery学习指南,仅仅是个常用方法介绍,如果大家想学习jQuery,最好的教材还是jQuery API,本文中示例与英文解释全部来源于jQuery API。 另外文中介绍内容远远不是jQuery全部,但是首先掌握了这些可以对jQuery有一个比较全面的认识,然后再学习其他内容的时候就可以游刃有余了。