jquery Common Grammar Summary notes

Jquery

1. Entry function

1 $ (document). Ready (function () {});

2 $ (function () {});

The difference between the jquery entry function and the JS entry function:

The entry function for jquery is to execute after all HTML tags have been loaded.

JS's Window.onload event is not executed until all content, including external images, is loaded.

2.jQuery Selector Base Selector

Basic Selector
Symbol	Description	Usage
$ ("#demo")	ID Selector	$ ("#demo"). CSS ("Background", "red")
$ (". Liitem")	Class Selector	$ (". Liitem"). CSS ("Background", "Red");
$ ("div")	Tag Selector	$ ("div"). CSS ("Background", "Red");
$ ("*")	Wildcard Selector	$ ("*"). CSS ("Background", "red")
$ (". Liitem,div")	and set Selector	$ (". Liitem,div"). CSS ("Background", "red")

Hierarchy Selector

Symbol	Description	Usage
Space	Descendant Selector Select all descendant elements	$ ("div span"). CSS ("Background", "Red");
>	Descendant Selector Select all descendant elements	$ ("div > span"). CSS ("Background", "red")
+	Adjacent selector Select the next element adjacent to	$ ("div + P"). CSS ("Background", "red")
~	Brother Selector Select all the sibling elements that follow	$ ("div ~ P"). CSS ("Background", "red")

Filter Selector

Basic Filter Selector
Symbol	Description	Usage
: EQ (Index)	Index is a number that starts at 0 and selects the element with the index number. Select the first matching element.	$ ("Li:eq (1)"). CSS ("Background", "red")
: GT (Index)	Select an element with an ordinal greater than index	$ ("LI:GT (2)"). CSS ("Background", "red")
: LT (Index)	Select an element that is less than index	$ ("Li:lt (2)"). CSS ("Background", "red")
: Odd	Select all elements with an odd number of rows	$ ("li:odd"). CSS ("Background", "red")
: Even	Select all elements with an even number	$ ("Li:even"). CSS ("Background", "red")
: First	Select Match First element	$ ("Li:first"). CSS ("Background", "red")
: Last	Select the last element to match	$ ("Li:last"). CSS ("Background", "red")

Property Selector

Property Selector
Symbol	Description	Usage
$ ("a[href]")	Select all elements that contain the href attribute	$ ("a[href]"). CSS ("Background", "red")
$ ("a[href= ' Itcast ')")	Select all a labels with an href attribute value of Itcast	$ ("a[href= ' Itcast ')". CSS ("Background", "red")
$ ("a[href!= ' Baidu ']")	Selects all elements of the HREF attribute that are not equal to Baidu, including elements without an HREF	$ ("a[href!= ' Baidu ']"). CSS ("Background", "red")
$ ("a[href^= ' web ']")	Select all elements that begin with the web	$ ("a[href^= ' web ']"). CSS ("Background", "red")
$ ("A[href$= ' CN ']")	Select all elements that end in CN	$ ("A[href$= ' CN ']"). CSS ("Background", "red")
$ ("a[href*= ' I ']")	Select all elements that contain the I character, which can be in Chinese and English	$ ("a[href*= ' I ']"). CSS ("Background", "red")
$ ("a[href][title= ' Me ']")	Select all elements that match the specified attribute rule to be selected.	$ ("a[href][title= ' I ']"). CSS ("Background", "red")

Filter selectors

Basic Filter Selector
Symbol	Description	Usage
. EQ (Index)	Index is a number that starts at 0 and selects the element with the index number.	$ ("li"). EQ (1). CSS ("Background", "red")
. First ()	Select Match First element	$ ("Li"). First (). CSS ("Background", "red")
. Last ()	Select the last element to match	$ ("Li"). Last (). CSS ("Background", "red")
. Parent ()	Select Father Element	$ ("Li"). Parent (). CSS ("Background", "red")
. Siblings ()	Choose all the brother elements, not including yourself	$ ("Li"). Sibling (). CSS ("Background", "red")
. Find ()	To find all descendant elements	$ ("Li"). Find (). CSS ("Background", "red")
. Prevall ()	All the brother elements before selecting this element	...
. Nextall ()	Select all the brother elements after this element	...

3.jQuery Animation Show/Hide

1 $ (selector). Show (Speed,callback);

2 $ (selector). Hide (Speed,callback);

3 $ (selector). Toggle (Speed,callback);

Speed: Hide/show the velocity, can take the following values: "Slow", "fast" or ms

Callback: Hide or Show functions executed after completion

Sliding

1 $ (selector). Slidedown (Speed,callback);

2 $ (selector). Slideup (Speed,callback);

3 $ (selector). Slidetoggle (Speed,callback);

Fade in and fade

1 $ (selector). FadeIn (Speed,callback);

2 $ (selector). FadeOut (Speed,callback);

3 $ (selector). Fadetoggle (Speed,callback);

4 $ (selector). FadeTo (Speed,opacity,callback);

Opacity: Required parameter, sets the fade effect to the given opacity

Custom animations

1 $ (selector). Animate ({params},speed,callback);

The required params parameter defines the CSS property that forms the animation.

The optional speed parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds.

The optional callback parameter is the name of the function that is executed after the animation is completed.

Manipulating multiple properties

Stop animation

1 $ (selector). Stop (Stopall,gotoend);

The optional StopAll parameter specifies whether the animation queue should be cleared. The default is False.

The optional gotoend parameter specifies whether to complete the current animation immediately. The default is False.

Stop (true) all animations do not execute

Stop (false,true) animations are executed immediately, and this usage is used more

4.jQuery HTML Operation Dom

Text ()-Sets or gets the text content of the selected element

HTML ()-Sets or gets the contents of the selected element (including HTML tags)

Val ()-Sets or gets the value of a form field

attr ()-Sets or gets the value of the property

There is a parameter is set, no parameter is to get!

Removeattr ()-Removing attributes

Action Style

AddClass () adds a style class name to the specified element

Removeclass () removes the style class name from the specified element

Toggleclass () toggles the style class name for the specified element

Hasclass () to determine if there is a style class name

Manipulating elements

1. Add in-house

$ ("div"). Append (node)//Append element to the end of the div inner element node

Node.appendto ("div")//Append node to the end of the div inner element

$ ("div"). Prepend (node)//Append element to the beginning of the div inner element node

Node.prependto ("div")//Append node to the beginning of the div inner element

2. Add externally

$ ("div"). Before (node)//Add sibling node after Div

$ ("div"). After (node)//Add sibling node in front of Div

3. Delete

Remove ()-Deletes the selected element and its child elements (suicide)

Empty ()-Deletes the child elements of the selected element, excluding the selected element!

Delete the child elements of the selected element with HTML ("") more efficient!

4. Copying

Clone ()-If the parameter true is a deep copy, the previously bound event is also copied

ReplaceWith ()-Replace node

jquery size

1. Width and height

Width ()

Height ()

Innerwidth ()

Innerheight ()

Outerwidth ()

Outerheight ()

The difference between the. Height () method and. CSS ("height"):

The return value is different: the. Height () method returns the number type (a); the. css ("height") returns the string type (20px)

2. Coordinate values

Offset ()//Gets and sets the relative offset of the element in the current window, returns an object, sets the value and automatically becomes relative positioning object {top:50, left:8}

Position ()//only gets the offset of the element relative to the father, returns an object, cannot set the value

Gets the value: offset (). Left offset (). Top position (). Left position (). Top

Set the value: $ ("P"). Offset ({left:txtleft,top:txttop});

Difference:

When using the position () method, the element is actually handled with absolute positioning, which is the equivalent of the nearest offset position of the parent element with absolute or relative positioning. When using the position () method, if all of its parent elements are in the default position (static) mode, they are handled in the same way as offset (), which is the relative offset of the current window.

Using the offset () method, regardless of how the element is positioned or how its parent element is positioned, is the offset of the element relative to the current viewport.

3. Scroll bar

ScrollTop ()//Gets or sets the distance from the top of the page in the vertical direction

ScrollLeft ()//Gets or sets the distance from the left side of the page in the horizontal direction

Scroll ()//Trigger scrolling event: $ (selector). Scroll (function () {...});

5.jQuery event binding mechanism bind mode

Syntax format:. bind (EventType, [EventData], handler)

Parameter description

First parameter: type of event

Second argument: The data object passed to the event response method can be omitted.

How to get data in the event response method: E.data

Third parameter: Event Response method

1 $ ("P"). Bind ("click", Function (e) {

2//Event response method

3});

One way

Syntax format: one (events [, data], handler)

Bind only one Event

Delegate Way

Syntax format: $ (selector). Delegate (selector, EventType, handler)

Syntax Description:

First parameter: selector, sub-selector

Second parameter: type of event

Third parameter: Event Response method

1 $ (". Parentbox"). Delegate ("P", "click", Function () {

2//For. Parentbox all the P tag binding events below

3});

On mode

After the jQuery1.7 version, jquery uses on to unify all the event-handling methods

Syntax format: $ (selector). On (events, [selector],[data], handler)

Parameter description:

First parameter: Events, event name

Second parameter: selector, similar to delegate

Third parameter: arguments passed to the event response method

Fourth parameter: Handler, event handling method

1//Bind a method

2 $ ("#dataTable tbodytr"). On ("click", Function () {

3 Console.log ($ (this). text ());

4});

5

6//Bind events to child elements

7 $ ("#dataTable tbody"). On ("click", "TR", function () {

8 Console.log ($ (this). text ());

9});

10

11//How multiple events are bound

$ ("Div.test"). On ({

Click:function () {

$ (this). Toggleclass ("active");

15},

Mouseenter:function () {

+ $ (this). AddClass ("Inside");

18},

Mouseleave:function () {

$ (this). Removeclass ("Inside");

21}

22});

Unbind Event

• Unbind bind bound event (above jQuery1.7 is replaced by on and off)
  • $ (selector). Unbind (); To unbind all events
  • $ (selector). Unbind ("click"); Unbind the specified event
• Undelegate Unbind Delegate Event
  • $ ("P"). Undelegate (); To unbind all delegate events
  • $ ("P"). Undelegate ("click"); Unbind All Click events

• Off unbind an on-mode bound event
  • $ ("P"). Off ();
  • $ ("P"). Off ("click", "* *"); Unbind all click events, two * indicates all
  • $ ("body"). Off ("click", "P", foo);

1 Case 1:

2 var foo = function () {

3//Code to handle some kind of event

4};

5

6//... Now Foo'll be called whenparagraphs is clicked ...

7 $ ("Body"). On ("click", "P", foo);

8

9//... Foo'll no longer be called.

Ten $ ("body"). Off ("click", "P", foo);

11

12 Case 2: (learn) How to unbind a namespace:

var validate = function () {

//Code to validate form entries

15};

16

+//Delegate events under the ". Validator" namespace

$ ("form"). On ("Click.validator", "button", validate);

19

$ ("form"). On ("Keypress.validator", "input[type= ' text ']", validate);

21st

+/Remove event handlers in the ". Validator" namespace

$ ("form"). Off (". Validator");

Triggering events

Simple Event Trigger: $ (selector). click ();//Trigger Click event

The trigger method triggers the event: $ ("#foo"). Trigger ("click");

Triggerhandler triggers an event response method that does not trigger browser behavior: $ ("input"). Triggerhandler ("Focus");

Introduction to the Event object

Additional parameters for Event.data//Passing additional event response methods

Event.currenttarget//equivalent to this in the event response method, the current DOM object

Event.target//Event trigger source, not necessarily ===this

Event.pagex

Event.pagey

Event.stoppropagation ()//block event bubbling

E.preventdefault (); Block default behavior

Event.type//Event Type: Click,dbclick ...

Event.which//mouse Key type: Left 1 2 Right 3

6. Data cache: ()

Gets the value: $ ("div"). Data ("index");

Set the value: $ ("div"). Data ("index", 3);

The difference between the & data () and the. attr () Method:

1. When the data is obtained, the attr method needs to pass in the parameter, the data method can not pass in the parameter, this time obtains is a JS object, even if does not have any data property.

2. The data type obtained by the attr method is a string, and the data method obtains the corresponding type.

3. After the data method has obtained the information, we use an object to receive it, then we can manipulate (set the value or get the value) this object directly, and the attr method cannot. And this way, it's more efficient than. Data (Key,value)!

4. The Data-attribute property is cached when the page is initialized with a jquery object, and the Attr method does not.

jquery Common Grammar Summary notes