Page 1

jQuery Selectors Use our excellent jQuery Selector Tester to experiment with the different selectors. Selector * #id .class element .class.class

Example $("*") $("#lastname") $(".intro") $("p") $(".intro.demo")

Selects All elements The element with id=lastname All elements with class="intro" All <p> elements All elements with class=intro and class=demo

:first :last :even :odd

$("p:first") $("p:last") $("tr:even") $("tr:odd")

The first <p> element The last <p> element All even <tr> elements All odd <tr> elements

:eq(index) :gt(no) :lt(no) :not(selector)

$("ul li:eq(3)") $("ul li:gt(3)") $("ul li:lt(3)") $("input:not(:empty)")

The fourth element in a list (index starts at 0) List elements with an index greater than 3 List elements with an index less than 3 All input elements that are not empty

:header :animated

$(":header")

All header elements <h1><h2>... All animated elements

:contains(text)

All elements which contains the text

:empty :hidden :visible

$ (":contains('W3Schools')") $(":empty") $("p:hidden") $("table:visible")

s1,s2,s3

$("th,td,.intro")

All elements with matching selectors

[attribute] [attribute=value] [attribute!=value] [attribute$=value ]

$("[href]") $("[href='#']") $("[href!='#']") $("[href$='.jpg']")

All elements with an href attribute All elements with href attribute value="#" All elements with href attribute value<>"#" All elements with href attribute value containing ".jpg"

:input :text :password

$(":input") $(":text") $(":password")

All <input> elements All <input> elements with type="text" All <input> elements with type="password"

All elements with no child (elements) nodes All hidden <p> elements All visible tables


:radio :checkbox :submit :reset :button :image :file

$(":radio") $(":checkbox") $(":submit") $(":reset") $(":button") $(":image") $(":file")

All <input> elements with type="radio" All <input> elements with type="checkbox" All <input> elements with type="submit" All <input> elements with type="reset" All <input> elements with type="button" All <input> elements with type="image" All <input> elements with type="file"

:enabled :disabled :selected :checked

$(":enabled") $(":disabled") $(":selected") $(":checked")

All enabled input elements All disabled input elements All selected input elements All checked input elements

jQuery Event Methods Event methods trigger, or bind a function to an event for all matching elements. Trigger example: $("button#demo").click() The example above will trigger the click event for a button element with id="demo". Binding example: $("button#demo").click(function(){$("img").hide()}) The example above will hide all images when the button with id="demo" is clicked. Method ready() blur() change() click() dblclick() error() focus() keydown() keypress() keyup() load() mousedown() mouseenter() mouseleave() mousemove() mouseout()

Description Triggers, or binds a function to the ready event of a document (when an HTML document is ready to use) Triggers, or binds a function to the blur event of specified elements Triggers, or binds a function to the change event of specified elements Triggers, or binds a function to the click event of specified elements Triggers, or binds a function to the double click event of specified elements Triggers, or binds a function to the error event of specified elements Triggers, or binds a function to the focus event of specified elements Triggers, or binds a function to the key down event of specified elements Triggers, or binds a function to the key press event of specified elements Triggers, or binds a function to the key up event of specified elements Triggers, or binds a function to the load event of specified elements Triggers, or binds a function to the mouse down event of specified elements Triggers, or binds a function to the mouse enter event of specified elements Triggers, or binds a function to the mouse leave event of specified elements Triggers, or binds a function to the mouse move event of specified elements Triggers, or binds a function to the mouse out event of specified elements


mouseover() mouseup() resize() scroll() select() submit() unload()

Triggers, or binds a function to the mouse over event of specified elements Triggers, or binds a function to the mouse up event of specified elements Triggers, or binds a function to the resize event of specified elements Triggers, or binds a function to the scroll event of specified elements Triggers, or binds a function to the select event of specified elements Triggers, or binds a function to the submit event of specified elements Triggers, or binds a function to the unload event of specified elements

jQuery Event Handler Methods Event handler methods add or remove event handlers from matching elements. Method $(selector).bind(event) $(selector).delegate(selector, event) $(selector).die() $(selector).live(event)

Triggers Add one or more event handlers to matching elements Add an event handler to matching elements, now or in the future

Remove all event handlers added with the live() function Add an event handler to matching elements, now or in the future Add an event handler to matching elements. This handler can only $(selector).one(event) be triggered once $(selector).unbind(event) Remove an added event handler from matching elements $(selector).undelegate(event) Remove an event handler to matching elements, now or in the future

jQuery Effect Methods Method animate() clearQueue() delay() dequeue() fadeIn() fadeOut() fadeTo() hide() queue() show() slideDown() slideToggle() slideUp() stop() toggle()

Description Specify a custom animation for selected elements Remove all queued functions (not yet run) for the selected element Set a delay for all queued functions (not yet run) for the selected element Run the next queued functions for the selected element Show hidden selected elements with a fade effect (changing opacity) Hide selected elements with a fade effect (changing opacity) Gradually fade selected elements to a specified opacity Hide selected elements Show the queued functions for the selected element Show hidden selected elements Show hidden selected elements using a slide effect (changing height) Toggle hide and show for selected elements using a slide effect Hide selected elements using a slide effect (changing height) Stop a currently running animation on selected elements Toggle hide and show for selected elements


jQuery HTML Methods These methods work for both XML documents and HTML documents. Exception: The html() method. Method addClass() after() append() appendTo() attr() before() clone() detach() empty() hasClass() html() insertAfter() insertBefore() prepend() prependTo() remove() removeAttr() removeClass() replaceAll() replaceWith() text() toggleClass() unwrap() val() wrap() wrapAll() wrapInner()

Description Adds a class attribute value (for CSS) to selected elements Inserts content after selected elements Appends content to the inner HTML of selected elements Appends content to the inner HTML of selected elements Sets or returns an attribute and value of selected elements Inserts content before selected elements Makes a copy of selected elements Removes (but keeps a copy of) all selected elements Removes all content and child elements from selected elements Checks if the selected elements have a specified class (for CSS) Sets or returns the content (inner HTML) of selected elements Inserts specified elements after selected elements Inserts specified elements before selected elements Prepends content to the inner HTML of selected elements Prepends content to the inner HTML of selected elements Removes all selected elements Removes a specified attribute from all selected elements Removes a class (for CSS) from selected elements Replaces selected elements with new content Replaces selected elements with new content Sets or returns the content (inner HTML), with escaped tags, of selected elements Toggles between adding/removing a class (for CSS) from selected elements Replaces the parent element of each selected element Sets or returns the value of the selected elements (mostly used with input elements) Wraps each selected element within a specified content/element Wraps all selected elements within a specified content/element Wraps the inner HTML of each selected element within a specified content/element

jQuery CSS Methods Method css() height()

Description Sets or returns one or more style properties for selected elements Sets or returns the height of selected elements


offset() offsetParent()

Returns the position (relative to the document) of the first selected element Returns the first parent element with an offset position

position()

Returns the position (relative to the parent element) of the first selected element

scrollLeft() scrollTop() width()

Sets or returns the scroll left offset of the selected elements Sets or returns the scroll top offset of the selected elements Sets or returns the width of selected elements

jquery  

jquery jquery jquery jquery jquery jquery

Read more
Read more
Similar to
Popular now
Just for you