Jquery internal training materials [jquery]

ArticleDirectory

• Jquery internal training materials

Jquery internal training materials

(* Even the materials collected during training at the previous company *)

Jiang, Zhiming
2008-08-18

1. What is Jquery

 

[Officeice]

Jquery is a new type of JavaScript library.

Jquery is a fast, concise, JavaScript library that simplifies how you traverse HTML documents ENTs, handle events, perform animations, and add Ajax interactions to your web pages. jquery is designed to change the way that you write JavaScript.

Jquery is a simple, fast, and flexible JavaScript framework that allows you to perform simple operations on your web page.CompositionFile, process events, implement special effects, and add Ajax interactions to web pages.

II,JqueryFeatures

 

1,CodeConcise, easy to understand, fast to learn, and rich documentation.

2. jquery is a lightweight script with very small code. The latest JavaScript package is only about 20 kb.

3. jquery supports CSS1-CSS3 and basic XPath.

4. jquery supports cross-browser browsers, including IE 6.0 +, FF 1.5 +, Safari 2.0 +, and opera 9.0 +.

5. It is easy to extend other performance for jquery, which currently has a large number of in INS. I will introduce it later

6. JavaScript code and HTML code can be completely separated to facilitate code maintenance and modification.

7. Rich plug-ins. In addition to some special effects of jquery, you can use plug-ins to achieve more performance, such as form verification, Tab navigation, drag-and-drop effects, table sorting, and DataGrid, tree menu, image effects, and Ajax upload.

Iii. Why jquery?

1::Smart, lightweight

As described on the official website http://www.jquery.com, jquery is a sleek, clear JS library that provides support for DOM elements, events, animations, and Ajax applications, to minimize the amount of input code, jquery enables you to change the way JavaScript code is written.

2::Good compatibility

The biggest headache for designing web page code is browser compatibility. due to historical reasons, CSS Code requires a lot of browser experience to write JavaScript code used across browsers, IE is divided into old versions and new versions, Firefox, opera, Safari, and so on.An inexperienced developer will be drowned in the ocean of browser differences. Using jquery allows you to discard browser differences, because basically most of the differences have been handled internally by jquery.Of course, if you want to write jquery extensions on your own, you still need to understand these differences. Otherwise, you will not be able to write compatibility issues.Program.

3: The attributesProperties are separated from HTML and JS

Using jquery, you can easily add and remove elements on the page. I use it to add or remove CSS styles to or from page elements, the most interesting thing is that you can write all the statements that have been added or removed, for example:

$ ("Div"). ATTR ("title", "This is a div"). addclass ("newclass ");

It can run normally in multiple browsers.

Thus, HTML code and JS Code are separated. Jquery does not need to write onclick events on each a tag, so we have a neat structure document (HTML) and a behavior document (JS ), it achieves the goal of separating structure and behavior, just as we pursue with CSS.

4 ::JqueryRelatively lightweight. The compressed file size is only 19 kb, which consumes less bandwidth.

5::Developing Foreground behavior using JavaScript frameworks is a trend

Some large websites even have their own specialized front-end Javascript development kits. as developers of Small and Medium-sized websites, they must have the idea of industrial development. They must no longer be in the development process of making their own wheels and use the framework, increase Productivity and free up creativity. Although learning jquery requires a certain amount of learning costs, the benefits you bring are self-evident.

Iv. Below is a brief introductionJquerySome features and usage:

1Precise and simple object selection(DOM):

$ ('# Element '); // Equivalent to document. getelementbyid ("element ") $ ("[@ Name = ABC]") [0]. innerhtml // Equivalent to document.Getelementsbyname("Checkbox") is a DOM type... $ ("Input [name = 'rdoffstrict ']") [I]. value ); $ ("* [Name = 'rdoffstrict ']") [I]. value ); The returned result is a DOM object, and the value of Val () cannot be used. $ ('. Element'); // class $ ('P'); // html tag $ ("Form> input"); // sub-Object $ ("Div, span, P. myclass"); // select multiple objects at the same time $ ("TR: odd" ).css ("background-color", "# bbbbff ");//Background of table row Separation $ (": Input"); // form object $ ("Input [name = 'newsletter ']"); // a specific form object

2The Application of object functions is simple and unlimited.

3, Operations on selected objects (including styles)

$ ("# Element"). addclass ("selected"); // Add a style to the object (('{Element'}.css ({"background-color": "yellow", "font-weight": "Bolder"}); // change the object style $ ("P"). Text ("some new text."); // change the object text $ ("IMG"). ATTR ({SRC: "test.jpg", alt: "Test image"}); // modify the object text $ ("P"). Add ("span"); // Add a label to the object $ ("P"). Find ("span"); // find the corresponding elements in the object $ ("P"). Parent (); // parent element of the object $ ("P"). append ("<B> Hello </B>"); // add content to the object

4, SupportAjaxSupported file formats:XML/html/script/JSON/jsonp(JmsajaxAlso)

$ ("# Feeds"). Load ("feeds.html"); // imports static page content in the corresponding region $ ("# Feeds "). load ("feeds. PHP ", {limit: 25}, function () {alert (" the last 25 entries in the feed have been loaded ") ;}); // import Dynamic Content

4.Event support:

$ ("P"). Hover (function (){ $ (This). addclass ("hilite"); // move the cursor over it }, Function (){ $ (This). removeclass ("hilite"); // move the mouse away }); // Different effects (Auto Cycle allPObject)

5.Animation:

$ ("P"). Show ("slow"); // hide an object (slow gradient) $ ("# Go"). Click (function (){ $ ("# Block"). animate ({ Width: "90% ", Height: "100% ", Fontsize: "10em" },1000 ); }); // Dynamic changes in width, height, and font after clicking the mouse

6.Extension:

$. FN. Background = function (BG ){ Return this.css ('background', BG ); }; $ (# Element). Background ("red ");

To add a function to each jquery object, you must assign this function to $. FN. At the same time, this function must return a this (jquery object)

Vi. Syntax summary and precautions

1References to page elements

The $ () referenced element of jquery includes methods such as ID, class, element name, element hierarchy, Dom or XPath conditions, and the returned object is a jquery object (set object ), you cannot directly call methods defined by the Dom.

2, JqueryObject and DomObject Conversion

Only jquery objects can use methods defined by jquery. Pay attention to the differences between DOM objects and jquery objects. When calling methods, pay attention to DOM objects or jquery objects.

Common DOM objects can be converted to jquery objects through $.

For example, $ (document. getelementbyid ("MSG") is a jquery object. You can use the jquery method.
Because the jquery object itself is a set. Therefore, if a jquery object is to be converted to a DOM object, You must retrieve one of them. Generally, you can retrieve it through indexes.

For example: $ ("# MSG") [0], $ ("Div "). eq (1) [0], $ ("Div "). get () [1], $ ("TD") [5] are all DOM objects. You can use methods in Dom, but you cannot use jquery methods.
The following statements are correct:
$ ("# MSG" cmd.html ();
$ ("# MSG") [0]. innerhtml;
$ ("# MSG"). eq (0) [0]. innerhtml;
$ ("# MSG"). Get (0). innerhtml;

3, How to obtain jqueryA collection item

For the obtained element set, you can use the EQ or get (n) method or index number to obtain one of the items (specified by the index). Note that the returned EQ is a jquery object, get (N) and index return Dom element objects. Jquery objects can only use jquery methods, while DOM objects can only use Dom methods. For example, you need to obtain the content of the third <div> element. There are two methods:

$ ("Div" ).eq(2).html (); // call the jquery object Method $ ("Div"). Get (2). innerhtml; // call the DOM method attribute

4, The same function implementation setAnd get

Many methods in jquery are like this, mainly including the following:

$ ("# MSG" cmd.html (); // Return the HTML content of the element node whose ID is MSG. $ ("# MSG" cmd.html ("<B> new content </B> "); // Write "<B> new content </B>" as an HTML string to the element node content with the ID of MSG. The new content in bold is displayed on the page.

$ ("# MSG"). Text (); // Return the text content of the element node whose ID is MSG. $ ("# MSG"). Text ("<B> new content </B> "); // Write "<B> new content </B>" as a common text string to the element node content with the ID MSG, <B> new content </B> in bold is displayed on the page.

$ ("# MSG"). Height (); // returns the height of the element whose ID is MSG. $ ("# MSG"). Height ("300"); // set the height of the element whose ID is MSG to 300 $ ("# MSG"). Width (); // return the width of the element whose ID is msg $ ("# MSG"). Width ("300"); // set the width of the element whose ID is MSG to 300

$ ("Input"). Val ("); // return the value of the input box of the form. $ ("Input"). Val ("test"); // set the value of the form input box to test $ ("# MSG"). Click (); // trigger the click event of an element whose ID is msg $ ("# MSG"). Click (FN); // click an event to add a function for an element whose ID is msg

Similarly, blur, focus, select, and submit events can all have two call methods.

5, Set processing function

For the set content returned by jquery, we do not need to iterate through it and process each object separately. jquery has provided us with a very convenient way to process the set.
There are two forms:

$ ("P"). Each (function (I) {This. style. Color = ['# f00',' #0f0 ',' # 00f']}) // Set different font colors for P elements whose indexes are 0, 1 and 2 respectively. $ ("TR"). Each (function (I) {This. style. backgroundcolor = ['# CCC', '# fff'] [I % 2]}) // Implement the Color Changing Effect of the row separation of the table $ ("P" ).click(function(){alert(((this).html ())}) // Adds a click event for each P element. Click a P element to bring up its content.

6, Expand the performance we need

$. Extend ({ Min: function (a, B) {return a <B? A: B ;}, MAX: function (a, B) {return A> B? A: B ;} }); // Added the min and Max methods for jquery. Use an extended method (called by "$. Method Name ): Alert ("A = 10, B = 20, max =" + $. Max (10, 20) + ", min =" + $. Min (10, 20 ));

7Supports Method Writing.
The so-called continuous writing means that different methods can be called continuously for a jquery object.
For example:

$ ("P" ).click(function(){alert(((this).html ())}) . Mouseover (function () {alert ('mouse over event ')}) . Each (function (I) {This. style. Color = ['# f00',' #0f0 ',' # 00f']});

8, Operation element style
It mainly includes the following methods:

$ ("# MSG" ).css ("background"); // return the background color of the element. $ ("# MSG" ).css ("background", "# CCC") // set the element background to Gray. $ ("# MSG"). Height (300); $ ("# MSG"). Width ("200"); // set the width and height $ ("# MSG" ).css ({color: "red", Background: "blue"}); // set the style as a name-Value Pair $ ("# MSG"). addclass ("select"); // Add a class named select for the element $ ("# MSG"). removeclass ("select"); // Delete the class whose element name is select $ ("# MSG"). toggleclass ("select"); // Delete (ADD) the Select class if it exists (does not exist)

9Complete Event Processing Performance
Jquery already provides various event handling methods. Instead of Directly Writing events on HTML elements, we can directly add events to objects obtained through jquery.
For example:

$ ("# MSG"). Click (function () {alert ("good")}) // added a click event for the element
$ ("P"). Click (function (I) {This. style. Color = ['# f00',' #0f0 ',' # 00f']})
// Set different processing for three p-element click events

JquerySeveral custom events in:
(1) hover (fn1, FN2): a method that imitates a hover event (move the mouse over an object and remove it. When you move the cursor over a matching element, the specified first function is triggered. When you move the cursor out of this element, the specified second function is triggered.
// When you place the cursor over a row of the table, set the class to over and the class to out when you leave the table.
$ ("TR"). Hover (function (){
$ (This). addclass ("over ");
},
Function (){
$ (This). addclass ("out ");
});

(2) Ready (FN): binds a function to be executed when the Dom is loaded and can be queried and manipulated.
$ (Document). Ready (function () {alert ("load success ")})
// After the page is loaded, the message "load success" is displayed, which is equivalent to an onload event. Equivalent to $ (FN)

(3) Toggle (evenfn, oddfn): switches the function to be called each time you click. If a matching element is clicked, the specified first function is triggered,When you click the same element again, the specified second function is triggered.The subsequent clicks repeatedly call the two functions.

// Add or delete a class named selected every time you click it. $ ("P"). Toggle (function (){ $ (This). addclass ("selected "); }, Function (){ $ (This). removeclass ("selected "); });

(4) trigger (eventtype): triggers an event on each matching element.
For example:

$ ("P"). Trigger ("click"); // triggers the click event of all P elements

(5) bind (eventtype, FN) and unbind (eventtype): bind and unbind events
Deletes a bound event from each matching element.
For example:

$ ("P "). BIND ("click", function () {alert ($ (this ). text () ;}); // Add a click event for each P element $ ("P"). Unbind (); // delete all events on all P elements $ ("P"). Unbind ("click") // Delete the Click Event on all P elements

10And some practical special effects
The toggle () and slidetoggle () methods provide the status switching function.
For example, the toggle () method includes the hide () and show () methods.
The slidetoggle () method includes the slidedown () and slideup methods.

11 , Several useful jquery Method
$. Browser. browser type: Check the browser type. Valid parameters: safari, opera, MSIE, and Mozilla. If IE: $. browser. isie is detected, true is returned for IE.
$. Each (OBJ, FN): A common iteration function. It can be used to iterate objects and arrays (instead of loops) in an approximate way ).
For example
$. Each ([0, 1, 2], function (I, n) {alert ("item #" + I + ":" + n );});
It is equivalent:
VaR temparr = [0, 1, 2];
For (VAR I = 0; I <temparr. length; I ++ ){
Alert ("item #" + I + ":" + temparr );
}
JSON data can also be processed, such
$. Each ({name: "John", Lang: "JS"}, function (I, n) {alert ("name:" + I + ", value: "+ n );});
Result:
Name: name, value: John
Name: Lang, value: JS
$. Extend (target, prop1, propn): expands an object with one or more other objects and returns the extended object. This is an inheritance method implemented by jquery.
For example:
$. Extend (settings, options );
// Merge settings and options, and return the Merged Results to settings, which is equivalent to inheriting setting and saving the inherited results in setting.
VaR settings = $. Extend ({}, defaults, options );
// Merge ults and options, and return the merged result to setting without overwriting the default content.
There can be multiple parameters (merging multiple parameters and returning them)
$. Map (array, FN): array ing. Save the items in an array (after conversion) to another new array and return the new array.
For example:
VaR temparr = $. Map ([0, 1, 2], function (I) {return I + 4 ;});
Temparr content: [4, 5, 6]
VaR temparr = $. Map ([0, 1, 2], function (I) {return I> 0? I + 1: NULL ;});
Temparr content: [2, 3]
$. Merge (arr1, arr2): merges two arrays and deletes repeated items.
For example: $. Merge ([, 2], [, 4]) // return [, 4]
$. Trim (STR): removes spaces at both ends of a string.
For example: $. Trim ("Hello, how are you? "); // Return" Hello, how are you? "

12, Solution to custom methods or other class libraries and jqueryConflict
Most of the time, we define the $ (ID) method to obtain an element, or some other JS class libraries such as prototype define the $ method, if these contents are put together at the same time, the variable method definition conflict will occur. jquery provides a dedicated method to solve this problem.
Use the jquery. noconflict (); Method in jquery to assign control of the variable $ to the first library or the previously customized $ method to implement it. When jquery is applied, you only need to replace all $ with jquery. For example, the original reference object method $ ("# MSG") is changed to jquery ("# MSG ").
For example:
Jquery. noconflict ();
// Start using jquery
Jquery ("Div P"). Hide ();
// Use $ () for other libraries ()
$ ("Content"). style. Display = 'none ';

 

VII. plugin

 

Calendar:

Http://marcgrabanski.com/pages/code/jquery-ui-datepicker

Jquery UI datepicker Project

Most likely, you are looking for a demo of jquery UI datepicker.

Since the jquery UI project has now become a solid library, I have moved the jquery UI datepicker project to the jquery UI website.

Ajax:

Http://schotime.net/jMsAjax.aspx

Lightbox:

Starrating:

Image switching:

Jcarousel: Used in kuqu.com, coolphoneshow default page have used !!!