Web Front End Learning summary--jquery

Jquery

What is jquery

jquery is an excellent JavaScript framework, a lightweight JS library.

It encapsulates JS, CSS, and DOM, providing a consistent, concise API.

Compatible with CSS3, and various browsers

Make it easier for users to work with HTML, Events, animate, and provide Ajax interactivity for Web sites

Keep the user's HTML page separate from the code and HTML content

Note: jquery2.x starts to no longer support Internet explorer6,7,8

jquery is a JS framework that greatly simplifies JS programming.

The core idea of jquery is write Less,do more

Released January 2006

Steps to use jquery

1. js file that introduces jquery

2. Use the Select Locator to locate the node you want to manipulate

3. Invoke the JQuery method to operate

jquery Object

The relationship between a jquery object and a DOM object

The jquery object is essentially an array of Dom objects that extend some of the methods that manipulate the elements in the array.

You can manipulate this array directly:

Obj.length: Get array length

Obj.get (Index): Gets one of the DOM objects in the array

Obj[index]: Equivalent to Obj.get (index)

Dom objects can be converted directly to jquery objects

$ (DOM image)

What is a jquery selector

jquery selectors are similar to CSS selectors (positioning elements, applying styles), implementing positioning elements, imposing behavior

Use the jquery selector to separate content from behavior

Types of selectors

The jquery selector contains the following categories:

Basic Selector

Element selector: Locating elements by tag name	$ ("label name")
Class selector: Locating elements based on class attributes	$ (". Class Property name")
ID selector: Locates elements based on id attribute	$ ("#id")
Selector group: Locates all elements corresponding to a group of selectors	$ ("#id,. importent")

Hierarchy Selector

Under the Select1 element, select all descendant elements that satisfy Select2	$ ("Select1 Select2")
Under the Select1 element, select all child elements that satisfy Select2	$ ("Select1 > Select2")
With the Select1 element selected, meet Select2 's next brother	$ ("Select1 + Select2")
Select the Select1 element that satisfies all of Select2 's younger brothers	$ ("Select1 ~ select2")
Example:	$ ("#d1. Importent")

Filter Selector

Basic Filter Selector : Locates elements based on the basic characteristics of elements, often used in tables and lists
: First	First element
: Last	Last element
: Not (selector)	To exclude selector from the outside
: Even	Pick even rows
: Odd	Pick Odd lines
: EQ (Index)	The subscript equals the element of index
: GT (Index)	element with subscript greater than index
: LT (Index)	element with subscript less than index
Example:	$ ("Tr:first")

Content Filter Selector : Position elements based on text content
: Contains (text)	Matches the element containing the given text
: Empty	Matches all empty elements that do not contain child elements or text
Example:	$ ("P:contains (' mooncake ')")

visibility filter selector : Positioning elements based on visibility
: Hidden	Matches all invisible elements, or elements of type hidden
: visible	Matches all visible elements
Example:	$ ("Input:hidden")

property filter Selector : Position element based on property
[attribute]	matches elements with attribute attributes
[Attribute=value] / td>	match attribute equals value element
[attribut E!=vlaue]	Match attribute not equal to element of value
Example:	$ (" input[value= ' Hello '] ")

Status Filter Selector : Locates elements based on status
: Enabled	Match the available elements
:d isabled	Match elements that are not available
: Checked	Match a selected checkbox
: Selected	Match the selected option
Example:	$ ("input:selected")

Form Selector

: Text	Match text Box
:p Assword	Match Password box
: Radio	Match a radio box
: checkbox	Match multiple Marquee
: Submit	Match Submit button
: RESET	Match reset button
: button	Match Normal button
: File	Match File Box
: Hidden	Match Hidden Box
Example:	$ (": Text")

Read/write Nodes

Read and write the HTML content of the node

Obj.html ()/obj.html ("123")

Read and write the text content of the node

Obj.text ()/Obj.text ("123")

Read-Write node Value property values

Obj.val ()/Obj.val ("abc")

Properties of read-write nodes

Obj.attr ("Property name")/obj.attr ("Property name", "Property value")

Adding and deleting nodes

Creating a DOM node

$ ("Node content")

$ ("<span> Hello </span>")

Inserting a DOM node

Parent.append (obj) is added as the last child node

Parent.prepend (obj) is added as the first child node

Brother.after (obj) is added as the next sibling node

Brother.before (obj) added as the previous sibling node

Delete DOM node

Obj.remove () Delete node

Obj.remove (selector) deletes only nodes that meet selector

Obj.empty () emptying the node

Style actions

AddClass ("") Append Style

Removeclass ("") removes the specified style

Removeclass () Toggle All styles

Toggleclass ("") Toggle Style

Hasclass ("") to determine if there is a style

CSS ("") reads the value of CSS

CSS ("", "") sets multiple styles

Traversing nodes

Children ()/Children (selector) direct child node

Next ()/Next (selector) next sibling node

Prev ()/prev (selector) previous sibling node

Siblings ()/siblings (selector) all brothers

Find (selector) finds all descendants that satisfy the selector

Parent () Parental node

Event handling

Implementing event binding with jquery

$obj. Bind (Event type, event handler)

such as: $obj. bind (' click ', FN);

Abbreviated form $obj.click (FN);

Note: $obj. Click () indicates that the click event is triggered.

Get Event Object Events

You only need to pass any one parameter for the event handler function

such as: $obj. Click (function (e) {...})

E is the event object, but has been encapsulated by jquery for the underlying event object

The encapsulated event object can be conveniently compatible with each browser

Common Properties for Event objects

Gets the event source E.target, the return value is a DOM object

Get the coordinates of the mouse click

E.pagex

E.pagey

Event bubbling

What is event bubbling

Events generated by child nodes are thrown up to the parent node at a time

How to cancel event bubbling

E.stoppropagation () can cancel event bubbling

$ (' a '). Click (function(e) {    alert (' Click on a link ');    E.stoppropagation ();});

Synthetic events

Types of synthesis events for jquery

Mouse typing and leaving the time

Hover (mouseenter,mouseleave) analog cursor hover event

Toggle () switch in multiple event responses

Analog operation

Syntax for simulation operations

$obj. Trigger (Event type)

such as: $obj. Trigger ("Focus")

Abbreviated Form $obj.focus ()

jquery animations

Display, hidden animation effects

Show ()/Hide ()

Function: Display or hide by changing the width and height of the element at the same time

Usage: $obj. Show (Execution time, callback function);

Execution time: Slow, normal, fast, or milliseconds

callback function: The function to execute after the animation has finished executing

Animation implementation of slide-up and down

Slidedown ()/Slideup ()

The effect of showing or hiding by changing the height

Usage same as show ()/Hide ()

Fade-in animation effects

FadeIn ()/FadeOut ()

Function: Display or hide by changing the opacity opacity

Usage same as show ()/Hide ()

Custom animation effects

Animate (offset position, execution time, callback function) *

Offset position: {} describes the style of an element after an animation is executed

Execution time: number of milliseconds

callback function: The function to be executed after the animation execution is finished

Web Front End Learning summary--jquery