jQuery select elements (Selectors)

 

The most basic central idea of ​​jQuery is to "select DOM elements as the start", and then do something with them.

jQuery uses CSS selector syntax (CSS1, CSS2, CSS3) in selecting elements. In addition, you can also use XPath syntax through plugin. We will directly look at a few examples and you will understand how to use CSS Selectors to select elements in jQuery.

Syntax

$(selectors);

tag selector

In jQuery

$('a'); // Get all the <a> tag elements in the page

In JavaScript DOM

document.getElementsByTagName('a');

In css

a {
}

id selector

In jQuery

$('#el'); // Get the element with id el

In JavaScript DOM

document.getElementById('el');

In css

#el {
}

class selector

In jQuery

$('.item'); // Get all elements whose class name is item

In JavaScript DOM

document.getElementsByClassName('item');

In css

.item {
}

In the same way, you can follow the same pattern in CSS

In jQuery

$('#container a'); // Get all the links inside the element whose id is container <a>

In css

#container a {
}

---

In jQuery

$('div > p'); // Get all p child elements directly below the parent element of div (excluding child elements of child elements)

In css

div > p {
}

---

In jQuery

$('tr:first'); // Get the first tr tag element found

In css

tr:first {
}

---

In jQuery

$('input[name="email"]'); // Get the input element whose name attribute value is email

In css

input[name="email"] {
}

What is the type of the element retrieved by jQuery Selectors?

jQuery object ($) will match the elements in order to arrays (array) type returns a jQuery object, which means you can get this number is matched to the elements as follows:

// We want to know how many <a>?
$('a').length; // Get it directly with the length property of JavaScript array
$('a').size(); // Or use the size method of jQuery object

jQuery object --> actual HTML DOM element

As mentioned above, the retrieved element is a jQuery object, so if we do the following operations, an error will occur:

// Treat $('#container') as a JavaScript DOM object?
$('#container').style.display = 'none';
// 錯誤 style is not defined

Why? Because style is not defined. jQuery object does not have the style attribute, because it is not a DOM object!

jQuery objects can only use the methods of jQuery; and DOM objects can only use the methods of DOM objects.

What if you want to manipulate actual DOM elements? jQuery provides the following methods to deal with this problem:

// Use the get() method to convert the jQuery object into a collection of JavaScript DOM elements
var container = $('#container').get();

// Get $('.containers') The Xth DOM element in the element set
// get followed by the index value, the index value starts from 0
var containers = $('.containers').get(1);
// Or you can also write like this
var container = $('#container')[1];

Let's look back again, the code that can be executed correctly should look like this:

$('#container').get(0).style.display = 'none';

JavaScript DOM Object --> jQuery Object

Conversely, if you want to convert the DOM to a jQuery object, just pass the DOM $():

$(domElements);

E.g:

var $jqueryObject = $(document.getElementById('id'));