JQuery (ii)

jquery selector (see the jquery Handbook for details)
jquery Selector Detector: http://www.runoob.com/try/trysel.php

ID selector $ (' #demo ') document.getElementById (' demo ')
Class Selector $ ('. Demo ') Document.getelementsbyclassname (' demo ')
Element selector $ (' div ') document.getelementsbytagname (' div ')
Full selector (* selector) $ (' * ') document.getelementsbytagname (' * ')
Hierarchy Selector (sub-selector, descendant selector, neighbor sibling selector, general sibling selector)
Basic Filter Selector
Content Filter Selector
Visibility Filter Selector
Property Filter Selector
child element Filter Selector
Form element Selector
Form object property Filter Selector
Special Selector This

If multiple elements are assigned the same ID, only the first DOM element of the selected collection will match that ID. But this behavior should not occur; pages with more than one element use the same ID is not valid

Class selector, relative to the ID selector, the efficiency is relatively low, but the advantage is that you can select multiple

/************************** Hierarchy Selector start*******************************/

Child Selector
$ (' Parent > Child ') Direct sub-element

Descendant Selector
$ (' ancestor descendant ') all descendant elements

Adjacent sibling selector
$ (' prev + next ') the ' next ' element immediately following the ' prev ' element

General Brother Selector
$ (' prev ~ siblings ') ' prev ' element after all the sibling elements

/************************** Hierarchy Selector end*******************************/

Many of the filter selectors are not CSS specifications, but jquery for developers to facilitate the extension of the selector,
Usage is similar to pseudo-elements in CSS:
$ (': First ') to match one element
$ (': Last ') matches the final element
$ (': not (selector) ') filter Selector
$ (': EQ (index) ') Select an element with index value
$ (': GT (Index) ') Select all elements with index values greater than index
$ (': LT (Index) ') Select all elements with index values less than index
$ (': even ') an element with an even number index value
$ (': odd ') an element with an odd index value
$ (': Header ') Select all the heading elements, like H1,H2,H3, etc.
$ (': lang (language) ') Select all elements of the specified language
$ (': Root ') Select the root element of the document
$ (': Animated ') Select all elements that are performing an animation effect

Content Filter Selector:
$ (': Contains (text) ') Select the element that contains the specified text
$ (':p arent ') parent element
$ (': Empty ') Select elements that have no child elements (including text nodes)
$ (': Has (selector) ') element with selector selector

Visibility Filter Selector:
$ (': Visible ') Select all displayed elements
$ (': Hidden ') Select all hidden elements

Property Filter Selector
[Attribute]$ ("[href]") all elements with an HREF attribute
[Attribute=value]$ ("[href= ' default.htm ']") all elements with an HREF attribute and a value equal to "default.htm"
[Attribute!=value]$ ("[href!= ' default.htm ']") all elements with href attribute and value not equal to "default.htm"
[Attribute$=value]$ ("[href$=. jpg]") all elements with an HREF attribute with a value ending with ". jpg"
[Attribute|=value]$ ("[title|= ' Tomorrow ']") all strings with the title attribute with the value equal to ' tomorrow ' or the ' tomorrow ' followed by the connector as the beginning
[Attribute^=value]$ ("[title^= ' Tom ']") all elements with the title attribute with a value beginning with "Tom"
[Attribute~=value]$ ("[title~= ' Hello ']") all elements with the title attribute and the value containing the word "hello"
[Attribute*=value]$ ("[title*= ' Hello ']") all elements with the title attribute and the value containing the string "Hello"

Browser support:

[Att=val], [ATT], [att|=val], [att~=val] belong to the CSS 2.1 specification
[Ns|attr], [Att^=val], [Att*=val], [att$=val] belong to the CSS3 specification
[name!= "Value"] is a selector for the jquery extension

In so many property selectors [attr= "value"] and [attr*= "value"] are the most practical

[attr= "value"] can help us to locate different types of elements, especially the form form elements, such as input[type= "text"],input[type= "checkbox", etc.
[attr*= "value"] can help us match different types of files on our website

Child element Filter selector:
: first-child$ ("P:first-child") all <p> elements that belong to the first child element of its parent element
: first-of-type$ ("P:first-of-type" All <p> elements of the first <p> element of its parent element
: last-child$ ("P:last-child") all <p> elements that belong to the last child element of its parent element
: last-of-type$ ("P:last-of-type") belongs to all <p> elements of the last <p> element of its parent element
: Nth-child (N) $ ("P:nth-child (2)") All <p> elements that belong to the second child element of its parent element
: Nth-last-child (N) $ ("P:nth-last-child (2)") all <p> elements that belong to the second child element of its parent element, Start counting from the last child element
: Nth-of-type (N) $ ("P:nth-of-type (2)") all <p> elements of the second <p> element of its parent element
: Nth-last-of-type (n $ ("P:nth-last-of-type (2)") belongs to all <p> elements of the second <p> element of its parent element, counting from the last child element
: only-child$ ("P:only-child") All <p> elements that belong to the unique child element of its parent element
: only-of-type$ ("P:only-of-type") all <p> elements of a unique child element of a particular type of its parent element

Form element selector:
: input$ (": input") all input elements
: text$ (": Text") all input elements with type= "text"
:p assword$ (":p assword") all input elements with type= "password"
: radio$ (": Radio") all input elements with type= "Radio"
: checkbox$ (": checkbox") all input elements with type= "checkbox"
: submit$ (": Submit") all input elements with type= "Submit"
: reset$ (": Reset") all input elements with type= "reset"
: button$ (": Button") all input elements with type= "button"
: image$ (": Image") all input elements with type= "image"
: file$ (": File") all input elements with type= "file"

Form object property Filter Selector:
: enabled$ (": Enabled") all enabled input elements
:d isabled$ (":d isabled") all disabled input elements
: selected$ (": Selected") All selected input elements
: checked$ (": Checked") All selected input elements

1 varBBCV = {2Name: "BBCV",3GetName:function(){4         //This is the BBCV object5         return  This. Name;6     }7 };8 bbcv.getname ();9 TenP.addeventlistener (' click ',function(){ One     //This = = = P A     //Both of the following modifications are equivalent -      This. Style.color = "Red"; -P.style.color = "Red"; the},false); -  - //in an event callback that is bound by AddEventListener, this points to the current DOM object, so the style of such an object is modified again, just by retrieving the reference from this -  This. Style.color = "Red";

But this kind of operation is actually very inconvenient, this involves a lot of style compatibility,
It would be a lot easier if we were working with jquery, we just had to make this into a jquery object.

1 $ (' P '). Click (function() {2     // ) convert p element to jquery object 3      var $this = $ (this4     $this. css (' Color ', ' red '); 5 });

This indicates that the current context object is an HTML object that can invoke properties and methods owned by the HTML object.
$ (this), which represents the context object that is a jquery context object that can invoke the methods and property values of jquery.

JQuery (ii)