jquery Learning Note 1

1. Introduction to jquery 1.1. Advantages

• Resolves browser compatibility issues.
• Extension is supported by plug-in mode to avoid feature creep.
• Use implicit iterative techniques to make the operation of a method oriented to a collection. such as ". Hide ()"
• Use the method link programming method to set the multiple operations to a single line.
• Powerful selector.
• A reliable event handling mechanism.
• Perfect for Ajax.
• Separation of the behavior layer from the structural layer.
• There are many users, the documentation is quite perfect.
• Open source.

1.2. Disadvantages

• cannot be backwards compatible, this is determined by the release feature of jquery

2. Selector 2.1. Dom

The Document Object model, or DOM, is the standard programming interface recommended by the Organization for the processing of extensible superscript languages.

Reference URL:

http://zh.wikipedia.org/wiki/Document Object Model

http://www.w3.org/DOM/

2.2. Factory function $ ()

• #id that matches an element according to the given ID.

For example, look for an element with an ID of "mydiv".

$ ("#myId");

• element that matches all elements according to the given element name.

For example, find the div element.

$ ("div");

• . class, matching elements according to the given class.

For example: Find all the elements of the class that are "MyClass".

$ (". MyClass");

The HTML code is as follows:

<div id= "Notme" class= "Notme" >div class= "Notme" </div>

<div id= "MyId" class= "MyClass" >div class= "MyClass" </div>

2.3. CSS Selectors

• AddClass (Class) to add the specified class name for each matching element.

For example: Add the ' selected ' class to the matched element

$ ("P"). AddClass ("selected");

• Removeclass ([class]) to remove all or the specified class from all matching elements.

Example: Remove the ' selected ' class from the matching element

$ ("P"). Removeclass ("selected");

The HTML code is as follows:

<p class= "First" >Hello</p>

2.4. Attribute selectors

• [attribute] that matches the element that contains the given property.

For example: Find all input elements that contain the name attribute

$ ("input[name]");

• [Attribute=value], the element that matches a given property is a specific value.

For example: Find all the name attribute is newsletter INPUT element

$ ("input[name= ' newsletter ')";

• [Attribute^=value], matching a given property is an element that starts with some value.

For example: Find all the name attribute is newsletter INPUT element

$ ("Input[name= ' News ']");

• [Attribute!=value], matching all attributes that do not contain the specified property.

Example: Find all the name attribute is not a newsletter INPUT element

$ ("input[name!= ' newsletter ')";

• [Attribute$=value], matching a given property is an element that ends with some value.

For example: Find all the name attributes are letter-terminated input elements

$ ("input[name$= ' letter ']");

• [Attribute*=value] that matches the given attribute to an element that contains some value.

For example: Find all the name attribute is the INPUT element that contains news

$ ("input[name*= ' News ']");

The HTML code is as follows:

<input type= "checkbox" name= "Newsletter" value= "Hot Fuzz"/>

<input type= "checkbox" Name= "Newsboy" value= "Cold Fusion"/>

<input type= "checkbox" Name= "Accept" value= "Evil plans"/>

2.5. Custom selector 2.5.1. : Odd and: Even

• : Even, matches all elements with an even number of index values, counting from 0.

Example: Find rows 2, 4, and 6 of a table
$ ("tr:odd");

• : Odd, matches all elements with an odd index value, counting from 0.

Example: Find rows 1, 3, and 5 of a table

$ ("Tr:even");

The HTML code is as follows:

<table>

<tr><td>header 1</td></tr>

<tr><td>value 1</td></tr>

<tr><td>value 2</td></tr>

</table>

2.5.2. Form-based selectors

Mainly include: Input,:text,:p Assword,:radio,:checkbox,:submit,:image,:reset,:button,:file,:hidden and other elements and: enabled,:d isabled,: element attributes such as checked,:selected.

For example, to find all input elements

$ (": input");

2.6. Dom Traversal method 2.6.1. Filter

• Filter (expr) that filters out the collection of elements that match the specified expression.

For example, preserve elements with the Select class

$ ("P"). Filter (". selected");

2.6.2. Finding

• Next ([expr]), gets a collection of elements that contain a matching set of elements that are immediately behind each element in the next sibling element.

The corresponding nextall ([expr]), prev ([expr]), Prevall ([expr]), parent ([expr]), children ([expr])

For example: Find the sibling element that is immediately behind each paragraph.

$ ("P"). Next ();

2.6.3. Concatenation

• Andself (), adding the previously selected join in the current element.

For example: Select all div and internal p, plus the Border class.

$ ("div"). Find ("P"). Andself (). addclass ("border");

• End (), back to the most recent "destructive" operation.

For example: Select all P elements, find and select the span child element, and then return to the P element.

$ ("P"). FIND ("span"). end ();

2.7. Accessing DOM elements

• Get (index) to get one of the matching elements.

where $ (this). Get (0) is equivalent to $ (this) [0].

For example: Gets the element on the 1th position of all IMG elements.

$ ("img"). Get (0);

3. Event 3.1. Perform a task after a page is loaded

The difference between the window.onload and the

• Window.onload refers to the trigger after all elements have been downloaded, $ (document). Ready () means that all elements can be accessed and then triggered.
• Window.onload can only hold a reference to a function at a time.
• can be simplified to $ ()

3.2. Simple events

You can use the Bind method to specify any JavaScript event and add a behavior to the event. The following example code:

$ (function () {

$ (' #btnAdd '). Bind (' click ', function () {

Alert (' click Add ');

});

})

The above code can also be simply written as follows:

$ (function () {

$ (' #btnAdd '). Click (function () {

Alert (' click Add ');

});

})

3.3. Composite events

• Hover (over, out), a method that mimics the hover event (moving the mouse over an object and moving out of the object).

Example: A table with a mouse hover plus a specific class

$ ("TD"). Hover (

function () {

$ (this). addclass ("hover");

},

function () {

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

}

);

• Toggle (FN, fn2, [Fn3, Fn4, ...]), call the function in turn after each click.

Example: Switching a table to a class

$ ("TD"). Toggle (

function () {

$ (this). AddClass ("selected");

},

function () {

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

}

);

3.4. The journey of the event

Event capture, the event is first handed to the outermost layer and then to the specific element.

Event bubbling, the event is first sent to the most specific element and then bubbled up to more general elements.

3.5. Change the event through the event object Journey 3.6. Removing event handlers

• Unbind ([type], [data]) The reverse operation of BIND () removes the bound event from each matching element.

If there are no parameters, all bound events are deleted.

You can unbind a custom event that you have registered with bind ().

If the event type is supplied as a parameter, only the binding event of that type is deleted.

If you pass a handler function that is passed at bind time as the second argument, only that particular event handler will be deleted.

Example: Unbind the Click event of a paragraph

$ ("P"). Unbind ("click")

3.7. Imitating user actions

• KeyDown (FN), which binds a handler function in each of the KeyDown events of the matching element.
• KeyPress (FN), which binds a handler function in each of the KeyPress events of the matching element.
• KeyUp (FN), which binds a handler function in each of the KeyUp events of the matching element.

For example, to respond to keyboard keys within a page, you can use the following code:

$ (window). KeyDown (function (event) {

Switch (event.keycode) {

// ...

Different buttons can do different things.

Different browsers have different keycode

More details: http://unixpapa.com/js/key.html

// ...

}

});

4. Effect 4.1. Modifying an inline CSS

• CSS (name, value), in all matching elements, sets the value of a style property.

Example: Set all paragraph fonts to red

$ ("P"). CSS ("Color", "red");

4.2. Basic hiding and display

• Show () and hide () match elements are displayed and hidden.

Example: Show all paragraphs

$ ("P"). Show ()

4.3. Effects and speed

• Show (speed, [callback]) and hide (speed, [callback]) show and hide all matching elements in an elegant animation

For example: Use slow animations to show hidden paragraphs for 600 milliseconds.

$ ("P"). Show ("Slow")

• FadeIn (speed, [callback]) and fadeout (speed, [callback]) achieve fade-in and fade-out effects for all matched elements through changes in opacity

For example: fade a paragraph slowly in 600 milliseconds

$ ("P"). FadeIn ("slow");

4.4. Create a custom animation

• Animate (params, [duration], [easing], [callback]), a function for creating custom animations.

For example, to move the specified element around

$ ("#right"). Click (function () {

$ (". Block"). Animate ({left: ' +50px '}, "slow");

});

$ ("#left"). Click (function () {

$ (". Block"). Animate ({left: ' -50px '}, "slow");

});

5. Dom Operation 5.1. Action Properties

• attr (key, value), sets a property value for all matching elements.
• Removeattr (name), removes an attribute from each of the matched elements.
• InsertBefore (content) inserts all matching elements in front of another, specified set of element elements.
• InsertAfter (content) inserts all matching elements behind another, specified set of element elements.
• Wrap (HTML) wraps all matching elements together with the structured markup of other elements.

5.2. Insert the new element 5.3. Packaging elements

For example, wrap all the paragraphs in a newly created Div.
$ ("P"). Wrap ("<div class= ' wrap ' ></div>");

5.4. Copying elements

• Clone () clones the matching DOM elements and selects copies of those clones.

For example: Clone all B Elements (and select copies of those clones), and then forward them to all paragraphs.

$ ("B"). Clone (). Prependto ("P");

JQuery Learning Note 1