jQuery简介

jQuery是一个开源的，JavaScript脚本库。

jQuery体系

部署jQuery开发环境

1. 去网站下载jquery代码

脚下留心：从官方网站同一个版本可以下载2个文件，一个是源文件，一个是压缩文件，我们开发的时候使用压缩文件。

1. 在页面引入jQuery文件

jQuery选择器

jQuery中，所有的操作都要转成jQuery对象进行操作。通过$()将元素转成JQuery对象。

$()=jQuery()

基本选择器

id选择器、class选择器、标签选择器、组合选择器、后代选择器，子类选择器

<style type=”text/css”>

.rose{

background-color:#11e4e1;

}

.indianred{

background-color:#cd5d5c;

}

.red{

color:#F00;

}

</style>

<!—引入jQuery文件–>

<script type=”text/javascript” src=’js/jquery-1.11.3.min.js’></script>

<script type=”text/javascript”>

//但页面加载完成时

$(document).ready(function(e) {

//当按钮点击的时候

$(‘#btn’).click(function(e) {

//$(‘#first’).addClass(‘indianred’); //id选择器

//$(‘.second’).addClass(‘indianred’); //class样式

//$(‘th’).addClass(‘indianred’); //标签选择器

//$(‘#first,.second’).addClass(‘rose’); //组合选择器

//$(‘.second td’).addClass(‘red’); //后代选择器

//$(‘.second>td’).addClass(‘red’); //后代选择器

//$(‘#first+.second’).addClass(‘indianred’); //紧挨着#first的.second

$(‘#first~.second’).addClass(‘indianred’); //#first后所有的.second

});

});

</script>

<table border=’1′ bordercolor=’#000′ align=’center’ width=’500′>

<tr>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</tr>

<tr id=’first’>

<td>张三</td>

<td>男</td>

<td>22</td>

</tr>

<tr class=’second’>

<td>李四</td>

<td>男</td>

<td>33</td>

</tr>

<tr class=’second’>

<td>王五</td>

<td>女</td>

<td>20</td>

</tr>

<tr class=’second’>

<th colspan=”3″><table width=”100%” border=”1″>

<tr>

<td>aa</td>

<td>bb</td>

<td>&nbsp;</td>

</tr>

</table></th>

</tr>

</table>

<input type=”button” value=”点击” id=”btn”>

过滤选择器

1. 位置过滤
   1. :first——第一个元素
   2. :last——最后一个元素
   3. :even——第偶数个元素（下标从0开始）
   4. :odd——第奇数个元素
   5. :eq(index)——第index元素
   6. :gt(index)——大于第index的元素
   7. :lt(index)——小于第index的元素

<style type=”text/css”>

.rose{

background-color:#11e4e1;

}

.indianred{

background-color:#cd5d5c;

}

.red{

color:#F00;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.11.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘tr:first’).addClass(‘indianred’); //第一个tr

//$(‘tr:last’).addClass(‘indianred’); //最后一个tr

//$(‘tr:even’).addClass(“indianred”); //第偶数个元素（下标从0开始)

//$(‘tr:odd’).addClass(“indianred”); //第奇数个元素

//$(‘tr:eq(2)’).addClass(‘indianred’); //第2个元素

$(‘tr:gt(1)’).addClass(‘indianred’); //大于1的元素

$(‘tr:lt(1)’).addClass(‘rose’); //小于1的元素

});

});

</script>

<table border=’1′ bordercolor=’#000′ align=’center’ width=’500′>

<tr>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</tr>

<tr id=’first’>

<td>张三</td>

<td>男</td>

<td>22</td>

</tr>

<tr class=’second’>

<td>李四</td>

<td>男</td>

<td>33</td>

</tr>

<tr class=’second’>

<td>王五</td>

<td>女</td>

<td>20</td>

</tr>

</table>

<input type=”button” value=”点击” id=”btn”>

1. 内容过滤
   1. :contains(‘内容’)，包含指定内容的元素
   2. :has() 包含某个子元素
   3. : not() 去除某个元素
   4. :header 匹配所有标题h1~h6
   5. :empty 匹配所有空元素
   6. :parent 匹配父节点

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘div:contains(“锄禾”)’).addClass(‘indianred’); //包含”锄禾”的div

//$(‘div:has(p)’).addClass(‘indianred’); //含有p标记的div

//$(‘div:has(#first)’).addClass(‘indianred’); //含有#first的div

//$(‘div:not(.no1)’).addClass(‘indianred’); //去除掉.no1的div

//$(‘:header’).addClass(‘indianred’); //选中所有的h1~h6

//$(‘:empty’).addClass(’empty’); //匹配所有空元素

$(‘#first:parent’).addClass(’empty’); //匹配#first的父节点

});

});

</script>

<div class=”first no1″><p>锄禾日当午</p></div>

<div class=”first”><p id=”first”>汗滴禾下土</p></div>

<h1>一级标题</h1>

<h2>二级标题</h2>

<div></div>

<input type=”button” value=”点击” id=”btn” />

1. 子元素过滤选择器
   1. :first-child——父元素的第一个子元素
   2. :last-child——父元素的最后一个子元素
   3. :only-child——父元素只有一个元素的节点
   4. :nth-child(编号,even,odd)——父元素下的指定编号，偶数，奇数的子元素

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘li:first-child’).addClass(‘indianred’); //li父元素的第一个子元素

//$(‘li:last-child’).addClass(‘indianred’); //li父元素的最后一子元素

//$(‘li:only-child’).addClass(‘indianred’); //li父元素只有一个元素的节点

//$(‘li:nth-child(2)’).addClass(‘indianred’); //li父元素下第2个子元素，从1开始

//$(‘li:nth-child(even)’).addClass(‘indianred’); //li父元素下第偶数个子元素

$(‘li:nth-child(odd)’).addClass(‘indianred’); //li父元素下第奇数个子元素

});

});

</script>

<ul>

<li>三国演义</li>

<li>水浒传</li>

<li>西游记</li>

</ul>

<ul>

<li>钢铁侠</li>

<li>超人</li>

</ul>

<ul>

<li>大棒子</li>

</ul>

<input type=”button” value=”点击” id=”btn” />

1. 表单过滤选择器
   1. :input——匹配input, select, textarea，button标签
   2. :text——匹配文本框
   3. :password——匹配密码框
   4. :enabled——可以的元素
   5. :radio——单选按钮
   6. :checkbox——复选框
   7. :checked——选中的元素

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘:input’).addClass(‘indianred’); //表示input,select,textarea，button标签

//$(‘:text’).addClass(‘indianred’); //文本框

//$(‘:password’).addClass(‘indianred’); //密码框

//$(‘:enabled’).addClass(‘indianred’); //可用的元素

//$(‘:radio,:checkbox’).addClass(‘style1’); //单选按钮和复选框

$(‘:checked’).addClass(‘style1’); //选中的元素

});

});

</script>

姓名：<input type=”text” disabled=”disabled”/><br />

密码：<input type=”password” /><br />

性别：<input type=”radio” name=”sex” value=”男” checked=”checked” />男

<input type=”radio” name=”sex” value=”女” />女<br />

爱好：<input type=”checkbox” value=”爬山” checked=”checked” />爬山

<input type=”checkbox” value=”游泳” />游泳 <br />

籍贯：<select>

<option>上海</option>

<option>北京</option>

</select><br />

意见和建议：<textarea></textarea> <br />

<input type=”submit” value=”提交” />

<input type=”reset” value=”重置” />

<input type=”button” value=”点击” id=”btn” />

<button>这也是按钮</button>

1. 属性过滤选择器
   1. [属性]：匹配带有指定属性的元素
   2. [属性=value]：匹配属性=value的元素
   3. [属性!=value]：匹配属性!=value的元素
   4. [属性^=value]：匹配属性以value开头的元素
   5. [属性$=value]：匹配属性以value结尾的元素
   6. [属性*=value]：匹配属性以包含value的元素
   7. [属性1=value1][属性2=value2]：同时具有属性1和属性2的元素

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘:text[class]’).addClass(‘indianred’); //带有class属性的文本框元素

//$(‘[class]’).addClass(‘indianred’); //带有class属性的所有元素

//$(‘:text[name=firstname]’).addClass(‘indianred’); //name=firstname的文本框元素

//$(‘:text[name!=firstname]’).addClass(‘indianred’); //name!=firstname的文本框元素

//$(‘:text[name^=first]’).addClass(‘indianred’); //name属性的值以first开头的元素

//$(‘:text[name$=name]’).addClass(‘indianred’); //name属性的值以name结尾的元素

//$(‘:text[name*=stna]’).addClass(‘indianred’); //name属性中带有stna的元素

$(‘:text[name$=name][class]’).addClass(‘indianred’);//name属性的值以name结尾的元素，同时带有class属性

});

});

</script>

<input type=”text” name=”firstname” value=”张” class=’stu’ /> <br />

<input type=”text” name=”middlename” value=”三” /><br />

<input type=”text” name=”lastname” value=”峰” /><br />

<input type=”text” name=”firstcity” value=”上海” class /><br />

<input type=”button” value=”点击” id=”btn” />

<div class=””>锄禾日当午</div>

操作属性

1. jQuery对象.attr(属性)：获取对象的属性值，只获取第一个元素
2. jQuery对象.attr(属性,值)：将值付给所有的jQuery对象
3. jQuery对象.attr(属性,function(){}); //将函数的返回值付给属性
4. jQuery对象.attr({属性:属性值,属性:属性值})
5. jQuery对象.removeAttr(属性名)

操作类

1. addClass(类名)——添加类
2. removeClass(类名)——删除类
3. toggleClass(类名)——交替

直接样式操作

1. css(name)：获取样式的值
2. css(name,value)：给样式赋值
3. css({样式:值，样式:值})

offset()：偏移

坐标原点是浏览器客户端的左上角

注意：

宽度、高度操作

1. width()：获取宽度
2. width(value)：设置宽度
3. height()：获取高度
4. height(value)：设置高度

操作HTML和文本

1. html()：获取HTML代码
2. html(value)：将value作为HTML付给元素
3. text()：获取文本
4. text(value)：将value的值作为文本付给元素

值操作

1. val()：获取值
2. val(value)：给value属性赋值

each循环

方法一：$.each(数组/对象，回调函数)

方法二：jQuery元素.each(回调函数)

例题（复选框选择）

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

//全选

$(‘:button:first’).click(function(e) {

$(‘:checkbox’).attr(‘checked’,’checked’);

});

//反选

$(‘:button:eq(1)’).click(function(e) {

$(‘:checkbox’).each(function(index, element) {

$(this).attr(‘checked’,!$(this).attr(‘checked’));

});

});

//取消全选

$(‘:button:last’).click(function(e) {

$(‘:checkbox’).removeAttr(‘checked’);

});

});

</script>

<input type=”button” value=”全选” />

<input type=”button” value=”反选” />

<input type=”button” value=”取消全选” />

<form>

<input type=”checkbox” value=”读书” name=”hobby” />读书<br />

<input type=”checkbox” value=”游泳” name=”hobby”/>游泳<br />

<input type=”checkbox” value=”看报” name=”hobby”/>看报<br />

</form>

脚下留心：jQuery版本不同，有少部分方法也会有差异。

多学一招：通过val()实现选中功能

1. 能够在html代码中引入jQuery库
2. 能够理解选择器的作用
3. 能够说出或使用多种选择器
4. 能够组合使用选择器
5. 能够使用jQuery操作html属性
6. 能够使用jQuery操作css属性
7. 能够熟练使用jQuery()的页面载入事件ready()
8. 能够理解each()的作用
9. 能够使用each()方法遍历jQuery对象
10. 能够解释dom对象和jQuery对象的区别
11. 能够将dom对象和jQuery对象相互转换
12. 能够使用bind()方法绑定事件
13. 能够熟练使用jQuery的常规事件绑定语法
14. 能够使用事件切换方法hover(),toggle()
15. 能够使用jQuery的基本特效方法 show(),hide(),toggle()
16. 能够使用jQuery的滑动特效方法 slideDown(),slideUp(),slideToggle()
17. 能够使用jQuery的淡入淡出特效方法
18. 能够将内容插入到元素内部或外部
19. 能够清空元素内容或删除元素本身
20. 能够使用replaceWith()替换元素
21. 能够复制指定元素
22. 能够把内容从外面包裹上新元素
23. 能够使用元素查找或匹配的多个方法
24. 能够理解jQuery中插件的作用
25. 能够制作自定义插件
26. 能够使用jQuery实现ajax的get请求
27. 能够使用jQuery实现ajax的post请求

过滤元素

1. filter()：过滤元素
2. hasClass()：检查有没有指定的类
3. is()：检查有没有指定的选择器

在元素集合中查找

1. find()：在子元素中查找
2. children()：匹配子元素集合
3. next()：查找下一个元素
4. nextAll()：后面所有元素
5. prev()：前面的元素
6. prevAll()：前面所有元素
7. siblings()：所有同辈元素
8. parent()：元素的父节点
9. parents()：元素的父节点的集合

<script type=”text/javascript”>

$(document).ready(function(e) {

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

//$(‘form’).find(‘:text’).css(‘background-color’,’#930′); //在子元素中查找

/*

$(‘form>fieldset’).children(‘input’).each(function(index, element) { //获取子元素

console.log($(this));

});

*/

//$(‘#firstname’).next().next().css(‘background-color’,’#930′);

//$(‘#firstname’).nextAll().css(‘background-color’,’#930′);

//$(‘#city’).prev().prev().css(‘background-color’,’#930′);

//$(‘#city’).prevAll().css(‘background-color’,’#930′);

//$(‘#lastname’).siblings().css(‘background-color’,’#930′);

//$(‘#lastname’).parent().css(‘background-color’,’#930′);

$(‘#lastname’).parents(‘body’).css(‘background-color’,’#930′);

});

});

</script>

<p>锄禾日当午</p>

<form>

<fieldset>

<legend>在元素中查找</legend>

姓：<input type=”text” id=”firstname” value=”张” /><br />

名：<input type=”text” id=”lastname” value=”三峰” /><br />

城市：<input type=”text” id=”city” value=”上海” /><br>

<input type=”button” value=”点击” id=”btn” />

</fieldset>

</form>

链式操作

把多个操作用“.”连成一行，用来简化操作。

原理：每个方法执行完毕后，将当前对象返回出来。

例题

DOM操作

在元素的内部添加内容

1. 在内部的后面添加内容
   1. A. append(B)：将B添加到A里面的后面
   2. A. appendTo(B)：将A添加到B里面的后面

1. 在内部的前面添加内容
   1. A.prepend(B)：在A的内部的前面添加B的内容
   2. A.prependTo(B)：将A添加到B的内部的前面

在元素的外部添加内容

1. 在元素外部的后面
   1. A.after(B)：将B插入到A外部的后面
   2. A.insertAfter(B)：将A插入到B的外部的后面

1. 在元素外部的前面
   1. A.before(B)：将B插入到A的外部的前面
   2. A.insert Before(B)：将A插入到B的外部的前面

例题（年月日）

效果：选择年和月，自动显示对应的天数

<script type=”text/javascript”>

//添加option标签

function insertOption(end,target){

for(var i=1;i<=end;i++){

$(‘<option>’).html(i).attr(‘value’,i).appendTo($(‘#’+target));

}

}

//添加年

function addYear(){

var yy=<?php echo date(‘Y’)?>;

for(var i=yy;i>=yy-100;i–){

$(‘<option>’).html(i).attr(‘value’,i).appendTo($(‘#year’));

}

}

//添加月

function addMonth(){

insertOption(12,’month’)

}

//添加日

function addDay(){

$(‘#day’).html(”);

var yy=$(‘#year’).val();

var mm=$(‘#month’).val();

if(mm==1||mm==3||mm==5||mm==7||mm==8||mm==10||mm==12){

insertOption(31,’day’);

}else if(mm==2){

if(yy%4==0 && yy%100!=0 || yy%400==0){

insertOption(29,’day’)

}else{

insertOption(28,’day’);

}

}

else

insertOption(30,’day’);

}

$(document).ready(function(e) {

addYear();

addMonth();

addDay();

$(‘#year,#month’).change(function(e) {

addDay();

});

});

</script>

<form id=”form1″ name=”form1″ method=”post” action=””>

<select name=”year” id=”year”></select>年

<select name=”month” id=”month”></select>月

<select name=”day” id=”day”></select>日

</form>

运行结果

例题（模拟126邮箱注册效果）

Sprits技术

将页面用到的许多小图拼到一个大图上，通过CSS来显示不同的区域。可以有效的减少往返次数。

<style type=”text/css”>

/*按钮的样式*/

.btn{

width:119px;

height:37px;

background-image:url(images/glb_v2.png);

background-repeat:no-repeat;

background-position:-146px -362px;

cursor:pointer;

}

/*鼠标移动到按钮上*/

.btn:hover{

background-position:-289px -362px;

}

</style>

用户名：<input type=”text” /><br />

<input type=”button” value=”返回” class=”btn” />

<input type=”button” value=”提交” class=”btn” />

运行结果

模仿126邮箱注册

<style type=”text/css”>

*{

margin:0px;

padding:0px;

font-size:14px;

font-family:’微软雅黑’;

}

dt,dd{

float:left;

}

.txt{

width:300px;

height:17px;

border:#7B7B7B solid 1xp;

}

.bg>span,.span{

width:14px;

height:14px;

display:inline-block;

background:url(images/glb_v2.png) no-repeat -36px -288px;

}

.bg{

color:#C00;

display:none;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

//设置样式

$(‘#pwd’).blur(function(e) {

var pwd=$(this).val();

if(!(pwd.length>=6 && pwd.length<=16)){

//方法一：

/*

$(‘dd>div:first’).hide(); //隐藏

$(‘dd>div:last’).show(); //显示

*/

//方法二

var span=$(‘<span>’).addClass(‘span’);

$(‘dd>div:first’).html(‘密码长度是6~16个字符’).prepend(span)

}

});

});

</script>

</head>

<body>

<form>

<dl>

<dt>密码：</dt>

<dd>

<input type=”password” id=”pwd” class=”txt” />

<div>6~16个字符，区分大小写</div>

<!–<div class=”bg”><span></span>密码长度是6~16个字符</div> –>

</dd>

</dl>

</form>

替换DOM元素

1. replaceAll(选择器)
2. replaceWith(内容)

例题

<style type=”text/css”>

.light{

color:#F00;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#key’).blur(function(e) {

if($(this).val()==”)

return;

//清空样式

$(‘.light’).each(function(index, element) {

$(this).replaceWith($(this).text()); //通过自己的文本替换自己节点

});

//添加样式

var reg=new RegExp($(this).val(),’g’); //实例化正则表达式而

var str=$(‘#content’).html().replace(reg,'<span class=”light”>’+$(this).val()+'</span>’); //内容替换

$(‘#content’).html(str);

});

});

</script>

</head>

<body>

<input type=”text” id=”key” />

<div id=”content”>

<h3>月饼机_月饼机价格月饼机老品牌值得信赖</h3>

杭州旭众新型小型月饼机厂家 出面出馅更加稳定,小型月饼机厂家 一机多用,价格实惠!老品牌小型月饼机厂家 值得信赖.更有服务到家,全国联保.购机无忧!小型月饼机厂家

</div>

运行结果

删除DOM元素

1. empty()：清空节点中的内容
2. remove()：删除节点

克隆DOM元素

1. clone()：只复制对象节点
2. clone(true)：复制对象节点及对应的事件

获取对象的长度和对象的索引

获取长度的方法

1. length
2. size()

获取元素的索引

index()：索引号从0开始

DOM对象和jQuery对象互换

如果要用jQuery的方法就必须要转成jQuery对象

如果要用JS方法必须转成DOM对象

实现转换：

1. 将DOM对象转成JQuery对象：通过$()或jQuery()
2. 将JQuery对象转成DOM对象：通过get()或数组的方式

缓存数据

1. data(name)：获取缓存数据
2. data(name,value)：缓存数据

几个常用的方法

1、$.merge()

2、$.trim()

1. 能够解释dom对象和jQuery对象的区别
2. 能够将dom对象和jQuery对象相互转换
3. 能够将内容插入到元素内部或外部
4. 能够清空元素内容或删除元素本身
5. 能够使用replaceWith()替换元素
6. 能够复制指定元素
7. 能够把内容从外面包裹上新元素
8. 能够使用元素查找或匹配的多个方法
9. 能够使用bind()方法绑定事件
10. 能够熟练使用jQuery的常规事件绑定语法
11. 能够使用事件切换方法hover(),toggle()
12. 能够使用jQuery的基本特效方法 show(),hide(),toggle()
13. 能够使用jQuery的滑动特效方法 slideDown(),slideUp(),slideToggle()
14. 能够使用jQuery的淡入淡出特效方法
15. 能够理解jQuery中插件的作用
16. 能够制作自定义插件
17. 能够使用jQuery实现ajax的get请求
18. 能够使用jQuery实现ajax的post请求

回顾

1. 查找元素
   1. filter()：过滤元素 （not()）
   2. hasClass()：是否具有指定类
   3. is()：是不是
   4. find()：在子元素中查找
   5. children()：获取子元素的集合
   6. next()：下一个元素
   7. nextAll()：后面所有的元素
   8. prev()：前面的一个元素
   9. prevAll()：前面所有的元素
   10. parent()：父级元素
   11. parents()：所有的父级元素
   12. sibling()：同级元素
2. DOM操作
   1. 在内部添加元素
      1. A.append(B)：将B插入到A的内部的后面
      2. A.appendTo(B)：将A插入到B的内部的后面
      3. A.prepend(B)：将B插入到A的内部的前面
      4. A.prependTo(B)：将A插入到B的内部的前面
   2. 在外部添加元素
      1. A.after(B)：将B插入到A的外部的后面
      2. A.insertAfter(B)：将A插入到B的外部的后面
      3. A.before(B)：将B插入到A的外部的前面
      4. A.insertBefore(B)：将A插入到B的外部的前面
   3. 替换DOM元素
      1. A.replaceAll(B)：用A替换所有的B
      2. A.replaceWith(B)：用B替换A
   4. 删除DOM元素
      1. empty()：清空元素的内容
      2. remove()：删除元素
   5. 克隆DOM元素
      1. clone()：复制节点，不复制对应的事件
      2. clone(true)：复制节点和对应的事件
3. 一些常用的方法和属性
   1. size()：获取节点集合的长度
   2. length：获取节点集合的长度
   3. index()：获取节点的索引
   4. data()：缓存或获取缓存数据
   5. $.trim()：去空格
   6. $.merge()：合并数组
4. DOM和jQuery对象互换
   1. 通过$()和jquery()方法将DOM转成JQuery对象
   2. 通过get()和[]的方法将jQuery的对象转成DOM对象
5. 链式操作：每个方法执行完毕后返回当前对象，所以我们能够实现链式操作。

jQuery设置事件处理

1、$().事件类型(事件处理函数) ——设置事件处理

2、$().事件类型() ——处罚事件处理

脚下留心：JQuery事件和DOM事件基本是一一对应，比DOM事件少“on”这个单词。

$(document).ready()事件

很显然：$(document).ready()可以极大的提高web响应速度。

多学一招：$(document).ready()可以简化为

DOM操作练习

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘:button’).click(function(e) {

var i=$(‘:button’).index($(this)); //找出索引号

if(i==0){ //全部左移

$(‘select:first option’).appendTo($(‘select:last’));

}

else if(i==1){ //选中左移

$(‘select:first option:checked’).appendTo($(‘select:last’));

}

else if(i==2){ //全部右移

$(‘select:last option’).appendTo($(‘select:first’));

}

else if(i==3){ //选中右移

$(‘select:last option:checked’).appendTo($(‘select:first’));

}

});

});

</script>

<select size=”10″ multiple=”multiple”>

<option>张三</option>

<option>李四</option>

<option>王五</option>

<option>赵六</option>

<option>Tom</option>

<option>Berry</option>

<option>Ketty</option>

<option>Rose</option>

</select>

</div>

<div>

<input type=”button” value=” >> ” title=”全部左移”/><br />

<input type=”button” value=” > ” title=”左移”/> <br />

<input type=”button” value=” << ” title=’全部右移’/><br />

<input type=”button” value=” < ” title=’右移’/> <br />

</div>

<div>

<select size=”10″ multiple=”multiple”></select>

</div>

绑定事件（bind）

语法：bind(事件,回调函数)

<script type=”text/javascript”>

$(function(){

//1、绑定事件

/*

$(‘#username’).bind(‘mouseover’,function(){

if($(this).val()==’请输入用户名’)

$(this).val(”);

}).bind(‘mouseout’,function(){

if($.trim($(this).val())==”)

$(this).val(‘请输入用户名’);

})

*/

//2、通过json格式一次绑定多个事件

/*

var json={

‘mouseover’:function(){

if($(this).val()==’请输入用户名’)

$(this).val(”);

},

‘mouseout’:function(){

if($.trim($(this).val())==”)

$(this).val(‘请输入用户名’);

}

};

$(‘#username’).bind(json);

*/

//3、不同的事件，同一个事件处理

$(‘#username’).bind(‘click mouseover mouseout’,function(){

console.log(‘aa’);

})

})

</script>

<input type=”text” id=”username” value=”请输入用户名” />

反绑定事件（unbind）

如果一个元素不需要执行某个事件了，只需要反绑定即可。

1、对象.unbind(事件)：反绑定某个事件

2、对象.unbind()：反绑定所有事件

<style type=”text/css”>

#btn{

width:100px;

height:50px;

cursor:pointer;

background-color:#F90;

color:#F00;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

var flag=false; //开关

$(‘#btn’).click(function(e) {

if(!flag){

var t=5;

$(this).text(t);

var id=window.setInterval(function(){

$(‘#btn’).text(–t);

if(t==0){

clearInterval(id); //关闭时钟

//$(‘#btn’).unbind(‘click’); //反绑定click事件

$(‘#btn’).unbind(); //反绑定所有事件

}

},1000);

flag=true;

}

console.log(‘抢红包’);

});

});

</script>

<div id=”btn”>5秒之后关闭抢红包</div>

一次性绑定（one）

事件委托和取消事件委托

jQuery对象.live() 绑定在祖辈元素上的事件处理函数可以对后代的触发做出响应。

jQuery对象.die() 从元素中删除通过live()绑定的事件

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘li’).live(‘click’,function(e) { //将click事件绑定到li的祖辈元素中

alert($(this).html());

});

//添加li

$(‘:button:first’).click(function(e) {

$(‘<li>重庆</li>’).appendTo($(‘ul’));

});

//取消live绑定的事件

$(‘:button:last’).click(function(e) {

//$(‘li’).die(‘click’); //取消通过live()绑定的click()事件

$(‘li’).die(); //取消live绑定的所有事件

});

});

</script>

<ul>

<li>北京</li>

<li>上海</li>

</ul>

<input type=”button” value=”添加li” />

<input type=”button” value=”取消live绑定的事件” />

事件对象

事件对象中保存着与事件有关的信息

1. 通过事件对象阻止冒泡
2. 通过事件对象阻止浏览器的默认动作

hover

语法：hover(over_fun,out_fun)，此方法实现鼠标移到到元素上和离开元素的效果

toggle

显示隐藏元素

1. show(speed,[callback]) 显示
2. hide(speed,[callback]) 隐藏
3. toggle(speed,[callback]) 交替，如果当前是隐藏的，就显示。如果当前是显示的就隐藏

方法的参数有:fast（200毫秒） normal（400毫秒） slow（600号码），也可以指定任意毫秒数

<style type=”text/css”>

#first{

width:300px;

height:200px;

background-color:#060;

color:#FFF;

}

</style>

<script type=”text/javascript”>

$(document).ready(function(e) {

//显示

$(‘:button:eq(0)’).click(function(e) {

//$(‘#first’).show();

$(‘#first’).show(1000);

});

//隐藏

$(‘:button:eq(1)’).click(function(e) {

//$(‘#first’).hide();

//$(‘#first’).hide(‘slow’);

//$(‘#first’).hide(2000);

$(‘#first’).hide(‘slow’,function(){

$(‘:button’).remove();

})

});

//交替

$(‘:button:eq(2)’).click(function(e) {

//$(‘#first’).toggle();

$(‘#first’).toggle(600)

});

});

</script>

<input type=”button” value=”显示” />

<input type=”button” value=”隐藏” />

<input type=”button” value=”交替” />

<div id=”first”>

离离原上草，一岁一枯荣。<br />

野火烧不尽，春风吹又生。<br />

远芳侵古道，晴翠接荒城。<br />

又送王孙去，萋萋满别情。<br />

</div>

向上向下

1. slideUp(speed,[callback])：向上
2. slideDown(speed,[callback])：向下
3. slideToggle(speed,[callback])：交替向上向下

<script type=”text/javascript”>

$(document).ready(function(e) {

//向上

$(‘:button:eq(0)’).click(function(e) {

//$(‘#first’).slideUp();

$(‘#first’).slideUp(‘slow’);

});

//向下

$(‘:button:eq(1)’).click(function(e) {

//$(‘#first’).slideDown();

//$(‘#first’).slideDown(1000);

$(‘#first’).slideDown(1000,function(){

alert(‘执行完毕’)

})

});

//交替

$(‘:button:eq(2)’).click(function(e) {

$(‘#first’).slideToggle(); //交替向上向下

});

});

</script>

淡入淡出

1. fadeIn(speed,[callback])
2. fadeOut(speed,[callback])
3. fadeToggle(speed,[callback])
4. fadeTo(speed,不透明度[0-1])

<script type=”text/javascript”>

$(document).ready(function(e) {

//淡入

$(‘:button:eq(0)’).click(function(e) {

//$(‘#first’).fadeIn(); //淡入

$(‘#first’).fadeIn(1000);

});

//淡出

$(‘:button:eq(1)’).click(function(e) {

//$(‘#first’).fadeOut(); //淡出

$(‘#first’).fadeOut(1000);

});

//交替

$(‘:button:eq(2)’).click(function(e) {

$(‘#first’).fadeToggle(1000);

});

//淡出到

$(‘:button:eq(3)’).click(function(e) {

$(‘#first’).fadeTo(1000,0.3); //淡出到0.3

});

});

</script>

动画（animate）

语法:animate(参数,运行时间)

<style type=”text/css”>

#first{

width:100px;

height:100px;

background-color:#060;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script src=”/jquery-ui/ui/jquery.ui.effect.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#first’).click(function(e) {

$(this)

.animate({

‘width’:’50px’,

‘height’:’50px’

},500)

.animate({

‘width’:’150px’,

‘height’:’150px’

},1000)

.animate({

‘margin-left’:’300px’,

‘background-color’:’#FF0000′

},1000)

.animate({

‘margin-left’:’250px’,

},50)

.animate({

‘margin-left’:’300px’,

},50)

});

});

</script>

<div id=”first”></div>

动画的例题

<style type=”text/css”>

*{

margin:0px;

padding:0px;

}

ul{

list-style-type:none;

width:702px;

margin:100px auto;

}

li{

width:232px;

height:139px;

float:left;

border:#000 solid 1px;

overflow:hidden;

cursor:pointer;

}

li span{

width:100%;

height:30px;

display:inline-block;

background-color:rgba(0,0,0,0.3);

position:relative;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘li’).hover(function(){

$(this).find(‘span’).animate({‘top’:’-30px’},500)

},function(){

$(this).find(‘span’).animate({‘top’:’0px’},500)

})

});

</script>

</head>

<body>

<ul>

<li><img src=”images/01.jpg” width=”232″ height=”139″ /><span>我可以认识你吗</span></li>

<li><img src=”images/02.jpg” width=”232″ height=”139″ /><span>其实我注意你好久了</span></li>

<li><img src=”images/03.jpg” width=”232″ height=”139″ /><span>我喜欢你微笑的样子</span></li>

<li><img src=”images/04.jpg” width=”232″ height=”139″ /></li>

<li><img src=”images/05.jpg” width=”232″ height=”139″ /></li>

</ul>

</body>

jQuery中的ajax

jQuery对ajax进行了封装

$.ajax()

$.ajax()参数选项

例题

HTML页面

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#username’).blur(function(e) {

$.ajax({

‘url’:’./15-demo.php’,

‘type’:’get’,

‘data’:’username=’+encodeURIComponent($(‘#username’).val()),

‘dataType’:’text’,

‘success’:function(data){ //成功后执行

alert(data)

},

‘error’:function(){ //失败后执行

alert(‘请求失败’);

}

})

});

});

</script>

<input type=”text” id=”username” />

PHP页面

<?php

echo $_GET[‘username’];

运行结果

$.get()和$.post()

load()

可以实现局部刷新

17-demo1.php

<div id=”stu”>

</div>

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘.pageno’).click(function(e) {

var pageno=$(this).text();

//$(‘#stu’).load(’17-demo2.php’,{‘pageno’:pageno}); //post传递

//$(‘#stu’).load(’17-demo2.php?pageno=’+pageno); //get传递

$(‘#stu’).load(’17-demo2.php?pageno=’+pageno,”,function(){

alert(‘加载完毕’);

})

});

});

</script>

<?php

mysql_connect(‘localhost’,’root’,’root’);

mysql_query(‘use `data`’);

mysql_query(‘set names utf8’);

$rs=mysql_query(‘select count(*) from stu’);

$rows=mysql_fetch_row($rs);

$pagecount=ceil($rows[0]/2);

for($i=1;$i<=$pagecount;$i++){

echo “<a href=’javascript:void(0)’ class=’pageno’>{$i}</a>&nbsp;”;

}

?>

17-demo2.php

<?php

mysql_connect(‘localhost’,’root’,’root’);

mysql_query(‘use `data`’);

mysql_query(‘set names utf8’);

$pageno=$_REQUEST[‘pageno’];

$startno=($pageno-1)*2;

$sql=”select * from stu limit $startno,2″;

$rs=mysql_query($sql);

?>

<table>

<tr>

<th>编号</th>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

<th>地址</th>

<th>语文</th>

<th>数学</th>

</tr>

<?php while($rows=mysql_fetch_assoc($rs)):?>

<tr>

<td><?php echo $rows[‘stuNo’]?></td>

<td><?php echo $rows[‘stuName’]?></td>

<td><?php echo $rows[‘stuSex’]?></td>

<td><?php echo $rows[‘stuAge’]?></td>

<td><?php echo $rows[‘stuAddress’]?></td>

<td><?php echo $rows[‘ch’]?></td>

<td><?php echo $rows[‘math’]?></td>

</tr>

<?php endwhile;?>

</table>

运行结果

$.getScript()

用来加载脚本

写一个js脚本

动态加载js

$.getJSON()

获取JSON格式的数据

1. 新建PHP页面

<?php

$stu=array(‘tom’,’berry’,’ketty’);

echo json_encode($stu);

1. 新建HTML页面

$.get()和$.getJSON()可以跨域

注意：$.post()不能跨域

1. 在phpmyadmin.com中创建PHP页面

1. 在www.php.com中创建HTML页面，跨域请求

服务器返回XML格式

1. 将预先准备好的XML拷贝的到站点下
2. HTML页面代码如下

<script type=”text/javascript”>

$(document).ready(function(e) {

var xml; //保存XML对象

//加载国家

$.get(‘./location.xml’,function(data){

xml=$(data);

xml.find(‘country’).each(function(index, element) {

$(‘<option>’).text($(this).attr(‘name’)).val($(this).attr(‘id’)).appendTo($(‘#country’));

});

},’xml’);

//加载省

$(‘#country’).change(function(e) {

$(‘#province’).html(‘<option value=””>—请选择—</option>’);

var id=$(this).val();

xml.find(“[id=”+id+”]”).children().each(function(index, element) {

$(‘<option>’).text($(this).attr(‘name’)).val($(this).attr(‘id’)).appendTo($(‘#province’));

});

});

//加载市

$(‘#province’).change(function(e) {

$(‘#city’).html(‘<option value=””>—请选择—</option>’);

var id=$(this).val();

xml.find(“[id=”+id+”]”).children().each(function(index, element) {

$(‘<option>’).text($(this).attr(‘name’)).val($(this).attr(‘id’)).appendTo($(‘#city’));

});

});

});

</script>

</head>

<body>

国家：<select id=”country”><option value=””>—请选择—</option></select>

省：<select id=”province”><option value=””>—请选择—</option></select>

市：<select id=”city”><option value=””>—请选择—</option></select>

多学一招：实现省、市、县三级可以将数据保存在数据库，XML，JS数组/JSON。建议不要将数据放在数据库中。可以放在XML和JS中

扩展jQuery插件

JQuery中方法有两种，一种是JQuery对象的方法，另一种是jQuery元素的方法。扩展插件就分为这两种方式来定义。

1、扩展JQuery对象的方法

语法：

$.方法名=function(){

}

2、扩展jQuery元素的方法

$.fn.方法名=function(){

}

练习

例题：编辑表格内容

<style type=”text/css”>

table,td,th{

border:#000 solid 1px;

border-collapse:collapse;

margin:auto;

font-size:16px;

background-color:#F96

}

tr{

height:25px;

}

th{

background-color:#09F;

width:50%;

}

input{

border:none;

background-color:transparent;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

//添加文件框

$(‘td’).click(function(e) {

var value=$(this).html(); //单元格的数据

if($(this).find(‘input’).length==0){

$(this).html(”); //清空td

$(‘<input>’).attr(‘type’,’text’).val(value).appendTo($(this)).trigger(‘focus’).trigger(‘select’)

}

});

//修改值

$(document).keyup(function(e) {

if(e.keyCode==13){

var src=$(e.target || e.srcElement); //获取事件发生时候当前的对象

if(src.is(‘input’)){

var value=src.val();

src.parent().html(value); //将值放到td中

}

}

});

});

</script>

<table width=”400″ cellpadding=”0″ cellspacing=”0″>

<tr>

<th>学号</th>

<th>姓名</th>

</tr>

<tr>

<td>001</td>

<td>张三</td>

</tr>

<tr>

<td>002</td>

<td>李四</td>

</tr>

<tr>

<td>003</td>

<td>王五</td>

</tr>

<tr>

<td>004</td>

<td>赵六</td>

</tr>

</table>

例题：导航栏

<style type=”text/css”>

*{

font-size:12px;

margin:0px;

padding:0px;

}

#daohang{

width:300px;

margin:50px 0px 0px 200px;

}

#daohang ul{

list-style-type:none;

width:100px;

}

#daohang .main{

background:url(images24/title.gif) repeat-x;

}

#daohang .main a{

text-decoration:none;

}

#daohang .main ul{

display:none;

background:#FC9;

}

#daohang .main ul li{

height:25px;

line-height:25px;

}

#daohang .main>span{

display:block;

height:25px;

line-height:25px;

background:url(images24/collapsed.gif) no-repeat 5px center;

font-size:14px;

padding-left:20px;

color:#FFF;

cursor:pointer;

}

#daohang .main .bg{

background-image:url(images24/expanded.gif);

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘.main>span’).click(function(e) {

$(this).toggleClass(‘bg’).next().slideToggle(‘slow’);

});

});

</script>

<div id=”daohang”>

<ul>

<li class=”main”>

<span>菜单项1</span>

<ul>

<li><a href=”#”>子菜单项11</a></li>

<li><a href=”#”>子菜单项12</a></li>

</ul>

</li>

<li class=”main”>

<span>菜单项2</span>

<ul>

<li><a href=”#”>子菜单项21</a></li>

<li><a href=”#”>子菜单项22</a></li>

</ul>

</li>

<li class=”main”>

<span>菜单项3</span>

<ul>

<li><a href=”#”>子菜单项31</a></li>

<li><a href=”#”>子菜单项32</a></li>

</ul>

</li>

</ul>

</div>

例题：弹出对话框

<style type=”text/css”>

.win{

width:250px;

background-color:#D0DEF0;

padding:2px;

position:absolute;

display:none;

}

.win #title{

padding:4px;

font-size:16px;

}

.win #title img{

float:right;

cursor:pointer;

}

.win #content{

height:150px;

background-color:#FFF;

}

</style>

</head>

<body>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

//定义窗口

$.win=function(){

//定位窗口

var left=parseInt(($(window).width()-$(‘#win’).width())/2+$(window).scrollLeft());

var top=parseInt(($(window).height()-$(‘#win’).height())/2+$(window).scrollTop());

$(‘#win’).css({‘left’:left,’top’:top})

//给关闭按钮添加事件

$(‘#title’).children(‘img’).click(function(e) {

$(‘#win’).hide();

});

return $(‘#win’);

}

$(document).ready(function(e) {

$(‘.buy’).click(function(e) {

$.win().show();

});

});

</script>

<div class=”win” id=”win”>

<div id=”title”><img src=”images25/close.gif” alt=”关闭” width=”15″ height=”15″ />购物车</div>

<div id=”content”>

</div>

</div>

<input type=”button” value=”放入购物车” class=”buy” style=”margin:auto; display:block” />

<div style=”height:1000px; width:2000px;”></div>

<input type=”button” value=”放入购物车” class=”buy” style=”margin:auto; display:block” />

scrollLeft()：水平滚动条距左的位置

scrollTop()：垂直滚动条距上的位置

1. 能够使用bind()方法绑定事件
2. 能够熟练使用jQuery的常规事件绑定语法
3. 能够使用事件切换方法hover(),toggle()
4. 能够使用jQuery的基本特效方法 show(),hide(),toggle()
5. 能够使用jQuery的滑动特效方法 slideDown(),slideUp(),slideToggle()
6. 能够使用jQuery的淡入淡出特效方法
7. 能够理解jQuery中插件的作用
8. 能够制作自定义插件
9. 能够使用jQuery实现ajax的get请求
10. 能够使用jQuery实现ajax的post请求

去字符串两边空格

思路：写两个函数，一个函数去除左边的空格，一个函数去除右边的空格。判断第一个字符或最后一个字符是否是空格，如果是就把这个空格之外的字符截取出来。

<script type=”text/javascript”>

var str=’ a b ‘;

//去左边的空格

function ltrim(str){

while(true){

if(str[0]==’ ‘) //如果第0个字符是空格，就从1个开始截取到最后，

str=str.substr(1); //将第0个字符去除

else

break;

}

return str;

}

//去右边的空格

function rtrim(str){

while(true){

var n=str.length; //字符串长度

if(str[n-1]==’ ‘)

str=str.substr(0,n-1); //去除最后一个字符

else

break;

}

return str;

}

//调用

str=rtrim(ltrim(str));

alert(‘|’+str+’|’);

</script>

bootstrap 介绍

什么是bootstrap

Bootstrap是Twitter的设计师Mark Otto和Jacob Thornton合作开发的基于html、css、js，用于前端开发的开源工具包，主要用于移动端。

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

为什么使用bootstrap

它简洁灵活，使得Web开发更加快捷。

bootstrap框架的作用

bootstrap内部定义了很多的样式，直接调用即可。

bootstrap中文的帮助：http://v3.bootcss.com/

下载Bootstrap

登录bootstrap的官方网站，点击“起步”

下载后的压缩包

解压

注意：我们使用的框架文件都选择带有”min”的文件，此文件是压缩过的文件。

搭建bootstrap开发环境

Bootstrap开发环境的注意：

1. bootstrap框架必须基于HTML5文件
2. bootstrap.min.js文件必须基于jQuery框架

引入文件搭建框架

<!–引入css文件–>

<link rel=”stylesheet” type=”text/css” href=”bootstrap/css/bootstrap.min.css”>

<!–主题文件（可以不用引入）–>

<link rel=”stylesheet” type=”text/css” href=”bootstrap/css/bootstrap-theme.min.css”>

<!–由于bootstrap基于JQuery文件，必须先引入jquery–>

<script src=”bootstrap/js/jquery-1.11.3.min.js”></script>

<!–引入bootstrap的js文件–>

<script src=”bootstrap/js/bootstrap.min.js”></script>

总结：搭建bootstrap框架至少需要3个文件，css，jQuery，js各一个

移动设备优先

布局容器

.

fluid：流

栅格化（栅格系统）

1. bootstrap提供了响应式的，移动设备优先的流式的栅格化系统，随着viewport(视口的变化)系统会自动的响应
2. 栅格化系统由行（.row）和列（.col-xs/sm/md/lg-n）组合的页面布局
3. 栅格化系统必须在容器中

说出如下样式的意义：

.col-md-2：在中等屏幕下，有两个格组成的列

.col-lg-3:在大屏幕下，有3个格组成的列

.col-xs-5：在超小屏幕下，由5个格组成的列

列偏移

列偏移只能往右偏移

语法：col-xs/sm/md/lg-offset-n

列排序

.col-xs/sm/md/lg-pull-n： pull（拉） 往左偏移

.col-xs/sm/md/lg-push-n： push（推） 往右偏移

响应式

图片的响应式

. img-responsive 图片的响应式 responsive 响应

. img-thumbnail 给图片添加圆角边框

. img-rounded：图片圆角显示

. img-circle：图片椭圆显示

例题（栅格化+响应式）

<div class=”container-fluid”>

<div class=”row”>

<!—第一部分–>

<div class=”col-md-4 col-sm-6 col-xs-12″>

<img src=”images/1.jpg” class=”img-responsive img-thumbnail”>

<h3>bootstrap的栅格化</h3>

<p>…</p>

</div>

<!—第二部分–>

<div class=”col-md-4 col-sm-6 col-xs-12″>

<img src=”images/2.jpg” class=”img-responsive img-thumbnail”>

<h3>bootstrap的栅格化</h3>

<p>…</p>

</div>

<!—第三部分–>

<div class=”col-md-4 col-sm-6 col-xs-12″>

<img src=”images/3.jpg” class=”img-responsive img-thumbnail”>

<h3>bootstrap的栅格化</h3>

<p>…</p>

</div>

</div>

</div>

中等显示器一行放三个格 小显示器一行放两个格 超小显示器一行放一个个

运行结果

排版

标题

h1~h6

例题

页面主体

1、<body>

2、<p>

文本标签

1、<del>

3、<s>

4、<ins>

5、<strong>

6、<u>

7、<em>

8、<small>

9、<big>

对齐

例题

改变大小写

例题

列表

1、class=’list-unstyled’： 移除了默认的列表的样式

2、class=’list-inline’：列表的项行内显示

3、class=’dl-horizontal’：自定义列表横向显示

表格

表格的样式

.table：表格的基本样式

. table-bordered：给表格添加边框

. table-striped：条纹状表格

. table-hover：当鼠标移到行上背景色变化

. table-condensed：表格变得更加紧凑

状态类

例题：

表单

1、. form-control：表单控件的样式

2、. form-group：表单组

3、. form-inline：表单元素行内显示

4、. checkbox-inline：复选框排列在一行

5、.radio-inline：单选按钮排列在一行

6、. disabled：显示禁止使用的样式

7、. input-group：将多个标签作为输入的一个整体

8、.input-group-addon：输入整体的一个插件

9、插入组件

组件位置

例题

<div class=”container”>

<form>

<!–用户名–>

<div class=”form-group”>

用户名:<input type=”text” name=”username” class=”form-control”>

</div>

<!–密码–>

<div class=”form-group”>

密码：<input type=”password” class=”form-control”>

</div>

<!–复选框–>

<div class=”form-group”>

爱好：

<label class=”checkbox-inline disabled”><input type=”checkbox” value=”读书” name=’hobby’ disabled>读书</label>

<label class=”checkbox-inline”><input type=”checkbox” value=”游泳” name=’hobby’>游泳</label>

</div>

<!–单选按钮–>

<div class=”form-group”>

性别：

<label class=”radio-inline”><input type=”radio” name=”sex” value=””>男</label>

<label class=”radio-inline”><input type=”radio” name=”sex” value=””>女</label>

</div>

<!–在文本框前面加样式–>

<div class=”form-group”>

<div class=”input-group”>

<span class=”input-group-addon”>用户名：</span>

<input type=”text” name=”user” class=”form-control”>

</div>

</div>

<!–在文本框后面添加样式–>

<div class=”form-group”>

<div class=”input-group”>

<input type=”text” name=”search” class=”form-control”>

<span class=”input-group-addon”>百度一下</span>

</div>

</div>

<!–添加组件–>

<div class=”form-group”>

<div class=”input-group”>

<span class=”input-group-addon”>

<span class=”glyphicon glyphicon-user”></span>

</span>

<input type=”text” name=”u” class=”form-control”>

</div>

</div>

</form>

</div>

响应式表单

表单的响应式必须结合栅格化

按钮

为 <a>、<button> 或 <input> 元素添加按钮类，建议使用<button>

.btn是按钮类的基类

辅助类

文本颜色和背景色

text-**：文本颜色

bg-**：背景色

三角符号

快速浮动

. pull-left：左浮动

.pull-right：右浮动

. clearfix：清除浮动，这个和我们写的clear:both还不一样，这个作用就是清除子盒子浮动对父盒子的影响。（overflow:hidden）

下拉菜单

分页

标签页（也叫选项卡）

1. 导航要使用<nav>标签
2. .nav是导航的基础类

导航条

navbar：导航条的基础类

navbar-default：导航的默认样式

navbar-fixed-top：导航固定在页面的顶部

navbar-fixed-bottom：导航固定在页面底部

navbar-inverse：样式翻转

navbar-right：导航菜单右对齐

弹出框效果

拷贝对应的代码即可

完整代码

<script type=”text/javascript”>

$(function () {

$(‘[data-toggle=”popover”]’).popover();

})

</script>

<div class=”container text-center” style=”margin:100px”>

<button type=”button” class=”btn btn-default” data-toggle=”popover” data-placement=”right” title=”锄禾” data-content=”锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。”>左侧</button>

</div>

data-placement=”top|left|right|bottom”，用来控制弹出框弹出的方向

图片轮播效果

拷贝代码更改即可

图片展示的页面效果