freeCodeCamp-jQuery

document ready

• 在HTML最上方加入script元素，其中再加上document ready函数。这个函数的作用是：script里的函数会在浏览器加载了这张网页之后执行，而不是还没加载网页就执行。

<script>
  $(document).ready(function(){

  });
</script>

选择HTML元素–使用元素名称

• jQuery总是以$符号开头
• $()中的内容是选择的页面里的html元素名称
• 后面调用的函数是对于选中的元素进行
• addClass函数为元素增加了class
• 注意一句话结束加分号，选择元素加引号

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
  });
</script>

选择HTML元素–使用元素的class

• $(“.classname”)来选择这个class的HTML元素

<script>
  $(document).ready(function() {
    $(".well").addClass("animated shake");
  });
</script>

选择HTML元素–使用元素的id

• $(“#id”)来选择这个id的HTML元素

<script>
  $(document).ready(function() {
    $("#target3").addClass("animated fadeOut");
  });
</script>

jQuery中的function类型

• addClass 为元素添加class
• removeClass 为元素去掉class
• css 为元素修改CSS
• prop 为元素修改属性
• html 为元素里面修改内容（就是选中元素下的所有内容都消失，替换成你新写的内容）
• remove 删掉这个元素的所有内容
• appendTo 把选中的元素移动到另一个元素下
• clone 复制一个元素
• parent 找到这个元素的父元素
• children 找到这个元素的所有子元素
• $(“.target:odd”)选择奇数
• $(“.target:nth-child(3)”)选择第三个

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", "true");
    $("#target4").html("<em>#target4</em>");
    $("#target5").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color","orange");
    $(".target:nth-child(2)").addClass("animated bounce");
    $(".target:even").addClass("animated shake");
  });
</script>