jQuery for the typesetter (part 1): arrows for references
This mini article is dedicated to a very simple thing that will be interesting, first of all, for novice users of the jQuery <a href== jquery.com> library . I will show you how to attach a small image to each link to highlight it.
Our first task will be to attach a small image of an arrow to each link on the right side, which indicates that this text is a link. This feature allows you to additionally point the user to a link in the text of the page, and it is used by many sites, including one of the most popular Internet resources, Wikipedia. The solution will take only one line (more precisely, as many as three, if we consider the standard beginning and end):
Now we will understand how this works. For event handling, we use an asynchronous mechanism, that is, we pass a function to the method, which we should call when this event occurs. The first event we handle is $ (document) .ready. It occurs when the document is ready for processing, when it is loaded. This event can be roughly compared with the traditional JavaScript window.onload event. But $ (document) .ready happens faster, so there is no waiting for loading of all elements of the web page that may not be necessary for the script, for example, large images.
')
Now it is time to take a closer look at the $ (...) function. This is the basis of the jQuery framework, which, according to the description given to it, finds the necessary elements on the page. I knowingly used the word "description" - it can be CSS and XPath, but with the help of plug-ins and other additional formats. That is, $ ("a") constructs finds a list of all references, or rather elements, which are the “a” tag. To select the current element for which processing takes place, you must use the variable this. parameters.
Now any links on our page will be with a small arrow, the image of which is stored in the file link_arrow.png.
But an attentive reader will say that this effect can be achieved with the help of pure CSS, he can also notice that on external Wikipedia pages only external links are marked with arrows. This is impossible to achieve without server code using pure CSS is impossible (or at least it is difficult to find such a solution, especially cross-browser). How to make more complex samples (including external links), read in the following sections.
If this article is in demand, I will try to publish a few more parts that I will do by reworking my jQuery materials. I have materials for web designers, programmers (there was a good article on this topic on Habré) and on AJAX (within jQuery). The sizes of the articles will be small and they will be devoted to small practical tasks.
Task number 1
Our first task will be to attach a small image of an arrow to each link on the right side, which indicates that this text is a link. This feature allows you to additionally point the user to a link in the text of the page, and it is used by many sites, including one of the most popular Internet resources, Wikipedia. The solution will take only one line (more precisely, as many as three, if we consider the standard beginning and end):
$ (document) .ready (function () { $ ("a"). append ("<img src = 'link_arrow.png' />"); });
$ (document) .ready
Now we will understand how this works. For event handling, we use an asynchronous mechanism, that is, we pass a function to the method, which we should call when this event occurs. The first event we handle is $ (document) .ready. It occurs when the document is ready for processing, when it is loaded. This event can be roughly compared with the traditional JavaScript window.onload event. But $ (document) .ready happens faster, so there is no waiting for loading of all elements of the web page that may not be necessary for the script, for example, large images.
')
$ (...)
Now it is time to take a closer look at the $ (...) function. This is the basis of the jQuery framework, which, according to the description given to it, finds the necessary elements on the page. I knowingly used the word "description" - it can be CSS and XPath, but with the help of plug-ins and other additional formats. That is, $ ("a") constructs finds a list of all references, or rather elements, which are the “a” tag. To select the current element for which processing takes place, you must use the variable this. parameters.
Now any links on our page will be with a small arrow, the image of which is stored in the file link_arrow.png.
But an attentive reader will say that this effect can be achieved with the help of pure CSS, he can also notice that on external Wikipedia pages only external links are marked with arrows. This is impossible to achieve without server code using pure CSS is impossible (or at least it is difficult to find such a solution, especially cross-browser). How to make more complex samples (including external links), read in the following sections.
PS or future plans
If this article is in demand, I will try to publish a few more parts that I will do by reworking my jQuery materials. I have materials for web designers, programmers (there was a good article on this topic on Habré) and on AJAX (within jQuery). The sizes of the articles will be small and they will be devoted to small practical tasks.
Cycle of articles
- jQuery for the typesetter (part 1): arrows for references
jQuery for the typesetter (part 2): delicious menus
Source: https://habr.com/ru/post/18529/
All Articles