Use jquery to quickly and efficiently create web interaction effects

Chapter II JavaScript objects

The browser object model (BOM) is one of the components of JavaScript, and the Window object is the core of the entire BOM

Common Methods for Window objects

Prompt (): Displays a dialog box to prompt the user for input

Alert (): Displays a warning dialog box with a hint and a "OK" button

Confirm (): Show a drop. dialog box with message, OK and Cancel buttons

Close (): Close the browser window

Open (): Opens a new browser window that loads the document developed by the given URL

SetTimeout (): Call a function or evaluate an expression after the number of milliseconds established

SetInterval (): Invokes a function or expression according to the established period (in milliseconds)

Common Events for Window objects

OnLoad: A page or an image is finished loading

onmouseover: Move the mouse pointer over an element

Onclic: Mouse click an object

OnKeyDown: One of the keyboard keys is pressed

OnChange: The contents of the domain are changed

Common Properties for Window objects

History: Information about URLs that customers have visited

Location: Information about the current URL

Methods of the History object

Back (): Load the previous URL in the History object list

Forward (): Load the next URL in the Histrory object list

Go (): Loads a specific URL in the History object list

Properties and methods of the Location object

Host: Sets or returns the hostname and port number of the current URL

Hostname: Sets or returns the host name of the current URL

HREF: Set or return the full URL

Reload (): Override load Current temperature

Replace (): Replace the current document with a new document

Method of Document Object

getElementById (): Returns a reference to the first object that owns the specified ID

Getelementsbyname (): Returns the collection of objects with the specified name

getElementsByTagName (): Returns the collection of objects with the specified label name

Write (): Like document write text, HTML expression or JavaScript code

Elimination of timed functions

Cleartimeout (SetTimeout () returns the ID value)

Clearinterval (SetInterval () returns the ID value)

Method of the Date object

GetDate (): Returns the Date object for each day of the one month with a value of 1~31

GetDay (): Returns the day of the week of the date object with a value of 0~6

GetHours (): Returns the number of hours of the date object with a value of 0~23

Getminutes (): Returns the number of minutes of a Date object with a value of 0~59

Getseconds (): Returns the number of seconds of the date object with a value of 0~59

GetMonth: Returns the month of the date object with a value of 0~11

getFullYear (): Returns the year of a Date object with a value of 4 digits

GetTime (): Returns the number of milliseconds since the moment (January 1, 1970)

Methods of the Math object

Ceil (): Rounding on a logarithmic

Floor (): Rounding down logarithm

Round (): Shu rounded for the nearest number

Random (): Returns the number of 0-1

Chapter Three first knowledge of jquery

jquery is an excellent JavaScript library that can be used to greatly improve the efficiency of web client development.

To use the functionality of jquery, you need to refer to the jquery library file first. You can use the AddClass () method and the CSS () method to add styles to DOM elements.

$ (document). Ready () is similar to window.onload use, but differs in the click () method in jquery corresponding to the OnClick event in JavaScript

Common elements in jquery code include factory functions, selectors, and methods. Features of the jquery program code: contains the $ symbol and the concatenating operation.

Each page has a corresponding DOM model, and the DOM model includes element nodes, text nodes, and attribute nodes.

Dom object converted to jquery object var $tex =$ (DOM object)

The jquery object is converted to a DOM object var tex= $tex. Get (0) or var tex= $tex [0];

Use the next () method to get the sibling elements that are immediately adjacent to each element in the collection of matched elements.

Fourth Chapter jquery Selector

Basic Selector

Tag Selector: Returns the collection of elements based on the given tag name matching element, $ ("H2") selects all H2 elements

ID selector: Returns a single element, $ ("#title"), selects an element with the ID of title, based on the given ID match element

Class Selector: Returns the collection of elements based on the given class match element, and $ (". A") selects all elements of Class A

Union selector: Merges elements that match each selector together, returns a collection of elements, $ ("div,.a") selects all Div, the element of Class A

Intersection selector: matches an element or collection of elements that make a class or ID (if the element that specifies an ID on the same page returns a value, it must be a single element; If you make an element of class, it can be a single element or a collection of elements), returning a single element or collection of elements, $ ("h2.a") Select all H2 elements that have a class title

Global selector: Matches all elements, collection elements, $ ("*") selects all elements

Hierarchy Selector

Descendant selector: Returns the collection of elements, $ ("#a span") Select all <span> elements under #a

Child selector: Returns the collection of elements, $ ("#a >span"), and selects the #a element <span>

Adjacent element selector: Returns the Element collection, $ ("H2+DL") selects the sibling element immediately following the

Sibling element selector: element collection, $ ("H2~DL") pick

Property Selector

Selects the element containing the given property, returns the element collection, $ ("[href]") selects the element containing the href attribute

Select an element that is equal to a given attribute is a specific value, a collection of elements, $ ("[href=" # "]"), and select an element with an HREF attribute value of "#"

Select an element that is not equal to a given property that is a specific value, returns a collection of elements, $ ("[href! =" # "]"), and select an element with an HREF attribute value other than "#"

Select the element that the given property starts with some specific value, the element collection, $ ("[href ^=" en "]"), and select the element with the HREF attribute value starting with en

Select an element with a given property that ends with some particular value, a collection of elements, $ ("[href $=" en "]"), and select an element with an HREF attribute value ending in en

Select the element that contains some value for the given property, the element collection, $ ("[href *=" en "]"), select the element containing txt in the href attribute value

Select the element that satisfies multiple criteria for a composite attribute, the element collection, $ ("li[id][title= ' News Essentials]") Select the <li> element that contains the id attribute and the title attribute as "News key"

Basic Filter Selector

: First, select the one element, single element, $ ("Li:first") Select all <li> first <li> element

: Last, select the final element, single element, $ ("Li:last") Select all <li> last <li> element

: Not (Selectot), choose to remove all elements that match the given selector, the collection element, $ ("Li:not (. A)") Select the element of class not a

: Even, select all elements with an even number (index starting from 0), collection element, $ ("Li:even") Select all <li> elements with an even number of indexes

: Odd, the selection index is odd for all elements (index starting from 0), the collection element, $ ("li:odd") the selection index is odd for all <li> elements

: EQ (index), select the element with index equal to index (index starting from 0), single element, $ ("Li:eq (1)") pick index equals 1<li> element

: GT (Index), select the element with index greater than index (index starting from 0), collection element, $ ("LI:GT (1)") select index greater than 1<li> element, excluding 1

: LT (index), select the element with index less than index (index starting from 0), collection element, $ ("Li:lt (1)") pick index less than 1<li> element, excluding 1

: header, select All header elements, collection element, $ (": Header") Select all the heading elements in the page

: Focus, select the element that currently gets focus, collection element, $ (": Focus") pick the element that currently gets focus

Visibility Filter Selector

: Visible, select all visible elements, set element, $ (": Visible") Select all visible elements

: Hidden, select all hidden elements, set element, $ (": Hidden") Select all hidden elements

Escape character

<div id= "id#a" >aa</div>

<div id= "Id[2" >cc</div>

Error: $ ("id#a") $ ("#id [2]")

Correct: $ ("#id \ #a") $ ("#id \\[2\\") One more space or less one space, may result in different results.

Chapter fifth events and animations in jquery

Typical events in jquery

Click an event: Click (FN), which occurs when the mouse is clicked, and FN represents the bound function

Press the keyboard trigger event: KeyDown (FN), occurs when the keyboard is pressed, FN represents the bound function

Loss of focus event: Blur (FN), occurs when the focus is lost, FN represents a bound function

Common mouse Events

Click (): triggers or binds the function to the clicked event of the specified element, when the mouse clicks

MouseOver (): MouseOver event that triggers or binds a function to a specified element, and the mouse pointer moves out of date

Mouseout (): Triggers or binds a function to the mouseoutshij of the specified element, when the mouse pointer moves out

Common keyboard Events

KeyDown (): Triggers or binds a function to the KeyDown event of the specified element, when the key is pressed

KeyUp (): Triggers or binds a function to the KeyUp event of the specified element, when the key is released

KeyPress (): Triggers or binds a function to the KeyPress event of the specified element, producing printable characters

Common form Events

Focus (): A focus event that triggers or binds two functions to a specified element

Blur (); Blur event that triggers or binds a function to a specified element, loses focus

Binding events

Bind (TYPE,[DATA],FN):d ATA is not required

Type: event types, mainly including base events such as Blur,focus,click,moseout, and custom events

[data]: Optional parameter, an additional data object passed to the event object as the value of the Event.data property

fn: handler function, the handler used to bind uses the bind () method not only to bind one event at a time, but also to bind multiple events at the same time.

removing events

Unbind ([TYPE],[FN])

[Type]: event type, which mainly includes basic events such as Blur,focus,click,moseout, and can also customize events

fn: handler function that is used to unbind the handler

Hover () method

Hover (Enter,leave); The hover () method simulates the mouse pointer hover event. When the mouse pointer moves over an element, the specified 1th function (enter) is triggered, and the specified 2nd function is triggered when the mouse pointer moves out of the element (leave)

Toggle () method

Toggle (fn1,fn2,...., FnN); the toggle () method is used to simulate the mouse continuous click event. The first time the element is clicked, the first specified function (FN1) is triggered, and when the same element is clicked, the specified second function (FN2) is triggered and, if there are more functions, is triggered sequentially until the last one. Each subsequent click repeats the successive calls to these functions.

Controlling the display and hiding of elements

Hide to show: $ (selector). Show ([Speed],[callback]);

Show to Hidden: $ (selector). Hide ([speed],[callback]);

Speed: The default value is "0", the rate of change, Ms 1000,slow,normal,fast callback: Optional.

The function to execute after the show function finishes executing

Change the transparency of an element

Fade in: $ (selector). FadeIn ([Speed],[callback]) element from hidden to fully visible process.

Fade out: $ (selector). FadeOut ([Speed],[callback]) elements from visible to hidden processes.

Speed: The default value is "0", the rate of change, Ms 1000,slow,normal,fast callback: Optional.

The function to execute after the show function finishes executing

Change the height of the element

Slideup ("slow"): If the display attribute value of the element is block, the element will be shortened from bottom to top until hidden.

Slidedown ("slow"): If the Display property value of the element is none, the element extends from top to bottom.

Slow,normal,fast (the world of three corresponds to 0.6 seconds, 0.4 seconds, 0.2 seconds)

Sixth. Using jquery to manipulate the DOM

Style actions

CSS (name,value);//Setting a single value

CSS ({name:value,name:value,name:value})//Set multiple properties at the same time

Name: Required, which specifies the names of CSS properties, which can be any CSS property.

Value: Required, specifies the value of the CSS property.

Name:value: Required, specifies the name: value object of the property to which the style is to be set.

Append styles and remove styles

Append: AddClass (Class) or addclass (Class1 class2. CLASSN)

Removal: Removeclass (Class) or Removeclass (Class1 class2...classn);

Toggle Style: Toggleclass (Class);

Content operations

HTML ([content]) text ([content])

HTML (): Used to get the HTML content or text content of the first matching element

HTML (content): Used to set the HTML content or text content of all matching elements

Text (): Used to get the textual content of all matching elements

Text: Used to set the textual content of all matching elements

Operation of the property value: Val ([value])

Value: Optional. Specifies the new content of the selected element.

$ (Slector) or $ (element) or $ (HTML) selector: Selector.

Match elements with the jquery selector

The Element:dom element. Create a jquery object with DOM elements

html:html code. Create a jquery object using HTML characters

Internal insertion

Append (content): To insert content inside the selected element, that is, $ (A). Append (b) indicates that B is appended to A. The order in which the elements are inserted is the last one.

AppendTo (content): $ (A). AppendTo (B). A is appended to B. And the last one.

Prepend (content): The contents of the predecessor to each selected element. $ (A). Prepend (b) indicates that B is appended to A. The order in which the elements are inserted is the first one.

Prepend (to content): that is, $ (A). Prepend (to (B). A is appended to B. is also the first one.

External insert

After (content): you want to insert content inside the selected element, that is, $ (A). Append (b) indicates that B is appended to A. The order in which the elements are inserted is the last one.

Insetafter (content): $ (A). AppendTo (B). A is appended to B. And the last one.

Before (content): The contents of the predecessor to each selected element. $ (A). Prepend (b) indicates that B is appended to a. The order in which the elements are inserted is the first one.

InsertBefore (to content): that is, $ (A). Prepend (to (B). A is appended to B. is also the first one.

$ (selector). Remove ([expr]): Deletes the entire node without preserving the event.

$ (selector). empty (); Delete the contents of the node.

$ (selector). REMOVEATTR (name): Delete attribute

Replace node:

var $A =$ (<li> Bleach </li> ")

$ ("ul Li:eq (1)"). ReplaceWith ($A); or $ ($A). ReplaceAll ("ul li:eq (1)")

Copy node: $ ("ul Li:eq (1)"). Clone (True). AppendTo ("ul"); True: Indicates whether the event is replicated

Get and set element properties

$ (selector). attr ([name]); Get property value attr ([name])

Gets and sets a single property value, such as $ ($a). attr ("alt");

attr ({[Name1:value1],[name2:value2] ... [Namen:valuen]}): Set multiple property values, such as $ ("img"). attr ({width: "", "Height:" 100 "})

$ (selector). Children ([expr])

var $body =$ ("Body"). Children ();

Use the Children () method to get the number of child elements of a <body> element

Alert ($body. Length) Each loop:

$body. Each (function (index,dom) {index: subscript, Dom Pro

Time variable, is DOM object})

Traverse sibling elements

Next ([expr]): Used to get the element immediately after the matching element. The next of the sibling elements.

Prev ([expr]): Used to get the element immediately preceding the matching element. The previous one of the sibling elements.

Siblings ([expr]): Used to get all the sibling elements that precede and follow the matching element.

Traverse the predecessor Element

The parent ([selector]) parameter is optional. Gets the parent set element of each element in the current matching element collection

The parents ([selector]) parameter is optional. Gets the ancestor elements of each element in the matching element collection. You can specify any one element in the ancestor.

Css-dom operation

CSS (): Sets or returns the style properties of a matching element

Height ([value]): Parameter optional. Sets or returns the height of the matching element. If no length units are specified, the default PX is used as the unit. $ ("#box"). Heigh (180);

width ([value]): Parameter optional. Sets or returns the width of the matching element. If no length units are specified, the default PX is used as the unit. $ ("#box"). Width (180);

Offset ([value]): Returns the top and left coordinates in pixels. This method is valid for visible elements. $ ("#box"). Offset ();

OffsetParent (): Returns the most recently positioned ancestor element. The anchor element refers to the element's CSS position value set to Relative,absolute or fixed element $ ("#box"). OffsetParent ();

The scrollleft ([position]) parameter is optional. Sets or returns the offset $ ("#box") to the left of the matching element relative to the scrollbar. ScrollLeft () scrolltop ([position]) parameters are optional. Sets or returns the offset $ ("#box") for the top of the scrollbar relative to the matching element. ScrollTop20)

Seventh. Form Verification

The way to submit in JavaScript is to add attributes to the <form> tag: onsubmit= "return Chck ()"

$ ("form label") in jquery. Submit (function () {

return Chck (); })

Forms validation common methods and events

Onblur: Loses focus, triggers when the cursor leaves a text box

Onfocus: Gets focus, triggers when the cursor enters a text box

Blur (): Remove focus from the text field

Focus (): Set the focus from the text field, i.e. get the mouse cursor

Select (), select the contents of the Text field, highlight the contents of the input area, and select all the contents of the field.

　　　　　　　　　　

Defining Regular Expressions

Normal mode P:var reg=/expression/Additional parameters

Constructor: Var re=new RegExp ("expression", "Additional parameters")

An instance of a regular Expression object. Test (String)

Simple mode (Specific): Var reg1=/cat/

Compound mode (abstract): Var reg=/^\w+$/;

var str= "My Cat";

var result=reg.test (str);//true

RegExp Object

EXEC (): Retrieves the match of a regular expression in a character, returns the found value, and determines the location

Test (): Retrieves the value specified in the string, returning True or False RegExp object properties (additional parameters)

Whether the global RegExp object has a flag g (which represents a global match)

IgnoreCase RegExp object has flag I (for case-insensitive matching)

Multiline RegExp object has a flag m (for multi-line matching)

Method of the String object

Match (): Find the match (matching value) of one or more regular expressions

Search (): Retrieves the value (index) that matches the regular expression

Replace (): Replaces a string that matches a regular expression

Split (): Splits a string into an array of strings

Example: Var str= "My Cat"

var reg=/cat/

var result=str.match (REG);

var strto=str.repleace (/cat/g, "dog")//global substitution, returns the replaced string

Repeating characters for regular expressions

{n} matches the previous n times \d{3}:\d\d\d

{N,} matches the previous item n times, or multiple times

{N,m} matches the previous item at least n times, but cannot exceed m times

* matches the previous item 0 or more times, equivalent to {0,}

+ matches the previous item 1 or more times, equivalent to {1,}

? Matches the previous item 0 or 1 times, which means the previous item is optional, equivalent to {0,1}

Common symbols for regular expressions

/..../represents the beginning and end of a pattern

^ matches the end of string start $ match string

\s any whitespace characters (line breaks, spaces)

\s any non-whitespace characters (not including spaces)

\d matches a numeric character, equivalent to [0-9]

\d any character other than a number, equivalent to [^0-9] except 0-9

\w matches a number, underscore, or alphabetic character, equivalent to [a-za-z0-9]

\w any non-list character equivalent to [^a-za-z0-9_]

. Any character other than a line break

Form Selector

: Input matches all input,textarea,select and Buttjon elements $ ("#myform: Input") to select all Input,select and button elements in the form

: Text matches all single-line text boxes $ ("#myform: Text") Select all elements of type= "text"

:p assword matches all the Password box $ ("#myform:p assword") Select the element type= "password"

: Radio matches all single button $ ("#myform: Radio") Select the element type= "Radio"

: CheckBox matches all check boxes $ ("#myform: CheckBox") Select the element that type= "checkbox"

: Submit matches all check boxes $ ("#myform: Submit") Select Type= "Submit" element

: Image matches all image fields $ ("#myform: Image") Select the element type= "image"

: Reset matches all reset buttons $ ("#myform: Reset") Select type= "Reset" element

: Button matches all buttons $ ("#myform: Button") Select the element that type= "button"

: File matches all file domains $ ("#myform: File") Select the element type= "file"

: Hidden matches all invisible elements, or type is hidden element $ ("#myform: Hidden") SELECT element type= "hidden"

Form Selector Form Property filter

: Enabled matches all available elements $ ("#userform: Enabled") matches all elements except the numbered input box inside the form

:d isabled matches all unavailable elements such as text boxes that are forbidden to enter

: Checked matches all selected elements (check box, single button, option in Select)

: Selected matches all selected option elements

Use jquery to quickly and efficiently create web interaction effects