# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bryan-guner.gitbook.io/my-docs/web-development-frameworks/jquery/prac.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.