学习记录3

学习内容：
1.HTML、CSS、Bootstrap练习（构建jQuery练习平台）
2.jQuery

1.Bootstrap 有一个 class 属性叫做 well，它的作用是为设定的列创造出一种视觉上的深度感。
每一个指定元素的 id 都是唯一的，并且在每个页面中只能使用一次。
Target用于选中想要的元素，也可以使用jQuery并通过每个按钮各自唯一的 id 来标识出它们。

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

效果如图即是jQuery的一个练习用平台：

2.在之前构建的代码基础之上，加入script元素，在其中添加$(document).ready(function() { })；这样就可以在其中添加function，从而被浏览器来选择，操作元素的改变。

3种选择器：元素选择器：$("button")、class选择器：$(“.btn”)、id选择器：$("#target1")。引入jQuery库和Animate.css库后，通过$(“button”)选中按钮；$(".well")选中带有well的class的元素，用addclass添加两个class：animated和shake；用$(“#target3”)选中id属性为target3的元素。移除class属性的代码为：。removeclass

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");

  });
</script>

jQuery还可以：

1.改变CSS样式：通过.css改变target1的字体颜色为red
注意属性color和值red在括号中要用逗号隔开。

    $("#target1").css("color","red");

2.通过.prop调整元素的属性
使target1变为不可选

$("#target1").prop("disabled","true");

3.改变元素标记本身
通过.html()可以添加HTML标签和文字到元素，而元素之前的内容都会被方法的内容所替换掉。
em标签用于强调

 $('#target4').html("<em>#target4</em>");

4.移除页面上的HTML元素
通过.remove移除target4

$("#target4").remove()

5.把选中的元素加到其他元素中
将target2选中，通过.appendTo移除到right-well中

$("#target2").appendTo("#right-well");

6.拷贝元素
通过.clone.appendTo将target5拷贝并移到left-well中
两个jQuery方法可以连用

$("#target5").clone().appendTo("#left-well");

HTML中许多HTML元素都有子元素，每个子元素都从父元素那里继承了一些属性。通过.children()和.parent()访问子元素和父元素

$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "orange");

当然还可以用CSS选择器来选取元素，
target:nth-child(n)：n为CSS选择器按照索引顺序(从1开始)选择目标元素的子元素。
注意：jQuery里的索引是从0开始的，也就是说：:odd 选择第2、4、6个元素，但是target#2的索引为1，target#4的索引为3，target6索引为5。

 $(".target:nth-child(2)").addClass("animated bounce");
 $(".target:even").addClass("animated shake");
 $(".target:odd").addClass("animated fadeOut");