JQuery

7 Scroll to Top solutions on jQuery
On the page

JQuery

Before you start working with an element, you need to learn how to select it. The selection of the elements in jQuery is similar to the selection in CSS.

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

All that goes before braces is called a selector.

  1. Tag Name
  2. Class
  3. The identifier

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

What actually happens? When a user's browser accesses our CSS file, when it reaches a selector, it starts executing properties corresponding to the element with this selector. For example, in a CSS file:

 P {
  Font-family: Tahoma
  Font-size: 12px;
 }

Now when the browser reaches the element

Hi

, Then these properties apply to it.

Now let's see how the selection of child elements in CSS takes place. For example, we need to apply the above CSS properties not to all paragraphs, but to paragraphs with the identifier logo. 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 recalled how the selection of elements in CSS takes place. As I mentioned above, the selection of elements in jQuery is similar to that of CSS. So if we want to select all the paragraphs, then we write the following code:

  $ ("P"); 

Or if we need to select all the elements from the page with id = "logo", then write it like this:

  $ ("# Logo"); 

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

  $ (". Logo"); 

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

Having an identifier logo, then we need to register:

  $ ("P #logo"); 

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

Test 1

Test 2

And we need to choose the tag p, 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 selector selects the next element +. Those. In our case, we can bind to a div with id = "logo" and use this selector to select the following element:

  $ ("# Logo + p"); 

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

 <Div id = "content">
  <P> Hello </ p>
  <P> We're starting to learn jQuery </ p>
  <P> And now we are getting acquainted with selectors of elements selection </ p>
 </ Div>

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

  $ ("# Content> p"); 

The following selection type in jQuery is a selection of elements based on attribute values. This selection is very often found in projects, for example, to implement a drop-down menu. For example, we have the 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 images with width = "50". Then the selection in jQuery will look like this.

  $ ("Img [width = 50]"); 

The following selection type in jQuery is a sample of attribute values ​​that begin with a condition. For example, we have an 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 selection in jQuery is done like this:

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

By analogy, we can make a sample of the attributes of the value, which ends with some condition. Those. From the previous html-code we want to select all png pictures. Then the selection in jQuery would look like this:

  $ ("Img [src $ =. Png]"); 

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

  $ ("Img [src * = img]"); 

We examined the basic methods for selecting elements in jQuery, which allow us to select any element, and then perform certain actions on it. For more information on jQuery selection methods, see Official website . But the selection of the elements in jQuery does not end there and there are sample filters for more delicate selection of the elements in jQuery.

JQuery Selection filter

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

Select even elements even

There is such situation when it is necessary to select from the table only even elements. For 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 apply a parity filter to them. Here, so it looks in jQuery:

  $ ('# Table tr: even'); 

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

Odd element selection odd

The opposite (if it is possible so to say) to the previous filter is the odd filter - the choice of odd elements. Suppose from the table we need to select odd rows. Then apply the odd filter and look like this:

  $ ('# Table tr: odd'); 

Selecting the first element first

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

  $ ('# Table tr: first'); 

Select last item last

To select the last element, use the last filter. For example, from our table, you need to select the last line. Then our sample:

  $ ('# Table tr: last'); 

The negation filter is not

This filter is required to select all the elements, except for elements that match the condition. For example, we have

 </ Pre>
 <Div id = "'1'"> </ div>
 <Div> Example: </ div>
 <Pre>

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

  $ ('Div'); 

Then select all the divs, even those that are in div c id = '1', so in this case you need to apply the not filter.

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

And by that we will choose all the div needed for us

Select an element that contains the specified has element

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

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

Those. Select all the div, and then apply the filter has in which we indicate that the selected div in itself must contain the other div

Selecting an element by content

For example, we need to select an element by its contents, then the contains contains a help. From the above code, we need to select the div that contains the "Example":

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

Element filter without heirs empty

There are situations when it is necessary to leave only those elements that do not have heirs and do not contain anything from the selected elements. For example, we have an 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 choose all td that do not have heirs.

  $ ('Td: empty'); 

And as a result, we will select the second <td> from the first <tr> and the first <td> from the second <tr>.

Filter on hidden elements

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 the divs that are currently hidden, then we need to write the following code:

  $ ('Div: hidden'); 

Filter by visible elements

The opposite filter is 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 necessary element in jQuery, we must perform actions on it. In this article, we will dwell on the actions that can be performed on elements with jQuery.

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

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

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

The text () method

The text () method is required to retrieve 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 the div element with id = text and apply the text () method to it.

 $ (Document) .ready (function () {
 $ ('# Text'). Text ();
 })

To change the text value of an element, we need to pass our parameter to the 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');
 })

The hide () method

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

 $ (Document) .ready (function () {
 $ ('# Text'). Hide (2000);
 })

The show () method

The opposite method of hide is show, if we need to show an element. Similarly, like the hide method, show takes two parameters - the appearance speed and the function that will be executed after the element appears.

 $ (Document) .ready (function () {
 $ ('# Text'). Show (2000);
 })

The 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 the 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, we need to pass the parameter to the width method. If you do not specify the units of measurement (%, em), then by default it will be px.

 $ (Document) .ready (function () {
 $ ('# Text'). Width (30);
 })

The heigth () method

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

The html () method

If we want to get or change the html code of the element, then we need to use the html () method. This method works by analogy with the methods heigth () and width (). 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

The fadeOut () method

The method fadeOut (time, function) serves for the smooth disappearance of the element (the element changes its transparency, until it disappears completely). As parameters it accepts:

  • Time is the time of disappearance
  • Function - the function to be executed after the element disappears

For example, we have the html code:

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

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

 $ (Document) .ready (function () {
  $ ('# Text'). FadeOut (2000);
 })

The fadeIn () method

The method fadeIn (time, function) serves for the smooth appearance of the element. The element changes its transparency to full visibility. As parameters it accepts:

  • Time - time of occurrence
  • Function - the function to be executed after the element disappears
 $ (Document) .ready (function () {
  $ ('# Text') fadeIn (2000);
 })

The fadeTo () method

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

  • Time - change time
  • Opacity - the degree of transparency from 0 to 1
  • Function - the function to be executed after the element disappears

Example:

 $ (Document) .ready (function () {
  $ ('# Text') fadeTo (2000, 0.5);
 })

The slideUp () method

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

  • Time - time of occurrence
  • Function - the function to be executed after the element disappears

Example:

 $ (Document) .ready (function () {
  $ ('# Text'). SlideUp (2000);
 })

The slideDown () method

The slideDown (time, function) method allows you to display an element. The element seems to be moving down. As parameters it accepts:

  • Time - time of occurrence
  • Function - the function to be executed after the element disappears

Example:

 $ (Document) .ready (function () {
  $ ('# Text'). SlideDown (2000);
 })

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

I'll remind you that jQuery is a JavaScript framework.

In practice, it is often necessary to change various attributes for html elements, add and remove classes, view and modify various css-properties of elements. To do this, jQuery has special methods that we'll cover.

Attr ()

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

  • Key - the name of the attribute
  • Value - the value of the attribute (if the value is specified, it changes it, otherwise it 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');
 })

Method removeAttr ()

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

  • Key-name of the attribute

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

 $ (Document) .ready (function () {
  $ ('# Test'). RemoveAttr ('width');
 })

The addClass () method

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

 $ (Document) .ready (function () {
  $ ('# Test'). AddClass ('example');
 })

The removeClass () method

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

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

 $ (Document) .ready (function () {
  $ ('# Test'). RemoveClass ('example');
 })

The 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 css value of the property named name to value (if the second value parameter is set) For example, we have the headers h1 And we want to change the font size to 20px, then:

 $ (Document) .ready (function () {
  $ ('H1'). Css ('font-size', 20);
 })

The animate () method

So far we have considered a simple change to the properties of elements, but in jQuery there is another wonderful method that allows you to change the properties of an element smoothly, as if animating it. This is animate (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 start 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);
 })