码迷,mamicode.com
首页 > Web开发 > 详细

jQuery整理2

时间:2016-07-23 00:40:36      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:

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

 

jQuery整理2

标签:

原文地址:http://www.cnblogs.com/fanfan-nancy/p/5697616.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!