jQuery--效果和遍歷

7、jQuery效果

　　(1)jQuery隱藏和顯示 

//隱藏
$("#hide").click(function(){
    $("p").hide(1000);
});
//顯示
$("#show").click(function(){
    $("p").show(1000);
});
//隱藏/顯示
$("#toggle").click(function(){
    $("p").toggle(1000);
});

　　(2)jQuery淡入淡出fade

//淡入
$("#in").on("click",function(){
    $("#div1").fadeIn(1000);
    $("#div2").fadeIn(1000);
    $("#div3").fadeIn(1000);
});
//淡出
$("#out").on("click",function(){
    $("#div1").fadeOut(1000);
    $("#div2").fadeOut(1000);
    $("#div3").fadeOut(1000);
});
//淡入/淡出
$("#toggle").on("click",function(){
    $("#div1").fadeToggle(1000);
    $("#div2").fadeToggle(1000);
    $("#div3").fadeToggle(1000);
});
//淡化
$("#to").on("click",function(){
    $("#div1").fadeTo(1000,0.3);
    $("#div2").fadeTo(1000,0.5);
    $("#div3").fadeTo(1000,0.7);
});

　　(3)jQuery效果 滑動 slideDown,slideUp,slideToggle.用法如上。

　　(4)jQuery回調

$("button").click(function(){
    $("p").hide(1000，function(){
    alert("結束，這個方法被稱爲回調");

    $("p").css("color","red").slideUp(1000).slideDown(1000);
});
});

 

8、jQuery中css設置和盒子模型。查找API中css中能夠設置的屬性，記住格式便可。熟悉addClass方法。

　　在盒子模型中，要理解height,innerHeight,outerHeight,width,innerWidth,outerWidth所包含的範圍，outerHeight=innerHeight+（margin/0）+border =（Height+padding）+（margin/0）+border.

 

9、jQuery遍歷和過濾

　　(1)jQuery遍歷分爲向上遍歷、向下遍歷、同級遍歷

　　　　向下遍歷：children(),find().children只能選擇兒子輩，參數可選，而find能夠查找全部的下級，參數必　要。

　　　　向上遍歷：parent(),parents(),parentUntil().其中parent只招上一級的元素，parents是全部上級。即直屬上司和全部上司的區別。而parentUntil的區別在於能夠定義上司的範圍。

　　　　同級遍歷：sibings(),next(),nextAll(),nextUntil(),prev(),preAll(),preUntil().其中sibings是修改掉除他以外的全部同級元素，next是他的同桌，nextAll是同桌和同桌的同桌，nextUntil向下的區間範圍。後面的幾個方法是方向相反而已。

　　(2)jQuery過濾 first(),last(0,eq(),filter(),not().first和last,eq顧名思義。而filter方法篩選一下，not是排除標準。

 

10、jQuery擴展

　　1.$.myjq=function(){alert("hello")};$.myjq();

　　2.$.fn.myjq=function(){$(this).text("hello");};$("div").myjq();

　　3.$.noConflict();