jquery Summary + Examples

What is jquery?

jquery is another excellent JavaScript library following prototype. It is a lightweight JS library, it is compatible with CSS3, also compatible with various browsers (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+), jQuery2.0 and subsequent versions will no longer support Ie6/7/8 browser. jquery makes it easier for users to work with HTML (an application under the standard Universal Markup Language), events, animate, and easily provide Ajax interactivity to the site. One of the big advantages of jquery is that its documentation is full, and the various applications are very detailed, as well as a number of mature plugins to choose from. jquery allows the user's HTML page to keep the code and HTML content separate, that is, no more inserting a bunch of JS in the HTML to invoke the command, only need to define the ID. To put it simply, I think jquery is a JavaScript library that someone else has written all kinds of functions.

Features of jquery:

The video shows us the features of jquery, mainly to support various master browsers, based on a powerful CSS selector, almost all operations first use the selector to find the DOM object, and then perform various operations on it. (CSS has a lot of features only support IE browser, not even support ie10,jquery compensate for this disadvantage) jquery has a powerful plug-in mechanism.

After a simple look at jquery, we illustrate and use jquery in the example. This is illustrated by the example in the menu bar. The menu bar example is for the real mouse click on the Vertical menu bar, the corresponding sub-menu appears slowly, click again, receive the screwdriver menu. The Landscape menu bar enables the mouse to hover over a main menu and display its submenu.

The code is as follows (there is no jquery code here, there are too many, if you want to use, you can go directly to the online download):

Code for HTML:

<span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Code for CSS:
<span style= "FONT-SIZE:18PX;" >ul, li{/* clears UL and Li on the default small dot */list-style:none;} ul{/* clears the submenu indent value */padding:0;margin:0;}. Main,. Hmain{background-image:url (.. /images/title.gif); background-repeat:repeat-x;width:120px;} Li{background-color: #EEEEEE;} a{/* Remove all underline */text-decoration:none;padding-left:20px;display:block;display:inline-block;width:100px; padding-top:3px;padding-bottom:3px;}. Main A,. Hmain A{color:white;background-image:url (.. /images/collapsed.gif); background-repeat:no-repeat;background-position:3px Center;}. Main Li A,. hmain li A{color:black;background-image:none;}. Main ul,. Hmain Ul{display:none;}. hmain{float:left;margin-right:1px;} </span>

Finally look at the JS code:
<span style= "font-size:18px;" >$ (document). The code that executes when the main menu item in the Ready (function () {//page has been reprinted is completed (". Main > a"). Click (function () {//To find the submenu item corresponding to the main menu items var Ulnode = $ (this). Next ("ul");/*if (Ulnode.css ("display") = = "None") {Ulnode.css ("display", "block");} ELSE{ULNODE.CSS ("Display", "none");} *///ulnode.show ("slow");//normal fast//ulnode.hide ();//ulnode.toggle ("slow");////ulnode.slidedown ();// Ulnode.slideup (); Ulnode.slidetoggle (); Changeicon ($ (this));}); $ (". Hmain"). Hover (function () {$ (this). Children ("ul"). Slidedown (), Changeicon ($ (this). Children ("a"));},function ()   {$ (this). Children ("ul"). Slideup (), Changeicon ($ (this). Children ("a");}); });/*** modify the main menu's instruction icon */function Changeicon (mainnode) {if (Mainnode) {if (Mainnode.css ("Background-image"). IndexOf (" Collapsed.gif ") >= 0) {mainnode.css (" background-image "," url (' images/expanded.gif ') ");} Else{mainnode.css ("Background-image", "url (' images/collapsed.gif ')");}}} </span> 

Before we all learned HTML and CSS, here I would like to mainly say the JS code. In this example, the Show,hide method can be used to show or hide an element, with no arguments and with the effect of modifying the display property of the CSS. The parameter can be a number in milliseconds, or slow, normal, fast three text, can be used to control the completion of the display or hide the time required. The animation effect is achieved by changing the width and height of the element. Toggle method is more powerful, we can go up to determine whether the element is hidden or display state, directly let the displayed elements hidden or hidden elements displayed, using the same method and Show,hide, Slidedown, sildeup can achieve the effect of rural or upward scrolling, The animation effect is actually achieved by modifying the height of the element within the specified time. It is important to note that the two method arguments are null and show,hide different. Sildetoggle and toggle achieve similar results. 
Summary:
In the practice of continuous learning, with real examples to help us learn, in general, I think jquery is a very powerful library of functions, if you want to use good jquery suggestions to see more jqueryapi, of course, in the use of the time to check, it is also possible. This simple summary of some of the methods of jquery and jquery, as well as my understanding of jquery, if there are errors, please point out!
jquery Summary + Examples