jQuery for beginners. Part 4. Selectors
Recently, I have been increasingly asked how to choose one or another element in DOM, and this post will be entirely devoted to selectors in jQuery, perhaps you have seen most of them in various sources, but it’s still worth collecting them together ...
In all examples, an abbreviated version of the jQuery method call is used, using the function $ (dollar sign)
')
Selectors in jQuery are based on CSS selectors , and also support XPath . In order not to dig in the documentation I will give examples, many examples. But let's start with the basics ...
First we need the layout of the HTML page (quite a typical layout):
< div id = "header" >
< h1 > <a href = "/" title = "homepage"> Title < / a > < / h1 >
< h2 > Sub-title < span > small description < / span > < / h2 >
< / div >
< div id = "wrapper" >
< div id = "content" >
< div class = "post" >
< h3 > Post Title < / h3 >
< p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. < / p >
< span > Image Title < / span >
< img src = "/image1.jpg" alt = "Image Alt Text" / >
< p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. < / p >
< span class = "inner-banner" > Banner Text < / span >
< p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. < / p >
< / div >
< span id = "banner" > < img src = "/banner1.jpg" alt = "Big Banner" / > < / span >
< div class = "post" >
< h3 > Post Title < / h3 >
< p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. < / p >
< span > Image Title < / span >
< img src = "/image2.jpg" alt = "Image Alt Text" / >
< p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. < / p >
< span class = "inner-banner" > Banner Text < / span >
< p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. < / p >
< / div >
< / div >
< / div >
< div id = "sidebar" >
< ul >
< li > <a href = "/item0.html"> Menu Item 0 < / a > < / li >
< li > <a href = "/item1.html"> Menu Item 1 < / a > < / li >
< li > <a href = "/item2.html"> Menu Item 2 < / a > < / li >
< li > <a href = "/item3.html"> Menu Item 3 < / a > < / li >
< / ul >
< / div >
< div id = "footer" >
Copyright & copy; 2008
< / div >
Now proceed to the samples:
Selecting items by Id or ClassName is the same as used in CSS
$ ( '#sidebar' ) ; // select element with id = sidebar
$ ( '.post' ) ; // select items with class = post
$ ( 'div # sidebar' ) ; // select div element with id = sidebar
$ ( 'div.post' ) ; // select div elements with class = post
Note: use valid class names and id
Wander through the object hierarchy in DOM
Simple selection of descendants:
$ ( 'div span' ) ; // select all span elements in div elements
A similar result can also be obtained using the following construction:
$ ( 'div' ) . find ( 'span' ) ; // select all span elements in div elements
Select only immediate descendants
$ ( 'div> span' ) ; // select all span elements in div elements, where span is a direct descendant of the div
What better way to do that works faster? It would be necessary to test ...
Also selectors can be grouped:
$ ( 'div, span' ) ; // select all div and span elements
Search for neighbors:
$ ( 'span + img' ) ; // select all img elements before which the span elements go
$ ( 'span ~ img' ) ; // select all img elements after the first span element
$ ( '#banner' ) . prev ( ) ; // select the previous item from the found
$ ( '#banner' ) . next ( ) ; // select the next item from the found one
Select all items, all ancestors, all descendants
$ ( '*' ) ; // select all items
$ ( 'p> *' ) ; // select all descendants of p elements
$ ( 'p' ) . children ( ) ; // -
$ ( 'p' ) . parent ( ) ; // select all direct ancestors of p elements
$ ( '*> p' ) ; // select all ancestors of p elements (most likely you will not need it)
$ ( 'p' ) . parents ( ) ; // -
$ ( 'p' ) . parents ( 'div' ) ; // select all the ancestors of the p element which is a div (parents takes as a parameter a selector)
Filters
There are a lot of filters implemented in jQuery, and it's a pleasure to use them:
$ ( 'div: first' ) ; // choose the first div in the house
$ ( 'div: last' ) ; // choose the last div in the house
$ ( 'div: not (.red)' ) ; // choose divs that don't have red class
$ ( 'div: even' ) ; // select even divs
$ ( 'div: odd' ) ; // choose odd divs
$ ( 'div: eq (N)' ) ; // choose a div going with the number N in the DOMe
$ ( 'div: gt (N)' ) ; // choose divs whose index is greater than N in DOMe
$ ( 'div: lt (N)' ) ; // select divs whose index is less than N in DOMe
$ ( ': header' ) ; // select the headers h1, h2, h3, etc.
$ ( 'div: animated' ) ; // select elements with active animation
Filters by content and visibility:
$ ( 'div: contains (text)' ) ; // select the divs containing the text
$ ( 'div: empty' ) ; // select empty divs
$ ( 'div: has (p)' ) ; // select the divs that contain p
$ ( 'div.red' ) . filter ( '.bold' ) // select divs that contain the red class and the bold class
$ ( 'div: hidden' ) ; // select hidden divs
$ ( 'div: visible' ) ; // select visible divs
There are also filters by attributes:
$ ( "div [id]" ) ; // select all divs with id attribute
$ ( "div [title = 'my']" ) ; // select all divs with title = my attribute
$ ( "div [title! = 'my']" ) ; // select all divs with title attribute not equal to my
$ ( "div [title ^ = 'my']" ) ; // select all divs with title attribute starting with my
// <div title = "myCat">, <div title = "myCoffee">, <div title = "my ...">
$ ( "div [title $ = 'my']" ) ; // select all divs with title attribute ending with my
// <div title = "itsmy">, <div title = "somy">, <div title = "... my">
$ ( "div [title * = 'my']" ) ; // select all divs with title attribute containing my
// <div title = "itsmy">, <div title = "myCat">, <div title = "its my cat">, <div title = "... my ...">
It is also worth noting the following filter:
$ ( "a [rel ~ = 'external']" ) ; // select all A with the rel attribute containing external in the list of values separated by a space
As a result of his work, the following tags will be selected:
<a href = "" rel = "external"> link < / a > - yes
<a href = "" rel = "nofollow external"> link < / a > - yes
<a href = "" rel = "external nofollow"> link < / a > - yes
<a href = "" rel = "friend external follow"> link < / a > - yes
<a href = "" rel = "external-link"> link < / a > - no
To work with form elements, there are a number of selectors allowing you to select by element type and filters - enabled / disabled / selected / checked:
$ ( ": text" ) ; // select all input elements with type = text
$ ( ": radio" ) ; // select all input elements with type = radio
// and so on
$ ( "input: enabled" ) ; // select all included input elements
$ ( "input: checked" ) ; // select all checked checkboxes
Filters can also be grouped:
$ ( "div [name = city]: visible: has (p)" ) ; // select a visible div called city which contains the p tag
I will also give a number of useful selectors for working with form elements:
$ ( "form select [name = city] option: selected" ) . val ( ) ; // get the selected (s) elements in the city
$ ( "form: radio [name = some]: checked" ) . val ( ) ; // get the selected radiobath value some
$ ( "form: checkbox: checked" ) ; // select all selected checkboxes
I also recommend reading the jQuery article : 8 useful tips when working with the SELECT element
If you want to test how it all works - then you can use the test page for this.
Slides
Somehow too much text came out, perhaps it's time to show slides ;)
This article is written using the following resources:
Cycle of articles
- jQuery for beginners
- jQuery for beginners. Part 2. JavaScript Menu
- jQuery for beginners. Part 3. AJAX
- jQuery for beginners. Part 4. Selectors
Source: https://habr.com/ru/post/51717/
All Articles