zoukankan      html  css  js  c++  java
  • 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();

  • 相关阅读:
    Atomikos 中文说明文档(周枫翻译) 东师理想
    flex手机项目嵌套html页面和html页面播放声音文件 东师理想
    sql server 创建 ASPState 数据库方法 东师理想
    Android中文API(博客翻译版转载) 东师理想
    sql server导入excel和多表关联更新 东师理想
    关于CSS样式zindex在firefox和平板电脑中的问题 东师理想
    使用Flash builder 4.6创建Flex手机项目读取XML文件方法 东师理想
    android动画切换(滑屏效果)实例 东师理想
    一个障碍,就是一个超越自我的契机(转载)
    多去阅读思维训练类的书籍(转载)
  • 原文地址:https://www.cnblogs.com/fanfan-nancy/p/5697616.html
Copyright © 2011-2022 走看看