JQuery 笔记

[b][/b][b]Best Practise for JQuery:[/b]

[b]1. Call JQFunction after the document is loaded[/b]

$(document).ready(function(){
myJQFunction();
});

[b]2. When $ has conflict, use another variable[/b]

j$ = jQuery.noConflict();
j$("div").addClass("a");

[b]3. Select syntax (Control will affact to every tag):[/b]
[b]3.1 By HTML Tag[/b]
$("div").show();

[b]3.2 By DOM ID[/b]
$("#sampleText").html("Hi");

[b]3.3 By DOM ClassName (CSS class name)[/b]
$(".redBack").css("background", "#ff0000");

[b]3.4 Combine Selection (Tag+ID+Class)[/b]
$("p, span, div, #sampleText, ".redBack").hide();

[b]3.5 More Filter (Starts with ':'[/b]
[b]3.5.1 :first[/b]
// hide every <p> tag
$("p").hide();

// hide the first element on a page, no matter its HTML tag
$(":first").hide();

// hide only the first <p> tag on a given page.
$("p:first").hide();

[b]3.5.2 :text , :checked, :disabled and :selected[/b]
TODO: give sample

[b]4 Looping[/b]
[b]4.1 each[/b]
var increment = 1;
$("p").each(function(){
$(this).text(increment + ". " + $(this).text());
increment++;
});

[b]4.2 Pick up one(sub-set) from array[/b]
$("p").eq(2).hide();

$("p").slice(2,5).hide();

[b]4.3 next()[/b]
Next element in the array
$(".validate:text").each(function(){
if ($(this).val()=="")
$(this).next().html("This field cannot be blank");


[b]5. jQuery Event[/b]
They are pretty much similar to DOM event
blur(),change(), click(), dblclick(), error(), focus(), keydown(), , keyup(), keypress(),select() and submit()

[b]5.1 .hover()[/b]
Use .hover(mousedownFn(), mouseupFn() ) replace mousedown() and mouseup()

[b]5.2 .attr()[/b]
Use .attr() to get the tag attribute
window.parent.frames['content'].location = $(this).attr("id");
$("img").attr("src", "myimage.jpg");

[b]5.3 .html() .text()[/b]
.html() innerHtml()
.text() innerTest()

[b]5.4 .data()[/b]
A method to store a data Map to a element

[b]5.5 CSS Control[/b]
.addClass("classname")
.hasClass("classname")
.removeClass("classname")

[b]6. Effect[/b]
[b]6.1 show() and hide() [/b]
Hide/Show control on the element

$("#picture").hide().next().hide();
$("#showPicture").click(function(){
$("#picture").show("fast", function(){
$("#picture").next().show();
});
});

[b]6.2 fade effect[/b]
fadeTo()

$(":input").fadeTo("fast", .60);
$(":input").focus(function(){
$(this).fadeTo("fast", 1);
});
$(":input").blur(function(){
$(this).fadeTo("fast, .60);
});

[b]6.3 Customized animation[/b]
// when the button is clicked, make the div with an ID of "movingDiv"
// have the custom animation provided.
$("#myButton").click(function(){
$("#movingDiv").animate({
// will increase the width, opacity, and fontSize of "movingDiv"
// and do it in 5 seconds
width: 700;
opacity: 0.5;
fontSize: "18px";
}, 5000);
});

[b]7 Ajax[/b]
[b]7.1 Post and get Ajax[/b]

post( URL , {data} , callBack());

// here's how simple the Ajax calls are in jQuery
// This is a post function
$.post("myTest.php", {}, function(data){
$("p").text(data);
});

$.get("myTest.php", {}, function(data){
$("p").text(data);
});