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);

  • 相关阅读:
    949. Largest Time for Given Digits
    450. Delete Node in a BST
    983. Minimum Cost For Tickets
    16. 3Sum Closest java solutions
    73. Set Matrix Zeroes java solutions
    347. Top K Frequent Elements java solutions
    215. Kth Largest Element in an Array java solutions
    75. Sort Colors java solutions
    38. Count and Say java solutions
    371. Sum of Two Integers java solutions
  • 原文地址:https://www.cnblogs.com/Gbeniot/p/4097385.html
Copyright © 2011-2022 走看看