創(chuàng)新互聯(lián)jQuery教程：jQuery備忘單

• .wrap()
• .wrapAll()
• .wrapInner()

DOM 插入，內(nèi)部

• append()
• .appendTo()
• .html()
• .prepend()
• .prependTo()
• .text()

DOM 插入，外部

• .after()
• .before()
• .insertAfter()
• .insertBefore()

DOM 移除

• .detach()
• .empty()
• .remove()
• .unwrap()

DOM 替換

• .replaceAll()
• .replaceWith()

jQuery 遍歷

過(guò)濾

• .eq()
• .filter()
• .first()
• .has()
• .is()
• .last()
• .map()
• .not()
• .slice()

雜項(xiàng)遍歷

• .add()
• .addBack()
• .andSelf()
• .contents()
• .each()
• .end()

樹(shù)遍歷

• .children()
• .closest()
• .find()
• .next()
• .nextAll()
• .nextUntil()
• .parent()
• .parents()
• .parentsUntil()
• .prev()
• .prevAll()
• .prevUntil()
• .siblings()

jQuery 事件

例子

// A mouse event 'click'
$('#menu-button').on('click', () => {
  $('#menu').show();
});

// A keyboard event 'keyup'
$('#textbox').on('keyup', () => {
  $('#menu').show();
});

// A scroll event 'scroll'
$('#menu-button').on('scroll', () => {
  $('#menu').show();
});

事件對(duì)象

$('#menu').on('click', event => {
  $(event.currentTarget).hide();
});

方法鏈

$('#menu-btn').on('mouseenter', () => {
  $('#menu').show();
}).on('mouseleave', () => {
  $('#menu').hide();
});

阻止事件

$( "p" ).click(function( event ) {
  event.stopPropagation();
  // Do something
});

瀏覽器事件

• .error()
• .resize()
• .scroll()

事件對(duì)象

• event.currentTarget
• event.delegateTarget
• event.data
• event.isDefaultPrevented()
• event.isImmediatePropagationStopped()
• event.isPropagationStopped()
• event.metaKey
• event.namespace
• event.pageX
• event.pageY
• event.preventDefault()
• event.relatedTarget
• event.result
• event.stopImmediatePropagation()
• event.stopPropagation()
• event.target
• event.timeStamp
• event.type
• event.which

文件裝載

• .load()
• .ready()
• .unload()

事件處理程序附件

• .bind()
• .delegate()
• .die()
• .live()
• .off()
• .on()
• .one()
• .trigger()
• .triggerHandler()
• .unbind()
• .undelegate()

表單事件

• .blur()
• .change()
• .focus()
• .focusin()
• .focusout()
• .select()
• .submit()

鍵盤(pán)事件

• .keydown()
• .keypress()
• .keyup()

鼠標(biāo)事件

• .click()
• .contextMenu()
• .dblclick()
• .hover()
• .mousedown()
• .mouseenter()
• .mouseleave()
• .mousemove()
• .mouseout()
• .mouseover()
• .mouseup()
• .toggle()

jQuery 效果

例子

$('#menu-button').on('click', () => {
  // $('#menu').fadeIn(400, 'swing')
  $('#menu').fadeIn();
});

淡出效果

$('#menu-button').on('click', () => {
  // $('#menu').fadeOut(400, 'swing')
  $('#menu').fadeOut();
});

隱藏顯示

• .hide()
• .show()
• .toggle()

滑動(dòng)

• .slideDown()
• .slideToggle()
• .slideUp()

動(dòng)畫(huà)

• .animate()
• .clearQueue()
• .delay()
• .dequeue()
• jQuery.dequeue()
• .finish()
• jQuery.fx.interval
• jQuery.fx.off
• jQuery.speed
• .queue()
• jQuery.queue()
• .stop()

淡入淡出

• .fadeIn()
• .fadeOut()
• .fadeTo()
• .fadeToggle()

jQuery Ajax

例子

$.ajax({
  url: this.action,
  type: this.method,
  data: $(this).serialize()
}).done(function(server_data){
  console.log("success" + server_data);
}).fail(function(jqXHR, status, err){
  console.log("fail" + err);
});

全局 Ajax 事件處理程序

• .ajaxComplete()
• .ajaxError()
• .ajaxSend()
• .ajaxStart()
• .ajaxStop()
• .ajaxSuccess()

輔助函數(shù)

• jQuery.param()
• .serialize()
• .serializeArray()

低級(jí)接口

• jQuery.ajax()
• jQuery.prefilter()
• jQuery.ajaxSetup()
• jQuery.ajaxTransport()

速記方法

• jQuery.get()
• jQuery.getJSON()
• jQuery.getScript()
• jQuery.post()
• .load()

其他

jQuery 對(duì)象

• jQuery()
• jQuery.noConflict()
• jQuery.sub()
• jQuery.holdReady()
• jQuery.when()

延遲對(duì)象

• jQuery.Deferred()
• deferred.always()
• deferred.done()
• deferred.fail()
• deferred.isRejected()
• deferred.isResolved()
• deferred.notify()
• deferred.notifyWith()
• deferred.pipe()
• deferred.progress()
• deferred.promise()
• deferred.reject()
• deferred.rejectWith()
• deferred.resolve()
• deferred.resolveWith()
• deferred.state()
• deferred.then()
• .promise()

公共方法

• jQuery.boxModel
• jQuery.browser
• jQuery.contains()
• jQuery.each()
• jQuery.extend()
• jQuery.globalEval()
• jQuery.grep()
• jQuery.inArray()
• jQuery.isArray()
• jQuery.isEmptyObject()
• jQuery.isFunction()
• jQuery.isNumeric()
• jQuery.isPlainObject()
• jQuery.isWindow()
• jQuery.isXMLDoc()
• jQuery.makeArray()
• jQuery.map()
• jQuery.merge()
• jQuery.noop()
• jQuery.now()
• jQuery.parseHTML()
• jQuery.parseJSON()
• jQuery.parseXML()
• jQuery.proxy()
• jQuery.support
• jQuery.trim()
• jQuery.type()
• jQuery.unique()
• jQuery.uniqueSort()

DOM 元素方法

• .get()
• .index()
• .size()
• .toArray()

內(nèi)件

• .jquery
• .context
• jQuery.error()
• .length
• .pushStack()
• .selector

回調(diào)對(duì)象

• jQuery.Callbacks()
• callbacks.add()
• callbacks.disable()
• callbacks.disabled()
• callbacks.empty()
• callbacks.fire()
• callbacks.fired()
• callbacks.fireWith()
• callbacks.has()
• callbacks.lock()
• callbacks.locked()
• callbacks.remove()