So far, we've seen a plethora of filters, but the good thing is that jQuery has a lot more than that. Here, I'll show the remaining filters that I haven't added to the previous categories.
The filters are as follows:
|
Name |
Description |
|---|---|
|
|
Selects all of the elements that are in the progress of an animation at the time the selector is run. |
|
|
Retrieves the elements that contain the text given. The search is performed among the element itself and all of the descendants. |
|
|
Collects the elements that have no children (including text nodes). |
|
|
Select the element that has the focus at the time the selector is run. |
|
|
Selects elements which contain at least one element that matches the specified selector. The search is performed among all of the descendants, not only the children. |
|
|
Retrieves all of the headers ( |
|
|
Selects all elements that are hidden. An element is considered hidden, not only if it has display: hidden applied, but also if it's physically not shown (for example, if it has width and height set to zero). More on this here: http://api.jquery.com/hidden-selector/. |
|
|
Selects all elements of the specified language. |
|
|
Collects the elements that do not match the given selector. |
|
|
Selects the elements that have at least one child node (either an element or text). |
|
|
Retrieves the element which is the root of the document. |
|
|
Selects the target element indicated by the fragment identifier of the document's URI. |
|
|
Selects all elements that are visible. An element is considered visible if it occupies space in the page. So, also if an element has visibility: hidden applied, thus not shown, it's retrieved because it still occupies space. More information is available at http://api.jquery.com/visible-selector/. |
To perform the task, follow these steps:
Create a copy of the
child-filters.htmlfile and rename it asother-filters.html.Edit the
<head>section of the page adding this code:<script> $(document).ready(function() { $('h2:contains(jQuery)').css('background-color', '#976FAC'); console.log($('div:has(p.border)').length); console.log($('div:not(.wrapper)').length); }); </script>Save the file, open it with your favorite browser and take a look at the console.
In the first line of our anonymous function, we're selecting all of the <h2> instances that contain the text jQuery. To achieve this goal, we're relying on the :contains() filter passing it to the string we're searching for. Looking at the code, it isn't hard to see that the only element that matches is the first <h2> contained in the <div id="content"> section. Once retrieved, we apply a violet background color to it.
In the second task, we're searching for all of the <div> instances that have at least one paragraph which have the class "border" applied. Since both the <div> instances of our page have at least one paragraph that matches (precisely both have just one of those paragraphs), the selection retrieves them all. Once done, we print the length of the collection on the console that is 2.
The last statement collects all of the <div> instances that don't have a class wrapper applied. Once again, looking at the HTML source, you can see that the first <div> section is the only one having the class applied. So, our selection will only retrieve the second <div>, and this explains why the console displays the number 1 in the last line.