jQuery Examples
jQuery Syntax Examples
$(this).hide()
Demonstrates the jQuery hide() method, hiding the current HTML element.
$("#test").hide()
Demonstrates the jQuery hide() method, hiding the element with id="test".
$("p").hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.
$(".test").hide()
Demonstrates the jQuery hide() method, hiding all elements with class="test".
jQuery Effects
jQuery hide()
Demonstrates the jQuery hide() method.
jQuery hide() and show()
Demonstrates jQuery hide() and show() methods.
jQuery toggle()
jQuery toggle() toggles between hide() and show().
jQuery hide()
Another hide demonstration. How to hide parts of text.
jQuery slideDown()
Demonstrates the jQuery slideDown() method.
jQuery slideUp()
Demonstrates the jQuery slideUp() method.
jQuery slideToggle()
Demonstrates the jQuery slideToggle() method.
jQuery fadeIn()
Demonstrates the jQuery fadeIn() method.
jQuery fadeOut()
Demonstrates the jQuery fadeOut() method.
jQuery fadeToggle()
Demonstrates the jQuery fadeToggle() method.
jQuery fadeTo()
Demonstrates the jQuery fadeTo() method.
jQuery animate()
Demonstrates a aimple use of the jQuery animate() method.
jQuery animate() - manipulate multiple CSS properties
Demonstrates that you can manipulate multiple CSS properties with the jQuery animate() method.
jQuery animate() - using relative values
Demonstrates that you can use relative values in the jQuery animate() method.
jQuery animate() - using pre-defined values
Demonstrates that you can use the pre-defined values "hide", "show", "toggle" in the jQuery animate() method.
jQuery animate()
Demonstrates more using the jQuery animate() method (several animate() calls after each other).
jQuery animate()
Demonstrates more using the jQuery animate() method (several animate() calls after each other).
HTML Manipulation
jQuery html()
Change the content of the selected HTML elements.
jQuery append()
Add content at the end of the selected to HTML elements.
jQuery prepend()
Add content at the beginning of the selected to HTML elements.
jQuery after()
Insert content after the selected to HTML elements.
jQuery before()
Insert content before the selected to HTML elements.
CSS Manipulation
jQuery css()
Change a CSS property for all matched elements.
jQuery css()
Change multiple CSS properties for all matched.
jQuery css()
Return a specified CSS property value from the first matched element.
jQuery height()
Change height of all matched elements.
jQuery width()
Change width of all matched elements.
AJAX and jQuery
jQuery load()
Load data from a server and put the returned data into the selected element.
jQuery $.ajax()
Load data from a server and put the returned data into the selected element.
jQuery Selectors
jQuery Selectors
Use our excellent jQuery Selector Tester to experiment with the different selectors.
| Selector | Example | Selects |
|---|---|---|
| * | $("*") | All elements |
| #id | $("#lastname") | The element with id=lastname |
| .class | $(".intro") | All elements with class="intro" |
| element | $("p") | All p elements |
| .class.class | $(".intro.demo") | All elements with the classes "intro" and "demo" |
| :first | $("p:first") | The first p element |
| :last | $("p:last") | The last p element |
| :even | $("tr:even") | All even tr elements |
| :odd | $("tr:odd") | All odd tr elements |
| :eq(index) | $("ul li:eq(3)") | The fourth element in a list (index starts at 0) |
| :gt(no) | $("ul li:gt(3)") | List elements with an index greater than 3 |
| :lt(no) | $("ul li:lt(3)") | List elements with an index less than 3 |
| :not(selector) | $("input:not(:empty)") | All input elements that are not empty |
| :header | $(":header") | All header elements h1, h2 ... |
| :animated | $(":animated") | All animated elements |
| :contains(text) | $(":contains('W3Schools')") | All elements which contains the text |
| :empty | $(":empty") | All elements with no child (elements) nodes |
| :hidden | $("p:hidden") | All hidden p elements |
| :visible | $("table:visible") | All visible tables |
| s1,s2,s3 | $("th,td,.intro") | All elements with matching selectors |
| [attribute] | $("[href]") | All elements with a href attribute |
| [attribute=value] | $("[href='default.htm']") | All elements with a href attribute value equal to "default.htm" |
| [attribute!=value] | $("[href!='default.htm']") | All elements with a href attribute value not equal to "default.htm" |
| [attribute$=value] | $("[href$='.jpg']") | All elements with a href attribute value ending with ".jpg" |
| [attribute^=value] | $("[href^='jquery_']") | All elements with a href attribute value starting with "jquery_" |
| :input | $(":input") | All input elements |
| :text | $(":text") | All input elements with type="text" |
| :password | $(":password") | All input elements with type="password" |
| :radio | $(":radio") | All input elements with type="radio" |
| :checkbox | $(":checkbox") | All input elements with type="checkbox" |
| :submit | $(":submit") | All input elements with type="submit" |
| :reset | $(":reset") | All input elements with type="reset" |
| :button | $(":button") | All input elements with type="button" |
| :image | $(":image") | All input elements with type="image" |
| :file | $(":file") | All input elements with type="file" |
| :enabled | $(":enabled") | All enabled input elements |
| :disabled | $(":disabled") | All disabled input elements |
| :selected | $(":selected") | All selected input elements |
| :checked | $(":checked") | All checked input elements |
jQuery Event Methods
jQuery Event Methods
Event methods trigger, or bind a function to an event for all matching elements.
Trigger example:
$("button").click() - triggers the click event for a button element.
Binding example:
$("button").click(function(){$("img").hide()}) - binds a function to the click event.
The following table lists all the methods used to handle events.
| Method | Description |
|---|---|
| bind() | Add one or more event handlers to matching elements |
| blur() | Triggers, or binds a function to the blur event of selected elements |
| change() | Triggers, or binds a function to the change event of selected elements |
| click() | Triggers, or binds a function to the click event of selected elements |
| dblclick() | Triggers, or binds a function to the dblclick event of selected elements |
| delegate() | Add one or more event handlers to current, or future, specified child elements of the matching elements |
| die() | Remove all event handlers added with the live() function |
| error() | Triggers, or binds a function to the error event of selected elements |
| event.currentTarget | The current DOM element within the event bubbling phase |
| event.data | Contains the optional data passed to jQuery.fn.bind when the current executing handler was bound |
| event.isDefaultPrevented() | Returns whether event.preventDefault() was called for the event object |
| event.isImmediatePropagationStopped() | Returns whether event.stopImmediatePropagation() was called for the event object |
| event.isPropagationStopped() | Returns whether event.stopPropagation() was called for the event object |
| event.pageX | The mouse position relative to the left edge of the document |
| event.pageY | The mouse position relative to the top edge of the document |
| event.preventDefault() | Prevents the default action of the event |
| event.relatedTarget | The other DOM element involved in the event, if any |
| event.result | This attribute contains the last value returned by an event handler that was triggered by this event, unless the value was undefined |
| event.stopImmediatePropagation() | Prevents other event handlers from being called |
| event.stopPropagation() | Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event |
| event.target | The DOM element that initiated the event |
| event.timeStamp | This attribute returns the number of milliseconds since January 1, 1970, when the event is triggered |
| event.type | Describes the nature of the event |
| event.which | Which key or button was pressed for a key or button event |
| focus() | Triggers, or binds a function to the focus event of selected elements |
| focusin() | Binds a function to the focusin event of selected elements |
| focusout() | Binds a function to the focusout event of selected elements |
| hover() | Binds one or two functions to the hover event of selected elements |
| keydown() | Triggers, or binds a function to the keydown event of selected elements |
| keypress() | Triggers, or binds a function to the keypress event of selected elements |
| keyup() | Triggers, or binds a function to the keyup event of selected elements |
| live() | Add one or more event handlers to current, or future, matching elements |
| load() | Triggers, or binds a function to the load event of selected elements |
| mousedown() | Triggers, or binds a function to the mouse down event of selected elements |
| mouseenter() | Triggers, or binds a function to the mouse enter event of selected elements |
| mouseleave() | Triggers, or binds a function to the mouse leave event of selected elements |
| mousemove() | Triggers, or binds a function to the mouse move event of selected elements |
| mouseout() | Triggers, or binds a function to the mouse out event of selected elements |
| mouseover() | Triggers, or binds a function to the mouse over event of selected elements |
| mouseup() | Triggers, or binds a function to the mouse up event of selected elements |
| one() | Add one or more event handlers to matching elements. This handler can only be triggered once per element |
| ready() | Binds a function to the ready event of a document (when an HTML document is ready to use) |
| resize() | Triggers, or binds a function to the resize event of selected elements |
| scroll() | Triggers, or binds a function to the scroll event of selected elements |
| select() | Triggers, or binds a function to the select event of selected elements |
| submit() | Triggers, or binds a function to the submit event of selected elements |
| toggle() | Binds two or more functions to the toggle between for the click event for selected elements |
| trigger() | Triggers all events bound to the selected elements |
| triggerHandler() | Triggers all functions bound to a specified event for the selected elements |
| unbind() | Remove an added event handler from selected elements |
| undelegate() | Remove an event handler to selected elements, now or in the future |
| unload() | Triggers, or binds a function to the unload event of selected elements |
jQuery Effect Methods
jQuery Effect Methods
The following table lists all the methods used to create animation effects.
| Method | Description |
|---|---|
| animate() | Runs a custom animation (of a set of CSS properties) on selected elements |
| clearQueue() | Removes all queued functions on selected elements |
| delay() | Sets a delay for all queued functions on selected elements |
| dequeue() | Runs the next queued functions on selected elements |
| fadeIn() | Fades in selected elements |
| fadeOut() | Fades out selected elements |
| fadeTo() | Fades in/out selected elements to a given opacity |
| fadeToggle() | |
| hide() | Hides selected elements |
| queue() | Shows the queued functions on selected elements |
| show() | Shows selected elements |
| slideDown() | Slide-down (show) selected elements |
| slideToggle() | Toggles slideUp() and slideDown() on selected elements |
| slideUp() | Slide-up (hide) selected elements |
| stop() | Stops a running animation on selected elements |
| toggle() | Toggles between hide() and show(), or custom functions, on selected elements |
jQuery HTML Methods
jQuery HTML Methods
The following table lists all the methods used to manipulate the DOM.
The methods below work for both HTML and XML documents. Exception: the html() method.
| Method | Description |
|---|---|
| addClass() | Adds one or more classes (for CSS) to selected elements |
| after() | Inserts content after selected elements |
| append() | Inserts content at the end of (but still inside) selected elements |
| appendTo() | Inserts content at the end of (but still inside) selected elements |
| attr() | Sets or returns an attribute and value of selected elements |
| before() | Inserts content before selected elements |
| clone() | Makes a copy of selected elements |
| detach() | Removes (but keeps a copy of) selected elements |
| empty() | Removes all child elements and content from selected elements |
| hasClass() | Checks if any of the selected elements have a specified class (for CSS) |
| html() | Sets or returns the content of selected elements |
| insertAfter() | Inserts HTML markup or elements after selected elements |
| insertBefore() | Inserts HTML markup or elements before selected elements |
| prepend() | Inserts content at the beginning of (but still inside) selected elements |
| prependTo() | Inserts content at the beginning of (but still inside) selected elements |
| remove() | Removes selected elements |
| removeAttr() | Removes an attribute from selected elements |
| removeClass() | Removes one or more classes (for CSS) from selected elements |
| replaceAll() | Replaces selected elements with new content |
| replaceWith() | Replaces selected elements with new content |
| text() | Sets or returns the text content of selected elements |
| toggleClass() | Toggles between adding/removing one or more classes (for CSS) from selected elements |
| unwrap() | Removes the parent element of the selected elements |
| val() | Sets or returns the value attribute of the selected elements (form elements) |
| wrap() | Wraps specified HTML element(s) around each selected element |
| wrapAll() | Wraps specified HTML element(s) around all selected elements |
| wrapInner() | Wraps specified HTML element(s) around the content of each selected element |
jQuery CSS Methods
jQuery CSS Methods
The following table lists all the methods used to manipulate CSS properties.
| Method | Description |
|---|---|
| addClass() | Adds one or more classes to selected elements |
| css() | Sets or returns one or more style properties for selected elements |
| hasClass() | Checks if any of the selected elements have a specified class |
| height() | Sets or returns the height of selected elements |
| offset() | Sets or returns the position (relative to the document) for selected elements |
| offsetParent() | Returns the first parent element that is positioned |
| position() | Returns the position (relative to the parent element) of the first selected element |
| removeClass() | Removes one or more classes from selected elements |
| scrollLeft() | Sets or returns the horizontal position of the scrollbar for the selected elements |
| scrollTop() | Sets or returns the vertical position of the scrollbar for the selected elements |
| toggleClass() | Toggles between adding/removing one or more classes from selected elements |
| width() | Sets or returns the width of selected elements |
jQuery AJAX Methods
jQuery AJAX Methods
AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.
The following table lists all the jQuery AJAX methods:
| Method | Description |
|---|---|
| $.ajax() | Performs an AJAX request |
| ajaxComplete() | Specifies a function to run when the AJAX request completes |
| ajaxError() | Specifies a function to run when the AJAX request completes with an error |
| ajaxSend() | Specifies a function to run before the AJAX request is sent |
| $.ajaxSetup() | Sets the default values for future AJAX requests |
| ajaxStart() | Specifies a function to run when the first AJAX request begins |
| ajaxStop() | Specifies a function to run when all AJAX requests have completed |
| ajaxSuccess() | Specifies a function to run an AJAX request completes successfully |
| $.get() | Loads data from a server using an AJAX HTTP GET request |
| $.getJSON() | Loads JSON-encoded data from a server using a HTTP GET request |
| $.getScript() | Loads (and executes) a JavaScript from the a server using an AJAX HTTP GET request |
| load() | Loads data from a server and puts the returned HTML into the selected element |
| $.param() | Creates a serialized representation of an array or object (can be used as URL query string for AJAX requests) |
| $.post() | Loads data from a server using an AJAX HTTP POST request |
| serialize() | Encodes a set of form elements as a string for submission |
| serializeArray() | Encodes a set of form elements as an array of names and values |
'프로그래밍 놀이터 > Web' 카테고리의 다른 글
| [Script] JavaScript Tutorial ( 기초강좌 ) (0) | 2012.09.26 |
|---|---|
| [Script] $(function(){}) 와 $(document).ready(function(){}) 의 차이. (0) | 2012.09.26 |
| [Script] jQuery Tutorial ( 기초 강좌 ) (0) | 2012.09.26 |
| [HTML] HTML DOM( Document Object Model ) Tutorial ( 기초강좌 ) (0) | 2012.09.25 |
| [Script] Backbone.js Tutorial ( 기초강좌 ) - Collection. (3) | 2012.09.25 |
댓글