September 1, 2008 at 07:11

jQuery in Action. Chapter 1. Introduction to jQuery.

    As I already wrote , I started reading the book “jQuery in Action” (authors Bear Bibeault and Yehuda Katz). In this series of articles (and I plan to finish the job) I will post the most interesting points from each chapter of this book. These will be the main ideas, examples, or both together :-)

    Chapter 1. Introduction to jQuery.


    What you need (need, need) jQuery - to facilitate the work of a web programmer. With the help of this library, it is easier for us (web programmers) to increase 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 links within a paragraph

    we wrote:

    p a

    In jQuery, the following expression is used for this:

    $(selector)

    or

    jQuery(selector)

    It should be noted here that it $()is an alias to the function jQuery(). It returns a special JavaScript object containing an array of DOM elements corresponding to the selector.

    $(“p a”)

    Or an example: apply the fade out effect to all elements

    class notLongForThisWorld. The code will be as follows:

    $(“div.notLongForThisWorld”).fadeOut();

    And if we want to add a class to these elements in addition to the effect removed, we will write this:

    $(“div.notLongForThisWorld”).fadeOut().addClass(“removed”);

    This chain can be continued indefinitely.

    But this is only a small part of jQuery’s ability to work with selectors. One more couple:

    $(“body > div”);

    The selector selects elements
    subsidiaries to the

    $(“body > div:has(a)”);

    same, but already select
    containing links.

    $(“a[href$=pdf]”);

    We select links to PDF files.

    Do not be afraid that something is not clear to you now. We'll focus on selectors in more detail in Chapter 2. The only conclusion we need to make right now is jQuery is actually a powerful thing.

    1.2. Functions

    Essentially, jQuery functions are jQuery function methods. But in the book we will call them functions. And not by methods.

    $.trim(someString);

    Here we used the function trim(). More details about jQuery functions will be discussed in the 6th chapter.

    $This is the namespace.

    1.3.The document ready handler

    (in English it’s clear, but how can I say this in Russian ... The bottom line is :-)).

    Regular JavaScript code when applying the method onloadstarts to work when the page is fully loaded by the user's browser. Together with pictures and other things. For jQuery, loading the DOM is enough.

    1.4. Work with the DOM.

    You can create DOM elements simply by passing functions $(). For example: Or an example: As you guessed, it will appear after element c .

    $(“

    Привет!

    ”) ;



    $(“

    Привет!

    ”).insertAfter(“#followMe”);

    Привет!

    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.

    We look at an example: means that we expand a wrapper function . Then we can already use our new function: In addition to our functions, plugins can be connected to jQuery. They will also be mentioned in chapter 9.

    $.fn.disable = function() {
    return this.each(function() {
    if(typeof this.disabled != “undefined”) this.disabled = true;
    });
    }

    $.fn.disabled$disabled



    $(“form#myForm input.special”).disable().addClass(“moreSpecial”);



    1.6. Using jQuery with other libraries.

    Using prefixes, jQueryand in particular, $which is also used by the Prototype library, can create problems, you think. Well, if the first is not there, then the second is for sure.

    JQuery authors have foreseen such a moment and when sharing several libraries they recommend using the function noConflict()immediately after connecting other libraries:

    jQuery.noConflict();

    In this case, $jQuery will release the value for another library.

    How do you like the whole post? I would like to hear your opinion whether it is worth continuing, because this is my first experience in this type of translation post, and even a truncated one.

    I also wanted to note that in jQuery I am far from an expert, I began to understand with you by reading this book. I hope that we succeed! At the same time, if I made some inaccuracies, I understood something wrong - I apologize, I will gladly fix it.

    In parallel, I post articles     on my blog , you can also file there ;-)
    Tags:

    Also popular now: