JQuery selector (foundation of the second of Evil)

Return to CSS Properties

To return the value of the specified CSS property, use the following syntax:

CSS ("propertyname");

The following example returns the Background-color value of the first matching element:

Instance

$ ("p"). CSS ("background-color");

Set CSS Properties

To set the specified CSS properties, use the following syntax:

CSS ("propertyname", "value");

The following example sets the Background-color value for all matching elements:

Instance

$ ("p"). CSS ("background-color", "yellow");

Set multiple CSS properties

To set multiple CSS properties, use the following syntax:

CSS ({"propertyname": "value", "propertyname": "value",...});

The following example sets Background-color and font-size for all matching elements:

Instance

$ ("p"). css ({"background-color": "yellow", "font-size": "200%"});

JQuery Size method

JQuery offers several important ways to handle dimensions:

• Width ()
• Height ()
• Innerwidth ()
• Innerheight ()
• Outerwidth ()
• Outerheight ()

JQuery width () and height () methods

The width () method sets or returns the widths of elements (excluding padding, borders, or margins).

The height () method sets or returns the heights of the elements (excluding padding, borders, or margins).

The following example returns the width and height of the specified <div> element:

Instance

$ ("button"). Click (function () {  var txt= "";  txt+= "width:" + $ ("#div1"). width () + "</br>";  txt+= "height:" + $ ("#div1"). height ();  $ ("#div1"). HTML (txt);});

JQuery-more width () and height ()

The following example returns the width and height of the document (HTML Document) and window (browser viewport):

Instance

$ ("button"). Click (function () {  var txt= "";  txt+= "document width/height:" + $ (document). width ();  txt+= "x" + $ (document). height () + "\ n";  txt+= "window width/height:" + $ (window). width ();  txt+= "x" + $ (window). height ();  Alert (txt);});

What is traversal?

JQuery traversal, meaning "move", is used to "find" (or Pick) HTML elements based on their relationship to other Elements. Start with an option and move along the selection until you reach the desired Element.

Shows a family tree. With JQuery traversal, you can easily move up (ancestors), Move Down (descendants), move horizontally (compatriots) in the family tree, starting with the selected (current) Element. This movement is known as a traversal of the DOM.

Diagram Explanation:

• The <div> element is the parent element of <ul> and the ancestor of all its contents.
• The <ul> element is the parent element of the <li> element, and it is the child element of the <div>
• The <li> element on the left is the child of the parent element of the <span>,<ul>, and is the descendant of the <div>.
• The <span> element is a sub-element of <li> and is a descendant of <ul> and <div>.
• Two <li> elements are compatriots (having the same parent element).
• The <li> element on the right is the child of the parent element of the <b>,<ul>, and is the descendant of the <div>.
• The <b> element is a child of <li> on the right, and is a descendant of <ul> and <div>.

Hint: ancestors are father, grandfather, great grandfather and so On. Descendants are children, grandchildren, Great-grandchildren and so On. Compatriots have the same father.

Walk up the DOM tree

These jQuery methods are useful for traversing up the DOM tree:

• Parent ()
• Parents ()
• Parentsuntil ()

JQuery Parent () Method

The parent () method returns the immediate parent element of the selected Element.

The method will only traverse the DOM tree up one level.

The following example returns the immediate parent element for each <span> element:

Instance

$ (document). Ready (function () {  $ ("span"). Parent ();});

Try it yourself.

JQuery Parents () Method

The parents () method returns all the ancestor elements of the selected element, all the way up to the root element of the document (

The following example returns all ancestors of all <span> elements:

Instance

$ (document). Ready (function () {  $ ("span"). Parents ();});

Try it yourself.

You can also use optional parameters to filter the search for ancestor Elements.

The following example returns all ancestors of all <span> elements, and it is a <ul> element:

Instance

$ (document). Ready (function () {  $ ("span"). Parents ("ul");});

Try it yourself.

JQuery Parentsuntil () method

The Parentsuntil () method returns all ancestor elements between two given Elements.

The following example returns all the ancestor elements between the <span> and the <div> elements:

Instance

$ (document). Ready (function () {  $ ("span"). parentsuntil ("div");});

Walk down the DOM tree

Here are two jQuery methods for traversing the DOM tree down:

• Children ()
• Find ()

JQuery Children () Method

The children () method returns all the immediate child elements of the selected Element.

The method will only traverse the DOM tree down one level.

The following example returns all the immediate child elements of each <div> element:

Instance

$ (document). Ready (function () {  $ ("div"). Children ();});

Try it yourself.

You can also use optional parameters to filter the search for child Elements.

The following example returns all the <p> elements of the class named "1", and they are the immediate child elements of <div>:

Instance

$ (document). Ready (function () {  $ ("div"). Children ("p.1");});

Try it yourself.

JQuery Find () method

The Find () method returns the descendant elements of the selected element, all the way down to the last Descendant.

The following example returns all <span> elements that belong to <div> descendants:

Instance

$ (document). Ready (function () {  $ ("div"). Find ("span");});

Try it yourself.

The following example returns all descendants of <div>:

Instance

$ (document). Ready (function () {  $ ("div"). Find ("*");});

Traverse horizontally in the DOM tree

There are many useful ways for us to traverse the DOM tree horizontally:

• Siblings ()
• Next ()
• Nextall ()
• Nextuntil ()
• Prev ()
• Prevall ()
• Prevuntil ()

JQuery Siblings () method

The siblings () method returns all the sibling elements of the selected Element.

The following example returns all the sibling elements of

Instance

$ (document). Ready (function () {  $ ("h2"). siblings ();});

Try it yourself.

You can also use optional parameters to filter the search for sibling elements.

The following example returns all <p> elements of the sibling element belonging to

Instance

$ (document). Ready (function () {  $ ("h2"). siblings ("p");});

Try it yourself.

JQuery Next () method

The next () method returns the next sibling element of the selected Element.

This method returns only one Element.

The following example returns the next sibling element of

Instance

$ (document). Ready (function () {  $ ("h2"). Next ();});

Try it yourself.

JQuery Nextall () method

The Nextall () method returns all the following sibling elements of the selected Element.

The following example returns all the following sibling elements of

Instance

$ (document). Ready (function () {  $ ("h2"). nextall ();});

Try it yourself.

JQuery Nextuntil () method

The Nextuntil () method returns all the following sibling elements between two given Arguments.

The following example returns all the sibling elements between the

Instance

$ (document). Ready (function () {  $ ("h2"). nextuntil ("h6");});

Try it yourself.

JQuery prev (), prevall () & Prevuntil () method

The prev (), prevall (), and Prevuntil () methods work in a similar way to the previous method, except in the opposite direction: they return the previous sibling element (in the DOM tree, backward through the sibling element, rather than forward).

The scope of the abbreviation search element

The three most basic filtering methods Are: first (), last (), and EQ (), which allow you to select a specific element based on its position within a set of Elements.

Other filtering methods, such as filter () and not (), allow you to select elements that match or do not match a specified criterion.

JQuery First () method

The first () method returns the initial element of the selected Element.

The following example selects the first <p> element inside the first <div> element:

Instance

$ (document). Ready (function () {  $ ("div p"). First ();});

Try it yourself.

JQuery Last () method

The last () method returns the final element of the selected Element.

The following example selects the last <p> element in the last <div> element:

Instance

$ (document). Ready (function () {  $ ("div p"). last ();});

Try it yourself.

JQuery eq () method

The EQ () method returns the element with the specified index number in the selected Element.

The index number starts at 0, so the first Element's index number is 0 instead of 1. The following example selects a second <p> element (index number 1):

Instance

$ (document). Ready (function () {  $ ("p"). eq (1);});

Try it yourself.

JQuery Filter () method

The filter () method allows you to specify a Standard. Elements that do not match this standard are removed from the collection, and the matching elements are Returned.

The following example returns all the <p> elements with the class name "intro":

Instance

$ (document). Ready (function () {  $ ("p"). Filter (". intro");});

Try it yourself.

JQuery Not () method

The not () method returns all elements that do not match the CRITERIA.

Tip: the Not () method is the opposite of filter ().

The following example returns all the <p> elements without the class name "intro":

Instance

$ (document). Ready (function () {  $ ("p"). not (". intro");});

JQuery selector (foundation of the second of Evil)