jquery Learning Notes

I. Introduction of jquery

jquery is a lightweight, multi-browser-compatible JavaScript library. It can be more convenient to handle HTML Document, Events, animate, convenient Ajax interaction, can greatly simplify JavaScript programming.

jquery1.x version compatible with IE678, official production bug maintenance, features are not updated. 3.x version is incompatible with IE678, only the latest browser is supported, the official homepage maintains the version.

The jquery object is the object that is produced after jquery wraps the DOM object, such as the HTML code that can be obtained by $ ("#i1"). HTML () Gets the element with the ID value i1. jquery objects cannot use any of the DOM object's methods.

In general, when declaring a jquery object variable, precede the variable name with $, such as var $variable = jquery object. You can convert a jquery object to a DOM object through $variable[0].

Ii. jquery Basic Syntax 1. Find tags

ID selector:

$ ("#id")

Tag Selector:

$ ("TagName")

Class selector:

$ (". Calssname")

Use with:

$ ("div.c1")  // div tag with C1 style class

All element selectors:

$("*")

Combo selector:

$ ("#id,. Classname,tagname")

Hierarchy selector:

X and y can be any selector

$ ("x y");   // all descendants of X y // all sons of X y // Find all the y immediately following the X //

Basic filters:

: First  //  One:    last// final : eq (index)  //  The index equals the element of index: Even     // matches all elements whose index value is even, counting from 0 : Odd     //  Match all index values to count elements, starting from 0 Count : GT (Index)  // match all elements greater than the given index value : LT (index)   // match all elements less than the given index value : not (element selector)   // Remove all tags that meet the not condition: has (element selector)  // Select all tags that contain one or more tags (found in descendant elements)

Property selector:

[Attribute][attribute=value]   // property equals [Attribute!=value]   // property is not equal to

Example:

<input type= "text" ><input type= "password" ><input type= "checkbox" >$ (//  Select the input label for the checkbox type $ ("input[type!= ' text ']");    // Select Input label with type other than text

Form Common filters:

: Text:password:file:redio:checkbox:submit:reset:button

Example:

$ (": checkbox")   // Find all checkboxes

Form Object Properties:

: enabled:disabled:checked:selected

Example:

<form>    <input name= "email" disabled= "disabled" >    <input name= "id" ></form>$ ( "input:enabled")  // Find the available input tags

<select id= "S1" >    <option value= "Beijing" > Beijing </option>    <option value= "Shanghai" > Shanghai </option>    <option selected value= "Guangzhou" > Guangzhou </option>    <option value= " Shenzhen "> Shenzhen </option></select>$ (": Selected ")  // Find all selected option

2. Filters

Next element:

$ ("#id"). Next () $("#id"). Nextall () $ ("#id"). Nextuntil ("#i2")

Previous element:

$ ("#id"). Prev () $("#id").Prevall () $ ("#id"). Prevuntil ("#i2")

Father elements:

$ ("#id"). Parent () $ ("#id"). Parents ()   // Find all parental elements of the current element // Find all parent elements of the current element , knowing that the matching element was encountered. 

Son and brother elements:

$ ("#id"). Children ();   // sons of $ ("#id"). siblings ();   // hey , guys!

Find elements:

$ ("#id"). Find ()  // Search all elements that match the specified expression. 

Add:

. First ()  // gets a match for the element . Last ()   // Gets the final matching element . Not ()   // removes the element that matches the specified expression from the collection of matching elements . has ()   // preserves elements that contain specific descendants, removing those elements that do not contain the specified descendants. 

3. Operation label

Style class:

AddClass ();   // adds the specified CSS class name removeclass ();   // removes the specified CSS class name hasclass ();   // determine if the style exists toggleclass ();  // Toggle CSS Class name, if any, to delete, if not add

Example: Modal boxes for switching lights

// CSS // dom operation: tag.style.color= "Red" // JQuery$ ("P"). CSS ("Color", "red")

Position:

Offset ()   // Gets the relative offset of the matching element in the current window or sets the element position position ()  // Gets the offset of the matching element relative to the parent element ScrollTop ()  // Gets the offset of the match element relative to the top of the scrollbar scrollleft ()  // Gets the offset to the left of the matching element relative to the scrollbar 

The. Offset () method allows retrieving the current position of an element relative to the document. The difference between. Position () is that. Position () is a displacement relative to the parent element.

Size:

Height () width () innerheight () innerwidth () outterheight () Outerwidth ()

Text manipulation

HTML code:

HTML ()   // get the HTML content of the first matching element html (val)  // set HTML content for all matching elements

Text value:

Text ()   // Get the contents of all matching elements text (val)   // set contents of all matching elements

Value:

Val ()   // Gets the current value of the first matching element Val (val)  // Sets the value of all matching elements in val ([Val1,val2 ])   // Set the value of the checkbox, select

Example:

Gets the value of the selected checkbox or radio

 for for = "C2" > Male </label><input name= "gender" id= "C2" type= "Radio" value= "1" >

Use in jquery

$ ("Input[name= ' Gender ']:checked"). Val ()

Property manipulation

For ID, etc. or custom attributes:

attr (attrname)  // Returns the property value of the first matching element attr (attrname,attrvalue)  // set a property value for all matching elements attr ({k1:v1,k2:v2})  // set multiple attribute values for left and right matching elements removeattr ()   //  Remove an attribute from each matching element

For checkboxes and Readio

Prop ()   // Get Properties removeprop ()   // Remove Properties

jquery Learning Notes