jQuery--FreeCodeCamp

作者: 暗黑破坏球嘿哈 | 来源:发表于2016-10-14 05:03 被阅读23次
    1. first add a script
    <script>
      $(document).ready(function() {
    
      });
    </script>
    
    1. . All jQuery functions start with a $ , usually referred to as a dollar sign operator, or as bling.
    2. jQuery often selects an HTML element with a selector , then does something to that element.
    // included both the jQuery library and the Animate.css library
    <script>
      $(document).ready(function() {
    // jQuery's .addClass() function, which allows you to add classes to elements.
    //
    //aimed at HTML element
        $("button").addClass("animated bounce");
        $("button").removeClass("btn-default");
    //aimed at clsss
        $(".well").addClass("animated shake");
    //aimed at ID
    $("#target3").addClass("animated fadeOut");
      });
    </script>
    
    1. change CSS
      jQuery has a function called .css() that allows you to change the CSS of an element.
    $("#target1").css("color", "blue");
    
    1. Disable an element(cant click on it)
    $("button").prop("disabled", true);
    
    1. Change Text Inside an Element
        $("#target4").html("<em>#target4</em>");
    
    1. remove element
        $("#target4").remove();
    
    1. move element by function called appendTo
    $("#target2").appendTo("#right-well");
    
    1. clone an element
    $("#target5").clone().appendTo("#left-well");
    
    1. target the parent/children of element
     $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color", "orange")
    //target on specific child--the second child here
    $(".target:nth-child(2)").addClass("animated bounce");
    //all odd target
    $(".target:odd").addClass("animated shake");
    
    1. can also target on <body>
    1. sum up
    element.addClass
    element.removeClass
    element.css
    element.prop
    element.remove
    element.appendTo
    

    Some new WORDS:

    distracting adj. 分心的;分散注意力的

    相关文章

      网友评论

        本文标题:jQuery--FreeCodeCamp

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