标签:
七、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();
标签:
原文地址:http://www.cnblogs.com/fanfan-nancy/p/5697616.html