A summary of some methods of jquery object acquisition

Source: Internet
Author: User
Tags file upload

Use the jquery selector to select page elements to generate the jquery object, which is fairly simple: $ (selector). It is worth noting, however, that this is the generation of jquery objects, not DOM objects, so $ (selector). innerHTML to get the element internal HTML code is wrong, and the correct notation is $ (selector). HTML (). Similarly, to determine if a DOM object exists, it cannot be written as if ($ (selector)), but if ($ (selector). length>0).
Of course, jquery objects and Dom objects can be converted to each other. As can be seen from the example above, a jquery object can be viewed as an array of Dom objects, so converting it to a DOM object can be used to remove the subscript using the Get (index) method or [index]; instead, the DOM object converts to a jquery object with just the $ ( document.getElementById ("id")) the packing will do.

Although the method of fetching the object is very simple $ (selector), this parameter selector is a wide variety. Here is a brief description:

Filter selector: attached to the back of all selectors, filter out some elements, such as $ (selector:first), with specific filtering rules. If used separately, $ (: a) is equivalent to $ (*:first);

Hierarchy selector: A hierarchical relationship between DOM elements to get specific elements, grouped by two selectors. The selection process selects the elements according to the first selector, then determines the descendant element or sibling element according to the symbol, and finally selects the last desired element in the range of those elements according to the second selector;

jquery realized the separation of the code, no longer add the Web page such as: OnClick event to call the function, the direct introduction of the JQuery class library and its own jquery code to write it;

Such as:

The code is as follows Copy Code

$ (function () {

$ ("Element"). click{

function () {

Alert ("Click me Oh!") ");

}

}

});

The above code just defines the element, and the click behind it is the action

Alert ("Click me Oh!") This is the code to be executed, and of course you can have a lot of operations in this function;

Here's the $ this number represents the meaning of jquery, is to refer to the class library ... That's how I understand it;

3. Some approaches to the core of jquery

Each (callback) ' is like a loop

$ ("Element"). Length; ' The number of elements, is a property

$ ("Element"). Size (); ' is also the number of elements, but with parentheses is a method

$ ("Element"). get (); ' A collection of elements in a page, stored as an array

$ ("Element"). Get (index); ' function is the same as above, index represents the first few elements, the subscript of the array

$ ("Element"). Get (). reverse (); ' Put the resulting array in the direction

$ ("Element1"). Index ($ ("Element2")); ' The index value of element 2 in element 1 is ...

4, basic object acquisition

$ ("*") ' means get all objects

$ ("#element") ' Get the same ID number as in CSS

$ (". ABC") ' all elements using the. ABC Style

$ ("div") ' tag Selector Select all DIV elements

$ ("#a,. B,span") ' means the element that gets ID A and the element that uses class style B, and all span elements

$ ("#a. B p") ' ID number is a and all p elements of B-style are used

5. Level element Acquisition

$ ("Element1 Element2 Element3 ...") ' Front parent is a subset

$ ("div > P") ' Get all the P elements underneath the div

$ ("div + P") ' div element after the first P element

$ ("div ~ p") ' div after all the P elements

6. Simple Object Acquisition

$ ("Element:first") ' The first element of a class element in an HTML page

$ ("element:last") ' The last element of a class of elements in an HTML page

$ ("Element:not (selector)") ' Removes all elements that match the given selector, such as: $ ("Input:not (: Checked)") indicates that all unchecked checkboxes are selected

$ ("Element:even") ' Get even line

$ ("element:odd") ' Get odd rows

$ ("Element:eq (Index)") ' gets a given index value

$ ("ELEMENT:GT (Index)") ' all elements after obtaining the element of the given index value

$ ("Element:lt (Index)") ' all elements before the element that gets the given index value

。。。

7, access to content objects and visibility of objects

$ ("Element:contains (text)") ' element contains text text content

$ (' element:empty ') ' Gets the element that does not contain child elements or text.

$ ("element:partnt") ' Gets the element containing the child element or text

$ ("Element:has (selector)") contains an element, such as: $ ("P:has (span)") that represents all the P elements that contain span elements

$ ("Element:hidden") ' Select all visible elements

$ ("element:visible") ' Select all invisible elements

8. Other object acquisition methods

$ ("Element[id]") ' all elements with ID attributes

$ ("Element[attribute = Youlika]" ' gets all elements that have a property of Youlika

$ ("Element[attribute!= Youlika]" ' gets all elements that are not youlika for a property

$ ("Element[attribute ^= Youlika]" "gets all elements that are not youlika at the beginning of a property

$ ("Element[attribute $= Youlika]" "To get all the elements that are not youlika ends of a property

$ ("Element[attribute *= Youlika]" "gets all the elements that contain the beginning of the Youlika of a property

$ ("element[selector1][selector2][...]") ' Conforming to the attribute selector, such as $ (' input[id][name][value=youlika] ', means to obtain an INPUT element with ID, name, and value being Youlika.

9, the acquisition of child elements

$ ("Element:nth-child (Index)") ' Select the nth element below the parent level

$ ("Element:nth-child (even)") ' Select an even number below the parent level

$ ("Element:nth-child (Odd)") ' Select the odd number below the parent level

$ ("Element:nth-child (3n+1)") ' Expression

$ ("Element:first-child") ' Select the first child element below the parent level

$ ("Element:last-child") ' Select the last child element below the parent level

$ ("Element:only-child") ' matches only one child element under the parent, for example, DT is unique in the DL list, then it will select DT

10, Form Object acquisition

$ (: Input)//Find all input elements, including, of course, Drop-down lists, text fields, radio boxes, check boxes, and so on.

$ (: Text)//Match all Single-line text boxes

$ (:p assword)//Match all password boxes

$ (: Radio)//Match all radio buttons

$ (: checkbox)//Match all check boxes

$ (: Submit)//Match all submit buttons

$ (: image)//matches all image fields, such as <input type= "image"/>

$ (: RESET)//matches all reset buttons

$ (: button)//Match all buttons

$ (: file)//Match all file upload fields

$ (: Hidden)//matches all invisible elements or elements of type hidden

$ (: Enabled)//matches all available input elements, such as radio:enabled to match all available radio buttons

$ (:d isabled)//Match all of the unavailable input elements to the opposite effect

$ (: Checked)//matches all selected check box elements

$ (: Selected)//Match all dropdown list

11. Setting and removing element attributes

$ ("Element"). attr (name) gets the first matching property value, such as $ ("img"). attr ("src")

$ (' element '. attr (key,value) ') ' Set properties for one element

$ ("Element". attr ({key:value,key1:value,....})) ' Set multiple attributes at once for an element

$ ("Element"). attr (key,function) ' Sets a calculated property value for all matching elements.

$ ("Element"). Removeattr (name)/Remove a property

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.