Jquary与Bootstrap散记

Jquary与Bootstrap仅做学习所用

Bootstrap

.col-xs-                                <768px

.col-sm-                               <992px

.col-md-                               <1200px

.col-lg-                                >=1200px

Bootstrap排版类

.lead               使段落突出显示

.small              设定小文本

.text-left           设定文本左对齐

.text-center        设定文本居中对齐

.text-right         设定文本右对齐

.text-justify        文本对齐且超出屏幕部分自动换行

.text-nowrap       段落中超出屏幕部分不换行

.text-lowercase     设定文本小写

.text-uppercase     设定文本大写

.text-capitalize      设定单词首字母大写

.initialism           在<abbr>中以小号字体展示，且可以将小写字母转换为大写字母

.blockquote-reverse 设定引用右对齐

.list-inline          所有列表项放置在同一行

 

Bootstrap代码显示 

<code>设置元素内显示代码

<pre>设置一个独立的元素块显示代码

&lt;(<)前尖括号，&gt;(>)后尖括号，用于写标签

例：  <pre>

          &lt;h1&gt;开头&lt;h1&gt;            <h1>开头</h1>

      </pre>

 

Bootstrap表格

<table>        为表格添加基础样式

<thead>        表格标题行的容器元素(类似于html中的<tr>)

<tbody>        表格主体中的表格行的容器元素(类似于html中的<tr>)

<tr>            单行上的表格单元的容器元素

<td>            默认的表格单元格

<th>            特殊的表格单元格

<caption>       对容器的描述或总结

 

.table                   为任意<table>添加样式

.table-striped            在<tbody>内添加斑马线形式的条纹

.table-bordered          为所有表格的单元格添加边框

.table-hover             在<tbody>内的任一行启用鼠标悬停状态

.table-condensed         让表格更加紧凑

.active               将悬停的颜色应用在行或这单元格上

.success              表示成功的操作

.info                 表示信息变化的操作

.warning             表示一个警告的操作

.danger              表示一个危险的操作

 

Bootstrap表单

垂直(默认表单)

<form>中添加role=”form”

<div>中添加class=”form-group”

<input>，<textarea>，<select>中添加class=”form-control”

 

内联表单(全在一行)

<form>中添加class=”form-inline”

 

水平表单

<form>中添加class=”form-horizontal”

<label>中添加class=”control-label”

 

type=”checkbox”         复选框

type=”radio”             单选框

type=”checkbox-inline”   多个复选框在一行

type=”radio-inline”       多个单选框在一行

 

Bootstrap按钮

.btn                   基本样式

.btn-default            默认/标准样式

.btn-primary           原始按钮样式(未被操作)

.btn-success            表示成功的样式

.btn-info               用于要弹出信息的按钮

.btn-warning           需要谨慎操作的按钮

.btn-danger             表示危险的操作按钮

.btn-link                让按钮看起来像一个链接

.btn-lg                  大按钮

.btn-sm                 小按钮

.btn-xs                  超小按钮

.btn-block               块级按钮

.active                  按钮被点击后的样式

.disabled                禁用按钮

 

Bootstrap图片

.img-rounded  为图片添加border-radius: 6px;

.img-circle      为图片添加border-radius:50%;

.img-thumbnail    为图片添加内边距和一个灰色的边框

.img-responsive    图片可以扩展到父元素，更好的实现响应式

 

文本样式(文字颜色)

.text-muted    .text-primary    .text-success     .text-info    .text-warning

.text-danger

 

文本背景颜色

.bg-primary   .bg-success   .bg-info   .bg-warning    .bg-danger

 

为<div>设置位置

.pull-left         元素浮动到左边

.pull-right        元素浮动到右边

.center-block     设置元素为display:block并居中显示

.clearfix          清除浮动

.show            强制元素显示

.hidden          强制元素隐藏

.sr-only          除了屏幕阅读器外，其他设备上隐藏元素

.sr-only-focusable 在元素获取焦点时显示

.text-hide        将页面元素所包含的文本内容换为背景图

.close            显示关闭按钮

.caret            显示下拉式功能

Bootstrap响应式使用工具

Jquary

基本操作

$(selector).action()

$定义jquery，selector获取元素，action()对元素的操作。

 

jquery事件          

click           点击事件

dblclick        双击事件

mouseenter    鼠标移入元素

mouseleave    鼠标移出元素

keypress       键按下过程中

keydown       键被按下

keyup         键被松开

submit         提交时

change        元素值被改变时触发

focus          获得聚焦时

blur           失去聚焦时

load           下载完毕后

resize          浏览器窗口大小改变时    

scroll          当用户滚动指定元素时

隐藏与显示

hide()隐藏，show()显示，toggle()显示与隐藏切换

淡入淡出

fadeIn()淡出(出现)，fadeOut()淡入(消失)，fadeToggle()淡入与淡出切换，fadeTo()元素变淡

滑动

slideDown()滑出，slideUp()滑入，slideToggle()滑入与滑出切换。

jquery创建动画

animate

例：

$(“button”).click(function(){

    $(“div”).animate({

         left:’250px’;                           当button(按钮被点击时)，触发

         opacity:‘0.5’;                          div做出相应的动画。可以同时

         height:‘150px’;                      设置多个属性的变化。

         width:‘150px’;

     });

});

stop()用于停止动画

jquery允许用链将动画串联

例：$(“button”).click(function(){

              $(“#p1”).css(“color”,”red”).slideUp(2000).slideDown(2000);

});

     button(按钮)被点击时，p1元素先变红，滑上用时2秒，滑下用时2秒。

捕获

text()返回元素文本内容                  $(“#text”).text()

html()返回元素内容(包括html的标签)     $(“#text”).html()

val()返回表单字段内的内容               $(“#text”).val()

attr()返回元素属性                       $(“#text”).attr(“href”)

设置元素    例：  $(“#text”).text(“Hello world”);   将text中的内容改为Hello world   html()和val()一样。

设置attr     例：  $(“#text”).attr(“href”,”http://www.runoob.com/jquery”);

添加元素

append()  在元素的结尾插入内容       例：$(“p”).append(“<p>text</p>”)  

prepend()  在元素的开头插入内容           在p元素之后加入text

after()     在元素之后插入内容

before()    在元素之前插入内容

删除元素

remove()      删除被选元素           例：(“#div2”).remove(.a1);

                                         删除class为a1的元素

empty()       删除被选元素的子元素   例：(“#div1”).empty();

获取并设置CSS

addClass()        添加元素CSS一个或多个类

removeClass()     删除元素CSS一个或多个类

toggleClass()      对元素CSS添加与删除间切换

例：$(“button”).click(function(){

        $(“h1,h2,p”).addClass(“blue”);

        $(“div”).addClass(“important”);

})

CSS样式是提前写好后在添加删除

设置改变CSS样式

$(“p”).css({“background-color”:”yellow”,”font-size”:”200%”});

jquery尺寸

parent()返回元素的上一级元素            $(“span”).parent();

parnets()返回元素的所有上级元素       $(“span”).parents();

parnetsUntil()返回两者之间所有元素   $(“span”).parentsUntil(“div”);  

                                                              返回span元素上级到div元素的所有父级元素

返回后代元素children()，find()。

$(“div”).children();          返回所有子级元素

$(“div”).children(“p.1”);     返回div中class为1的p元素

$(“div”).find(“span”);        返回属于div后代的所有span元素

$(“div”).find(“*”);       返回div的所有后代

返回同胞元素

siblings()返回被选元素的父级元素下的所有同胞元素。

next()返回被选元素的下一个同胞元素。        

nextAll()返回被选元素后所有同一父级元素的同胞元素。

nextUntill()返回介于两个元素之间的所有同胞元素。

Pre()，preAll()，preUntill()方法的工作方式与上面三个类似，只不过方向相反

例： $(“h2”).siblings();           返回与h2同胞的所有元素。

       $(“h2”).siblings(“p”);      返回h2同胞元素中所有p元素。

       $(“h2”).nextUntil(“h6”);  返回h2到h6的所有同胞元素。

元素的过滤

first()返回被选元素的首个元素。

last()返回被选元素的最后一个元素。

eq()返回被选元素带有指定索引号的元素。

filter()返回符合标志的元素。

例：   $(“div p”).first();      返回首个div中的第一个p元素。

          $(“div p”).last();       返回最后一个div的最后一个p元素。

          $(“p”).eq(2);             返回第三个p元素，因为第一个元素的索引号是0。

          $(“p”).filter(“.url”);   返回p元素中class为url的。

          $(“p”).not(“.url”);     返回p元素中class不为url的。