jquery Overview-Basics 01

Source: Internet
Author: User

1. Get the node:

* Previous layer: parent ();
* Next layer: children ();
* Adjacent Next: Next ();
* Adjacent to All: siblings ();

2. Descendants node: $ (' a B '), $ (' a>b ')
Brother Node: $ (' a~b ') $ (' a+b ')
3.jquery Object->dom Object
var $CR = $ (' #cr ');
var cr = $CR [0]; /var CR = $cr. Get (0);
The 4.DOM object->jquery object.
var cr = document.getElementById (' cr ');
var $CR = $ (CR);

5.JQ use with other libraries there will be conflicting times:

* JQ First import: Use ' jQuery () ' instead of ' $ () '; Other libraries can use $ ()
* JQ after import: Use jquery (function ($) {Internal can continue to use ' $ () '}); Other libraries can use $ ()

6.$ (' a '): jquery obtains the Eternal object, even if no object is not an error, so the method of judging is:

* IF ($ (' a '). length>0) {}
* or converted to DOM judgment: if ($ (' a ') [0]) {}

5. Basic selector: $ (' #one '); $ ('. Mini '); $ (' div '); $ (' * '); $ (' span, #tow ')
6. Hierarchy Selector: $ (' ancestor descendant '); $ (' Parent>child '); $ (' Prev+next '); $ (prev~sibiling).
Equivalent: $ ('. One+div ') = = = $ ('. One '). Next (' div '); $ (' #prve ~div ') ===$ (' #prve ') nextall (' div ')
$ (' #prev '). Siblings (' div ')//peer-owned.
7. Filter selector//In general, the content of the filter has been a string without the need for quotation marks

* Basic Filter selector:

: First,:last,:not (selector),: Even,:odd,:eq (Index),: GT (Index),: LT (index)//index starting from 0
: header//all heading elements, usually without elements before the colon,
: animated//all elements that are currently executing the animation,
: focus//The element that currently receives focus

* Content Filter Selector:

: Contains (text)
: Empty//Does not contain child elements (including spaces, line wrapping)
: Has (selector),:p arent//contains child elements

* Visibility Filter Selector:

: hidden,:visible

* Attribute Filter Selector:

[Attr],[attr=value],[attr!=value],[attr^=value],[attr$=value]
[Attr*=value]//attr property value contains value,[attr|=value]//attr attribute value equals value or prefixed with value (followed by '-')
[Attr~=value]//value no other string (including the beginning end or the direct equivalent), [attr1][attr2=value]//simultaneously satisfies


* Sub-Filter Selector: (This filter returns child elements)

: First-child,:last-child,:only-child//Not unique mismatch
: Nth-child (even/odd),: Nth-child (Index)//index starting from 1,: Nth-child (2*index)//2 multiples,: nth-child (3*index+1)

* Form object property Filter Selector:

: Enabled,:d isabled//set disable= ' Disable ',: checked//Radio (radio), check box (checkbox),: selected//drop-down box
8. Form Selector
: input//all <input><textare><select><button> elements: text//single-line text box,
: Radio,:checkbox,:submit,:image,:reset,:button,:file,:hidden
9. Some considerations in the selector:

* The selector contains special characters: such as # (]. Note in escaping, because within the string, use double backslashes \ \
* Note space

10. Filtering: Filter ()//Find in the collection itself, find ()//subset
11.DOM Operation Classification:

* Dom Core: Any language that supports DOM can be used such as: document.getElementById (); Elem.setattribute ();
* Html-dom: Use JS and DOM to script HTML, such as: document.fomes; ELEM.SRC;
* Css-dom: For CSS operation such as: Elem.style.color;

12 Property Actions:
Get Properties: Single attr ("), Multiple attr (", ",");
Set properties: Single attr (': '); Multiple attr ({': ', ' ': '});
Delete attribute: Removeattr ();

13. Node
element, Text: Create $ () directly, insert dynamically.
14. Inserting nodes: The short-name method is to put the original node in front, the new node is placed in the rear;

* Become the last child node: append,appendto;
* Become the first child node: prepend,prependto;
* Become the latter node: After,insertafter;
* Become the previous node: Before,insertbefore;

15. Delete the node:

* Remove ();

The deletion includes its and its global child elements;
Returns a reference to the node, so you can continue to use it, but notice that its original bound event, and that the attached data is deleted.
For node collections, you can also use parameters to filter the nodes to be deleted;

* Detach ();

The effect is the same as remove (), except that it retains its original bound event and additional data.

* Empty ();

Empties all the child nodes of the element, including the bound events, additional data;
no return references;
no parameter filtering;

jquery Overview-Basics 01

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.