jquery Basics jquery is a library of JavaScript functions which contains the following functions: HTML Element Selections

Size: px

Start display at page:

Download "jquery Basics jquery is a library of JavaScript functions which contains the following functions: HTML Element Selections"

Charity Harrison
5 years ago
Views:

1 jquery Basics jquery is a library of JavaScript functions which contains the following functions: 1 - HTML element selections 2 - HTML element manipulation 3 - CSS manipulation 4 - HTML event functions 5 - JavaScript effects and animations 6 - HTML DOM traversal and modification HTML Element Selections jquery selectors allow you to select and manipulate HTML as a group or as a single element. They allow you to select HTML element(s) by element name, attribute name or by content (i.e. allow you to manipulate DOM as a group or as a single node.). jquery uses CSS selectors to select HTML : $( p ) selects all <p>. $( p.intro ) selects all <p> with class= intro. $( p#demo ) selects all <p> with id= demo. jquery uses XPath expressions to select with given attributes: $( [href] ) selects all with an href attribute. $( [href= # ] ) selects all with an href value equal to #. $( [href= # ] ) selects all with an href value not equal to #. $( [href$=.jpg ] ) selects all with an href value that ends with.jpg. jquery selectors can be used to change CSS properties for HTML : E.g. Change the background colour of all p to yellow: $( p ).css( background-color, yellow );

2 Syntax $(this) $( p ) $( p.intro ) $( p#intro ) $( p#intro:first) $(.intro. ) $( #intro ) $( ul li:first ) $( ul li:first-child ) $( [href$=.jpg ] ) $( div#intro.head ) Current HTML element All <p> All <p> with class= intro All <p> with id= intro The first <p> element with id= intro All with class id= intro The first element with id= intro The first <li> element of the first <ul> The first <li> element of every <ul> All with an href attribute that ends with.jpg All with class= head inside a <div> element with an id= intro

3 HTML Event Functions Triggered when something happens in HTML. jquery code is put into event handler methods in the <head> section. $(document).ready(function() { $( button ).click(function() { $( p ).hide(); jquery Name Conflicts. The event is fired when the button is triggered. $( button ).click(function() {...some code...} ) Some other JavaScript libraries also use the dollar sign for their functions. The jquery noconflict() method specifies a custom name like jg instead of using the dollar sign. Event Method $(document).ready(function) $(selector).click(function) Binds a function to the ready event of a document - when the document is finished loading. Triggers, or binds a function to the click event of selected. $(selector).dblclick(function) $(selector).focus(function) Triggers, or binds a function to the double click event of selected. Triggers, or binds a function to the focus event of selected. $(selector).mouse(function) Triggers, or binds a function to the mouseover event of selected.

4 JavaScript Effects and Animations Hide, Show, Toggle, Slide, Fade and Animate. Hide and Show Hide and show HTML using the hide() and show() methods. $( #hide ).click(function() { $( p ).hide(); $( #show ).click(function() { $( p ).show(); Both hide() and show() have 2 optional parameters: speed and callback. $(selector).hide(speed,callback) $(selector).show(speed,callback) Speed can be slow, fast, normal or milliseconds. Callback $( button ).click(function() { $( p ).hide(1000); The callback parameter is the name of the function to be executed after the hide or show function completes. Toggle Toggles the visibility of HTML using the show() or hide() methods. $(selector).toggle(speed,callback) The speed parameter can be slow, fast, normal or milliseconds. $( button ).click(function() { $( p ).toggle();

5 Slide - slidedown, slideup, slidetoggle The slide methods gradually change the height for selected. $(selector).slidedown(speed,callback) $(selector).slideup(speed,callback) $(selector).slidetoggle(speed,callback) slidedown() Example $(.flip ).click(function() { $(.panel ).slidedown(); $(.flip ).click(function() { $(.panel ).slideup(); The speed parameter can be slow, fast, normal or milliseconds. slidetoggle() Example $(.flip ).click(function() { $(.panel ).slidetoggle(); FadeIn, fadeout, fadeto. Gradually changes the opacity for selected. $(selector).fadein(speed,callback) $(selector).fadeout(speed,callback) $(selector).fadein(speed,opacity,callback) The speed parameter can be slow, fast, normal or milliseconds. The opacity parameter allows fading to a given opacity. The callback parameter is the name of a function to be executed after the function completes. fadeto() Example $( button ).click(function() { $( div ).fadeto( slow, 0.25);

6 fadeout() Example $( button ).click(function() { $( div ).fadeout(4000); Custom Animations $(selector).animate({params},[duration],[easing],[callbank]) The syntax for jquery s method for making custom animations is: params - defines the CSS properties that will be animated. Many properties can be animated at the same time: duration - the speed of the animation. Fast, slow, normal or milliseconds. <script type= text/javascript > ${document).ready(function() { $( button ).click(function() { $( div ).animate({height:300}, slow ); $( div ).animate({width:300}, slow ); $( div ).animate({height:100}, slow ); $( div ).animate({width:100}, slow ); </script> animate({width: 70%, opacity:0.4,marginleft: 0.6in,fontSize: 3em

7 jquery Effects Function $(selector).hide() $(selector).show() $(selector).toggle() $(selector).slidedown() $(selector).slideup() $(selector).slidetoggle() $(selector).fadein() $(selector).fadeup() $(selector).fadeto() Hide selected. Show selected. Toggle (between hide and show) selected. Slide down (show) selected. Slide up (hide) selected. Toggle slide-up and slide-down of selected. Fade in selected. Fade out selected. Fade out selected to a given opacity. Callback Functions. A callback function is executed after the current animation is 100% finished. JavaScript statements are executed line by line, but with animations, the next line of code can be run even though the animation is not finished. This can create errors. A callback function is executed after the current animation is finished. $(selector).hide(speed,callback) The callback parameter is a function to be executed after the hide effect is completed: $(selector).animate() $( p ).hide(1000,function() { alert( The paragraph is now hidden ); Run a custom animation on selected.

8 HTML Element Manipulation jquery contains powerful functions for changing and manipulating HTML and attributes. Changing HTML Content Example $(selector).html(content) $( p ).html( W3Schools ); Adding HTML content $(selector).append(content) The append() method appends content to the inside of the matching HTML. $( p ).append( W3Schools ); The after method inserts HTML containing after all the matching. $(selector).after(content) $( p ).after( W3Schools ); The before method inserts HTML content before all matching. $(selector).before(content) Function $(selector).html(content) $(selector).append(content) $(selector).after(content) Changes the (inner) HTML of selected. Appends content to the (inner) HTML of selected. Adds HTML after selected.

9 CSS manipulation jquery has one important method for CSS manipulation: css(). The CSS() method has three different syntaxes to perform different tasks: css(name) - Returns CSS property value. css(name,value) - Set CSS property and value. css({properties}) - Set multiple CSS properties and values. Return CSS property. Use css(name) to return the specified CSS property value of the first matched element: Set CSS Property and Value $(this).css( background-color ); Use css(name,value) to set the specified CSS property for all matched : $( p ).css( background-color, yellow ); Set multiple CSS Property/Value Pairs. Use CSS({properties}) to set one or more CSS property/value pairs for the selected : $( p ).css({ background-color : yellow, font-size : 200% jquery height() and width() methods. Two important methods for size manipulation. height() width() The height() method sets the height of all matching : $( #div ).height( 200px ); The width() method sets the width of all matching : $( #div2 ).width( 300px );

10 CSS Properties $(selector).css(name) $(selector).css(name, value) $(selector).css({properties}) $(selector).height(value) $(selector).width(value) Get the style property value of the first matched element. Set the value of one style property for matched. Set multiple style properties for matched. Set the height of matched. Set the width of matched.

11 Ajax and jquery With jquery AJAX you can request TXT HTML XML or JSON data from a remote server using both HTTP Get and HTTP Post. $(selector).load(url, data, callback) selector - defines the HTML to change. url - specifies a web address for your data. data - if you want to send data to the server. callback - to trigger a function after completion. Low Level AJAX $.ajax(options) Offers more functionality than higher level functions like load, get and post but is more difficult to use. The option parameter takes name/value pairs defining url data, passwords, data types, filters, character sets, timeout and error functions. Request $(selector).load(url, data, callback) $.ajax(options) Load remote data into selected. Load remote data into an XMLHttpRequest object.

12 Cheatsheet Selectors Selector Example Selects * $("*") All #id $("#lastname") The element with id=lastname.class $(".intro") All with class="intro" element $("p") All p.class.class $(".intro.demo") All 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 :odd $("tr:odd") All odd tr :eq(index) $("ul li:eq(3)") The fourth element in a list (index starts at 0) :gt(no) $("ul li:gt(3)") List with an index greater than 3 :lt(no) $("ul li:lt(3)") List with an index less than 3 :not(selector) $("input:not(:empty)") All input that are not empty :header $(":header") All header h1, h2... :animated $(":animated") All animated :contains(text) $(":contains('w3schools')") All which contains the text :empty $(":empty") All with no child () nodes :hidden $("p:hidden") All hidden p :visible $("table:visible") All visible tables s1,s2,s3 $("th,td,.intro") All with matching selectors [attribute] $("[href]") All with a href attribute [attribute=value] $("[href='default.htm']") All with a href attribute value equal to "default.htm" [attribute=value] $("[href='default.htm']") All with a href attribute value not equal to "default.htm" [attribute$=value] $("[href$='.jpg']") All with a href attribute value ending with ".jpg"

13 [attribute^=value] $("[href^='jquery_']") All with a href attribute value starting with "jquery_" :input $(":input") All input :text $(":text") All input with type="text" :password $(":password") All input with type="password" :radio $(":radio") All input with type="radio" :checkbox $(":checkbox") All input with type="checkbox" :submit $(":submit") All input with type="submit" :reset $(":reset") All input with type="reset" :button $(":button") All input with type="button" :image $(":image") All input with type="image" :file $(":file") All input with type="file" :enabled $(":enabled") All enabled input :disabled $(":disabled") All disabled input :selected $(":selected") All selected input :checked $(":checked") All checked input

14 Method bind() blur() Event Methods Add one or more event handlers to matching Triggers, or binds a function to the blur event of selected change() click() dblclick() delegate() die() error() event.currenttarget event.data event.isdefaultprevented() event.isimmediatepropagationstopped() event.ispropagationstopped() event.pagex event.pagey event.preventdefault() event.relatedtarget event.result Triggers, or binds a function to the change event of selected Triggers, or binds a function to the click event of selected Triggers, or binds a function to the dblclick event of selected Add one or more event handlers to current, or future, specified child of the matching Remove all event handlers added with the live() function Triggers, or binds a function to the error event of selected The current DOM element within the event bubbling phase Contains the optional data passed to jquery.fn.bind when the current executing handler was bound Returns whether event.preventdefault() was called for the event object Returns whether event.stopimmediatepropagation() was called for the event object Returns whether event.stoppropagation() was called for the event object The mouse position relative to the left edge of the document The mouse position relative to the top edge of the document Prevents the default action of the event The other DOM element involved in the event, if any This attribute contains the last value returned by an event handler that was triggered by this event, unless the value was undefined event.stopimmediatepropagation() event.stoppropagation() event.target Prevents other event handlers from being called Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event 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 event.which focus() Describes the nature of the event Which key or button was pressed for a key or button event Triggers, or binds a function to the focus event of selected

15 focusin() focusout() hover() keydown() keypress() keyup() live() load() mousedown() mouseenter() mouseleave() mousemove() mouseout() mouseover() mouseup() one() ready() resize() scroll() select() submit() toggle() trigger() triggerhandler() unbind() Binds a function to the focusin event of selected Binds a function to the focusout event of selected Binds one or two functions to the hover event of selected Triggers, or binds a function to the keydown event of selected Triggers, or binds a function to the keypress event of selected Triggers, or binds a function to the keyup event of selected Add one or more event handlers to current, or future, matching Triggers, or binds a function to the load event of selected Triggers, or binds a function to the mouse down event of selected Triggers, or binds a function to the mouse enter event of selected Triggers, or binds a function to the mouse leave event of selected Triggers, or binds a function to the mouse move event of selected Triggers, or binds a function to the mouse out event of selected Triggers, or binds a function to the mouse over event of selected Triggers, or binds a function to the mouse up event of selected Add one or more event handlers to matching. This handler can only be triggered once per element 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 resize event of selected Triggers, or binds a function to the scroll event of selected Triggers, or binds a function to the select event of selected Triggers, or binds a function to the submit event of selected Binds two or more functions to the toggle between for the click event for selected Triggers all events bound to the selected Triggers all functions bound to a specified event for the selected Remove an added event handler from selected

16 undelegate() unload() Method animate() clearqueue() delay() dequeue() fadein() fadeout() fadeto() fadetoggle() hide() queue() show() slidedown() slidetoggle() slideup() stop() toggle() Remove an event handler to selected, now or in the future Triggers, or binds a function to the unload event of selected Effects Performs a custom animation (of a set of CSS properties) for selected Removes all queued functions for the selected element Sets a delay for all queued functions for the selected element Runs the next queued functions for the selected element Gradually changes the opacity, for selected, from hidden to visible Gradually changes the opacity, for selected, from visible to hidden Gradually changes the opacity, for selected, to a specified opacity Hides selected Shows the queued functions for the selected element Shows hidden selected Gradually changes the height, for selected, from hidden to visible Toggles between slideup() and slidedown() for selected Gradually changes the height, for selected, from visible to hidden Stops a running animation on selected Toggles between hide() and show(), or custom functions, for selected

17 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() HTML Elements Adds one or more classes (for CSS) to selected Inserts content after selected Inserts content at the end of (but still inside) selected Inserts content at the end of (but still inside) selected Sets or returns an attribute and value of selected Inserts content before selected Makes a copy of selected Removes (but keeps a copy of) selected Removes all child and content from selected Checks if any of the selected have a specified class (for CSS) Sets or returns the content of selected Inserts HTML markup or after selected Inserts HTML markup or before selected Inserts content at the beginning of (but still inside) selected Inserts content at the beginning of (but still inside) selected Removes selected Removes an attribute from selected Removes one or more classes (for CSS) from selected Replaces selected with new content Replaces selected with new content Sets or returns the text content of selected Toggles between adding/removing one or more classes (for CSS) from selected Removes the parent element of the selected Sets or returns the value attribute of the selected (form ) Wraps specified HTML element(s) around each selected element Wraps specified HTML element(s) around all selected Wraps specified HTML element(s) around the content of each selected element

18 Method addclass() css() hasclass() height() offset() offsetparent() position() removeclass() scrollleft() scrolltop() toggleclass() width() Method $.ajax() ajaxcomplete() ajaxerror() ajaxsend() $.ajaxsetup() ajaxstart() ajaxstop() ajaxsuccess() $.get() $.getjson() $.getscript() CSS Methods. Adds one or more classes to selected Sets or returns one or more style properties for selected Checks if any of the selected have a specified class Sets or returns the height of selected Sets or returns the position (relative to the document) for selected Returns the first parent element that is positioned Returns the position (relative to the parent element) of the first selected element Removes one or more classes from selected Sets or returns the horizontal position of the scrollbar for the selected Sets or returns the vertical position of the scrollbar for the selected Toggles between adding/removing one or more classes from selected Sets or returns the width of selected AJAX Methods Performs an AJAX request Specifies a function to run when the AJAX request completes Specifies a function to run when the AJAX request completes with an error Specifies a function to run before the AJAX request is sent Sets the default values for future AJAX requests Specifies a function to run when the first AJAX request begins Specifies a function to run when all AJAX requests have completed Specifies a function to run an AJAX request completes successfully Loads data from a server using an AJAX HTTP GET request Loads JSON-encoded data from a server using a HTTP GET request Loads (and executes) a JavaScript from the a server using an AJAX HTTP GET request load() $.param() $.post() serialize() serializearray() Loads data from a server and puts the returned HTML into the selected element Creates a serialized representation of an array or object (can be used as URL query string for AJAX requests) Loads data from a server using an AJAX HTTP POST request Encodes a set of form as a string for submission Encodes a set of form as an array of names and values

19 Misc Methods Method data() each() get() index() $.noconflict() $.param() removedata() size() toarray() Attaches data to, or gets data from, selected Run a function for each element matched by the jquery selector Get the DOM matched by the selector Search for a given element from among the matched Release jquery's control of the $ variable Creates a serialized representation of an array or object (can be used as URL query string for AJAX requests) Removes a previously-stored piece of data Return the number of DOM matched by the jquery selector Retrieve all the DOM contained in the jquery set, as an array

jquery - Other Selectors In jquery the selectors are defined inside the $(" ") jquery wrapper also you have to use single quotes jquery wrapper.

jquery - Other Selectors In jquery the selectors are defined inside the $(" ") jquery wrapper also you have to use single quotes jquery wrapper. There are different types of jquery selectors available