zoukankan      html  css  js  c++  java
  • jQuery基础知识--选择器与效果

    $(this).hide()-----隐藏当前元素
    $("p").hide()------隐藏所有段落
    $(".test").hide()--隐藏所有class="test"的元素
    $("#test").hide()--隐藏所有id="test"的元素

    文档就绪函数
    $(document).ready(function() {
        ---------jQuery function go here------------
    })


    jQuery选择器
        选择器允许对元素组或单个元素进行操作。

    学习jQuery选择器的关键是学习jQuery选择器如何准确地选取你希望应用效果的元素
    jQuery元素选择器和属性选择器允许你通过签名、属性名或内容对HTML元素进行选择。
    选择器允许你对HTML元素组或单个元素进行操作。
    在HTML DOM术语中:
    选择器允许你对DOM元素组或单个DOM节点进行操作。

    jQuery元素选择器
        jQuery使用CSS选择器来选取HTML元素
        $("p")选取<p>元素
        $("p.intro")选取所有class="intro"的<p>元素
        $("p#demo")选取所有id="demo"的<p>元素
    jQuery属性选择器
       jQuery使用XPath表达式来选择带有给定属性的元素。
       $("[href]")选取所有带有href属性的元素。
       $("[href='#']")选取所有带有href值等于"#"的元素。
       $("[href!='#']")选取所有带有href值不等于"#"的元素。
       $("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。
    jQuery CSS选择器
        jQuery CSS选择器可用于改变HTML元素的CSS属性。


    jQuery效果
       1.jQuery隐藏/显示
            hide()----隐藏被选的元素
            show()----显示被选的元素
            toggle()--对被选元素进行隐藏和显示的切换
       2.jQuery淡入淡出
            fadeIn()------逐渐改变被选元素的不透明度,从隐藏到可见--$(selector).fadeIn(speed,callback);
                可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
                可选的 callback 参数是 fading 完成后所执行的函数名称。
            fadeOut()-----逐渐改变被选元素的不透明度,从可见到隐藏--$(selector).fadeOut(speed,callback);
            fadeToggle()--可以在 fadeIn() 与 fadeOut() 方法之间进行切换。--$(selector).fadeToggle(speed,callback);
            fadeTo()------把被选元素逐渐改变至给定的不透明度--$(selector).fadeTo(speed,opacity,callback);
                必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
                fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
                可选的 callback 参数是该函数完成后所执行的函数名称。
       3.jQuery滑动
            slideDown()----用于向下滑动元素--$(selector).slideDown(speed,callback);
                可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
                可选的 callback 参数是滑动完成后所执行的函数名称。
            slideUp()------用于向上滑动元素--$(selector).slideUp(speed,callback);
            slideToggle()--可以在 slideDown() 与 slideUp() 方法之间进行切换--$(selector).slideToggle(speed,callback);
       4.jQuery动画
            jQuery animate()方法允许创建自定义的动画。
            语法:
                $(selector).animate({params}, speed, callback);
                必须的params参数定义形成动画的CSS属性
                可选的speed参数规定效果的时长。它可以取以下值:"slow"、"fast"或毫秒
                可选的callback参数是动画完成后所执行的函数名称。


       5.jQuery stop()
            stop()方法用于在动画或效果完成前对它们进行停止。
            stop()方法适用于jQuery效果函数,包括滑动、淡入淡出和自定义动画。
            语法:
                $(selector).stop(stopAll, goToEnd);
                可选的stopAll参数规定是否应该清除动画队列。默认是false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
                可选的goToEnd参数规定是否立即完成当前的动画。默认是false。

       6.jQuery Callback
            Callback函数在当前动画100%完成之后执行。
            语法:
                $(selector).hide(speed, callback)
                callback参数是一个在hide操作完成后被执行的函数。
            如果您希望在一个涉及动画的函数之后来执行语句,请使用 callback 函数。
       7.jQuery Chaining
            通过jQuery,你可以把动作/方法链接起来。
            Chaining允许我们在一条语句中允许多个jQuery方法(在相同的元素上)。
            例如:$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
            或 $("#p1").css("color", "red")
                       .slideUp(2000)
                       .slideDown(2000);

  • 相关阅读:
    css圆,背景,img填满等样式
    MySQL双日志
    MySQL分层和查询数据的流程
    ZJNU 2345
    ZJNU 2342
    ZJNU 2340/2341/2343
    ZJNU 2235
    ZJNU 2226
    ZJNU 2212
    ZJNU 2208
  • 原文地址:https://www.cnblogs.com/dreamfree/p/4014509.html
Copyright © 2011-2022 走看看