JQuery beginners (1): jquery beginners

JQuery beginners (1): jquery beginners

Knowledge description:

The jQuery library is a javascript library file. It writes less than javascript, but does more. Below we will organize some basic knowledge of jQuery for later reading.

I,JQueryLibrary file:

Web: http://jquery.com/download/

JQuery library files are dividedCompressed version (Suffix:. min. js called on Webpage)AndNon-compressed version (Suffix:. js for developers to learn and read)

Note: If you do not want to download the jQuery library file, you can also directly call the jQuery library in Google or Microsoft CDN, as shown below:

Google CDN:

<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">

</Script>

Microsoft CDN:

<Script src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> </script>
Directly calling Google or Microsoft CDN has one advantage:

When many users access other sites, many jQuery library files that have been loaded by Google or Microsoft. When they access your site again, they can directly load jQuery files from the cache, accelerate access. At the same time, when a majority of CDN users send requests to them, they will first return responses from the nearest server, which can also increase the loading speed.

II,Knowledge Point sorting:

1. jQuery is a javascript library file, so it is also called using the <script> label on the page, as follows:

<Scripttype = "text/javascript" src = "/JS1/js/jquery-2.1.4.min.js"> </script>

2. jQuery library file calls are generally placed in the

3. jQuery Functions

3.1Document ready functions: All functions must be performed in this function to prevent execution errors before full loading.

$ (Document). ready (function (){

}); // Note: end;

4. jQuery Selector

The jQuery element selector and attribute selector allow you to select HTML elements by Tag Name, attribute name, or content.

The selector allows you to select an element group or a single element.

Terms in html dom:

The selector allows you to select a DOM element group or a single DOM element.

4.1Element selector (Note: The selected element is marked)

$ ("P") // select all P tag Elements

$ ("P. one") // select the P Tag Element of class = "one"

$ ("P # one") // select the P Tag Element with id = "one"

4.2Attribute selector (Note: All attributes are in "[]"), and the attribute value is''

The attribute selector uses XPath to select elements with this attribute.

$ ("[Href]") // select all elements with the href attribute

$ ("[Href = '#']") // select all elements with the href attribute and the href value is #.

$ ("[Href! = '#'] ") // Select all elements with the href attribute but the href value is not equal #.

$ ("[Href $ = '.jpg ']") // select all elements with href and whose href value ends with .jpg.

4.3 cssSelector (optional optional element ).css ("attribute", "value ");)

You can use the css selector to change the CSS style of the selected element.

((“P”).css ("background-color", "red"); // modify the background color of the P Tag Element to red.

4.4 Other selectors

$ ("Ul li: first") // select the first li element in each ul label

$ ("Div # one. head") // select the class = "head" element in the div with id = "one"

JQueryOther selector links:

Http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

III,JQueryEvent Functions

1,Element click Function

$ ("Button"). click (function (){********});

2,Functions in a separate file

Put all jQuery functions in a separate js file for ease of sorting

<Scriptsrc = "/JS1/js/myjQuery. js"> </script>

The code in myjQuery. js is:

 

3,JQueryNaming conflict in

Since the names start with $, the following method is generally used to prevent name conflicts between functions named in jQuery and originally encapsulated functions in javascript:

Var jq = jQuery. noConflict ();// You can use jp to replace the $ character to avoid conflict.

4,JQueryOther event Functions

Link: http://www.w3school.com.cn/jquery/jquery_ref_events.asp

IV,JQueryEffect

1,JQueryHide/show

$ ("P"). hide (2000); // The default displayed P tag is automatically hidden 2 seconds later.

$ ("P"). show (2000); // The default hidden P tag is automatically displayed 2 seconds later.

$ ("P"). toggle (2000); // used for hiding and switching between reality (if hidden, it will be displayed after 2 seconds; if it is already displayed, it will be hidden after 2 seconds)

2,JQueryFade in and fade out

$ ("Img # myimg"). fadeIn (2000); // The default hidden image fades in after 2 seconds

$ ("Img # myimg2"). fadeOut (2000); // The default picture will fade out after 2 seconds

$ ("Img # myimg"). fadeToggle (2000); // used for switching between fade in and fade out

$ ("Img # myimg2"). fadeToggle (2000 );

3,JQuerySlide Effect

// Drop-down list

$ ("# Moren"). click (function (){

$ ("# Select span"). slideToggle (500 );

});

4,JQueryAnimation

$ ("Img # myimg"). animate ({height: '300px '}, "slow"); // set the Image height to 300px.

//Set an animation queue for an element

$ ("Button"). click (function (){

$ ("Img # myimg"). fadeIn (2000 );

$ ("Img # myimg2"). fadeOut (2000 );

$ ("Img # myimg"). animate ({height: '300px '}, "slow ");

$ ("Img # myimg"). animate ({marginLeft: '500px '}, "slow ");

});

5,JQueryStop () ()

Stop the animation before it is executed.

$ ("Img # myimg"). stop ();

6,JQueryCallback

Callback Function executed after the animation execution in jQuery

$ ("Img # myimg"). animate ({marginLeft: '500px '}, "slow", function (){

Alert ("the pop-up box is displayed after the animation is executed! ");

});

7,JQueryMethod link in

Set different methods for an element

$ ("Img # myimg"). animate ({width: '400px '}, "slow ")

. SlideUp (2000)

. SlideDown (2000 );