JQ Learning (ii)

jquery effect jquery Hide () and show () syntax:

$ (selector). Hide (Speed,callback); $ (selector). Show (Speed,callback);

The optional speed parameter specifies the rate of concealment/display, which can take the following values: "Slow", "fast", or milliseconds.

The optional callback parameter is the name of the function that is executed after the hide or display is complete.

The following example shows the Hide () method with the speed parameter:

JQuery Toggle ()

With JQuery, you can use the toggle () method to toggle the Hide () and show () methods.

Displays the elements that are hidden and hides the displayed elements:

Instance

$ ("button"). Click (function () {  $ ("P"). Toggle ();});

JQuery effect function /tr>

Method	Description
animate ()	apply custom animations to selected elements
Clearqueue ()	removes all queued functions from the selected element (still not running)
delay ()	set delay for all queued functions of the selected element (still not running)
dequeue ()	run the next queued function of the selected element
fadeIn ()	gradually change the opacity of the selected element, from hidden to visible
fadeOut ()	gradually changes the opacity of the selected element, from visible to hidden
fadeTo ()	gradually change the selected element to a given opacity
Hide ()	Hide selected elements
queue ()	Display queued functions for selected elements
Show ()	Display the selected element
Slidedown ()	swipe to display selected elements by adjusting the height
slidetoggle ()	Toggles the selected element to slide-hide and slide-display
slideup ()	swipe to hide selected elements by adjusting the height
Stop ()	stops running animations on selected elements
Toggle ()	Toggles the selected element to be hidden and displayed

jquery-Get content and properties jquery DOM operations

A very important part of JQuery is the ability to manipulate the DOM.

JQuery provides a series of DOM-related methods that make it easy to access and manipulate elements and attributes.

Tip: DOM = Document Object model

Get Content-text (), HTML (), and Val ()

Three simple and practical jQuery methods for DOM manipulation:

• Text ()-Sets or returns the text content of the selected element
• HTML ()-Sets or returns the contents of the selected element (including HTML tags)
• Val ()-Sets or returns the value of a form field

The following example shows how to get the content using the JQuery text () and HTML () methods:

Instance

$ ("#btn1"). Click (function () {  alert ("Text:" + $ ("#test"). Text ()); $ ("#btn2"). Click (function () {  alert ("HTML:" + $ ("#test"). html ());});

The following example shows how to get the value of an input field using the JQuery Val () method:

Instance

$ ("#btn1"). Click (function () {  alert ("Value:" + $ ("#test"). Val ());

How to manipulate JQuery documents

These methods are applicable for both XML documents and HTML documents, except for: HTML ().

Method	Description
AddClass ()	Adds the specified class name to the matching element.
After ()	Inserts the content after the matched element.
Append ()	Inserts the content specified by the parameter to the end of each element in the matching element collection.
AppendTo ()	Inserts each element in the matching element collection to the end of the target.
attr ()	Sets or returns the attributes and values of the matching element.
Before ()	Insert the content before each matching element.
Clone ()	Creates a copy of the matching element collection.
Detach ()	Removes a collection of matching elements from the DOM.
Empty ()	Deletes all the child nodes in the matching element collection.
Hasclass ()	Checks whether the matching element owns the specified class.
HTML ()	Sets or returns the HTML content in the matching element collection.
InsertAfter ()	Inserts a matching element behind another specified collection of elements.
InsertBefore ()	Inserts a matching element in front of another specified collection of elements.
Prepend ()	Inserts the content specified by the parameter to the beginning of each element in the matching element collection.
Prependto ()	Inserts each element in the matching element collection to the beginning of the target.
Remove ()	Removes all matching elements.
Removeattr ()	Removes the specified property from all matching elements.
Removeclass ()	Removes all or the specified class from all matching elements.
ReplaceAll ()	Replaces all matching elements with matching elements.
ReplaceWith ()	Replaces the matching element with the new content.
Text ()	Sets or returns the contents of a matching element.
Toggleclass ()	Adds or removes a class from a matching element.
Unwrap ()	Removes and replaces the parent element of the specified element.
Val ()	Sets or returns the value of the matching element.
Wrap ()	Wraps the matched element with the specified content or element.
Wrapall ()	Wraps all matching elements with the specified contents or elements.
Wrapinner ()	Wraps the child content of each matched element with the specified content or element.

JQuery Attribute Action method

These methods are listed below to get or set the DOM property of the element.

These methods are applicable for both XML documents and HTML documents, except for: HTML ().

Method	Description
AddClass ()	Adds the specified class name to the matching element.
attr ()	Sets or returns the attributes and values of the matching element.
Hasclass ()	Checks whether the matching element owns the specified class.
HTML ()	Sets or returns the HTML content in the matching element collection.
Removeattr ()	Removes the specified property from all matching elements.
Removeclass ()	Removes all or the specified class from all matching elements.
Toggleclass ()	Adds or removes a class from a matching element.
Val ()	Sets or returns the value of the matching element.

Note: The above methods are also listed in the JQuery Documentation Operations Reference Manual. The purpose of this reference page is to make it easy for the user to view the methods of property manipulation separately.

JQuery CSS Manipulation functions

These methods are listed below to set or return the element's CSS-related properties.

CSS Properties	Description
CSS ()	Sets or returns the style properties of the matching element.
Height ()	Sets or returns the height of the matching element.
Offset ()	Returns the position of the first matching element relative to the document.
OffsetParent ()	Returns the nearest positioned ancestor element.
Position ()	Returns the position of the first matching element relative to the parent element.
ScrollLeft ()	Sets or returns the offset of the matching element to the left of the scroll bar.
ScrollTop ()	Sets or returns the offset of the matching element at the top of the scroll bar.
Width ()	Sets or returns the width of the matching element.

JQuery traversal function

The JQuery traversal function includes methods for filtering, finding, and concatenating elements.

function	Description
. Add ()	Adds an element to the collection of matching elements.
. Andself ()	Adds the previous set of elements in the stack to the current collection.
. Children ()	Gets all the child elements of each element in the matching element collection.
. Closest ()	Starting with the element itself, it is progressively matched to the ancestor element and returns the first matching ancestor element.
. Contents ()	Gets the child elements of each element in the matching element collection, including the text and comment nodes.
. each ()	Iterates over the JQuery object and executes the function for each matching element.
. End ()	Ends the most recent filter operation in the current chain and returns a collection of matching elements to the previous state.
. EQ ()	Reduces the collection of matching elements to a new element at the specified index.
. Filter ()	Reduces the set of matching elements to a new element that matches the selector or the return value of the matching function.
. Find ()	Gets the descendants of each element in the current matching element collection, filtered by the selector.
. First ()	Reduces the collection of matching elements to the first element in the collection.
. has ()	Reduces the collection of matching elements to a collection of descendants that contain a particular element.
. is ()	Checks the current set of matching elements based on the selector, and returns true if at least one of the matching elements exists.
. Last ()	Reduces the collection of matching elements to the last element in the collection.
. Map ()	Passes each element in the current matching collection to the function, producing a new JQuery object that contains the return value.
. Next ()	Gets the sibling element adjacent to each element in the matching element collection.
. Nextall ()	Gets all the sibling elements after each element in the matching element collection, optionally filtered by selectors.
. Nextuntil ()	Get all the sibling elements after each element until you encounter the element that matches the selector.
. Not ()	Removes an element from the collection of matching elements.
. OffsetParent ()	Gets the first parent element used for positioning.
. Parent ()	Gets the parent element of each element of the current matching element collection, optionally filtered by the selector.
. Parents ()	Gets the ancestor element of each element in the current matching element collection, optionally filtered by the selector.
. Parentsuntil ()	Gets the ancestor element of each element in the current matching element collection until it encounters an element that matches the selector.
. Prev ()	Gets the previous sibling element immediately adjacent to each element in the matching element collection, optionally filtered by the selector.
. Prevall ()	Gets all sibling elements before each element in the matching element collection, optionally filtered by selectors.
. Prevuntil ()	Get all of the sibling elements before each element until you encounter the element that matches the selector.
. Siblings ()	Gets the sibling elements of all elements in the matching element collection, optionally filtered by the selector.
. Slice ()	Reduces the collection of matching elements to a subset of the specified range.

JQ Learning (ii)