Jquer events, selectors, DOM operations

I. Introduction of jquery

JQuery is a JavaScript library. (In fact, it is JS, is encapsulated, some of the syntax is not the same)

JQuery greatly simplifies JavaScript programming.

The jquery library is located in a JavaScript file that contains all of the jquery functions.

$:jquery identifier

Ii. jquery Selector

1. Basic selector (just like CSS)

*①id selector: #

$ ("#div1"). CSS ("Background-color", "Red")

*②class selector:.

1  $ (". Div2"). CSS ("Background-color", "Red");

③ Tag Selector

$ ("div"). CSS ("Background-color", "Red");

④ (Middle with "," separated)

$ ("#div1, #div2"). CSS ("Background-color", "Red"); Parallel selection, separated by commas

⑤ descendants (middle with spaces)

$ ("#div1 a"). CSS ("Background-color", "Red"); Descendant selection, separated by a space

2. Filter Selector

(1), Basic filtration

① First::

$ (". Div:first"). CSS ("Background-color", "Red"); Take the first

② Tail:: Last

$ (". Div:last"). CSS ("Background-color", "Red"); Take the last one.

*③ any one:: EQ (index number)

$ (". Div:eq (2)"). CSS ("Background-color", "Red"); Take any of the following: EQ (index number) or $ (". Div"). EQ (2). CSS ("Background-color", "Red");--Key

④ greater than:: GT (index number)

$ (". DIV:GT (2)"). CSS ("Background-color", "Red"); : GT (index number), whichever is greater than the index number

⑤ less than:: LT (index number)

$ (". DIV:LT (2)"). CSS ("Background-color", "Red"); : LT (index number), whichever is less than the index number

⑥ exclusions:: Not (selector)

$ (". Div:not (. Div:eq (2))"). CSS ("Background-color", "Red"); : Not ("selector"), exclude this one, select the remaining

⑦ Odd: Odd

$ (". Div:odd"). CSS ("Background-color", "Red"); : Odd, select an odd index

⑧ even: even

$ (". Div:even"). CSS ("Background-color", "Red"); : Even, with an even number of indices selected

(2), attribute filtering

① Property name filtering: [Property name]

1 $ (". Div[he]"). CSS ("Background-color", "Red"); [Property name], with the property name selected.

② property Value filtering: [Property name = attribute value] or [property name!] = attribute value]

1 $ (". Div[hehe=aaa]"). CSS ("Background-color", "Red"); [Property Name = property value], the property name is selected and is 2 $ (". div[hehe!=bbb]") of this property value. css ("Background-color", "Red"); [Property name!] = property value], with the property name selected and the property value not

(3), content filtering

① text filter:: Contains ("string")

$ (". Div:contains (' a ')"). CSS ("Background-color", "Red"); : Contains (' String '), select the string containing the--based on the text

② Sub-element filtering:: Has (selector)

$ (". Div:has (A)"). CSS ("Background-color", "Red"); : Has ("selector"), select contains the selector-depending on the selector

All Selector instances:

Selector

Selector	Example	Select
*	$("*")	All elements
#ID	$ ("#lastname")	id= elements of "LastName"
. class	$ (". Intro")	All elements of class= "Intro"
Element	$ ("P")	All <p> elements
. class. class	$ (". Intro.demo")	All class= "Intro" and Class= "demo" Elements
: First	$ ("P:first")	First <p> Element
: Last	$ ("P:last")	Last <p> Element
: Even	$ ("Tr:even")	All even <tr> elements
: Odd	$ ("tr:odd")	All odd <tr> elements
: eq (index)	$ ("UL Li:eq (3)")	Fourth element in the list (index starting from 0)
: GT (no)	$ ("UL li:gt (3)")	List elements with index greater than 3
: LT (no)	$ ("UL Li:lt (3)")	List elements with index less than 3
: Not (selector)	$ ("Input:not (: Empty)")	All input elements that are not empty
: Header	$ (": Header")	All heading elements
: Animated		All animated elements
: Contains (text)	$ (": Contains (' W3school ')")	All elements containing the specified string
: Empty	$ (": Empty")	All elements with No child (element) nodes
: Hidden	$ ("P:hidden")	All hidden <p> elements
: Visible	$ ("table:visible")	All the visible tables
S1,s2,s3	$ ("Th,td,.intro")	All elements with a matching selection
[attribute]	$ ("[href]")	All elements with an HREF attribute
[attribute=value]	$ ("[href= ' # ']")	The value of all href attributes equals "#" elements
[attribute! =value]	$ ("[href!= ' # ']")	The value of all HREF attributes is not equal to the "#" element
[attribute$=value]	$ ("[href$= '. jpg ']")	The value of all HREF attributes contains elements ending with ". jpg"
: input	$ (": input")	All <input> elements
: Text	$ (": Text")	All <input> elements of type= "text"
:p Assword	$ (":p Assword")	All <input> elements of type= "password"
: Radio	$ (": Radio")	All <input> elements of type= "Radio"
: checkbox	$ (": checkbox")	All <input> elements of the type= "checkbox"
: Submit	$ (": Submit")	All <input> elements of type= "submit"
: RESET	$ (": Reset")	All <input> elements of type= "reset"
: button	$ (": Button")	All <input> elements of type= "button"
: Image	$ (": Image")	All <input> elements of type= "image"
: File	$ (": File")	All <input> elements of type= "file"
: Enabled	$ (": Enabled")	All the active input elements
:d isabled	$ (":d isabled")	All disabled input elements
: Selected	$ (": Selected")	All selected input elements
: Checked	$ (": Checked")	All selected input elements

III. Events

1, general events--the JS event in front of the remove

For example: Js:onclick--jquery:click

Here are some examples of the event methods in JQuery:

Event function	Bind function to
$ (document). Ready (function () {})	Bind a function to a document's Ready event (when the document is loaded) (that is, JS Window.onlode ())
$ (selector). Click (function () {})	A click event that triggers or binds a function to the selected element
$ (selector). DblClick (function () {})	A double-click event that triggers or binds a function to the selected element
$ (selector). focus (function () {})	Trigger or bind a function to the Focusable event of the selected element
$ (selector). MouseOver (function () {})	Mouse hover event that triggers or binds a function to the selected element
$ (selector). Mouseout (function () {})	Mouse out event that triggers, or binds a function to a specified element

2. Composite Events

①houver (function () {},functiaon () {})--equivalent to combining mouseover () mouseout ()

②toggle (function () {},function () {},....) --click on event loop execution, see the following code usage show

3. Event bubbling
The bubbling event is a click on the child node, which triggers the parent node, the ancestor node's click event. (That is, you click on a div, assuming that his parent container and the ancestor container have click events, then these will also trigger)

Add return False after the event has finished executing
Four, Dom operation

1. Operation Properties

① Setting properties

$ ("selector"). attr ("Property name", "Property value")

② Getting properties

• Text ()-Sets or returns the text content of the selected element
• HTML ()-Sets or returns the contents of the selected element (including HTML tags)
• Val ()-Sets or returns the value of a form field

③ Deleting properties

$ ("selector"). Removeattr ("attribute name")

2. Operation Style
(1) Operation inline style
① Get Style
var s = $ ("selector"). CSS ("style name")
② Setting Styles
$ ("selector"). CSS ("style name", "value")
(2) The class of the operating style sheet
① Add Class
$ ("selector"). AddClass ("class name")-adds one or more classes to the selected element
② Remove Class
$ ("selector"). Removeclass ("class name")-deletes one or more classes from the selected element
③ Add remove Alternating class
$ ("selector"). Toggleclass ("class name")-switch operation to add/Remove classes for selected elements

3. Operation Contents

Three simple and practical jQuery methods for DOM manipulation:

• Text ()-Sets or returns the text content of the selected element
• HTML ()-Sets or returns the contents of the selected element (including HTML tags)
• Val ()-Sets or returns the value of a form field

(1) Form elements
① value
var s = $ ("selector"). Val ()
② Assignment Value
$ ("selector"). Val ("value")
(2) Non-form elements
① Assignment Value
$ ("selector"). HTML ("Content"), $ ("selector"). Text ("Content")
② value
var s = $ ("selector"). html (), var s = $ ("selector"). Text ()

4. Manipulating related elements
(1) Find
Father, predecessor:
①parent ()

The parent () method returns the immediate parent element of the selected element.

The method will only traverse the DOM tree up one level.

var p = $ (this). parent ();//Find the element's parents var p = $ (this). Parent (). parented ();//Find parents of the element's parent

②parents (selector)

The parents () method returns all the ancestor elements of the selected element, all the way up to the root element of the document (

You can also use optional parameters to filter the search for ancestor elements.

$ (document). Ready (function () {  $ ("span"). parents ();});

var p = $ (this). Parents ("#div2");//If you know the ID or name of a predecessor, you can use parents ("selector")

Child, descendant:
①children (selector)

The Children () method returns all the immediate child elements of the selected element.

The method will only traverse the DOM tree down one level.

$ (document). Ready (function () {  $ ("Div1"). Children ();    Find child elements of Div1});

②find (selector)

The Find () method returns the descendant elements of the selected element, all the way down to the last descendant.

var p = $ ("Div1"). Find ("#div3");//Find descendants of Div1 Div3

Brother:
Prev ():

Returns the previous sibling element of the selected element, which returns only one element.

Prevall (selector):

Returns all the previous sibling elements of the selected element.

var p = $ (this). Prev ();//Find the brother of the element, you can prev (). Prev () var p = $ (this). Prevall ("#div6");//prevtall ("selector"), if you know the selector of the brother you need to find

Next ()
Returns the next sibling element of the selected element.
Nextall (selector)
The method returns all the following sibling elements of the selected element.

var p = $ (this). Next ();//Find the brother of the element, you can next (). Next () var p = $ (this). Nextall ("#div6");//nextall ("selector"), if you know the brother selector you need to find

(2) operation
New
$ ("HTML string")
Add to
Append (jquery object): Inserts the content at the end of the selected element.

Prepend (): Inserts the content at the beginning of the selected element.

After (,..): Inserts the content after the selected element.
Before ("..."): Insert content before selected element
Removed from
Empty ()
Empty all elements inside
Remove ()
remove element
Copy
Clone ()

5. Future elements
Object. Live ("Event name", function () {});

Jquer events, selectors, DOM operations