Learn about the jquery journey

Have heard of the name of jquery, has not been careful study, through reading some of the information collected, feel that jquery is really strong. Decide to start your own study on the jquery journey. Here is not for everyone to explain the jquery (know the level of limited), just to share their own learning results to everyone, learn and communicate together.

About jquery

I understand that jquery is a powerful JavaScript library that encapsulates many of the existing methods and properties. Enables developers to develop the results they want to achieve better and faster with very little code. Too many jqquery here will not introduce more, presumably a lot of people have already read more detailed documents, I will not more verbose.

Selectors (selector)

Using $ in jquery, you can easily get to the corresponding element by the ID of the element, CSS class or tag name.

(1) Simple acquisition of elements

Example:

$ ("P")//Get all P elements
$ ("#pid")//through ID
$ (". P")//via CSS class name

(2) Of course, his function is not limited to this, but it can also drill down into the hierarchy

Example:

$ ("Table > Tbody > TR")//Get all rows of Table $ ("#t1 > Tbody > TR")//Get all lines in T1 $ (". Table > Tbody > TR")//Get CSS Class All rows that are named. Table

(3) jquery provides a powerful filter for developers to make it easier and more accurate to choose the right elements:

Example:

$ ("P:first")//first
$ ("P:last")//last
$ ("Table > Tbody > Tr:even")//even rows
$ ("Table > Tbody > tr:odd")//odd rows
$ ("P:eq (1)")//Index is 1
$ ("P:GT (2)")//2 elements above
$ ("P:lt (10)")//0-9
$ ("p:empty")//No Child of P
$ ("p:parent")//for the parent P

(4) Access the text and control its values:

Example:

$(" input[type= ' text ']"). CSS ("Color", "Red");

About the role of selectors there are many, you can see: http://docs.jquery.com/Selectors

Access content

examlple:

$ ("#span"). html ();
$ (: Input). val ();
$ ("#name"). Text ();

The above methods are used to get the basic result set of the specified element, which should be noted when we use it: theVal () method looks for an element that has an attribute associated with it. HTML () looks for the content in the HTML in the specified element. The text () method gets the text of the specified element.

There are other ways to manipulate HTML tags, and more commonly, CSS () and attr ().

CSS () methods have two parameters, one is the element name of the CSS, the other is its corresponding value, through the CSS () can easily modify one or more elements of the CSS style.

The attr () method can read or modify the attributes of an element. And he can set the attributes of multiple elements at the same time.

Examlple:

$ ("P"). CSS ("Background-color", "Blue");
$ ("P"). css ({"Background-color": "Navy", "color", "white"});
$ ("button"). attr ("Disabled", "disabled");

Events

jquery is capable of listening to elements of events. The most noticeable and frequently used event is the ready event. This event is triggered after the browser has finished loading.

$ (document). Ready (function () {..});

Handle a button event:

$ ("#buttonid"). Click (function () {Alert ("button click");}

JQuery Summary of function methods commonly used in

jquery provides us with a number of useful methods and properties, summarizing some of the commonly used functions, methods. Personally think in the development will be more commonly used, only for everyone to learn and reference.

Event Handling

Ready (FN)

Code :
$ (document). Ready (function () {
Your code here ...
})；

role : it can greatly improve the responsiveness of Web applications. By using this method, you can immediately invoke the function you are bound to when the DOM loading is ready to be read and manipulated, and 99.99% of the JavaScript functions need to be executed at that moment.

Bind (TYPE,[DATA],FN)

Code :
$ ("P"). Bind ("click", Function () {
Alert (This). text ());
});

function : Binds an event handler function for each matching element's specific event (like click). Play the role of event monitoring.

Toggle (FN,FN)
Code:

$ ("TD"). Toggle (
function () {
$ (this). AddClass ("selected");
},
function () {
$ (this). Removeclass ("selected");
}
);

Action : Toggles the function to be called each time the click is clicked. If a matching element is clicked, the first specified function is triggered, and when the same element is clicked again, the specified second function is triggered. A very interesting function, which may be used in the dynamic implementation of certain functions.

(Like click (), focus (), KeyDown () such events are not mentioned here, those are more commonly used in development. )

Appearance effect

AddClass (Class) and Removeclass (class)

Code :
$ (". Stripe tr"). MouseOver (function () {
$ (this). addclass ("Over");}). Mouseout (function () {
$ (this). Removeclass ("Over");})
});
Can also be written as:
$ (". Stripe tr"). MouseOver (function () {$ (this). addclass ("Over")});
$ (". Stripe tr"). Mouseout (function () {$ (this). Removeclass ("Over")});

Action : Adds or removes a style for the specified element to achieve a dynamic style effect, which implements the code of the mouse move two-color table in the above instance.

CSS (Name,value)

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

function : It is simple to set the value of a style property in a matching element. This personal feeling is somewhat similar to the AddClass (class) above.

Slide (), Hide (), FadeIn (), fadeout (), Slideup (), Slidedown ()

Code :

$ ("#btnShow"). Bind ("click", Function (event) {$ ("#divMsg"). Show ()});
$ ("#btnHide"). Bind ("click", Function (evnet) {$ ("#divMsg"). Hide ()});

role : A function that provides several dynamic effects that are commonly used in jquery. You can also add Parameters: Show (Speed,[callback]) displays all matching elements in an elegant animation, and optionally triggers a callback function when the display is complete.

Animate (Params[,duration[,easing[,callback]])

role : The function used to make the animation effect, the function is very powerful, you can use this function continuously.

Find Filters

Map (callback)
HTML Code:
<p><b>values: </b></p>
<form>
<input type= "text" name= "name" value= "John"/>
<input type= "text" name= "password" value= "password"/>
<input type= "text" name= "url" value= "http://ejohn.org/%22/>
</form>
JQuery Code:
$ ("P"). Append ($ ("input"). Map (function () {
return $ (this). Val ();
}). Get (). Join (","));
Results:
[<p>john, Password, http://ejohn.org/%3c/p>]

function : Converts a set of elements into other arrays (whether or not an array of elements) you can use this function to create a list, whether it is a value, a property, a CSS style, or some other special form. This can be easily built with ' $.map () '.

Find (expr)

HTML Code:

<p><span>hello</span> how is you?</p>
JQuery Code:

$ ("P"). FIND ("span")
Results:

[<span>Hello</span>]

function : Searches for all elements that match the specified expression. This function is a good way to find out the descendant elements of the element being processed.

Document processing

attr (Key,value)
HTML Code:

JQuery Code:
$ ("img"). attr ("src", "test.jpg");

effect : Gets or sets the property value of the matching element. This method makes it easy to get the value of an attribute from the first matching element. Returns undefined if the element does not have a corresponding attribute. is a must-have tool for controlling HTML markup.

HTML ()/html (Val)
HTML Code :
<div><p>Hello</p></div>
JQuery Code :
$ ("div"). html ();
Results:
<p>Hello</p>

function : Gets or sets the HTML content of the matching element, with the same type of method as text () and Val (). The former is the content that gets all the matching elements. , which is the current value for the matching element. The three have similar places commonly used in the operation of content.

Wrap (HTML)
HTML Code:
<p>test paragraph.</p>
JQuery Code:
$ ("P"). Wrap ("<div class= ' wrap ' ></div>");
Results:
<div class= "Wrap" ><p>test paragraph.</p></div>

function : Wrap all matching elements with a structured tag of other elements.
This wrapper is most useful for inserting additional structured markup into a document, and it does not break the semantic quality of the original document. We have the flexibility to modify our DOM.

Empty ()
HTML Code:
<p>hello, <span>Person</span> <a href= "#" >and person</a></p>
JQuery Code:
$ ("P"). empty ();
Results:
<p></p>

function : Deletes all child nodes in the matching element collection.

Ajax processing

Load (Url,[data],[callback])
URL (String): The URL of the HTML page to be loaded in.
Data (MAP): (optional) Key/value data sent to the server.
Callback (callback): (optional) callback function when loading succeeds.

Code:

$ ("#feeds"). Load ("Feeds.aspx", {limit:25}, function () {
Alert ("The last entries in the feed has been loaded");
});

function : Loads the remote HTML file code and inserts it into the DOM. This is also the most common and effective way for jquery to operate Ajax.

Serialize ()
HTML Code:
<p id= "Results" ><b>results: </b> </p>
<form>
<select name= "single" >
<option>Single</option>
<option>Single2</option>
</select>
<select name= "multiple" multiple= "multiple" >
<option selected= "Selected" >Multiple</option>
<option>Multiple2</option>
<option selected= "Selected" >Multiple3</option>
</select><br/>
<input type= "checkbox" name= "Check" value= "Check1"/> Check1
<input type= "checkbox" name= "Check" value= "Check2"
checked= "Checked"/> Check2
<input type= "Radio" name= "Radio" value= "Radio1"
checked= "Checked"/> Radio1
<input type= "Radio" name= "Radio" value= "Radio2"/> Radio2
</form>
JQuery Code:
$ ("#results"). Append ("<tt>" + $ ("form"). Serialize () + "</tt>");

function : Serializes the contents of a table to a string. Used for Ajax requests.

Tools

Jquery.each (Obj,callback)

Code :
$.each ([0,1,2], function (i, n) {
Alert ("Item #" + i + ":" + N);
});//traversal array
$.each ({name: "John", Lang: "JS"}, function (i, n) {
Alert ("Name:" + i + ", Value:" + N);//Traverse Object
});

function : A general-purpose example of a method that can be used to sample objects and arrays.

Jquery.makearray (obj)
HTML Code:
<div>first</div><div>second</div><div>third</div><div>fourth</div >
JQuery Code:
var arr = Jquery.makearray (document.getElementsByTagName ("div"));
Results:
Fourth
Third
Second
First

function : Converts a class array object to an object that is a group. Allows us to flexibly convert between arrays and objects.

Jquery.trim (str)

Role : This should be familiar, is to remove the beginning and end of the string space.

In the first two articles, the powerful selectors (selectors) in jquery and the use of more commonly used methods in development are introduced. Join us today to experience one of the other fascinating areas of jquery-the powerful, cool and practical jquery plugin.

Do the site are aware that the art of the site is very important, if a BS software do not do a good job, high technical content, advanced algorithm, and will not be very popular with users. (In fact, the same is true of CS)

However, jquery's powerful plug-ins can easily bring cool results to our website, as well as a more user-friendly experience. Let's share some of the jquery plugins that may be commonly used in development.

Menu

Effect:

• Home
• Log
• Album
• Message
• More information

The implementation is very simple:

HTML code:

Code

CSS and jquery code:

Code

One of the Jquery-latest.pack.js,jquery.lavalamp.js,jquery.easing.js

Of course, this is a relatively simple menu, but more practical, there are other cool menu, such as the drop-down menu, you can go to my last site to find, here is not more introduction.

Tabs

Tabs is also our regular use of plug-ins, it can make our site better clean and standard, is a very human design.

Effect: Click here to see the effect (here may be a bit of a problem, I do not know why the CSS @media application is not, the local test is no problem, written in the blog Garden HTML template has a problem, read for a long while without words)

Implementation is not very difficult, the key is the operation of the CSS

HTML code:

Code

CSS and jquery code:

Code

One of the Ui.tabs.pack.js

Accordion

The accordion effect, everyone should be very familiar with.

Effect: Click here to see the effect

HTML code :

Code

CSS and jquery code :

Code

One of the jquery.accordion.js of course, you can make a more cool and beautiful effect.

Round

Sometimes we want the div in the page to achieve a rounded effect, and jquery can be a good fit for us.

Effect: Click here to see the effect

HTML code :

<div id=main>
<div class=demo id= "Corner1" >
<H1>Round</H1>
<p>hello world!! </P></DIV>


<div class=demo id= "Corner2" >
<H1>Round</H1>
<p>hello world!! </P></DIV>
</DIV>

CSS and jquery code :

Code

One of the jquery.corner.js. This allows the fillet effect of the div to be achieved.

Dialog

The simple implementation pops up the dialog box in the Web page.

Effect: Click here to see the effect

HTML code:

Code

CSS and jquery code:

Code

One of the jquery.simplemodal.js, in the dialog we can do a lot of things, similar scenes many: Baidu's login ....

OK, just write it down first.

Summary: Let's start with a brief introduction to these. jquery plug-in by everyone's love and praise, indeed to our development has brought a lot of convenient and brilliant effect, here is not more introduced, we can go to the following address to continue to experience.

More jquery plugins:

Http://www.cnblogs.com/Terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.html

http://parandroid.com/more-than-50-powerful-plug-in-application-examples-jquery/

Http://www.cnblogs.com/andylaufzf/archive/2009/03/26/1422255.html