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

响应式页面内容

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

视觉深度框（小）

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

jQ playground搭建

  
jQuery Playground
  

    

      
#left-well
      

        #target1
        #target2
        #target3
      
    
    

      
#right-well
      

        #target4
        #target5
        #target6
      
    
  

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

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

框架搭建

一些语法

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

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

.addClass

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

.removeClass

如remove掉target2上的btn-default类

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

.css

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

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

.prop

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

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

.html

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

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

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