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

.toggleClass(className) /.toggleClass(className,switch) /  .toggleClass([switch]) / .toggleClass( function(index, class, switch) [, switch ] ) toggle是切换的意思，方法用于切换，switch是个bool类型值，这个看例子就明白

Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.

<div>Some text.</div>

第一次执行

复制代码 代码如下:

$( "div.tumble" ).toggleClass( "bounce" )
<div>Some text.</div>

第二次执行

复制代码 代码如下:

$( "div.tumble" ).toggleClass( "bounce" )
<div>Some text.</div>

复制代码 代码如下:

$( "#foo" ).toggleClass( className, addOrRemove );

// 两种写法意思一样

if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}

复制代码 代码如下:

$( "div.foo" ).toggleClass(function() {
  if ( $( this ).parent().is( ".bar" ) ) {
    return "happy";
  } else {
    return "sad";
  }
});

.css(propertyName) / .css(propertyNames) 获取元素style特定property的值

Get the value of style properties for the first element in the set of matched elements.

复制代码 代码如下:

var color = $( this ).css( "background-color" );

var styleProps = $( this ).css([
    "width", "height", "color", "background-color"
  ]);

.css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson ) 设置元素style特定property的值

Set one or more CSS properties for the set of matched elements.

复制代码 代码如下:

$( "div.example" ).css( "width", function( index ) {
  return index * 50;
});

$( this ).css( "width", "+=200" );

$( this ).css( "background-color", "yellow" );

$( this ).css({
      "background-color": "yellow",
      "font-weight": "bolder"
    });

事件方法

.bind( eventType [, eventData ], handler(eventObject) ) 绑定事件处理程序，这个经常用，不多解释

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.
  });
});