jQuery entry-level study notes and source code_jquery

jQuery is really good and some of the effects even make me scream. Various plug-ins can achieve the effects you like. This method laid the foundation for the popularity of jQuery, just like those crocs shoes. Another advantage of jQuery is that it achieves the purpose of separating behavior from structure.

Summary of content:
1. Installation
2. Hello jQuery
3. Find me: Using selectors and events
4. Rate me: Using AJAX
5. Animate me (make me come alive): Use FX (jQuery FX, the second sub-library after jQuery UI, which emphasizes animation effects rather than the appearance module of the UI, including the disappearance and appearance of objects; color, size, and position transformation.)
6. Sort me: Use tablesorter plug-in (table sorting)

custom.js

Copy code The code is as follows:

$(document).ready(function() { //## Shorthand method: (document).ready can be removed
## Let all "" be filled in when clicked hello world"
$("a").click(function() {
alert("Hello world");
});

## id is "orderedlist" added The class name is "red", which is defined in core.css
$("#orderedlist").addClass("red");

## id is the last li under "orderedlist", It will change color when the mouse passes over it
$("#orderedlist li:last").hover(
function() {
$(this).addClass("green");
},
function() {
$(this).removeClass("green");
}
);

## find() allows you to make conditions on the selected element Find, so $("#orderedlist).find("li") is just like $("#orderedlist li"). The each() method iterates over all li and can do more processing on this basis.
## Most methods, such as addClass(), can use their own each(). In this example, html() is used to get the html text of each li, append some text, and Set to the html text of li.
$("#orderedlist").find("li").each(function(i) {
$(this).html($(this).html() " BAM! " i);
}
);

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

## This code selects all li elements, and then removes li elements with ul sub-elements. After refreshing the browser, all li elements have a border, except for the li element of the ul sub-element.
## Please pay attention to the extremely convenient css() method, and remind you again to test and observe in practice. What about the effect, for example, changing the CSS style? What about adding another 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 above, the @ symbol should be removed]
$("a[@name]").background("#eee");

## You may need Choose a link with a characteristic href attribute. The understanding of href may be inconsistent in different browsers, so we use partial matching ("*=") instead of full matching ("=")
$ ("a[@href*=bot]").click(function() {
alert("hello world 2");
});

## Here we use some Chain expressions reduce the amount of code and look more intuitive and easier to understand. Like '#faq' is only selected once, using the end() method, the first find() method will end (undone),
## So we can continue to find('dt') later without You need to write $('#faq').find('dt') again.
## In the click event, we use $(this).next() to find a dd element immediately below dt, which allows us to quickly select the answer below the clicked question.
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this). next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});

## In addition to selecting elements at the same level, you can also select elements at the parent level. Maybe you want to highlight the parent element of a link in a certain paragraph of the article when the user moves the mouse. Try this:
$("a").hover(function () {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass ("highlight");
});

## First attempt at AJAX. First we need some server-side code. In this example, an ASPX file is used to read the rating parameter and return the total number of ratings and the average.
// 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("a").click(function(e) { //Use the join method to return a character that connects all elements of the array with the specified symbol String
e.preventDefault(); //This method will notify the web browser not to perform the default action associated with the event (if such an action exists)
// send requests
$.post(" rate.aspx?rating=" $(this).html(), {}, function(xml) { //Here you need to use {} to occupy a space
// format result
var result = [
"Thanks for rating, current average: ",
$("average", xml).text(),
", number of votes: ",
$("count", xml). text()
];
// output result
$("#rating").html(result.join(''));
});
});

## Some dynamic effects can be performed using show() and hide(). Telescopic effect.
$("a").toggle(function() { //toggle two-way switch
$(".stuff").hide('slow');
}, function() {
$(".stuff").show('fast');
});

## Can be combined with animate() to create some effects, such as a sliding effect with fade
$("a").toggle(function() {
$(".stuff").animate({
height: 'hide',
opacity: 'hide'
} , 'slow');
}, function() {
$(".stuff").animate({
height: 'show',
opacity: 'show'
} , 'slow');
});

## Use tablesorter plug-in (table sorting)
## Almost all special items are used like this: first include the js file of the plug-in, Then use the methods defined by the plug-in on certain elements. Of course, there are also some parameter options that can be configured
$("#large").tableSorter();

## You can also add some to this table To highlight the effect, we can create such an interlaced background color (zebra crossing) effect
$("#large").tableSorter({
stripingRowClass: ['odd', 'even'], // Class names for striping supplied as a array.
stripRowsOnStartUp: true // Strip rows on tableSorter init.
});

});

jquery- starterkit.rar