# Prac

## jQuery Examples

This section contains a whole bunch of examples demonstrating the various jQuery features and effects in real action.

### jQuery Basic

* [Including jQuery in HTML document](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=including-jquery-in-html-page)
* [Display "Hello World" message using jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=document-ready-demo)
* [Standard syntax of jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=document-ready-syntax)
* [Shorthand syntax of jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=shorthand-syntax-of-document-ready-event)
* [Change text color of the elements using jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=simple-jquery-powered-web-page)
* [Change text contents of the elements on button click using jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=set-text-contents-of-elements)

### jQuery Selectors

* [Selecting an element by ID in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=id-selector)
* [Selecting elements by class name in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=class-selector)
* [Selecting elements by element name in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=element-selector)
* [Selecting elements by attribute in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=attribute-selector)
* [Selecting elements by compound CSS selector in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=compound-selector)
* [Selecting elements by jQuery custom selector](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=custom-selector)

### jQuery Events

* [Run code on document ready event in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=execute-a-function-on-ready-event)
* [Run code on click event in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=execute-a-function-on-click-event)
* [Run code on double-click event in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=execute-a-function-on-double-click-event)
* [Run code on hover event in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=execute-a-function-on-hover-event)
* [Run code on mouseenter event in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=execute-a-function-on-mouseenter-event)
* [Run code on mouseleave event in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=execute-a-function-on-mouseleave-event)
* [Run code on keypress event in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=execute-a-function-on-keypress-event)
* [Run code on keydown event in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=execute-a-function-on-keydown-event)
* [Run code on keyup event in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=execute-a-function-on-keyup-event)
* [Run code on change event in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=execute-a-function-on-change-event)
* [Run code on focus event in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=execute-a-function-on-focus-event)
* [Run code on blur event in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=execute-a-function-on-blur-event)
* [Run code on submit event in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=execute-a-function-on-submit-event)
* [Run code on resize event in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=execute-a-function-on-resize-event)
* [Run code on scroll event in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=execute-a-function-on-scroll-event)

### jQuery Show and Hide Effects

* [Creating a simple show hide effect in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=show-hide-effects)
* [Creating animated show hide effect in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=animated-show-hide-effects)
* [Creating simple toggle effect in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=toggle-effect)
* [Creating animated toggle effect in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=animated-toggle-effect)

### jQuery Fading Effects

* [Creating fade-in and fade-out effect in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=fade-in-and-out-effects)
* [Setting the duration of fading effect in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=set-the-duration-of-fade-in-and-out-effects)
* [Creating fade toggle effect in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=fade-toggle-effect)
* [Setting the duration of fade toggle effect in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=set-the-duration-of-fade-toggle-effect)
* [Fading elements to a certain opacity in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=fade-to-effect)

### jQuery Sliding Effects

* [Creating slide-up and slide-down effect in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=slide-up-and-down-effects)
* [Setting the duration of sliding effect in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=set-the-duration-of-slide-up-and-down-effects)
* [Creating slide toggle effect in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=slide-toggle-effect)
* [Setting the duration of slide toggle effect in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=set-the-duration-of-slide-toggle-effect)

### jQuery Animation Effects

* [Creating animation effect in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=animation)
* [Animate multiple CSS properties in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=animate-multiple-css-properties)
* [Animate multiple CSS properties only by one in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=queued-animation)
* [Animate CSS property using relative values in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=animate-css-property-with-relative-values)
* [Animate CSS property with predefined values in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=animate-css-property-with-pre-defined-values)

### jQuery Chaining

* [Method chaining in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=method-chaining)
* [Breaking method chaining code in multiple line in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=breaking-method-chaining-code-in-multiple-lines)
* [Exceptions method chaining in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=method-chaining-exceptions)

### jQuery Callback

* [jQuery effect method without a callback function](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=method-without-callback)
* [jQuery effect method with a callback function](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=method-with-callback)
* [Executing callback multiple times in jQuery](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=callback-executed-multiple-times)

### jQuery Get & Set Contents

* [jQuery get text contents of the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-text-contents-of-an-element)
* [jQuery set text contents of the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=set-text-contents-of-elements)
* [jQuery get HTML contents of the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-html-contents-of-an-element)
* [jQuery set HTML contents of the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=set-html-contents-of-elements)
* [jQuery get value an attribute of an element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-attribute-value-of-an-element)
* [jQuery set an attribute for the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=set-an-attribute-for-elements)
* [jQuery set multiple attributes for the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=set-multiple-attributes-for-elements)
* [jQuery get the value of a form element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-a-form-field-value)
* [jQuery set the values of the form elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=set-form-fields-values)

### jQuery Insert Content

* [jQuery insert HTML at the end of the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=insert-html-at-the-end-of-an-element)
* [jQuery insert HTML at the beginning of the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=insert-html-at-the-start-of-an-element)
* [jQuery multiple HTML elements at the beginning or end of the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=append-or-prepend-multiple-elements-at-once)
* [jQuery insert HTML before and after the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=insert-html-before-and-after-an-element)
* [jQuery insert multiple HTML elements before and after the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=insert-multiple-elements-before-and-after-an-element)
* [jQuery wrap HTML around the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=wrap-html-around-an-element)

### jQuery Remove Elements & Attribute

* [jQuery remove the contents of the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=remove-the-contents-of-an-element)
* [jQuery remove the HTML elements from the page](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=remove-the-elements-from-dom)
* [jQuery remove the parent element of an HTML element from the page](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=remove-the-parents-of-the-elements-from-dom)
* [jQuery remove an attribute from the HTML elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=remove-an-attribute-from-the-elements)

### jQuery Add and Remove CSS Classes

* [jQuery add a CSS class to the HTML elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=add-a-single-class-to-the-elements)
* [jQuery add multiple CSS classes to the HTML elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=add-multiple-class-to-the-elements)
* [jQuery remove CSS classes from the HTML elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=remove-classes-from-the-elements)
* [jQuery remove all the CSS classes from the HTML elements at once](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=remove-all-the-classes-from-the-elements)
* [jQuery toggle the CSS classes of the HTML elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=toggle-the-classes-for-elements)

### jQuery Get and Set CSS Properties

* [jQuery get the value of a CSS property of an element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-the-value-of-a-css-property)
* [jQuery set the value of a CSS property for the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=set-the-value-of-a-single-css-property)
* [jQuery set the value of multiple CSS properties of the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=set-the-value-of-multiple-css-properties)

### jQuery Dimensions

* [jQuery get width and height of an element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-width-and-height-of-an-element)
* [jQuery set width and height of the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=set-width-and-height-of-an-element)
* [jQuery get inner width and height of an element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-inner-width-and-height-of-an-element)
* [jQuery set inner width and height of the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=set-inner-width-and-height-of-an-element)
* [jQuery get outer width and height of an element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-outer-width-and-height-of-an-element)
* [jQuery get outer width and height of an element including margin area](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-outer-width-and-height-of-an-element-including-margin)
* [jQuery set outer width and height of the elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=set-outer-width-and-height-of-an-element)

### jQuery Traversing

* [jQuery select the direct parent element of an element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-direct-parent-of-an-element)
* [jQuery select all the ancestor elements of an element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-all-ancestors-of-an-element)
* [jQuery select the specific ancestor elements of an element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-specific-ancestors-of-an-element)
* [jQuery select all the ancestor elements between two elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-all-ancestors-between-two-elements)
* [jQuery select the direct children element of an element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-direct-children-of-an-element)
* [jQuery select the specific descendant elements of an element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-specific-descendants-of-an-element)
* [jQuery select all the descendant elements of an element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-all-the-descendants-of-an-element)
* [jQuery select all the sibling elements of an element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-all-the-siblings-of-an-element)
* [jQuery select specific sibling elements of an element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-specific-siblings-of-an-element)
* [jQuery select the next sibling element of an element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-the-next-sibling-of-an-element)
* [jQuery select all the next sibling elements of an element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-all-the-siblings-next-to-an-element)
* [jQuery select all the following sibling elements between two elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-all-the-following-siblings-between-two-elements)
* [jQuery select the previous sibling element of an element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-the-previous-sibling-of-an-element)
* [jQuery select all the previous sibling elements of an element](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-all-the-siblings-previous-to-an-element)
* [jQuery select all the preceding sibling elements between two elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=get-all-the-preceding-siblings-between-two-elements)

### jQuery Filtering

* [jQuery select the first element only](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=select-only-the-first-element)
* [jQuery select the last element only](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=select-only-the-last-element)
* [jQuery select an element by index](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=select-element-by-index)
* [jQuery select an element by negative index](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=select-element-by-negative-index)
* [jQuery filter the selection of elements via selectors](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=filter-elements-selection-via-selectors)
* [jQuery filter the selection of elements through a custom function](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=filter-elements-selection-through-a-custom-function)
* [jQuery select the elements that has specific child elements](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=select-elements-that-has-certain-child-elements)
* [jQuery select the elements that does not match certain condition](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=select-elements-that-does-not-match-certain-condition)
* [jQuery select the elements that did not pass certain function test](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=select-elements-that-did-not-pass-certain-function-test)
* [jQuery select the elements by range of indices](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=select-elements-by-range-of-indices)
* [jQuery select the elements by range of negative indices](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=select-elements-by-range-of-negative-indices)

### jQuery Ajax

* [jQuery load content inside an element from a file](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=load-content-inside-an-element-from-a-file)
* [jQuery execute code based upon load request response](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=execute-code-based-upon-load-request-response)
* [jQuery load content of selected element from a file](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=load-content-of-selected-element-from-a-file)
* [jQuery make ajax request using HTTP get method](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=make-ajax-request-using-get-method)
* [jQuery send data with ajax using HTTP get method](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=send-data-with-ajax-using-get-method)
* [jQuery submit form data with ajax using HTTP post method](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=submit-form-data-with-ajax-using-post-method)

### jQuery No-Conflict Mode

* [Putting the jQuery into no-conflict mode](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=noconflict)
* [Prevent conflict between jQuery and other JavaScript libraries](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=avoiding-conflicts-between-javascript-libraries)
* [Avoid conflict when including the jQuery before other JavaScript libraries](https://www.tutorialrepublic.com/codelab.php?topic=jquery\&file=including-jquery-before-other-javascript-library)