jQuery--效果和遍历

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

 

八、jQuery中css设置和盒子模型。查找API中css中可以设置的属性，记住格式即可。熟悉addClass方法。

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

 

九、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是排除标准。

 

十、jQuery扩展

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

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

　　3.$.noConflict();