jQuery in Action. Chapter 1. Introduction to jQuery.
As I wrote , I started reading the book “jQuery in Action” (by Bear Bibeault and Yehuda Katz). In this series of articles (and I plan to bring the matter to the end) I will lay out the most interesting moments from each chapter of this book. These will be basic ideas, examples, or both :-)
What is needed (needed, needed) jQuery - to facilitate the work of a web programmer. Using this library it is easier for us (web programmers) to enhance the functionality of our pages with minimal monotonous work.
At its core, jQuery is focused on working with elements of HTML pages.
')
In CSS, to select, for example, all the
In jQuery, the following expression is used for this:
or
It should be noted here that
Or an example: apply the fade out effect to all
And if we want in addition to the effect to add the
Such a chain can continue indefinitely.
But this is only a small part of jQuery's ability to work with selectors. Another pair:
The selector selects the
The same, but already choose
Select links to PDF files.
Do not worry that something is not clear to you now. We'll dwell on selectors in more detail in Chapter 2. The only conclusion to be made right now is jQuery, which is actually a powerful thing.
In essence, jQuery functions are the methods of the jQuery function. But in the book we will call them functions. Not methods.
Here we used the
(in English, it’s understandable, but how to say it in Russian ... The bottom line is :-)).
Regular JavaScript code when using the
You can create DOM elements simply by passing
Or an example:
As you guessed,
JQuery has many useful features, but, of course, it cannot satisfy the needs of all users. In this case, the library can always be expanded with its own functions.
See an example:
Then we can already use our new feature:
In addition to its functions, plugins can be connected to jQuery. They will still be mentioned in chapter 9.
Using
The jQuery authors foresaw such a moment, and when sharing several libraries, they recommend using the
The value of
How do you generally post? I would like to hear your opinion whether it is worth continuing, because this is my first experience in this type of post-translation, and even a reduced form.
I would also like to note that I am far from being an expert in jQuery, I began to understand with you after reading this book. I hope that everything will work out for us! Moreover, if I made some inaccuracies, I misunderstood something - I apologize, I will be happy to fix everything.
In parallel, I post articles on my blog , and there you can go ;-)
Chapter 1. Introduction to jQuery.
What is needed (needed, needed) jQuery - to facilitate the work of a web programmer. Using this library it is easier for us (web programmers) to enhance the functionality of our pages with minimal monotonous work.
JQuery basics
At its core, jQuery is focused on working with elements of HTML pages.
')
Highlights.
1.1. Wrapper.
In CSS, to select, for example, all the
<a> links inside the <p> paragraph, we wrote:
pa
In jQuery, the following expression is used for this:
$(selector)
or
jQuery(selector)
It should be noted here that
$() is an alias for the jQuery() function. It returns a special JavaScript object containing an array of DOM elements corresponding to the selector.
$(“pa”)
Or an example: apply the fade out effect to all
<div> elements of the notLongForThisWorld class. The code will be as follows:
$(“div.notLongForThisWorld”).fadeOut();
And if we want in addition to the effect to add the
removed class to these elements, then we will write this:
$(“div.notLongForThisWorld”).fadeOut().addClass(“removed”);
Such a chain can continue indefinitely.
But this is only a small part of jQuery's ability to work with selectors. Another pair:
$(“body > div”);
The selector selects the
<div> elements that are children of <body>
$(“body > div:has(a)”);
The same, but already choose
<div> , containing references.
$(“a[href$=pdf]”);
Select links to PDF files.
Do not worry that something is not clear to you now. We'll dwell on selectors in more detail in Chapter 2. The only conclusion to be made right now is jQuery, which is actually a powerful thing.
1.2. Functions.
In essence, jQuery functions are the methods of the jQuery function. But in the book we will call them functions. Not methods.
$.trim(someString);
Here we used the
trim() function. The jQuery functions will be discussed in more detail in Chapter 6.
$ is the namespace.
1.3.The document ready handler
(in English, it’s understandable, but how to say it in Russian ... The bottom line is :-)).
Regular JavaScript code when using the
onload method starts to work when the page is fully loaded by the user's browser. Together with pictures and other things. For jQuery to work, loading DOM is sufficient.
1.4. Work with DOM.
You can create DOM elements simply by passing
$() functions. For example:
$(“<p>!</p>”) ;
Or an example:
$(“<p>!</p>”).insertAfter(“#followMe”);
As you guessed,
<p>!</p> will appear after the element with id=”followMe” .
1.5. JQuery extension
JQuery has many useful features, but, of course, it cannot satisfy the needs of all users. In this case, the library can always be expanded with its own functions.
See an example:
$.fn.disable = function() {
return this.each(function() {
if(typeof this.disabled != “undefined”) this.disabled = true;
});
}
$.fn.disabled means that we extend the wrapper $ with the function disabled .
Then we can already use our new feature:
$(“form#myForm input.special”).disable().addClass(“moreSpecial”);
In addition to its functions, plugins can be connected to jQuery. They will still be mentioned in chapter 9.
1.6. Use jQuery with other libraries.
Using
jQuery prefixes and, in particular, $ , which is also used by the Prototype library, can create problems, you think. Well, if the first is not yet, then the second is for sure.
The jQuery authors foresaw such a moment, and when sharing several libraries, they recommend using the
noConflict() function immediately after connecting other libraries:
jQuery.noConflict();
The value of
$ will be released by jQuery for another library.
How do you generally post? I would like to hear your opinion whether it is worth continuing, because this is my first experience in this type of post-translation, and even a reduced form.
I would also like to note that I am far from being an expert in jQuery, I began to understand with you after reading this book. I hope that everything will work out for us! Moreover, if I made some inaccuracies, I misunderstood something - I apologize, I will be happy to fix everything.
In parallel, I post articles on my blog , and there you can go ;-)
Source: https://habr.com/ru/post/38526/
All Articles