This page has been robot translated, sorry for typos if any. Original content here.

Jquery

7 Scroll to Top Solutions on jQuery
On the page

JQuery Element selection

Before you start working with an element, you must learn how to select it. A sample of elements in jQuery is built just like a sample in CSS.

In order to understand how the selection of elements in jQuery, let's look at the CSS file.

Everything that comes to braces is called a selector.

  1. Tag Name
  2. Class
  3. Identifier

All that is written in curly brackets after the selector is the properties of the element with the given selector.

What is really going on? When the user's browser accesses our CSS file, when it reaches a certain selector, it starts executing the properties corresponding to the element with the given selector. For example in the CSS file:

 p {
  font-family: Tahoma;
  font-size: 12px;
 }

Now when the browser comes to the element

Hello

then these properties are applied to it.

Now let's see how the selection of child elements in CSS. For example, we need to apply the above CSS properties not to all paragraphs, but to paragraphs with the logo identifier. Then the CSS will look like this:

 p #logo {
  font-family: Tahoma;
  font-size: 12px;
 } 

and if we want to apply these properties not only to paragraphs with id = ”logo”, but to all elements with id = ”logo”, then our CSS looks like this:

 #logo {
  font-family: Tahoma;
  font-size: 12px;
 }

We remembered how the selection of elements in CSS. As I said above, the selection of elements in jQuery is carried out by analogy with CSS. So if we want to select all paragraphs, then we write the following code:

  $ (“P”); 

Or if we need to select all the elements from the page with id = ”logo”, then we write it as follows:

  $ (“# Logo”); 

Similarly, we can select all elements by class, for example class = ”logo”:

  $ (“. Logo”); 

If we want to select child elements, for example, all paragraphs

having an identifier logo, we need to register:

  $ (“P #logo”); 

The next type of selection is the selection of the next item. For example, we have the following html code:

Test 1

Test 2

And we need to select the p tag, which contains the text “Test 2”. As you can see, this is not so easy using the above samples. But in jQuery there is a special selector that allows us to simplify the task. This is the selector for the selection of the next element +. Those. in our case, we can bind to the div with id = ”logo” and by applying this selector select the following element:

  $ (“# Logo + p”); 

Sometimes there is a situation when it is necessary to select all children. For this, jQuery has a selector>. For example, we have the following html code:

 <div id = ”content”>
  <p> Hello </ p>
  <p> We are starting to learn jQuery </ p>
  <p> And now we are introduced to the selectors of the selection of elements </ p>
 </ div>

And we need to select all the ps that are inside the tag div id = ”content” Our code will look like this:

  $ (“# Content> p”); 

The next type of selection in jQuery is the selection of elements by attribute values. This sample is very often found in projects, for example, for implementing a drop-down menu. For example, we have html-code:

 <img src = "images / 1.png" width = "50" height = "50">
 <img src = "images / 2.png" width = "50" height = "50">
 <img src = "images / 3.png" width = "50" height = "50">

and we need to select all the pictures that have a width = ”50”. Then the sample in jQuery will look like this.

  $ (“Img [width = 50]”); 

The next type of sample in jQuery is a sample of value attributes that begin with a condition. For example, we have html-code:

 <img src = "images / img1.png" width = "50" height = "50">
 <img src = "images / img2.png" width = "50" height = "50">
 <img src = "images / img3.png" width = "50" height = "50">

and we need to select all the pictures whose src attribute starts with images / img, then this sample in jQuery is as follows:

  $ (“Img [src ^ = images / img]”); 

By analogy, we can make a selection by attribute values, which end with some condition. Those. from the previous html-code we want to select all png pictures. Then the sample in jQuery will look like this:

  $ (“Img [src $ =. Png]”); 

The next sample in jQuery is when you need to select by an attribute whose value can be anywhere. From the previous html-code, we need to select all the pictures in the title, which is the word “img”.

  $ (“Img [src * = img]”); 

We looked at the basic methods of selecting elements in jQuery, which allow us to select any element and then perform certain actions on it. You can read more about sampling methods in jQuery at official website . But the selection of elements in jQuery does not end there, and there are selection filters for a more subtle selection of elements in jQuery.

JQuery Element Filter

In jquery, there are many methods for filtering selected items, which you can read about in the official documentation. And I will consider only the most necessary and frequently used (in my opinion) filters.

Selection of even elements even

There is a situation when you need to select from the table only the even elements. To do this, the developers have created a special filter: even. For example, we have a table:

 <table id = "'table'">
 <tbody>
 <tr>
 <td> 1 </ td>
 <td> Name 1 </ td>
 </ tr>
 <tr>
 <td> 2 </ td>
 <td> Name 2 </ td>
 </ tr>
 <tr>
 <td> 3 </ td>
 <td> Name 3 </ td>
 </ tr>
 <tr>
 <td> 4 </ td>
 <td> Name 4 </ td>
 </ tr>
 </ tbody>
 </ table>
 <pre>

And we need to select even lines. To do this, select the necessary elements and impose a parity filter on them. Here, this is what jQuery looks like:

  $ ('# table tr: even'); 

So we selected all the even rows. But be careful here - all the even lines from the point of view of javascript. And in javascript the countdown starts from 0, so we will have the first row selected in the table and the third row in the table.

Select odd odd elements

Opposite (if so to speak) of the previous filter is the odd filter - the choice of odd elements. Suppose we need to select odd rows from the table. Then apply the odd filter and this is how it will look like:

  $ ('# table tr: odd'); 

Select first element first

If we need to select only one element - the first, then the first filter is suitable for this purpose. For example, from the table we need to select only the first row, then the sample of this element will look like this:

  $ ('# table tr: first'); 

Select last item last

To select the last element, apply the last filter. For example, from our table, you must select the last row. Then our sample:

  $ ('# table tr: last'); 

Negative filter not

This filter is necessary for selecting all elements, except elements that are suitable for the condition. For example, we have

 </ pre>
 <div id = "'1'"> </ div>
 <div> Example. </ div>
 <pre>

We need to select all divs, except for those divs that are inside the div with c id = '1'. And if we write:

  $ ('div'); 

Then we will select all divs, even those that are in div c id = '1', therefore in this case it is necessary to apply the not filter.

  $ ('div: not (# 1 div)'); 

And by doing so we will select all we need a div

Select an element that contains a specific has element

Sometimes there are situations where it is necessary to select an element that contains another specific element within it. And for this in jquery there is a has filter. For example, we need to select a div from the previous example, in which there is another div. Then our sample will look like this:

  $ ('div: has (div)'); 

Those. we select all divs, and then we apply the has filter in which we specify that the selected divs should contain other divs

Select item by content

For example, we need to select some element by its content, then the contains filter comes to the rescue. From the above code, we need to choose a div that contains an “Example”:

  $ ('div: contains (Hello)'); 

Filter element selection without inheritors empty

There are situations when it is necessary to leave only those that have no heirs and contain nothing of the selected elements. For example, we have html code

 </ pre>
 <table>
 <tbody>
 <tr>
 <td> 1 </ td>
 <td> </ td>
 </ tr>
 <tr>
 <td> </ td>
 <td> 2 </ td>
 </ tr>
 </ tbody>
 </ table>
 <pre>

And we need to select all td who have no heirs.

  $ ('td: empty'); 

As a result, we will have selected the second <td> from the first <tr> and the first <td> from the second <tr>.

Filter by hidden items

Quite often in jQuery you have to select all the hidden elements. And for this there is a special hidden filter. Those. if we need to select all divs that are currently hidden, then we need to write the following code:

  $ ('div: hidden'); 

Filter by visible elements

The opposite filter is hidden - the visible filter, which filters all visible elements. Those. if we need to select all the divs that are currently visible.

  $ ('div: visible'); 

JQuery methods: text, hide, show, width, heigth, html

After selecting the required element in jQuery, we must perform actions on it. In this article we will focus on the actions that can be performed on elements using jQuery.

As you know JavaScript works with the DOM page model. Therefore, we need that the JavaScript code be executed only after the DOM model has been built. For this, jQuery has a ready method that waits for the DOM to build a document model.

Therefore, to execute the script after building the DOM model, use the following construction:

 $ (document) .ready (function () {<script code>}) 

Text () method

The text () method is required to get or change the text of an element. Suppose we have the following html-code:

 <div id = 'text'>
 Hey.
 </ div>

And we want to get this text, then we need to select a div element with id = text and apply the text () method to it.

 $ (document) .ready (function () {
 $ ('# text'). text ();
 })

In order to change the text value of an element, we need to pass a parameter to our text method. For example, we want to change the text in the above example to “Welcome to web-programming.com”, then our code will look like this:

 $ (document) .ready (function () {
 $ ('# text'). text ('Welcome to web-programming.com');
 })

Hide () method

If we need to hide an element, then there is a hide (speed, callback) method in jQuery. Two speed parameters can be passed to this method - the speed of disappearance, the time in milliseconds and the callback is a function that will be executed after the element disappears. For example, we need a div with id = text (from the example above) to disappear in 2 seconds, then our code will be:

 $ (document) .ready (function () {
 $ ('# text'). hide (2000);
 })

Show () method

The opposite method of hide is show if we need to show an element. Similar to the hide method, show takes two parameters — this is the rate at which it appears and the function that will be executed after the element appears.

 $ (document) .ready (function () {
 $ ('# text'). show (2000);
 })

Width () method

In order to set or get the width of an element in jQuery, there is a special width method. If we need to get the width of a div element with id = text (from the example above), then we need to write the following code:

 $ (document) .ready (function () {
 $ ('# text'). width ();
 })

If we need to set the width, then the width method needs to pass a parameter. If you do not specify units of measurement (%, em), then the default is px.

 $ (document) .ready (function () {
 $ ('# text'). width (30);
 })

Heigth () method

To change or calculate the height of an element in jQuery, the heigth () method is used. This method works by analogy with the width method.

Html () method

If we want to get or change the html code of the element, then it is necessary to use the html () method. This method works by analogy with the heigth () and width () methods. Those. if we do not pass parameters to our method, then the method will return to us all the html code that is in this element. If we pass a parameter, we change the html code in our element.

JQuery Methods: fadeOut, fadeIn, fadeTo, slideUp, slideDown

FadeOut () method

The fadeOut (time, function) method serves for the smooth disappearance of an element (the element changes its transparency, up to and including complete disappearance). As parameters it takes:

  • time - time of extinction
  • function - the function that will be executed after the element disappears

For example, we have html-code:

 <div id = 'text'>
  Hey.
 </ div>

We want the div element with id = text to disappear smoothly. To do this, we write the following code:

 $ (document) .ready (function () {
  $ ('# text'). fadeOut (2000);
 })

FadeIn () method

The fadeIn (time, function) method serves to fade in an element. The element changes its transparency to full visibility. As parameters it takes:

  • time - time of appearance
  • function - the function that will be executed after the element disappears
 $ (document) .ready (function () {
  $ ('# text'). fadeIn (2000);
 })

FadeTo () method

Method fadeTo (time, opacity, function) - allows you to change the degree of transparency of the element to a certain value. As parameters it takes:

  • time - change time
  • opacity - the degree of transparency from 0 to 1
  • function - the function that will be executed after the element disappears

Example:

 $ (document) .ready (function () {
  $ ('# text'). fadeTo (2000, 0.5);
 })

SlideUp () method

The slideUp method (time, function) allows an element to disappear by going up. As parameters it takes:

  • time - time of appearance
  • function - the function that will be executed after the element disappears

Example:

 $ (document) .ready (function () {
  $ ('# text'). slideUp (2000);
 })

SlideDown () method

The slideDown (time, function) method allows you to show an element. Element as it goes down. As parameters it takes:

  • time - time of appearance
  • function - the function that will be executed after the element disappears

Example:

 $ (document) .ready (function () {
  $ ('# text'). slideDown (2000);
 })

JQuery Methods: attr, removeAttr, addClass, removeClass, css, animate

I remind you that jQuery is a JavaScript framework.

In practice, quite often it is necessary to change various attributes of html elements, add and delete classes, view and change various css-properties of elements. For this, jQuery has special methods that we will consider.

Attr () method

The attr (key, value) method is used to return or change an attribute value for an element, where:

  • key - attribute name
  • value - attribute value (if specified, changes it, otherwise just returns)

For example, a div with id = test has width = 300px and we want to know its width.

 $ (document) .ready (function () {
  $ ('# test'). attr ('width');
 })

RemoveAttr () method

The removeAttr (key) method removes the specified attribute, where:

  • key- attribute name

For example, we have a div with id = test has width = 300px and we want to remove this attribute:

 $ (document) .ready (function () {
  $ ('# test'). removeAttr ('width');
 })

AddClass () method

Method addClass (name) - adds a class to the selected element with the name name. For example, add the class example to the div with id = test:

 $ (document) .ready (function () {
  $ ('# test'). addClass ('example');
 })

RemoveClass () method

The removeClass (name) method removes a class from an element with the name name.

For example, we have a div with id = test and, we want to remove our class from this div:

 $ (document) .ready (function () {
  $ ('# test'). removeClass ('example');
 })

Css () method

The css (name, value) method allows you to get the css property of an element with the name name (if the value of this property is not specified by the second parameter) or change the value of the css property named name to value value (if the second value parameter is specified) For example, we have h1 headers and we want to change the font size to 20px, then:

 $ (document) .ready (function () {
  $ ('h1'). css ('font-size', 20);
 })

Animate () method

So far, we have considered a simple change in the properties of elements, but jQuery has another great method that allows you to change the properties of an element smoothly, as if animating it. This is the animate method (settings, time, function), where:

  • setting - properties that will change their value
  • time - the time for which these properties will change the value
  • function - a function that will begin its execution after the change occurs.

For example, we have a div with id = test and width = 1000px. We want to change the width of this div to 500px in 4 seconds.

 $ (document) .ready (function () {
  $ ('# test'). animate ({'width': '500px'}, 4000);
 })