jquery Note-up selector

Source: Internet
Author: User

I. Overview:
jquery is a fast, concise JavaScript framework that is a good JavaScript code base (or JavaScript framework) after prototype. The purpose of jquery design is "write Less,do more", which advocates writing less code and doing more things. It encapsulates the functionality code common to JavaScript, providing a simple JavaScript design pattern that optimizes HTML document manipulation, event handling, animation design, and Ajax interaction.
The core features of jquery can be summed up with a unique chain syntax and a short and clear multi-function interface, a highly efficient and flexible CSS selector, and the ability to extend the CSS selector, with convenient plug-in extension mechanisms and rich plugins. jquery is compatible with a variety of mainstream browsers such as IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+, and more.

Two. Use:
1: Download; URL: jquery.com
2: In the HTML page using the script tag, the introduction of JS file, note must first introduce jquery, and then introduce their own write JS;
< script type= "Text/javascript" src= "Js/jquery-3.2.1.js" ></script>
3: Then use the script tag, write the programmer's own JS code;

Three. The difference and conversion between jquery object and JS object
1.js object ==>jquery Object, Format: $ (JS object);
2.jquery==>js object, Format: jquery object [0];

Four. jquery API Introduction
API is divided into core/attribute/css/selector/document Processing/filtering/Event/Effect Gao/ajax/tool/event object, total 11 parts

Selector:
1. Basic Selector
ID selector:
$ ("#id的值");

Element selector:
$ ("label name");

Class selector:
$ (". Class attribute value");

* Selectors
$("*")
Matches all elements and returns

2. Level selector:
Ancestor descendant (iterative matching)
Ancestor: for any valid selector;
Descendant: The selector that matches the element, and is the descendant of the first selector;
Example:
$ ("form input")
Match all input tags under the form label (iteration--Enter the tag of the grandchild or descendants)

Parent > Child (select only the direct generation selector, incessantly generation selection)
Parent: Any valid selector;
Child: The selector used to match the element, and it is a sub-element of the first selector (not into the iteration);
Example:
$ ("form > Input")

Prev + Next
Matches all next elements immediately following the Prev element. Note that the prev and next pairs appear to match;
Example:
$ ("label + input")

Prev ~ siblings
Match the label with the first label sibling
Example:
$ ("form ~ input")

3. Basic Filter Selector
: First
Gets the first element
Example:
$ (' Li:first ');
Returns the first Li tag object in the Li tag ([<li>list Item 1</li>])

: Last
Gets the last element (the API is followed by a parenthesis, should be removed)
Example:
$ (' li:last ')
return: [<li>list item 5</li>]

: Not (selector)
Removes all elements that match a given selector
Example:
$ ("Input:not (: Checked)")

: Even
Matches all elements with an even number of index values, counting from 0
Example:
$ ("Tr:even")
Returns a row with an even number of indexes;

: Odd
Matches all elements with an odd index value, counting from 0
$ ("tr:odd")
Returns all rows with an odd index;

: EQ (Index)
Matches an element of a given index value, counting from 0
$ ("Tr:eq (1)")
Returns an element with an index value of 1 (that is, the second row)

: GT (Index)
Matches all elements greater than the given index value, counting from 0
$ ("tr:gt (0)")
Match rows with index values greater than 0;

: LT (Index)
Matches all elements that are less than the given index value
$ ("Tr:lt (2)")
Matches rows with index values less than 2;

: Header
Match header elements such as H1, H2, H3, etc.
$ (": Header"). CSS ("Background", "#EEE");
Add background color to all headings in the page

: Focus
Matches the element that currently gets focus

4. Attribute-dependent selectors
[]
$ ("Div[id]")
Find all DIV elements that contain ID attributes

[Attribute=value]
$ ("input[name= ' newsletter ')")
Find all the name attribute is the INPUT element of newsletter

[Attribute!=value]
Find all the name attribute is not a newsletter INPUT element
$ ("input[name!= ' newsletter ')")

[Attribute^=value]
Matches a given property is an element that starts with some value
$ ("input[name^= ' News ']")
Find all input elements with name start with ' News '

[Attribute$=value]
Matches a given property is an element that ends with some value
$ ("input[name$= ' letter ']")
Find all input elements with name ending with ' letter '

[Attribute*=value]
Matches a given property to an element that contains some value
$ ("input[name*= ' Man ']")
Find all input elements with name ' man '

5. Form-dependent selectors
: input
Matches all input, textarea, select, and button elements
$ (": input")
Find all the input elements,

: Text
Match all single-line text boxes
Example:
<input type= "Text"/>
<input type= "checkbox"/>
<input type= "Radio"/>
<input type= "image"/>
<input type= "File"/>
<input type= "Submit"/>
<input type= "Reset"/>
<input type= "Password"/>
<input type= "button"/>
$ (": Text")
return: [<input type= "text"/>]

$ (":p Assword")
Match all Password boxes

$ (": Radio")
Find all radio buttons

$ (": checkbox")
Match all check boxes

$ (": Submit")
Match all Submit buttons

$ (": Image")
Match all image fields

$ (": Reset")
Find all reset buttons

$ (": Button")
Match all buttons

$ (": File")
Find all file Domains

: Hidden
Matches all invisible elements, or elements of type hidden
Example
$ ("Tr:hidden")
$ ("Input:hidden")

6. Form object Property Selector
: Enabled
Match all available elements
Example
$ ("input:enabled")

:d isabled
Match all unavailable elements
$ ("input:disabled")
Find all input elements that are not available

: Checked
Matches all selected selected elements (Checkboxes, radio boxes, etc., excluding option in select)
$ ("input:checked")
Find all selected check box elements

: Selected
Match all of the selected option elements
$ ("Select Option:selected")
Find all selected option elements

jquery Note-up selector

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.