To learn jquery!.

jquery Learning Journey! (to be continued)

------------(i) jquery writing steps

------------(ii) jquery events and functions

------------(c) jquery Modify CSS Properties

------------(d) jquery Modify HTML properties

------------(v) jquery Core: Selector

------------(vi) AJAX use of jquery

　　Foreword:jquery is a fast, concise JavaScript framework that is an excellent JavaScript code base ( or JavaScript framework ). The purpose of jquery design is "write Less,do more", which advocates writing less code and doing more things. It encapsulates the functionality code common to JavaScript, providing a simple JavaScript design pattern that optimizes HTML document manipulation, event handling, animation design, and Ajax interaction. jquery can be compatible with a variety of mainstream browsers: IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+, FirefoX 2. 0+, Chrome 8+ and more. In short: jquery is rich in content, easy to learn and learn jquery, will make your web development to a duck! Go straight to the following:

(i) jquery writing steps

1, Introduction of jquery file

　　　　After downloading the jquery file on your website, introduce the jquery file in script:

<script src= "Jquery.js" ></script>

Note: The path after SRC is a relative path and varies depending on the location of the jquery store
2, create a new script tag to write jquery

　　　　<script src= "Jquery.js" ></script>

<script> jquery Code Writing area </script>
3, separating with jquery code
4. Write code in accordance with jquery principles

　　　　①$ (document). Ready (FN)//$ (document) is a DOM object that is converted to a jquery object

②$ (function () {})//Is the encapsulation of the previous method (common method)

③$ (). Ready (FN)//This method has no part of the DOM object inside

1) Here note the difference with JS:
① in JS, WINDOW.ONLOAD=FN is executed after the DOM and the resource are loaded on the page.
And jquery executes after the page DOM is loaded

② in the same request, the jquery Load event can be set multiple, and the traditional JS loading method can only set one, if more, the latter covers the former
Cause: The traditional load mode is to assign values to the OnLoad event property, and the jquery load method is to iterate through the elements in the array

　　　　　　2) Conversion of JS objects to jquery objects:

           ① the jquery object into a DOM object:
                $ (' div '). Style.backgroundcolor = "Red";        //failed
                 $ (' div ') [0].style.backgroundcolor = "Red";    //Success $ (' div ') [subscript] form of  
          

② the DOM object into a jquery object:
var dom object = document.getElementsByTagName (' div ') [0];
Dom object. CSS (); Failed
$ (DOM object). CSS (); The form of the success $ (DOM object)

(ii) jquery events and functions

1, event: When to do something

1) Examples of events:

①click: Click event; DblClick: Double-click event

②mouseover: Mouse Move Up Event

③mouseout: Mouse Leave Event

④focus: Get focus event; Blur: Lost Focus Event

⑤mousedown/up/move Mouse Press, lift, move

⑥change: A Change event occurred

⑦hover: Usage: $ ("div"). Hover (function () {},function () {});
This event corresponds to mouse-over and mouse-off of two events

2) binding and unbinding of events:

Event Bindings:
① Single Event Binding: $ ("div"). Bind ("event", function () {});

② multiple objects to bind multiple events: $ ("div"). Bind ({"Event": function () {}, "event": function () {}});

③ an object to bind multiple events: $ (' div '). Bind (' Event 1 Event 2 Event 3 ', function () {...});

　　　　Note the difference between the event and the function symbol:

① Single Event binding with ","

② multiple objects to bind multiple events: between the object and the function is ":"; The "," is used between multiple objects

③ an object to bind multiple events: The event is separated by a space; Between events and functions separated by ","

　　Unbind:

　　　Unbind ("action")//action is the event argument, and if you do not write the argument, unbind it all

　　　Unbind Example : $ ("div"). Unbind ("action");

2, Function: A feature that is encapsulated well

Examples of functions:

1) Hide () hidden　　　　
Show () shows
Toggle () Toggle
Note: all three can pass numeric parameters to control the oblique sliding animation time (1000ms = 1s)
2) slideup () Slide the animation vertically up
slidedown () slide animation vertically down
slidetoggle () Toggle Animation
3) fadeIn () fade　　　　 in
FadeOut () Fade out
fadeTo () can achieve translucent

　　　　　　　　Example: FadeTo (500,0.5) //The second parameter is the setting of the Transparency (0~1)
fadetoggle () Toggle
Note: When using jquery, animations and events are queued (that is, if a lot of animations are performed at one time, the subsequent animations do not replace the previous, but are queued for execution)

At this point we can use the queue-jumping method to solve:
Example: $ (this). Children (). Stop (). Slideup (); Add a. Stop () to resolve
4)setinterval ():// can call a function or evaluate an expression according to the specified period (in milliseconds)
Example:$ (function () {
SetInterval ("F1 ()", 2000);
})

(iii) jquery modifying CSS Properties

1,jquery can get the inline, internal, and external styles
2,JS dom mode only gets inline style
3, contains a variety of property styles need to split into specific styles to get

1) CSS Property acquisition and modification:

①css Single-Attribute get: Alert ($ (' div '). css (' height '))

②css Single Attribute modification: $ (' div '). css (' attribute name ', ' property value ')

③CSS Multi-Property modification: $ (' div '). css ({' Property name ': ' attribute value ', ' Property name ': ' Property value ',...})

　　Watch out! when writing CSS composite properties, you have to use the hump-style naming!

Example: Background-color should be written as BackgroundColor

　　④ . Animate ({property Name: ' property value '},500)

　　// Dynamic CSS methods allow you to create custom animations that can be used to manipulate multiple CSS properties, use the queue feature, and the method will be called one after the other, followed by an example:

2) CSS class:

① Add Class: AddClass (ClassName)
Example: $ ("div"). addclass ("ABCD");//Note: Just add, overwrite the previous without deleting the previous
② Delete class: Removeclass (ClassName)
③ Switch class: Toggleclass (ClassName)
Example: $ ("div"). Toggleclass ("AB");//the "AB" attribute is hidden, not added

(d) jquery modifies HTML properties

1. Get HTML content (including formatting):

$ (' div '). html () [innerHtml]

$ (' div '). html (' code ') code to recognize text, tags
2. Get HTML text content :

$ (' div '). Text () [InnerText]

$ (' div '). Text (code) setting textual content //NOTE: If there are tags in the content, these labels will be treated as text

Note: the message is obtained without parentheses, and the parentheses are the values that modify the information

3,dom Document Processing:

1) Internal insertion (parent-child relationship):

　　　　①$ (a). Append ($ (b)) Insert B in a
②$ (b). AppendTo ($ (a)) Insert B into a

//Note: these are both inserted into the back of a.

With Prepend, which is inserted into the front of a inside

//Note: If an existing node is appended, the location movement occurs, i.e. the old node is removed

2) external insertion (sibling relationship):

　　　　①$ (a). After ($ (b)) Insert B into the back of a
　　　　②$ (b). InsertAfter ($ (a)) Insert B into the back of a

//Note: with before, which is inserted into the front of a outside

//Note: If an existing node is appended, the location movement occurs, i.e. the old node is removed

3) Package: Wrap

①$ (a). Wrap ($ (b)) wrap A in B (each element will be wrapped) unwrap not wrapped
②wrapall: Parcel All (all elements are wrapped together)
③wrapinner: Internal package (will wrap the next level of the specified element)

　　4) Replacement: ReplaceWith

①$ (a). ReplaceWith ($ (b)) Replace A with B
②replaceall $ (a). ReplaceAll ($ (b)) Replace B with a
//Old node replacement is also a position move

　　5) Delete: Empty

①empty Delete child nodes under parent node (excluding parent node)
②remove Delete the specified node

　　6) Clone: Clone (copy) copy the content
①var A = $ (' B '). Clone (False); Copy only nodes, excluding events;
②var A = $ (' B '). Clone (True); Copy nodes and their events;

　　7) use of attr ():

　　　　① element. attr (); Get property

② element. attr (attr,value); setting properties

　　　　　　Example $ ("input"). attr ("value"); Get
$ ("input"). attr ("value", "ABCD"); Set up

③ element. attr ({value: "Zhi", type: "Zhi"}); Methods for setting multiple properties

　　　　　　Note: Modifying or deleting the Type property in attr is not allowed in jquery

8) use of Val ():

Val () Use Demo in check box (checkbox):

1) gets (the value of the selected check box)
① Get all selected check box element node object
② Traverse all selected check boxes
③ gets its value if selected

        function F1 () {            var s = "";              for (var i = 0;i<$ (' input:checked '). length;i++) {                s+=$ (' Input:checked:eq (' +i+ ') '). Val () + "," ;            }             = S.substr (0,s.length-1); // remove the last ","             Console.log (s);        }

2) settings (items with certain value values in the check box are selected)

        function F2 () {            $ (' input '). val ([1,2,4]);        }

//Note: The drop-down list (select option) and the radio button (radio) Val () Get no traversal, directly using the $ ('). Val () to

　　　　　　　　Subsequent additions will increase the usage of each, eliminating the hassle of looping through loops!

(v) jquery Core: Selector

(vi) The AJAX use of jquery

A little white
Source: http://www.cnblogs.com/wccc/
This article copyright belongs to the author and the blog Park, welcome reprint, but without my consent must retain this paragraph statement, and in the article page obvious location to the original link, otherwise reserves the right to pursue legal responsibility.

To learn jquery!.