JQuery entry-level learning notes and source code

This week, the company's technical lecture is my turn. I am going to talk about the popular jQuery. The following is an outline. The key is to look at custom. js, the source code has been uploaded, and "#" in the program is used in segments. You can cancel the comment according to each segment and find the corresponding id or class name to view the effect. JQuery is really good, and some results even make me scream. Various plug-ins can achieve what you like. This method lays the foundation for the popularity of jQuery, just like the crocs shoes. JQuery also achieves the goal of separating behavior from structure.

Summary:
1. Install
2. Hello jQuery
3. Find me: Use selector and event
4. Rate me: Use AJAX
5. animate me (Let me be vivid): Using FX (jQuery FX, the second sub-library after jQuery UI, emphasizing the animation effect rather than the UI appearance module, including the disappearance and appearance of objects; color, size, and position conversion .)
6. Sort me (order me): Use the tablesorter plug-in (Table sorting)

Custom. js

The Code is as follows:

$ (Document). ready (function () {// # abbreviated method: (document). ready can be removed.
# Set "hello world" for all "" clicks"
$ ("A"). click (function (){
Alert ("Hello world ");
});

# Idis the increment orderedlistparts. The classname is increment redparts, which is defined in core.css.
$ ("# Orderedlist"). addClass ("red ");

# Id is the last li in "orderedlist". The color changes when the mouse passes.
$ ("# Orderedlist li: last"). hover (
Function (){
$ (This). addClass ("green ");
},
Function (){
$ (This). removeClass ("green ");
}
);

# Find () allows you to search for conditions in the selected element, so $ ("# orderedlist ). find ("li") is like $ ("# orderedlist li. The each () method iterates all the li resources and can perform more processing on this basis.
# Most methods, such as addClass (), can use their own each (). In this example, html () is used to obtain the html text of each li, append some text, and set it to the html text of li.
$ ("# Orderedlist"). find ("li"). each (function (I ){
Certificate (this).html((this).html () + "BAM! "+ I );
}
);

# Clear all input values
$ ("# Reset"). click (function (){
$ ("Input"). attr ("value ","");
});

# This code Selects all the li elements and removes the li elements with UL sub-elements. After refreshing the browser, all the li elements have a border, except the li element of the ul sub-element.
# Pay Attention to the convenient css () method, and remind you to test the observed effect, for example, change the CSS style? What about a CSS style?
$ ("Li"). not ("[ul]" ).css ("border", "1px solid black" ).css ("color", "red ");

# This Code adds a background color to all links with the name attribute. [Note: In jQuery1.2 and later versions, the @ symbol should be removed]
$ ("A [@ name]"). background ("# eee ");

# You may need to select a link with the href attribute, which may have different href understandings in different browsers, So we partially match ("* = ") ("= ")
$ ("A [@ href * = bot]"). click (function (){
Alert ("hello world 2 ");
});

# Here we use some chained expressions to reduce the amount of code, and it looks more intuitive and easier to understand. Like '# faq', it is selected only once. Using the end () method, the first find () method will end (undone ),
# So we can continue to find ('dt ') later, without writing $ (' # faq '). find ('dt ').
# In the click event, we use $ (this ). next () to find the next dd element under dt, which allows us to quickly select the answer to the question being clicked.
$ ('# Faq'). find ('dd'). hide (). end (). find ('dt'). click (function (){
Var answer = $ (this). next ();
If (answer. is (': visable ')){
Answer. slideUp ();
} Else {
Answer. slideDown ();
}
});

# In addition to the element of the same level, you can also select the element of the parent level. When you move the user's mouse over a link in a certain segment of the article, its parent element is highlighted in this section of the article. Try this:
$ ("A"). hover (function (){
$ (This). parents ("p"). addClass ("highlight ");
}, Function (){
$ (This). parents ("p"). removeClass ("highlight ");
});

# AJAX first attempt. First, we need some server code. In this example, An ASPX file is used to read the rating parameter and return the total rating times and average number.
// Generate markup
Var ratingMarkup = ["Please rate:"];
For (var I = 1; I <= 5; I ++ ){
RatingMarkup [ratingMarkup. length] = "" + I + ""; // ratingMarkup is an array
}
// Add markup to container and applier click handlers to anchors
$ ("# Rating "). append (ratingMarkup. join ('')). find (""). click (function (e) {// use the join method to return a string that connects all elements of the array with the specified symbol
E. preventDefault (); // This method notifies the Web browser not to perform the default action associated with the event (if such an action exists ).
// Send requests
$. Post ("rate. aspx? Rating = "+ functions (this).html (), {}, function (xml) {// here {} is used for a single position
// Format result
Var result = [
"Thanks for rating, current average :",
$ ("Average", xml). text (),
", Number of votes :",
$ ("Count", xml). text ()
];
// Output result
$ ("# Rating" pai.html (result. join (''));
});
});

# Show () and hide () can be used for some dynamic effects. Scaling Effect.
$ ("A"). toggle (function () {// toggle bidirectional Switch
$ (". Stuff"). hide ('low ');
}, Function (){
$ (". Stuff"). show ('fast ');
});

# It can be combined with animate () to create some effects, such as a sliding effect with a gradient
$ ("A"). toggle (function (){
$ (". Stuff"). animate ({
Height: 'hide ',
Opacity: 'hide'
}, 'Low ');
}, Function (){
$ (". Stuff"). animate ({
Height: 'show ',
Opacity: 'show'
}, 'Low ');
});

# Use the tablesorter plug-in (Table sorting)
# Almost all features are used as follows: First include the js file of the plug-in, and then use the plug-in-definition method on some elements. Of course, some Parameter options can be configured.
$ ("# Large"). tableSorter ();

# This table can also add some highlighted effects. We can make such a background color (zebra line) Effect
$ ("# Large"). tableSorter ({
StripingRowClass: ['odd', 'even'], // Class names for striping supplyed as a array.
StripRowsOnStartUp: true // Strip rows on tableSorter init.
});

});

Jquery-starterkit.rar