jQuery is a JavaScript, Library, therefore, the basis you have a bit of JavaScript, at least wrote some JavaScript is rather easy to use, and can read the follow-up teaching. jQuery's core programs is not packet hills the sea, anything can help you do the contrary, jQuery DOM document is mainly used in the operation, including the "Quick select elements (Element)" and "do something" quickly select the elements can once you select a single or multiple elements, then you can use these elements to be selected to make some changes, such as hide, show, and so on. In addition jQuery core program also strengthened the non-synchronous transfer (AJAX) and event (Event) of the features that make it easier to operate remote files and events.
For more see that jQuery is JavaScript to enhance the inherent deficiencies, you still need to write some code to accomplish the various functions you need, the difference is, the correct use of the jQuery can make your code more concise, more elegant The express, which can be seen in subsequent examples, more importantly, should also make you more rapid development of the function you want.
Perhaps you might want to say, in this era of Web 2.0, I need some more beautiful, brilliant Widgets to decorate my site, like Yahoo UI or functionality as those provided by ExtJS, jQuery there? In fact, the design of jQuery has taken into account issues such expansion, the current jQuery's plugin has hundreds, and you do not have to completely write their own hands, look around on the jQuery website, perhaps you need the function of others has been to help you get out. In terms of UI, jQuery UI associated with the plugins have already done some integration, the current independent published as jQuery UI (http://ui.jquery.com/), if you have not heard before the jQuery UI, I suggest you go website shows an example of speaking about, ah, although there may be some bug exists, but overall the standard has been a considerable, and perhaps you will be more interested in jQuery.
The following teaching content, is to acquire the jQuery John Resig's a presentation of "Building Interactive
Prototypes with jQuery "to adjust the content and comments, hoping to compare the true way to render the design implications of jQuery.
[Of]
jQuery how to "quick select elements" and "do something" mean? Please take a look at the code:
$ ("Div"). AddClass ("special");
$ Token money is the jQuery object, use $ ("div") is to use jQuery to select elements, you can select the file in this example all the <div> elements. Followed by the. AddClass ("special") is used to do something, this example is that all previously selected elements to add a file called "special" in the class. That is, through the $ ("div"). AddClass ("special") syntax, allowing you time to help document some <div> adding special elements of the class.
Please note that Oh, just the examples have been selected for a number of elements to do a batch operation, that is, if the document has three <div>, it will be time to find the three <div> and all subsequent action apply . That you had to use JavaScript to write in their own very different, had to write their own may need to use a loop like the syntax, and jQuery has a function of most of the batch processing function, this alone can make a more concise your program.
$ Tokens will be on the money you use jQuery in the process of learning and the most important objects (or you want $ as a function can, indeed, do), use just as you can see, by looking for elements are used, the parameters can bring. Perhaps you are not used to the money as a function name can be tokens, you can also use the name of jQuery, the money is seen as tokens jQuery an abbreviation, make you look more simple and some of the function, if you want to set yourself another acronym For example, $ j, is possible, this part of the follow-up to explain, take a look at the example has been under the result will be, and the above example is exactly the same:
jQuery ("div"). addClass ("special");
[Select elements]
Use the previous example $ ("div") to select elements, the parameters into the div element is that you are looking for, this is CSS selectors (CSS Selector) syntax, like CSS layout and appearance are making use of selector syntax. jQuery's CSS Selector supported include CSS 1, CSS2, and has not yet been released CSS3, also supported through the plugin can be used in XPath syntax, use the CSS, XPath syntax can easily find your page elements to be addressed , take a look at more examples below.
This is a raw HTML:
<div id="body">
<h2> Some Header </ h2>
<div class="contents">
<p> ...</ p>
<p> ...</ p>
</ Div>
</ Div>
Below with a series of examples, in blue and show some of the basic syntax to display the file in the dark word will be selected element.
$ ("Div")
<div id="body">
<h2> Some Header </ h2>
<div class="contents">
<p> ...</ p>
<p> ...</ p>
</ Div>
</ Div>
Explanation: Select all <div>
$ ("# Body")
<div id="body">
<h2> Some Header </ h2>
<div class="contents">
<p> ...</ p>
<p> ...</ p>
</ Div>
</ Div>
Explanation: Select the element id for the body
$ ("Div # body")
<div id="body">
<h2> Some Header </ h2>
<div class="contents">
<p> ...</ p>
<p> ...</ p>
</ Div>
</ Div>
Explanation: Select the id for the body of <div>
$ ("Div.contents p")
<div id="body">
<h2> Some Header </ h2>
<div class="contents">
<p> ...</ p>
<p> ...</ p>
</ Div>
</ Div>
Explanation: Select the class for the contents of which encase <div> <p> all the underlying
$ ("Div> div")
<div id="body">
<h2> Some Header </ h2>
<div class="contents">
<p> ...</ p>
<p> ...</ p>
</ Div>
</ Div>
Explanation: Select the next layer is enclosed in <div> <div>
$ ("Div: has (div)")
<div id="body">
<h2> Some Header </ h2>
<div class="contents">
<p> ...</ p>
<p> ...</ p>
</ Div>
</ Div>
Explanation: and the former an example of the contrary, here is to select at least one wrap of <div> <div>
[Do something]
Teaching in the previous paragraph describes how to use jQuery to select elements, which are most of the syntax allows you to quickly select multiple elements of the first, of course, is to come next for these elements to make some changes to the selection Hello. Built-in functions through jQuery, you can:
Operate on the DOM, such as new or modified file node
Add an event handler
To do some basic visual effects, such as hide, show, drop-down display, fade, etc.
Use AJAX to send the form to get remote file content or
[Example 1] to select the all target attributes <a>, and include a paragraph in the node text.
$ ("A [target]"). Append ("(Opens in New Window)");
This is a raw HTML:
<a href="http://jsgears.com"> jsGears </ a>
<a href="http://google.com" target="_blank"> Google </ a>
<a href="http://amazon.com" target="_blank"> Amazon </ a>
Select a target attribute and the results after adding the text:
<a href="http://jsgears.com"> jsGears </ a>
<a href="http://google.com" target="_blank"> Google (Opens in New Window) </ a>
<a href="http://amazon.com" target="_blank"> Amazon (Opens in New Window) </ a>
[Example 2] to select the element id for the body, and modify the two css properties.
$ ("# Body"). Css ({
border: "1px solid green",
height: "40px"
});
This is a raw HTML:
<div id="body">
...
</ Div>
Select the element id for the body and modify the css the results of the (indicative):
<div id="body" style="border: 1px solid green; height: 40px">
...
</ Div>
[Example 3] on the page when the form submission to include a judge, if the username value of this field is empty, then to display help text within the block.
$ ("Form"). Submit (function () {
if ($ ("input # username"). val () == "")
$ ("Span.help"). Show ();
});
May be acting similar to the following HTML, the start span.help is hidden, if not enter the username, will show:
<style type="text/css">
. Help {display: none}
</ Style>
<form>
<label for="username"> Please enter a name </ label>
<input type="text" id="username" name="username" />
This field is required <span class="help"> Oh </ span>
</ Form>
[Example 4] When the user click to open the link id, id for the menu display blocks, and returns false to prevent the browser page is really for.
$ ("A # open"). Click (function () {
$ ("# Menu"). Show ();
return false;
});
May be acting similar to the following HTML:
<style type="text/css">
# Menu {display: none}
</ Style>
<a id="open" href="#"> control panel </ a>
<ul id="menu">
<li> <a href="#1"> Control Panel Home </ a> </ li>
<li> <a href="#2"> Edit Profile </ a> </ li>
<li> <a href="#3"> personal space management </ a> </ li>
</ Ul>
[Example 5] The block id for the menu screen of the dynamic effects of the following Club Fast Display:
$ ("# Menu"). SlideDown ("fast");
May be acting similar to the following HTML, the hidden dynamic drop-down menu will be displayed the way:
<style type="text/css">
# Menu {display: none}
</ Style>
<ul id="menu">
<li> <a href="#1"> Control Panel Home </ a> </ li>
<li> <a href="#2"> Edit Profile </ a> </ li>
<li> <a href="#3"> personal space management </ a> </ li>
</ Ul>
[Example 6] all the <div> changed to wide 300px, 20px width of text and border
$ ("Div"). Animate ({
width: '300px ',
padding: '20px '
}, 'Slow');
May be acting similar to the following HTML:
<div style="width: 100px; border: solid 1px red;">
Hello world!
</ Div>
PS. JQuery animate function of the core program elements of property does not change much, but through other plugin can provide more dynamic effect.
[Example 7] an example of the dynamic effects of the callback, all the <div> to hide the dynamic effects of 0.5 seconds, and then the dynamic effect of 0.5 seconds to display. hide () the second parameter is a callback function, where $ (this) was originally handled by the various elements of the program.
$ ("Div"). Hide (500, function () {
/ / $ (This) is each of the other <div>
$ (This). Show (500);
});
May be acting similar to the following HTML:
<div style="width: 100px; border: solid 1px red;">
Hello world!
</ Div>
<div style="width: 100px; border: solid 1px red;">
jsGears.com!
</ Div>
[Example 8] and find the file made sample.html all <div> fill under the floor of the original document <h1> the element id for the body
$ ("# Body"). Load ("sample.html div> h1");
This is a raw HTML:
<div id="body"> </ div>
sample.html fragments:
<div>
<h1> Hello world! </ h1>
<h2> This is H2 </ h2>
<h1> jsGears.com! </ h1>
</ Div>
After the implementation of the results of the code:
<div id="body">
<h1> Hello world! </ h1>
<h1> jsGears.com! </ h1>
</ Div>
[Example 9] through getJSON () to obtain information on JSON format and process data through the callback function
$. GetJSON ("test.json", function (data) {
for (var idx in data)
$ ("# Menu"). Append ("<li>" + data [idx] + "</ li>");
});
This is a raw HTML:
<ul id="menu">
<li> Item 1 </ li>
</ Ul>
test.json content:
[
"Hello world!",
"JsGears.com!"
]
After the implementation of the results of the code:
<ul id="menu">
<li> Item 1 </ li>
<li> Hello world! </ li>
<li> jsGears.com! </ li>
</ Ul>
[Continuous use function]
jQuery is a very important feature to continuously use the function (Chaining), when you select one or a group of elements, these elements can be more continuous treatment. The following example will hide all the <div>, change the text color to blue, then the effect of <div> the following screen is displayed Club:
$ ("Div"). Hide ();
$ ("Div"). Css ("color", "blue");
$ ("Div"). SlideDown ();
Three lines of code that can replace the following line of code, the result will be exactly the same:
$ ("Div"). Hide (). Css ("color", "blue"). SlideDown ();
It was very amazing? In the design of jQuery's architecture, most of the functions will be in processing the thing to do after the introduction of elements of the original and then return back to, so such a function can be followed by a continuous use. Remember at the outset of the jQuery can make your code more concise it? After reading some of the above examples, it should now be feeling a little bit.
Continuous use jQuery functions mentioned, there are two very important functions must be in this introduction. The first is the end (), this function is executed, will return "element found in the former group." The other is the find (), usage of this function as the use of $ () to find the elements of the document as a CSS selector into the implementation of the elements found after the return, the difference is $ () is to find the file, and find () is based on elements previously found elements find their bottom, like a re-filtering function.
$ ("Ul.open") / / [ul, ul, ul]
. Children ("li") / / [li, li, li]
. AddClass ("open") / / [li, li, li]
. End () / / [ul, ul, ul]
. Find ("a") / / [a, a, a]
. Click (function () {
$ (This). Next (). Toggle ();
return false;
}) / / [A, a, a]
. End (); / / [ul, ul, ul]
This piece of code above the continuous use of multiple functions, and through the end () and find () to respectively operate on different elements, detailed steps are explained as follows:
Find the file class to open all the <ul>
Under the layer of filtering out all the <li>
Add a class to these <li>
Back to previous search results, that is all <ul>
Then find the bottom of all <a>
Add an event handler for <a>
Back to previous search results
[Continued]
jQuery Basics of teaching this Hello, I hope to be helpful for beginners, if any misuse wrong place, I hope you feel free to correct me. Follow-up plan should be re-introduced a number of jQuery plugin useful, as a basis for the continuation of articles, so stay tuned.
0 comments:
Post a Comment