Unusual jQuery and CSS selectors
Selectors are very important. Most jQuery methods require a selection of elements to use. For example, before attaching a click event to a button, you need to select the button itself.
Most jQuery selectors are based on existing CSS selectors, so you probably know a lot about them. However, there are a number of selectors that are not often used. In this article I will focus on the less well-known, but still important selectors.
Let's go to the list!
')
1. [href ^ = "http"]
These are great tips to the user that the link leads to another site.
This is done using the ^ symbol. It is usually used in regular expressions to denote the beginning of a line. If we want to select links from which the href attribute starts with http, then we can use the selector from the example above. Please note that we are not looking for http. This is optional and, moreover, does not take into account https links.
2. :: pseudoElement
Pseudo-elements can be used to style the fragment of an element, for example, the first line or the first letter. Applies to block elements only. Here we select the first letter of the paragraph:
This piece of code will find all the paragraphs on the page and apply the specified styles to the first letter of each of them. This is often used to create a newspaper headline effect. Select the first line of the paragraph:
It works similarly to the previous example, but in this case the first line of each paragraph will be selected.
3. [href * = "example"]
An asterisk means that the value you are looking for can be in any part of the href attribute. Thus, we can select both
4. [data - * = "foo"]
To cover various types of images, we can create several selectors:
But it is rather cumbersome there is a simpler way - to create your own data-filetype attribute and add it to each link leading to the image.
Thus, we can use this code:
5.: animated
To select all elements that are currently animated, use the selector: animated. The only caveat: the selection will be carried out only on elements that are animated through jQuery.
Also, elements animated via CSS will not be included in the selection. However, you can catch the completion of the animation by listening to the animated event.
How this is implemented can be viewed at the link . In this example, only odd div elements are animated before the call:
Therefore, they were originally painted in green. Only after this happens all the other div elements animated. If you click on the button button, all div elements will turn green.
6.: header
In order to select a title, it is not necessary to prescribe $ ("h1 h2 h3 h4 h5 h6"), you can use the selector $ (": header"). Imagine that you have an article element with various headings. The $ selector ("article: header") will suffice to select all the headers. In order to speed up the process, you can use the $ ("article"). Filter (": header") entry.
CodePen example.
JQuery has a bunch of selectors for working with form elements. For example: button selects all buttons, and: checkbox selects all form elements with a checkbox type.
7. [attr! = "Value"]
Most often, these selectors are used to determine the presence of an attribute on a page with a given value. But we can also use the [attr! = "Value"] entry to select elements for which this attribute is missing or not equal to the specified value. Equivalent: not ([attr = "value"]). Unlike [attr = "value"], [attr! = "Value"] is not included in the CSS specification, so use $ ("css-selector"). Not ("[attr = 'value' ] "). In the example below, to all elements whose data-category attribute is not equal to css, the class mismatch is added. This trick can be useful when debugging via JavaScript.
Demonstration of a similar example.
8.: contains (text)
This selector selects elements where the text is present. For example, we want all phrases of Lorem Ipsum in a certain color. This sample is case sensitive.
HTML:
JavaScript code that highlights all the options:
9. [foo ~ = "bar"]
Another interesting trick. The tilde allows us to select attributes with values separated by spaces, i.e.
Using this technique, we can make samples with the combinations we need:
10.: has (selector)
Selects all elements that contain the desired selector, which does not have to be a direct descendant. : has (), and is not necessarily included in the CSS specification. To improve performance in newer browsers, use an entry of the form: $ ("pure-css-selector"). Has (selector), and not $ ("pure-css-selector: has (selector)").
Example: change the color of the elements in which there are links.
HTML:
Javascript:
The logic of this fragment is extremely simple: we go through all the elements of the list, check for the presence of the link and, if it exists, paint the element in the specified color. This CodePen example .
We looked at 10 selectors that are rarely used in practice, but still useful in development. On this selection is over, I hope you find for yourself new and useful jQuery selectors. Have a nice day, Habr!
Most jQuery selectors are based on existing CSS selectors, so you probably know a lot about them. However, there are a number of selectors that are not often used. In this article I will focus on the less well-known, but still important selectors.
Let's go to the list!
')
1. [href ^ = "http"]
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; } These are great tips to the user that the link leads to another site.
This is done using the ^ symbol. It is usually used in regular expressions to denote the beginning of a line. If we want to select links from which the href attribute starts with http, then we can use the selector from the example above. Please note that we are not looking for http. This is optional and, moreover, does not take into account https links.
2. :: pseudoElement
p::first-line { font-weight: bold; font-size: 1.2em; } Pseudo-elements can be used to style the fragment of an element, for example, the first line or the first letter. Applies to block elements only. Here we select the first letter of the paragraph:
p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; } This piece of code will find all the paragraphs on the page and apply the specified styles to the first letter of each of them. This is often used to create a newspaper headline effect. Select the first line of the paragraph:
p::first-line { font-weight: bold; font-size: 1.2em; } It works similarly to the previous example, but in this case the first line of each paragraph will be selected.
3. [href * = "example"]
a[href*="example"] { color: red; } An asterisk means that the value you are looking for can be in any part of the href attribute. Thus, we can select both
http://www.example.com www.example.com example.com.4. [data - * = "foo"]
a[data-filetype="image"] { color: red; } To cover various types of images, we can create several selectors:
a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { color: red; } But it is rather cumbersome there is a simpler way - to create your own data-filetype attribute and add it to each link leading to the image.
<a href="path/to/image.jpg" data-filetype="image"></a> Thus, we can use this code:
a[data-filetype="image"] { color: red; } 5.: animated
To select all elements that are currently animated, use the selector: animated. The only caveat: the selection will be carried out only on elements that are animated through jQuery.
Also, elements animated via CSS will not be included in the selection. However, you can catch the completion of the animation by listening to the animated event.
How this is implemented can be viewed at the link . In this example, only odd div elements are animated before the call:
$(":animated").css("background","#6F9"); Therefore, they were originally painted in green. Only after this happens all the other div elements animated. If you click on the button button, all div elements will turn green.
6.: header
In order to select a title, it is not necessary to prescribe $ ("h1 h2 h3 h4 h5 h6"), you can use the selector $ (": header"). Imagine that you have an article element with various headings. The $ selector ("article: header") will suffice to select all the headers. In order to speed up the process, you can use the $ ("article"). Filter (": header") entry.
$("article :header").each(function(index) { $(this).text((index + 1) + ": " + $(this).text()); }); CodePen example.
JQuery has a bunch of selectors for working with form elements. For example: button selects all buttons, and: checkbox selects all form elements with a checkbox type.
7. [attr! = "Value"]
Most often, these selectors are used to determine the presence of an attribute on a page with a given value. But we can also use the [attr! = "Value"] entry to select elements for which this attribute is missing or not equal to the specified value. Equivalent: not ([attr = "value"]). Unlike [attr = "value"], [attr! = "Value"] is not included in the CSS specification, so use $ ("css-selector"). Not ("[attr = 'value' ] "). In the example below, to all elements whose data-category attribute is not equal to css, the class mismatch is added. This trick can be useful when debugging via JavaScript.
$("li[data-category!='css']").each(function() { $(this).addClass("mismatch"); $(".mismatch").attr("data-category", attributeValue); }); Demonstration of a similar example.
8.: contains (text)
This selector selects elements where the text is present. For example, we want all phrases of Lorem Ipsum in a certain color. This sample is case sensitive.
HTML:
<section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat<b>Lorem Ipsum</b>.</p> <a href="https://en.wikipedia.org/wiki/Lorem_ipsum">Lorem Ipsum Wikipedia Link</a> </section> <section> <p>This <span class="small-u">lorem ipsum</span> should not be highlighted.</p> </section> <ul> <li>A Lorem Ipsum List</li> <li>More Elements Here</li> </ul> JavaScript code that highlights all the options:
$("section:contains('Lorem Ipsum')").each(function() { $(this).html( $(this).html().replace(/Lorem Ipsum/g, "<span class='match-o'>Lorem Ipsum</span>") ); }); 9. [foo ~ = "bar"]
a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; } Another interesting trick. The tilde allows us to select attributes with values separated by spaces, i.e.
<a href="path/to/image.jpg" data-info="external image"> </a> Using this technique, we can make samples with the combinations we need:
/* data-info, external */ a[data-info~="external"] { color: red; } /* data-info, image */ a[data-info~="image"] { border: 1px solid black; } 10.: has (selector)
Selects all elements that contain the desired selector, which does not have to be a direct descendant. : has (), and is not necessarily included in the CSS specification. To improve performance in newer browsers, use an entry of the form: $ ("pure-css-selector"). Has (selector), and not $ ("pure-css-selector: has (selector)").
Example: change the color of the elements in which there are links.
HTML:
<ul> <li>Pellentesque <a href="dummy.html">habitant morbi</a> tristique senectus.</li> <li>Pellentesque habitant morbi tristique senectus.</li> (... more list elements here ...) <li>Pellentesque habitant morbi tristique senectus.</li> <li>Pellentesque <a href="dummy.html">habitant morbi</a> tristique senectus.</li> </ul> Javascript:
$("li:has(a)").each(function(index) { $(this).css("color", "crimson"); }); The logic of this fragment is extremely simple: we go through all the elements of the list, check for the presence of the link and, if it exists, paint the element in the specified color. This CodePen example .
We looked at 10 selectors that are rarely used in practice, but still useful in development. On this selection is over, I hope you find for yourself new and useful jQuery selectors. Have a nice day, Habr!
Source: https://habr.com/ru/post/309276/
All Articles