HTML5+CSS+Bootstrap+jQ学习笔记（四）

响应式页面内容

将代码放入带有container-fluid class的 div 元素中可创建响应式板块

视觉深度框（小）

将视觉深度板块嵌入带有长度的div板块中，即可形成视觉深度框

<div class="col-xs-6">
      <div class="well">
      </div>
    </div>

jQ playground搭建

<!--Only change code above this line.-->


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

JQ!方法！（更好的管理类）

在应用jQ之前，需要引入引入了jQuery库和Animate.css库。

框架搭建

<script>
  $(document).ready(function() {
  });
</script>

一些语法

所有jQuery方法都是由$开始的,jQuery通过选择器来选择一个元素的，然后操作元素做些改变。如使用jQ让按钮有回弹效果：用 $(“button”)来选中按钮，然后用.addClass(“animated bounce”)给按钮加CSS class。

使用$选中元素时，应使用$("button")，选中类时要$(".well")，注意加点,选中id属性时要$("#target6")加井号

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

.addClass

使用jQ让按钮有回弹效果：用 $(“button”)来选中按钮，然后用.addClass(“animated bounce”)给按钮加CSS class。

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

.removeClass

如remove掉target2上的btn-default类

$("#target2").removeClass("btn-default");

.css

改变元素的css样式。如将颜色改编为红色

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

.prop

改变元素属性。如使#target1元素不可选

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

.html

添加HTML标签和文字到元素，而元素之前的内容都会被方法的内容所替换掉。

如使用.html来重写文本，并使用<em>标签来强调标题文本:target4被重写为lalala，并强调
$("#target4").html("<em>lalala</em>");

.remove()

使用.remove()移除元素（而非类）。如移除#target4

$("#target4").remove();

.appendTo

把一个元素移到另一个元素组中。如把target2从left-well移到right-well中

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

.clone().appendTo

将一个元素拷贝到另一个元素组中。如复制target5元素加到left-well。

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

.parent().css

操作指定元素的父元素。如让#target1元素的父元素的背景色变成红色。

$("#target1").parent().css("background-color", "red")；

.children().css

操作指定元素的子元素。如让#right-well元素的所有子元素的文本颜色都变成橙色

$("#right-well").children().css("color", "orange")；

$ (".target:nth-child(n)")

允许你按照索引顺序(从1开始)选择目标元素的所有子元素。如给目标元素的第二个子元素添加animated和bounce class

$(".target:nth-child(2)").addClass("animated bounce");

$ (".target:odd")、$ (".target:even")

获取class为target且索引为奇数/偶数的所有元素。jQuery里的索引是从0开始的，也就是说：:odd 选择第2、4、6个元素，因为target#2(索引为1)，target#4(索引为3)，target6(索引为5。如获取索引为奇数的所有元素，也就是target#1(索引为0)，target#3(索引为2)，target5(索引为4)，并给它们添加class animated 和 shake。

$(".target:odd").addClass("animated shake");

$ (“body”)

选择整个body。如给body添加class animated 和hinge（铰链）

$("body").addClass("animated hinge");