jQuery 实例总结

作者: hx永恒之恋 | 来源:发表于2016-12-13 15:23 被阅读36次

    jQuery 语法实例

    $(this).hide()
    演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素。
    <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){
    <code> $(this).hide()
    });
    });`
    </script>
    </head>


    <body>
    <button type="button">Click me</button>
    </body>


    </html>
    </code>

    $("p").hide()
    演示 jQuery 的 hide() 函数,隐藏所有 < p> 元素。
    $(".test").hide()
    演示 jQuery 的 hide() 函数,隐藏所有 class="test" 的元素。
    $("#test").hide()
    演示 jQuery 的 hide() 函数,隐藏 id="test" 的元素。

    例子解释

    Hiding - Sliding- Fading

    jQuery fadeOut()
    演示简单的 jQuery fadeout() 函数(按时间淡出)。
    jQuery hide()
    演示简单的 jQuery hide() 函数。
    Hide explanations
    演示如何隐藏部分文本。

    $(document).ready(function(){
      $(".ex .hide").click(function(){
        /* 在类名为ex的div中,点击其中一个类名为hide的元素,
           则隐藏该div视图,另一个同样包含类名为hide元素的
           div不受影响,除非也被点击。*/
        $(this).parents(".ex").hide("slow");
      });
    });
    

    Slide panel
    演示简单的 Slide Panel 效果。

    $(document).ready(function(){
      $(".flip").click(function(){ // 点击类名为filp的元素(点击奇数次展开,偶数次收缩)
         $(".panel").slideToggle("slow"); // 向下展开显示类名为panel的元素
      });
    });
    

    jQuery animate()
    演示简单的 jQuery animate() 函数。

    例子解释

    HTML 操作
    改变 HTML 元素的内容

    $("p").html("W3School");
    

    向 HTML 元素追加内容
    在 HTML 元素之后追加内容
    例子解释

    CSS 操作
    改变 HTML 元素的 CSS 属性
    改变多个 CSS 属性
    获得元素的 CSS 属性
    例子解释

    AJAX 和 jQuery
    使用 $(selector).load(url) 来改变 HTML 内容
    使用 $.ajax(options) 来改变 HTML 内容
    例子解释

    相关文章

      网友评论

        本文标题:jQuery 实例总结

        本文链接:https://www.haomeiwen.com/subject/uetbmttx.html