JQuery DOM Traversing Methods
Filtering out Elements
The filter(selector) method can be used to filter out all elements from the set of matched elements that do not match the specified selector(s).The selector can be written using any selector syntax. Example Following is a simple example which applies color to the lists associated with middle class: <html> <head> <title> The title</title> <script type=”text/javascript” src=”/jquery/jquery-1.3.2.min.js”></script> <script type=”text/javascript” language=”javascript”> $(dcoumnet).ready(function(){ S(“li”).filter(“.middle”).addClass(“selected”); }); </script> <Style> .selected{color:red;} </style> </head> <body> <ul> <li class=”top”> list item 1</li> <li class=”top”> list item 2</li> <li class=”middle”> list item 3</li> <li class=”middle”> list item 4</li> <li class=”bottom”> list item 5</li> <li class=”bottom”> list item 6</li> </ul> </div> </body> </html> Locating Descendant Elements The find(selector) method can be used to locate all the descendant elements of a particular type of elements.The selector can be written using any selector syntax. Example Following is an example which selects all the <span> elements available inside different <p> elements: <html> <head> <title> The title</title> <script type=”text/javascript” src=”/jquery/jquery-1.3.2.min.js”></script> <script type=”text/javascript” language=”javascript”> $(dcoumnet).ready(function(){ S(“p”).find(“span”).addClass(“selected”); }); </script> <Style> .selected{color:red;} </style> </head> <body> <p>This is 1st paragraph and <span>THIS IS RED</span></p> <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p> </body> </html>
JQuery DOM Traversing Methods
Following table lists down useful methods which you can use to filter out various elements from a list of DOM elements:
| Selector | Description |
| eq(index) | Reduce the set of matched elements to a single element. |
| tilter(selector) | Removes all elements from the set of matched elements that do not match the specified selector(s). |
| filter(fn) | Removes all elements from the set of matched elements that do not match the specified function. |
| is(selector) | Checks the current selection against an expression and returns true,if at least one element of the selection fits the given selector. |
| map(callback) | Translate asset of elements in the jQuery object into another set of values in a jQuery array(which may ,or may not contain elements). |
| not (selector) | Removes elements matching the specified selector from the set of matched elements. |
| slice(start,[end]) | Selects a subset of the matched elements. |
Following table lists down other useful methods which you can use to locate various elements in a DOM
| Selector | Description |
| add(selector) | Adds more elements, matched by the given selector, to the set of matched elements. |
| andSelf() | Add the previous selection to the current selection |
| children([selector]) | Get a set of elements containing all of the unique immediate children of each of the matched set of elements. |
| closest(selector) | Get a set of elements containing the closest parent element that matches the specified selector, the starting element included. |
| contents() | Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe. |
| end() | Revert the most recent ‘destructive’ operation, changing the set of matched elements to its previous state. |
| find(selector) | Searches for descendent elements that match the specified selectors. |
| next([selector]) | Get a set of elements containing the unique next siblings of each of the given set of elements. |
| nextAll([selector]) | Find all sibling elements after the current element. |
| offsetParent() | Returns a jQuery collection with the positioned parent of the first matched element. |
| parent([selector]) | Get the direct parent of an element. If called on asset of elements, parent returns a set of their unique direct parent elements. |
| parents([selector]) | Get a set of elements containing the unique ancestors of the matched set of elements(except for the root element). |
| prev([selector]) | Get a set of elements containing the unique previous siblings of each of the matched set of elements. |
| prevAll([selector]) | Find all sibling elements in front of the current element. |
| siblings([selector]) | Get a set of elements containing all of the unique siblings of each of the matched set of elements. |
jQuery CSS Methods
The jQuery library supports nearly all of the selectors included in Cascading Style Sheet(CSS) specifications I through 3, as outlined on the world wide web consortium’s site. Using JQuery library developers can enhance their websites without worrying about browsers and their versions as long as the browsers have JavaScript enabled. Most of the JQuery CSS Methods do not modify the content of the jQuery object and they are used to apply CSS properties on DOM elements. Apply CSS Properties This is very simple to apply any CSS property using JQuery method css(PropertyName, Property value) Here is the syntax for the method. selector.css(PropertyName, PropertyValue); Here you can pass PropertyName as a JavaScript string based on its value, PropertyValue could be string or integer. Example Following is an example which adds font color to the second list item. <html> <head> <title>the title</title> <script type=”text/javascript” src=”/jquery/jquery-1.3.2.min.js”></script> <script type=”text/javascript” language=”javascript”> $(document).ready(function()) { $(“li”).eq(2).css(“color”,”red”); }); </script> </head> <body> <div> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul> </div> </body> </html>
You liked the article?
Like : 0
Vote for difficulty
Current difficulty (Avg): Medium
About Author
Name
TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.
Stay Updated
Get stories of change makers and innovators from the startup ecosystem in your inbox