0% found this document useful (0 votes)
232 views

Basic Syntax: $ (Selector) .Action Selector Is Like This Selector Example Selects

This document describes jQuery selectors and actions. It lists various selectors like id, class, element, and attribute selectors. It also lists jQuery actions like bind, click, change, focus, hover, and trigger which can be used to bind event handlers to DOM elements matching the selectors.

Uploaded by

paramesh514
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
232 views

Basic Syntax: $ (Selector) .Action Selector Is Like This Selector Example Selects

This document describes jQuery selectors and actions. It lists various selectors like id, class, element, and attribute selectors. It also lists jQuery actions like bind, click, change, focus, hover, and trigger which can be used to bind event handlers to DOM elements matching the selectors.

Uploaded by

paramesh514
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Basic syntax : $(selector).

action() Selector is like this

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   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 an href attribute
[attribute=value] $("[href='default.htm']") All elements with href attribute value equal to "default.htm"
[attribute!=value] $("[href!='default.htm']") All elements with href attribute value not equal to "default.htm"
[attribute$=value] $("[href$='.jpg']") All elements with href attribute value containing ".jpg"
     
     
: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
   

Action:

Method Description
bind(event) 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(selector, event) Add an event handler to matching elements, now or in the
future
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 ever called on this
event object
event.isImmediatePropagationStopped() Returns whether event.stopImmediatePropagation() was ever
called on this event object
event.isPropagationStopped() Returns whether event.stopPropagation() was ever called on this
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() If this method is called, the default action of the event will not
be triggered
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 For key or button events, this attribute indicates the specific
button or key that was pressed
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(event) Add an event handler to selected elements, now or in the future
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(event) Add an event handler to selected elements. This handler can
only be triggered once
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 one or two functions to the toggle event of 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(event) Remove an added event handler from selected elements
undelegate(event) 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
Animations:

animate() Performs a custom animation (of a set of CSS properties) for selected elements
clearQueue() Removes all queued functions for the selected element
delay() Sets a delay for all queued functions for the selected element
dequeue() Runs the next queued functions for the selected element
fadeIn() Gradually changes the opacity, for selected elements, from hidden to visible
fadeOut() Gradually changes the opacity, for selected elements, from visible to hidden
fadeTo() Gradually changes the opacity, for selected elements, to a specified opacity
hide() Hides selected elements
queue() Shows the queued functions for the selected element
show() Shows hidden selected elements
slideDown() Gradually changes the height, for selected elements, from hidden to visible
slideToggle() Toggles between slideUp() and slideDown() for selected elements
slideUp() Gradually changes the height, for selected elements, from visible to hidden
stop() Stops a running animation on selected elements
toggle() Toggles between hide() and show(), or custom functions, for selected elements

Html tags:

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

Css:

$(selector).css(<css attributes>,<value>) : - to change 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

ajax:

Method Description
jQuery.ajax() Performs an asynchronous HTTP request
ajaxComplete() Registers a handler to be called when the AJAX requests complete (event)
ajaxError() Registers a handler to be called when the AJAX requests complete with an error (event)
ajaxSend() Shows a message before the AJAX request is sent
jQuery.ajaxSetup() Sets the default values for future AJAX requests
ajaxStart() Registers a handler to be called when the first AJAX request begins (event)
ajaxStop() Registers a handler to be called when all AJAX requests have completed (event)
ajaxSuccess() Shows a message when an AJAX request completes successfully
jQuery.get() Loads data from a server using a HTTP GET request
jQuery.getJSON() Loads JSON-encoded data from a server using a HTTP GET request
jQuery.getScript() Loads (and executes) a JavaScript file from the a server using a HTTP GET request
load() Loads data from a server and puts the returned HTML into the matched element
jQuery.param() Creates a serialized representation of an array or object, suitable for use in a URL query
string or AJAX request
jQuery.post() Loads data from a server using a 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
misc:

Method Description
data() Stores arbitrary data associated with the matched elements
each() Iterate over a jQuery object, executing a function for each matched element
get() Retrieve the DOM elements matched by the jQuery object
index() Search for a given element from among the matched elements
jQuery.noConflict() Relinquish jQuery's control of the $ variable
jQuery.param() Creates a serialized representation of an array or object, suitable for use in a URL query
string or Ajax request
removeData() Removes a previously-stored piece of data
size() Return the number of DOM elements matched by the jQuery object
toArray() Retrieve all the DOM elements contained in the jQuery set, as an array

You might also like