Use of jQuery Selector

Common JS framework jQueryDOJOExtJSPrototypejQuery framework concept: WRITELESS, DOMOREjQuery1.4 enterprise mainstream version, from jQuery1.6 to introduce a large number of new features, the latest version 1.8.3jQuery provides jquery-1.8.3.js and jquery-1.8.3.min.jsjquery-1.8.3.js

Common JS frameworks

JQuery

DOJO

Ext JS

Prototype

JQuery framework concept: write less, DO MORE

Mainstream Enterprise version of jQuery 1.4, introducing a large number of new features from jQuery1.6, the latest version 1.8.3

JQuery provides jquery-1.8.3.js and jquery-1.8.3.min.js

Jquery-1.8.3.js jQuery framework source code, not streamlined, large volume (mainly used to study jQuery source code), enterprise development, need to import jquery-1.8.3.min.js (streamlined)

Window. onload = function () {...} Use jquery $ (document). ready (function (){...});

I. Getting started with jQuery

The core function jQuery () is used in four ways.

1. jQuery (callback) // page onload Function

2. jQuery (expression, [context]) // find the specified object ------ nine selectors

3. jQuery (elements) // converts a dom object to a jQuery object

* Document is a DOM object. jQuery (document) becomes a jQuery object.

4. jQuery (html, [ownerDocument]) // converts html to a jQuery object

* JQuery ("

Hello

") ----- Get the jQuery object

Remember the first usage here

The jQuery alias is $, so jQuery (callback) is equivalent to $ (callback)

* JQuery can be used to bind multiple onload functions at a time. In traditional mode, only one onload function can be bound.

Ii. What is a jQuery object?

A unique object result in the jQuery framework. You can use the method provided by jQuery to encapsulate DOM objects through the jQuery () function to become jQuery objects.

The jQuery object cannot use the DOM object attribute method.

DOM objects cannot use jQuery object attribute methods either.

The jQuery object is similar to a DOM object array. The first element of the array is the DOM object.

DOM --- jQuery object $ jQuery object = $ (DOM object)

JQuery object-DOM object = $ jQuery object [0] can also be written as DOM object = $ jQuery object. get (0 );

Iii. jQuery Selector

Standard selection language based on CSS3 specifications

JQuery (expression, [context]) transmits an expression in the core function jQuery to select the elements on the page.

1. Basic Selector

Select an element based on the element id, class, and element name.

ID selector $ ("# element id attribute ")

CLASS selector $ (". Element class Attribute ")

Element name selector $ ("element name ")

Multiple selectors use selector1 at the same time. select2 For example: $ ("# xxid,. xxxclass") both select id and class to match two types of Elements

2. Hierarchical Selector

Select Based on ancestor, descendant, parent-child relationship, and sibling relationship

Ancestor descendant gets all elements under ancestor element $ ("form input ")

Parent> child get all direct child elements under the parent element $ ("form> input ")

Prev + next get the last sibling element followed by the pre element $ ("label + input ")

Prev ~ Siblings gets all the sibling elements behind the pre element $ ("form ~ Input ")

3. Basic filter Selector

: First select the first element $ ("tr: first ")

: Last select the last element $ ("tr: last ")

: Not (selector) removes all elements that match the given selector $ ("input: not (: checked )")

: Even selects the elements of all the elements with an even number index and starts counting from 0 $ ("tr: even") ----- selects an odd number of elements

: Odd selects the odd number index elements of all elements and starts counting from 0 $ ("tr: odd") ------ selects an even number of elements

: Eq (index) Select the element of the specified index $ ("tr: eq (1 )")

: Gt (index) Select an element whose index is greater than the specified index $ ("tr: gt (0 )")

: Lt (index) Select the element whose index is less than the specified index $ ("tr: lt (2 )")

: Select all title elements such as h1, h2, h3 $ (": header ")

: Animated matches all the elements that are executing the animation effect.

4. Content Filtering Selector

The content selector is an operation on child elements and text content.

: Contains (text) select elements that contain text content $ ("div: contains ('john')") text content contains all divs of John

: Empty: select an empty element that does not contain child elements or text nodes $ ("td: empty") td element must be blank

: Has (selector) selects the element containing the element matched by the selector $ ("div: has (p)"). addClass ("test"); div containing the p sub-element

: Parent select all elements with child elements or text nodes $ ("td: parent") selected by non-empty td Elements

5. Visibility filter Selector

Select an element based on its visibility and invisibility status.

: Hidden select all invisible elements $ ("tr: hidden ")

: Visible select all visible elements $ ("tr: visible ")

6. Attribute filter Selector

Select the corresponding element through the attribute of the element

[Attribute] select the element with this attribute $ ("div [id]")

[Attribute = value] Selects all elements whose specified attribute value is value.

[Attribute! = Value] select all elements whose property value is not value

[Attribute ^ = value] Selects all elements whose attribute values start with value.

[Attribute $ = value] Selects all elements whose attribute values end with value.

[Attribute * = value] Selects all elements whose property values contain values.

7. Child element filter Selector

Select sub-elements in an element

: Nth-child (index/even/odd) selects the index elements, the index is an even number of elements, the index is an odd number of elements ----- index from 1 difference eq

: First-child: select the first child element

: Last-child selects the last child element

: Only-child selects a unique child element. Its Parent element only has this child element.

8. form filter Selector

Filter selector for selecting form elements

: Input select all,, And Element

: Text select all text box Elements

: Password select all password box Elements

: Radio Selects all single worker Elements

: Checkbox Selects all the multiple selection box Elements

: Submit select all submit button Elements

: Image select all image button Elements

: Reset select all reset button Elements

: Button select all button Elements

: File: select all file upload domain Elements

: Hidden Selects all invisible elements

9. Form object attribute filter Selector

Filter selector for selecting form Element attributes

: Enabled: select all available elements

: Disabled: select all unavailable Elements

: Checked Selects all selected elements, such as single-choice and check boxes.

: Selected: select all selected items, as shown in the following drop-down list box and list box.

Core Method for Object Access: each (function () {}) traverses the set, the size ()/length attribute returns the length of the Set, and index () searches for the target element, which is the first element of the set.

CSS style operation: css (name, value) css ({name: value, name: value}); Modify multiple CSS styles at the same time

The basic filter selector is the same as the filter API.

$ ("Tr: first") is equivalent to $ ("tr"). first ()

Which elements are invisible and can be selected by: hidden?

Css style display: none

* ***** Visibility: The hidden element cannot be selected by: hidden

Key points of the nine selector types:

I. Basic selector and hierarchical selector lock Elements

Ii. Use the attribute filter selector and content filter selector to select specific elements

3. Form operation: checked: Select selected elements of the selected form

Configure the basic filter selector to narrow down the selected range.

Bytes -----------------------------------------------------------------------------------------------------------------------------

Iv. jQuery DOM operations

1. Query

Children ([expr]) gets the specified child element

Find (expr) gets the specified descendant Element

Parents ([expr]) obtains the ancestor Element

Parent () to obtain the parent Element

Next ([expr]) Get the next sibling Element

Prev ([expr]) gets the previous sibling Element

Siblings ([expr]) obtains all sibling Elements

Most find methods are used in XML parsing.

** Traverse the search results using the each (function (){... }). In the each function, you can use this to obtain the DOM object and $ (this) to obtain the jQuery object.

2. Attribute operations

Set attributes attr (name, value)

Read attributes attr (name)

Set multiple attributes at the same time attr ({name: value, name: value ...});

Attr ("checked", "true") is equivalent to prop ("checked ")

3. CSS operations

Attr ('style', 'color: red'); // Add the style attribute

Css (name, value) sets a CSS style attribute

Css (properties) transmits the key-value object and sets multiple CSS style attributes.

AddClass (class) adds a class attribute

RemoveClass ([class]) removes a class attribute

If toggleClass (class) exists (does not exist), delete (ADD) a class

4. HTML code, text, and value operations

Html () read innerHTML

Set innerHTML in html (content)

Text () read text content

Text (content) set text content

Val () reads the element value attribute

Val (content) sets the element value attribute

Set val to control radio select checkbox Selection

$ ("# City"). val ("Guangzhou ");

$ ("Input [name = 'gender']"). val (['female]);

5. add elements to jQuery

Create elements and splice HTML code snippets $ (html snippets) ---- generate jQuery objects

Add Element

$ Node. append ($ newNode) Internal End append

$ Node. prepend ($ newNode) Internal start position append

$ Node. after ($ newNode) is appended to an existing element-brother

$ NewNode. insertBefore ($ node) is appended before an existing element.

6. jQuery deletes elements.

Select the element to be deleted. remove () ---- Delete the element

Select the element to be deleted. remove (expr) ----- delete a specific rule Element

After removing a node, the event will also be deleted.

After detach deletes a node, the event is retained from the 1.4 new API

7. Copying and replacing jQuery Elements

$ ("P"). clone (); returns the cloned copy of the node, but does not clone the event of the original node.

$ ("P"). clone (true); clone the node and retain the original event

$ ("P"). replaceWith ("Hello"); Replace all p elements"Hello"

$ ("Hello"). ReplaceAll (" p "); opposite to replaceWith

Certificate ----------------------------------------------------------------------------------------------------------------------------------------

V. jQuery events

1. Event binding

In traditional JavaScript, an object can only be bound to a certain event.

JQuery supports binding multiple functions to the same object.

There are two ways to bind event functions to an object:

Method 1

$ ("Div"). click (function (){

...

);

Statement 2

$ ("Div"). bind ("click", function (){

...

});

Unbind $ ("div"). unbind ("click ");

* ** As a condition object, live appends the binding and cancels the live event die method in real time.

2. One-time event binding and automatic triggering

One-time event one (type, [data], fn) is bound to a one-time event for the object, only valid once

Trigger (type, [data]) triggers the execution of the event specified by the target object

3. Event Switching

Hover (mouSeoVer, mouSeoUt) simulate a mouse hover event

Toggle (fn1, fn2, fn3.); trigger a function once with the mouse clicked.

4. Events prevent default actions and Propagation

$ ("A"). click (function (event ){

Event. preventDefault ();

// Do something

});

$ ("P"). click (function (event ){

Event. stopPropagation ();

// Do something

});