jQuery API

jQuery 使用场景

DOM Traversal and Manipulation

Get the <button> element with the class ‘continue’ and change its HTML to ‘Next Step…’

$( "button.continue" ).html( "Next Step..." )

Event Handling

Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked.

var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
  hiddenBox.show();
});

Ajax

Call a local script on the server /api/getWeather with the query parameter zipcode=97201 and replace the element #weather-temp’s html with the returned text.

$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function( data ) {
    $( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
  }
});

CSS 选择器

console.group("jQuery");
var allArticles = $('article[id^="post"]')
allArticles.each(function(index, article){
    var content = $('header>h1>a', article).text().trim();
    var href = $('header>h1>a', article).attr("href");
    console.log("[%s](%s)  ", content, href);
});
console.groupEnd();

jQuery 选择器

Category: Selectors [All Selector (“*”)](//api.jquery.com/all-selector/)
:animated Selector
Attribute Contains Prefix Selector [name|=”value”]
Attribute Contains Selector [name*=”value”]
Attribute Contains Word Selector [name~=”value”]
Attribute Ends With Selector [name$=”value”]
Attribute Equals Selector [name=”value”]
Attribute Not Equal Selector [name!=”value”]
Attribute Starts With Selector [name^=”value”]
:button Selector
:checkbox Selector
:checked Selector
Child Selector (“parent > child”)
Class Selector (“.class”)
:contains() Selector
Descendant Selector (“ancestor descendant”)
:disabled Selector
Element Selector (“element”)
:empty Selector
:enabled Selector
:eq() Selector
:even Selector
:file Selector
:first-child Selector
:first-of-type Selector
:first Selector
:focus Selector
:gt() Selector
Has Attribute Selector [name]
:has() Selector
:header Selector
:hidden Selector
ID Selector (“#id”)
:image Selector
:input Selector
:lang() Selector
:last-child Selector
:last-of-type Selector
:last Selector
:lt() Selector
Multiple Attribute Selector [name=”value”][name2=”value2″]
Multiple Selector (“selector1, selector2, selectorN”)
Next Adjacent Selector (“prev + next”)
Next Siblings Selector (“prev ~ siblings”)
:not() Selector
:nth-child() Selector
:nth-last-child() Selector
:nth-last-of-type() Selector
:nth-of-type() Selector
:odd Selector
:only-child Selector
:only-of-type Selector
:parent Selector
:password Selector
:radio Selector
:reset Selector
:root Selector
:selected Selector
:submit Selector
:target Selector
:text Selector
:visible Selector

jQuery 事件

.bind()
.blur()
.change()
.click()
.dblclick()
.delegate()
.die()
.error()
event.currentTarget
event.data
event.delegateTarget
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
.focus()
.focusin()
.focusout()
.hover()
jQuery.proxy()
.keydown()
.keypress()
.keyup()
.live()
.load()
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
.off()
.on()
.one()
.ready()
.resize()
.scroll()
.select()
.submit()
.toggle()
.trigger()
.triggerHandler()
.unbind()
.undelegate()
.unload()

Ajax 请求

.ajaxComplete()
.ajaxError()
.ajaxSend()
.ajaxStart()
.ajaxStop()
.ajaxSuccess()
jQuery.ajax()
jQuery.ajaxPrefilter()
jQuery.ajaxSetup()
jQuery.ajaxTransport()
jQuery.get()
jQuery.getJSON()
jQuery.getScript()
jQuery.param()
jQuery.post()
.load()
.serialize()
.serializeArray()