jquery (a) The first knowledge of jquery, the simple use of jquery.

It seems a long time since the last blog post. Seems to have fallen for a while, the previous time to go to Hangzhou to find a job, was renting the matter to get confused forced, and then came back, back in the cultivation of one months in the struggle to go! Refueling, these two days to Jquery,easyui and bootstrap these things to record, before learning, but not recorded, so forget quickly, and no place to review, so still record these knowledge points. To review the review in the future.

--wh

First, what is jquery?

In fact, super simple, do not think it is too difficult,jquery is a JS (JavaScript) class library .

　　　　　　　　1.1, what is the JS class library?

　　　　　　　　　　[JavaScript Library encapsulates a number of predefined objects and utility functions to help users build highly difficult interactive client pages, and compatible with large browsers ], see this sentence should know, Popular point, JS class library is someone else will be some of the functions of the package into a function, and we directly take over the call can, this is the JS class library.

　　　　　　　　1.2. What is jquery?

jquery is a JS class library, the advantages of a lot, Baidu is basically know, here will collect some of the plain English listed, see can.

1, open source free, provide many plug-ins

2. jquery is another excellent JavaScript library following prototype. It is a lightweight JS library, it is compatible with CSS3, but also compatible with a variety of browsers [ from Baidu Encyclopedia ]

3, its documentation is very full, and a variety of applications are also described in detail, while there are many mature plug-ins (Aptana) to choose from. jquery can separate the JS code from the HTML content (the documentation is really full and detailed, and the following will be done with the document read together.) )

4. JQuery slogan:The Write less, does more

5, to find their own inquiry and found it ~

Ii. use of jquery

Knowing what jquery is, then you need to know how to use it.

　　　　　　　　2.1. Import JS Library

There are many versions of jquery that describe the various versions of the usage environment

　　　　　　　　　　　　　　　　

Jquery-1.8.3.js: All the source code, the larger. The development process uses

Jquery-1.8.3.min.js compressed version (not easy to read) production environment use (Import project may error, error, first delete, etc. in the production environment in the import use)

You will use the jquery version of the. JS Import Project,

　　　　　　　　　　　　　　　　　　　　　　　　　　　

<!--        /jquery_day01/js/jquery-1.8.3.js  relative path (relative to the root of the Web site).        /         indicates the        directory where the current page is located ... /         indicates the current page top level        directory <script> import JS library            type Specify type            src JS location        Note: If you use SRC, you cannot write content in the tag body        Note: There is a load order problem            when writing JS code 1. The jquery class library must be placed before            use 2. If you write the JS code directly, you must put it in the target object (HTML)                Note: The location of the JS library needs to be written accurately, otherwise it cannot be used.    <script type= "Text/javascript" src= ". /js/jquery-1.8.3.js "></script>

Import JS Library

　　　　　　　　　　　　

　　　　　　　　2.2. The acquisition of jquery objects

After importing the JS library, you can use JS library in the page, here is the use of jquery, the two ways to get jquery

<script type= "Text/javascript" >        // Syntax:  jQuery  or    $                //# Username: is the acquisition of a id=username node (element) equivalent to//document.getelementbyid ("username"); The difference is that the former belongs to jquery, or is//is obtained by using the original DOM        ////        var $username = JQuery ("#username");        // Mode 2 $  The variable name of a general jquery object is named with the start of the $, a habit, not//practical can also        var $username = $ ("#username");                Alert ($username. Val ());             </script> two ways to get jquery

two ways to get jquery objects

　　　　　　　　2.3. Conversion of Dom and jquery

The jquery object can be thought of as encapsulating the DOM object (the original content of the JavaScript) so that the jquery object can only invoke the function (method) or property defined by jquery, and the DOM object can only invoke the properties and functions of the DOM object and not confuse the call. Note: Be sure to distinguish between the use of Dom objects and jquery objects, and do not confuse the use of jquery functions with the view that the return value is a DOM object or something, such as a get (0) that returns a Dom object, a petty stream.

//1 Getting Dom objects (JavaScript original content)        varUsername = document.getElementById ("username"); //* Print value values, call Properties        //alert (username.value);                //2 turn DOM objects into jquery objects        //* Recommendation: jquery variable name starts with $        var$username =$ (username); //alert ($username. Val ());//Call method to get property value                //3 JQuery Object conversion DOM Object        //method 1:jquery Gets the object, inside is an array, if there is only one object, can be obtained by subscript 0        varobj1 = $username [0]; //alert (obj1.value);        //method 2:jquery provides a function get to get the specified subscript object        varObj2 = $username. Get (0);                        alert (Obj2.value); //Note: jquery objects can only use jquery's functions or properties        //DOM objects can only use functions and properties of the DOM        //cannot call each other. For example: $username. Value of the wrong

conversion of Dom and jquery objects

　　

　　　　　　　　2.4. Query the jquery document to learn what features jquery offers?

　　　　　　　　　　2.4.1, Document interpretation

　　　　　　　　　　　　　　　　

We will learn all the features in the document, in fact, it is probably over again, know which block is what the meaning of the line, the specific usage of the document will have a detailed introduction to the use of rules, really very detailed. I will show you a few, then so on and so on.

　　　　　　　　　　2.4.2, Selector　　　　

is divided into nine types, and its basic function is to select specific elements in the page HTML.

　　　　　　　　　　　　　　 [ basic selector, hierarchy selector, basic filtering, content filtering, visibility filtering, attribute filtering, child element filtering, form filtering, Form object property filtering ]

　　　　　　　　　　　　　　2.4.2.1, basic Selector

　　　　　　　　　　　　　　　　　　　　　

5 kinds, Super simple, we look at the document parsing one by one.

#id: Matches an element according to the given ID. If a selector contains special characters, it can be escaped with two slashes. See examples. (Detailed put.) Examples are, so do not understand, will not use, it's OK, check the document)

Element: Matches all elements according to the given element name (labeled signature)

　　　　　　　　　　　　　　　　　　　　　　

. Class: Through class selection, must. Start. <div class= "MyClass" >. For example: $ (". MyClass"); Document Map

*, match all elements

S1,s2,s3., combine multiple selectors, and use commas to separate the multiple. For example: $ ("#id,. MyClass");

　　　　　　　　　　　　　　2.4.2.2, Hierarchy Selector

is to choose between labels and tags, such as selecting a specific tag under the parent tag.

　　　　　　　　　　　　　　　　　　　　　　

A label B tag that represents the B tag of all descendants in the A label (Sun)
A-label >b tag that represents the B tag (parent-child) in all child tags of a label
A label +b tag, which represents the first sibling tag of a label (brother)
A label ~b label, which represents all brother tags after the A label (brother)

2.4.2.3, Basic filtration

Read the documentation.

2.4.2.4, Content filtering

Read the documentation.

2.4.2.5, Visibility filtering

Read the documentation.

2.4.2.6, attribute filtering

Read the documentation.

2.4.2.7, sub-element filtering

Read the documentation.

2.4.2.8, form filtering

Read the documentation.

2.4.2.9, Form object property filtering

Read the documentation.

　　　　　　　　　　2.4.3, properties

This is a little bit of an explanation, with the selection of a specific element (tag) or a few elements,

　　　　　　　　　　　　　　　　　　Property To view or modify its contents.

　　　　　　　　　　　　　　　　　　CSS Classes , you can modify (remove, add) The class style, Toggleclass by judging a Boolean value depends on what style to use.

　　　　　　　　　　　　　　　　　　HTML code/text/value This is more interesting.

Val: Represents the value of the Get property, such as getting the value in the input tag, and Val (XXX) has a parameter that assigns a value to XXX for the Value property.

Text: means getting the textual content of a tag, that is, <p>xxx</p> getting the content of xxx, text (XXX), assigning a value to the text of a tag. If you add a label, the direct display

HTML: Similar to the text function, but the ability to set CSS style, if you add tags, the browser needs to parse

View the document in detail.

　　　　　　　　　　2.4.4, CSS

　　　　　　　　　　　　　　　　　　

View document, location, and style handling

　　　　　　　　　　2.4.4, document Processing

All you know is how to pick a specific element, and then how to modify the style or content. Document processing is to increase the deletion of modified copy elements and so on, for example, after a tag to add a B tag, similar to this, the specific view of the document.

　　　　　　　　　　　

　　　　　　　　　　2.4.5, screening

The filter is similar to the filter in the selector, the difference is that the filter provides the function, and the filter is not. The general filter is that there are many elements from the jquery object (that is, there are multiple elements in the array), we need to get to the jquery object we want, further filtering, but we cannot use get () or array[0], because this way gets the DOM object, Instead of jquery objects, you need to use filters or filters in the selector to achieve the goal. View the document in detail.

　　　　　　　　　　2.4.6, Events　　

　　　　　　　　　　　　　Events , explaining a few common and important, others look at the document.

　　　　　　　　　　　　　　　　

This should be more interesting. is also more important.

1. Page loading: Ready (FN): This is the function that the JavaScript code writes on the top of the page, which is to load the JS code after all the pages have been loaded. There are two ways, the code is as follows

// Mode 1$ (document). Ready (function() {         //  $ = = JQuery...    }); * variant JQuery (document). Ready (function() {         //  $ = = jquery...    });  // Mode 2$ (function() {   ...});

View Code

2. Focus and Focusin contrast

Focus: Two usages, focus (): Make the object focus, focus (FN): Get Focus trigger event, child element [do not trigger] parent element Event []　　　　　　

Fosusin (FN): Get Focus trigger event, child element [trigger] Parent element Event

　　　　　　　　　　　　　　　　　　　　　　　

//1, 2 is the focus on the parent element of the event, so it can be compared. <script type= "Text/javascript" >$ (document). Ready (function(){            //1 JS Focus child element [does not trigger] parent element Event            /*$ ("#outerDiv"). focus (function () {alert ("focus");            }); */            //2 js focusin child element [Trigger] Parent element Event            /*            */            $("#outerDiv"). Focusin (function() {alert ("Focusin");        });                    }); </script>//omit the HTML code. The HTML code show diagram is the diagram above. 

View Code

3, Blur and Focusout lose focus

4. MouseOver and MouseEnter moving into an area triggering events

MouseOver, the MouseOver event is also triggered if the mouse pointer passes through any child elements

5, mouseout and MouseLeave removal

　　　　　　　　　　　　Event Handling :

　　　　　　　　　　　　　　　　

1. On: Binds an element to an event.

2. Off: Unbind events on elements

3. Bind: Bind event, always use until Unbind

For example: $username. Bind ("click", Function () {}) is equivalent to $username. Click (function () {});

4. Unbind Unbind Event

Bindings are aliases that can be specified, format: events. Aliases

Bind ("Click.xxx", FN)

Unbind ("Click.xxx")

5. Trigger: Triggers a class of events on each matching element.

Trigger () triggers all events (including browser default)

Triggerhandler () triggers all events (excluding browser default)

　　　　　　　　　　　　Event delegation　

　　　　　　　　　　　　　　　　

1. Live JQuery Appends an event handler function to all matching elements, even if the element is added later in the future.

Add an event to the a tag, and then append a tag to have the same event

2. Die Unbind

　　　　　　　　　　　　

　　　　　　　　　　2.4.7, Effect

This is the element to hide ah, dynamic display to set

　　　　　　　　　　2.4.8, AJAX

Keep the next section to explain the ~

Iii. Summary

Through this chapter,

3.1, know what is jquery?

3.2. How to use jquery and how to learn it through documentation? It's still the same sentence. Check the documentation, check the documentation

Tomorrow: Describe the use of jquery for Ajax. and to precipitate jquery (a few small demos). This chapter is about learning how to use jquery, and the next section is small combat. haha ~ refueling.

jquery (a) The first knowledge of jquery, the simple use of jquery.