Jquery1.4.1 Learning

Source: Internet
Author: User
Jquery 1.4.1

I have also used jquery several times at work, but it was still a few years ago. But that is to say, if you use any function to open the api for direct query, you haven't summarized it yet. Haha, I feel that the Summary at work is still necessary. Although I have used it in my work, however, the conclusion at the final stage may be greater and more rewarding than at work.

 

Below is a summary of my common functions and experiences:

  1. The first thing we need to do is to clearly identify the jquery object and dom object. It is very simple: the Jquery object method is found in the jquery manual, and the dom object method is searched in the dhtml manual. I'm glad that the jQuery core function provides dom-> jQuery object conversion through $ (element). element can be a dom object, it can also be a jquery object.
  2. $ (Document). ready (function () {}) =$ (function (){})
    The two are actually the same functions. They provide a function after the page is loaded and provide the link function, this means that multiple function connections can be executed after the page is loaded, as follows:
    $ (Function (){
    Alert ('first running ');
    });
    $ (Function (){
    Alert ('second run ');
    });
    Window. onload = function () {} is supported. Only the last function is executed.
  3. In addition to converting a dom object to a jquery object, the $ () method also contains several overloaded versions.
    1) enter an expression to search for the object $ (exp, [context]), and search for the object represented by the exp expression in context;
    Generally, I do not specify context. The reason why jquery gives this parameter is that it is more efficient to specify it!
    2) You can directly upload an html string to this function to construct a jquery object.
    3) when passing in an html string and specifying some attributes
    For example: $ ("<input>", {type: "}). appenTo (" form ");
  4. JQuery Object Access
    The jQuery method usually obtains a set, and the number of elements in the set can be obtained by using the size () method or the length attribute. The each method can traverse the set, in a function, the this pointer points to a dom element each time, and each time it is returned to the function to pass a real parameter representing the position of the element in the collection, and we can use return false to terminate the loop, return true enables the next loop;
  5. Get (), get (index), index ();
    The get method gets the corresponding dom object from the set. The index method provides two methods:
    1) Search for elements as parameters before the set
    2) set as a parameter (seletor selection method), the element to be searched is in front
  6. Data Cache applications
    This method is found in a project application and is very practical. When we store data, we either store the data in a hidden domain or assign the attribute to an element. Now, it's okay, we can set the data cache in one step, which is very simple, with only $ (). data (name );
  7. Application of Selector
    JQuery should be applied on the basis of the selector. We can search for elements by element id, name, tagname, etc. All we need to do is to pass a so-called seletor to the $ () function, haha, part of my work in learning jQuery is to learn how to build a reasonable seletor to find the elements I need;
    Seletor construction:
    Basic:
    Locate by element id, class name, and element name. If you are familiar with css, you can understand the seletor rules of jQuery. These rules are also used when css is defined.
    # Id: Set the tagname of A class element for a single element. class (element name;
    Fortunately, we can use commas (,) to randomly select multiple elements;:-D

    Level:
    1. We often need to obtain sub-elements under an element (divided into all, directly two types)
    A B gets all B elements under a, And a> B gets B directly sub-elements under.
    2. We also often obtain sibling elements of the same level of elements, such as: elements that need to be next to an element, or all sibling elements behind an element;
    It is also simple: prev + next gets the next element next to prev, prev ~ Sibling obtains all peer elements after prev;

    Set selection:
    When selecting an approximate set through selector, we may need some elements, so we have selector for further operations;
    : First,: last: not removes some elements: eq,: gt,: lt equal to, greater than, less than a set of elements of an index; you can also directly obtain the set with an odd number (: odd) or an even number (: event ).

    Further content filtering:
    We can also filter the content of a dom object, including whether some text is contained, whether an element is contained, and whether it is null. It contains all the operations we need;
    : Contains the specified text. empty does not contain any sub-content.
    : Has contains an element: parent contains sub-content

    Visibility:
    Use: hidden to find all hidden elements, and visible to find the displayed elements.

    Filter attributes:
    We can match the elements that contain an attribute, include an attribute and match the value, and add multiple conditions;
    [ASD] contains an attribute. [ASD = value] matches an element with an attribute of the target ID and its value is val. There are also several matching methods, similar to the matching method of a regular expression:
    [Recognition service! = Value] is not equal to the value starting with val, and the value ending with val.
    [ASD * = val] the attribute value contains the val value;

    Matching of form elements:
    : Text: radio: checkbox ....
    : Enable,: disabled,: checked (radio, checkbox selected),: selected; (select selected)

 

 

  1. Element attribute operations
    You can obtain an attribute value attr (name), set an attribute value attr (key, value), and set a set of attribute values: attr (properties );
    Css class:
    AddClass (class) adds css and removeClass removes css
  2. Obtaining text, value, and html code
    There is nothing to say about text and html code. To get the value, let's talk about it.
    . Val () can be used to obtain the selected values of select. If multiple values are selected, an array is returned;
    Val (array) can assign values to check, select, and radio, set the selection item, and pass an array
  3. Method:
    Filter Arrays: $. grep (array, callback ),
    $. Grep ([, 2], function (n, I) {return n> 0}); good.

    Convert a dom array object to a jquery array:
    $. MakeArray ($ ("div "));

    Convert jquery array to dom array:
    $. ToArray ();

    Determine the position in the array:
    $. InArray (value, array); determine the position of value in array;

    $. Unique (array) removes repeated elements from the array;

    $. Map (array, callback); converts an array to another array
    $. Map ([0, 1, 2], function (n) {return n + 4 });

  4. String operation:
    $. Trim (str) Remove the front and back strings

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.