JQuery 笔记

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

1. Call JQFunction after the document is loaded

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

2. When $ has conflict, use another variable

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

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

3.2 By DOM ID
$("#sampleText").html("Hi");

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

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

3.5 More Filter (Starts with ':'
3.5.1 :first
// 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();

3.5.2 :text , :checked, :disabled and :selected
TODO: give sample

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

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

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

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


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

5.1 .hover()
Use .hover(mousedownFn(), mouseupFn() ) replace mousedown() and mouseup()

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

5.3 .html() .text()
.html() innerHtml()
.text() innerTest()

5.4 .data()
A method to store a data Map to a element

5.5 CSS Control
.addClass("classname")
.hasClass("classname")
.removeClass("classname")

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

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

6.2 fade effect
fadeTo()

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

6.3 Customized animation
// 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);
});

7 Ajax
7.1 Post and get Ajax

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);
});