JAVA学习笔记—前端学习笔记（二）—JQ、ES6、Bootstrap

最新推荐文章于 2022-07-13 16:09:48 发布

Big_BlueCat

最新推荐文章于 2022-07-13 16:09:48 发布

阅读量1.1k

点赞数

分类专栏： Java学习笔记文章标签： javascript jquery es6

本文链接：https://blog.youkuaiyun.com/qq_40850871/article/details/109731993

版权

Java学习笔记专栏收录该内容

18 篇文章

订阅专栏

本文深入探讨jQuery基础，包括选择器、事件处理和DOM操作，同时介绍ES6的基本语法如let、const和解构赋值。此外，简述了Bootstrap的应用，如响应式表格和表单设计，帮助读者掌握前端开发的关键技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

四、jQuery基础

1.jQuery介绍

jQuery由美国人John Resig（约翰·莱西格）于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more
实现隔行变色效果，JavaScript要循环加判断，而jQuery只需一句关键代码

$("tr:even").css("background-color","#ccc");

1.1 jQuery能做什么?

访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合
jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
其实，jQuery和JavaScript的之间关系，可以理解为“成语”和“白话文”之间的关系。成语是对白话文高度压缩，而jQuery也是对JavaScript的高度压缩库

1.2 jQuery的优势

体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性

2. jQuery的使用

jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突
在页面中使用传统引入js文件的方式引入即可。

<script src="js/jquery-3.4.1.min.js"></script>

2.1 基本的语法介绍

<script>
	$(selector).action();
</script>

说明：
工厂函数 $() ：将 D O M 对象转化为 j Q u e r y 对象选择器 s e l e c t o r ：获取需要操作的 D O M 元素（没错，用法基本上和 c s s 一致）方法 a c t i o n () ： j Q u e r y 中提供的方法，其中包括绑定事件处理的方法 “$ ”等同于“ jQuery ”
例如：

<body>
	<p>hello</p>
</body>
	<script src="js/jquery-3.4.1.min.js"></script>
<script>
	alert( $("p").text() );
</script>

2.2 jQuery对象与DOM对象

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

$("#title").html();
// 等同于
document.getELementById("title").innerHTML;

想混用，要转换
DOM对象转jQuery对象

var a = document.getElementById("name"); // a是DOM对象
var b = $(a); // b是jQuery对象

jQuery对象转DOM对象

var a = $("#name"); // a是jQuery对象
var b = jqObject.get(0); // b是DOM对象

2.3 选择器

2.3.1 基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$(“h2” )选取所有h2元素
类选择器	.class	根据给定的配元素 class匹	$(" .title 为title的元素 ")选取所有class
ID选择器	#id	根据给定的元素 id匹配	$(" #title 元素 ")选取id为title的
并集选择器	selector1,selector2,…,selectorN	将每一个选择器匹配的元素合并后一起返回	$(“div,p,.title” )选取所有 div、p和拥有class为title 的元素
交集选择器	element.class或element#id	匹配指定class或id 的某元素或元素集合	$(“h2.title”)选取所有拥有 class为title的h2元素

<p>中国</p>
<p>武汉</p>
<p class="jy">加油</p>
<p id="wan">祖国万岁</p>
<h3 class="jy">祖国万岁</h3>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//$("p").css("color","red"); // 标签选择器，获得所有的p
//$(".jy").css("color","red"); //类选择器
//$("#wan").css("color","red"); //ID选择器,更具备唯一性
//$(".jy,#wan").css("color","red"); // 并集选择器，.jy和#wan
$("h3.jy").css("color","red"); // 交集选择器，既是h3标签，又拥有.jy的元素
</script>

2.3.2 层次选择器

名称	语法构成	描述	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有 descendant（后代）元素	$("#menu span" )选取 #menu下的元素
子选择器	parent>child	选取元素parent元素下的child（子）	$(" #menu>span #menu的子元素 " )选取
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻元素之后的同辈元素
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings 元素	$(" h2~dl " )选取元素之后所有的同辈元素

<h3>000</h3>
<div id="x">
111
<p>p1</p>
<div>
<p>p2</p>
</div>
</div>
<h3>222</h3>
<h3>333</h3>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//$("#x p").css("color","red"); // 后代选择器，忽略层级
//$("#x>p").css("color","red"); // 子代选择器，只负责子级
//$("#x+h3").css("color","red"); // 相邻元素选择器，下一个紧邻的兄弟h3
$("#x~h3").css("color","red"); // 同辈元素选择器，下面的所有兄弟h3
</script>

2.3.3 属性选择器

<a href="www.baidu.com">百度网</a>
<a href="www.sina.com.cn">新浪网</a>
<a href="http://www.163.com">网易</a>
<p href="x">哈哈1</p>
<p href="x" title="x">哈哈2</p>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//$("[href]").css("color","red"); // 选取拥有href属性的元素
//$("[href='x']").css("color","red"); // 选取拥有href=x的元素
//$("a[href!='x']").css("color","red"); // 选取a标签中href不等于x的元素
//$("[href^='www']").css("color","red"); // 选取href属性以www开头的元素
//$("[href$='com']").css("color","red"); // 选取href属性以com结尾的元素
//$("[href*='a']").css("color","red"); // 选取href属性包含a的元素
$("p[href][title='x']").css("color","red"); // 选取拥有href属性和title属性，并且title=x的p元素
</script>

2.3.4 过滤选择器

语法构成	描述	示例
:first	选取第一个元素	$(" li:first" )选取所有元素中的第一个元素
:last	选取最后一个元素	$(" li:last" )选取所有元素中的最后一个元素
:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有元素
:eq(index)	选取索引等于index的元素（index从0开始）	$(“li:eq(1)” )选取索引等于1的元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的元素（注：小于1，不包括1）

<h2 id="h2#x">修仙小说</h2>
<ul>
<li>凡人修仙传</li>
<li>遮天</li>
<li>神墓</li>
<li>残袍</li>
<li>大主宰</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//$("li:first").css("color","red"); // 第一个li
//$("li:last").css("color","red"); // 最后一个li
//$("li:even").css("color","red"); // 偶数行的li
//$("li:odd").css("color","red"); // 奇数行的li
//$("li:eq(2)").css("color","red"); // 下标为2的li
//$("li:gt(1)").css("color","red"); // 下标大于1的li
//$("li:lt(2)").css("color","red"); // 下标小于2的li
$("#h2\\#x").css("color","red"); // 使用转义符
</script>

2.4 事件

2.4.1 鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouse over事件	鼠标移过时
mouseout( )	触发或将函数绑定到指定元素的mouse out事件	鼠标移出时

<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("img").click( function(){
//点击一下，换照片
$(this).attr( "src","img/2.jpg" ); //this就是事件触发的源头
} );
$("img").mouseover( function(){ //移动到元素上
$(this).css( "border","2px solid red" );
} );
$("img").mouseout( function(){ //离开元素
$(this).css( "border","2px solid white" );
} );
</script>

2.4.2 键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有：

方法	描述	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时

<input>
<h3></h3>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("input").keyup( function(){
var str = $(this).val(); // 获取框中的值
$("h3").text( str ); // 将h3元素中的文本内容更改为str
} );
</script>

2.4.3 表单事件

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表：

方法	描述	执行时机
focus( )	触发或将函数绑定到指定元素的focus事件	获得焦点
blur( )	触发或将函数绑定到指定元素的blur事件	失去焦点

<form action="">
<p>帐号: <input id="a" value="请输入帐号..."> </p>
<p>电话: <input id="b"> </p>
</form>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//获得焦点（激活/点击一下）
$("#a").focus(function(){
$(this).val("");
});
//失去焦点（未激活/未点击）
$("#a").blur(function(){
$(this).val("请输入帐号...");
});
</script>

2.4.4 鼠标悬停复合事件

hover()方法相当于mouseover与mouseout事件的组合

<img src="img/3.jpg" width="400">
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("img").hover(
function(){
$(this).css("border","5px solid red");
},
function(){
$(this).css("border","5px solid white");
}
);
</script>

2.4.5 连续点击复合事件

toggle()除了可以模拟鼠标的连续单击事件

<h2>修仙小说</h2>
<ul>
<li>凡人修仙传</li>
<li>遮天</li>
<li>神墓</li>
<li>残袍</li>
<li>大主宰</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("h2").click(function(){
$("ul").toggle(); // 连续点击，ul的可见和隐藏进行切换
});
</script>

2.4.6 事件的动态绑定

对dom元素绑定事件的另一种写法
绑定一个事件

$(".del").on('click', function() {
alert('hello');
})

绑定多个事件

$(".del").on('click mouseover', function() {
alert('hello');
})

2.5 元素的隐藏和显示

2.5.1 改变元素的宽和高（带动画效果）

show( speed )：显示
hide( speed )：隐藏
toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<style>
div{
width: 200px;
height: 200px;
background-color: black;
}
</style>
<body>
<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<button id="btn3">切换</button>
<div></div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#btn2").click(function(){
//fast:快速的
//slow:缓慢的
//毫秒：自定义
$("div").hide(2000);
});
    $("#btn1").click(function(){
$("div").show('slow');
});
$("#btn3").click(function(){
$("div").toggle(1000);
});
</script>
</body>

2.5.2 改变元素的高（拉伸效果）

slideDown( speed ) ：显示
slideUp( speed )：隐藏
slideToggle( speed )等价于slideDown+slideUp
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<script>
$("#btn2").click(function(){
$("div").slideUp(1000); //向上收缩
});
$("#btn1").click(function(){
$("div").slideDown(1000); //向下伸展
});
$("#btn3").click(function(){
$("div").slideToggle(1000); //切换
});
</script>

2.5.3 不改变元素的大小（淡入淡出效果）

fadeIn( speed ) 显示
fadeOut( speed ) 隐藏
fadeToggle( speed ) 等价于fadeIn+fadeOut动画
fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<script>
$("#btn2").click(function(){
$("div").fadeOut(1000); // 隐藏：淡出我的视线
});
$("#btn1").click(function(){
$("div").fadeIn(1000); // 显示：映入眼帘
});
$("#btn3").click(function(){
$("div").fadeToggle(1000); // 切换
});
$("#btn4").click(function(){
$("div").fadeTo(1000,0.5); // 1秒内变成50%的透明度
});
</script>

2.5.4 链

链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起；
例如：点击一次按钮，让div完成4个指定动作
\1. 背景变粉
\2. 字体变绿
\3. 收缩
\4. 拉伸

<style>
div{
width: 200px;
height: 200px;
background-color: black;
color:white;
font-size: 3em;
}
</style>
<body>
<button>试试</button>
<div>hello</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
$("div").css("backgroundcolor","pink").css("color","green").slideUp(1000).slideDown(1000);
});
</script>
</body>

2.6 DOM和CSS的操作

2.6.1 属性函数

attr( “属性” ); 获得元素的属性值
attr( “属性” , “新值” ); 修改元素的属性值
attr( 样式参数 ) ：样式参数可以写成json格式

<body>
<button id="btn1">点我试试</button>
<hr>
<img src="img/1.jpg" title="大图" width="300">
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#btn1").click(function(){
$("img").attr("src","img/2.jpg");
$("img").attr("title","高清");
$("img").attr( {width:"200",height:"200"} );
});
</script>
</body>

val() ; 获得表单元素中的value值
val(“x”) 修改表单元素中的value值
html(); 获得元素中的内容（标签+文本）
html(“x”) 修改元素中的内容（标签+文本）
text(); 获得元素中的文本
text(“x”) 修改元素中的文本

<button>试试</button>
<hr>
<input id="username">
<div>
<h1><i>中国加油！</i></h1>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
//alert($("input").val()); //input框中的值
//$("input").val("哈哈哈"); //修改input框中的值
//alert( $("div").html() ); //获得div中的内容（包含标签信息）
//alert( $("div").text() ); //获得div中的内容（不包含标签信息，只包含文本内容）
$("div").text("祖国万岁！"); //修改div中的内容（全部内容都覆盖）
});
</script>

2.6.2 样式函数

css( “属性”); 获得该属性值
css( “属性”,“值”); 设置属性的值
css( { json} ); 设置多个属性的值

<style>
div{
width: 150px;
height: 150px;
background-color: #000;
}
</style>
<body>
<button>试试</button>
<hr>
<div></div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
//var w = $("div").css("width"); // 获取css属性，width的值
//1.一个键值对
//$("div").css("background-color","pink");
//2.链式编程
//$("div").css("background-color","pink").css("borderradius","50%");
//3.json为参数
$("div").css({
opacity:"0.4",
background:"orange",
borderRadius:"50%"
} );
});
</script>
</body>

width(); 获得元素的宽度
width( number ); 修改元素的宽度
height(); 获得元素的高度
height( number ); 修改元素的高度

<style>
div{
width: 150px;
height: 150px;
background-color: #000;
}
</style>
<body>
<button>试试</button>
<hr>
<div></div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
var w = $("div").width(); // （无参）获取宽度
var h = $("div").height();// （无参）获取高度
// alert("宽:"+w+"px，高:"+h+"px");
$("div").width("300"); // （传参）修改宽度
$("div").height("300"); //（传参）修改高度
});
</script>
</body>

2.6.3 类样式函数

addClass(); 为元素添加类样式
removeClass(); 将元素的类样式移除
toggleClass(); 样式的切换（有->无，无->有）

<style>
div{
width: 100px;
height: 100px;
background-color: #000;
} .
a{
background: palevioletred;
border-radius: 50%;
} .
b{
border:5px dashed darkcyan;
opacity: 0.6;
} .
cn{
background: #000;
color:#FFF;
font-family: 字魂49号-逍遥行书;
}
</style>
<body>
<button id="btn1">试试</button>
<button id="btn2">取消透明度</button>
<button id="btn3">样式切换</button>
<hr>
<div></div>
<h1>中华人民共和国，万岁！</h1>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#btn1").click(function(){
// $("div").addClass("a");
$("div").addClass("a b");
});
$("#btn2").click(function(){
$("div").removeClass("b");
});
$("#btn3").click(function(){
$("h1").toggleClass("cn");
});
</script>
</body>

2.6.4 节点操作

创建节点
工厂函数$()用于获取或创建节点
插入节点
插入子节点

语法	功能
append(content)	$(A) . a p p e n d (B) 表示将 B 追加到 A 中，如：$ (“ul”).append($newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中，如： $newNode1.appendTo(“ul”);
prepend(content)	$(A) . p r e p e n d (B) 表示将 B 前置插入到 A 中，如：$ (“ul”). prepend ($newNode1);
prependTo(content)	$(A) . p r e p e n d T o (B) 表示将 A 前置插入到 B 中，如：$ newNode1. prependTo (“ul”);

插入同辈节点

语法	功能
after(content)	$(A) . a f t e r (B) 表示将 B 插入到 A 之后，如：$ (“ul”).after($newNode1);
insertAfter(content)	$(A). insertAfter (B)表示将A插入到B之后，如： $newNode1.insertAfter(“ul”);
before(content)	$(A). before (B)表示将B插入至A之前，如： $(" u l ") . b e f o r e ($ newNode1);
insertBefore(content)	$(A). insertBefore (B)表示将A插入到B之前，如： $newNode1.insertBefore(“ul”);

替换节点
replaceWith()
replaceAll()
复制节点
clone()
删除节点
remove()删除整个节点
empty()清空节点内容

<input> <button id="test">测试</button>
<ul>
<li>金瓶梅</li>
<li>貂蝉往事</li>
<li>东京热不热</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#test").click(function(){
var bookname = $("input").val();
var newli = $("<li>"+bookname+"</li>"); //通过工厂函数，创建新的li节点
/*添加子节点*/
//$("ul").append(newli); // newli添加到ul后面
//newli.appendTo("ul"); // newli添加到ul后面
//$("ul").prepend(newli); // newli添加到ul前面
//newli.prependTo("ul");
/*添加同辈节点*/
//$("li:last").after( newli ); // newli添加到最后的li的后面
//newli.insertAfter("li:last");
//$("li:last").before(newli); //newli添加到最后的li的前面
//newli.insertBefore("li:last");
/*替换节点*/
//$("li:eq(1)").replaceWith(newli); // 将第二个li替换成newli
//newli.replaceAll( "li:eq(1)" );
/*复制节点*/
//$("li:first").clone().insertAfter("li:last"); // 复制第一个li，并插入到最
后一个li的后面
/*删除节点*/
//$("li:eq(1)").empty(); // 清空了节点上的文本（节点并没有消失）
$("li:eq(1)").remove(); //删除节点
});
</script>

2.7 遍历节点

2.7.1 祖先元素

用于向上遍历 DOM 树的方法
parent() 返回被选元素的直接父元素，仅仅是上一级（找爸爸）
parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分

<p><button>测试</button></p>
<ul>
<li>a</li>
<li>
<b>b</b>
</li>
<li>c</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
//var x = $("b").parent().html(); // 找爸爸
//var x = $("b").parents("ul").html(); // 找祖宗 ul
//var x = $("b").parents("body").html(); // 找祖宗 body
alert( x );
});
</script>

2.7.2 同辈元素

next() 获取紧邻匹配元素之后的元素
prev() 获取紧邻匹配元素之前的元素
siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素

<button>测试</button>
<p>p1</p>
<ul>
<li>a</li>
<li>
<b>b</b>
</li>
<li>c</li>
</ul>
<p>p2</p>
<p id="x">p3</p>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
//var x = $("ul").next().text(); // 紧邻的下一个元素
//var x = $("ul").prev().text(); // 紧邻的上一个元素
//var x = $("ul").siblings("#x").text(); // 所有的兄弟中，id=x的
var arr = $("ul").siblings(); // ul的所有兄弟,1个button，3个p，2个script
for(var i = 0 ;i< arr.length ;i++){
alert(arr[i]);
}
});
</script>

2.7.3 后代元素

后代是子、孙、曾孙等等
children( [selector] ) 方法返回被选元素的所有直接子元素，“孩子”

<button>测试</button>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
//var x = $("ul").children().text(); //所有子节点：abc
var x = $("ul").children("li:first").text(); //ul中的第一个子节点
alert(x);
});
</script>

find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代。

<button>测试</button>
<ul>
<li>盘古</li>
<li>蚩尤</li>
<li>刑天
<p>龚工</p>
</li>
<h3>祝融</h3>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
//var x = $("ul").find("p").text(); //在ul中查找p元素，忽略层级
//var x = $("ul").find("h3").text(); //在ul中查找h3元素，忽略层级
var x = $("ul").find().text(); // 找什么？不知道！
alert(x);
});
</script>

2.7.4 元素的过滤

first()：过滤第一个元素
last()：过滤最后一个元素
eq(index)：过滤到下标为index的元素
not()：除了什么之外的元素
is()：返回布尔，判断是不是这种元素

<button>测试</button>
<ul>
<li>盘古</li>
<li>蚩尤</li>
<li>刑天</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
//var x = $("li").first().text(); // 第一个li
//var x = $("li").last().text(); // 最后一个li
//var x = $("li").eq(1).text(); // 下标为1的li
//var x = $("li").not("li:eq(1)").text(); // 除了下标为1的其余所有li
var x = $("li").parent().is("ul"); // 返回布尔型，li的父节点是不是ul
alert(x);
});
</script>

3.案例

3.1 手风琴特效

<style>
    dd{
        display: none;
    }
</style>
<body>
    <nav>
        <header>xx网</header>
        <ul>
            <li>
                <dl>
                    <dt>求职</dt>
                    <dd>1.简历</dd>
                    <dd>2.面试</dd>
                    <dd>3.入职</dd>
                <dl>
            </li> 
            <li>
                <dl>
                    <dt>教育</dt>
                    <dd>1.看视频</dd>
                    <dd>2.做作业</dd>
                    <dd>3.24小时在线辅导</dd>
                <dl>
            </li>
            <li>
                    <dl>
                        <dt>3W创业</dt>
                        <dd>1.帮助小企业</dd>
                        <dd>2.头脑风暴</dd>
                        <dd>3.赚钱啦</dd>
                    <dl>
                </li>
        </ul>
    </nav>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("nav dt").click(function(){
            $("dd").not($(this).siblings()).slideUp(500);
            $(this).siblings().slideToggle(500);
        });
    </script>
</body>

3.2 购物车结算

<style>
   .jian,.jia{
       border:1px solid #999;
       display: inline-block;
       width: 20px;
       height: 20px;
       text-align: center;
       text-decoration: none;
   }
</style>
<body>
   <table border="2" cellspacing="0" width="400">
       <tr>
           <td>商品编号</td>
           <td>名称</td>
           <td>单价</td>
           <td>数量</td>
           <td>总价</td>
       </tr>
       <tr>
            <td>1</td>
            <td>炸香肠</td>
            <td>3</td>
            <td>
                <a href="#" class="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</a>
            </td>
            <td>3</td>
        </tr>
        <tr>
           <td>2</td>
           <td>王八</td>
           <td>10</td>
           <td> 
                <a href="#" class="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</a>
        </td>
           <td>10</td>
       </tr>
       <tr>
            <td>3</td>
            <td>恐龙</td>
            <td>1000</td>
            <td>
                <a href="#" class="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</a>
            </td>
            <td>1000</td>
        </tr>
   </table>
   <p style="width:400px; text-align:right;">
       总价：<b style="color:red">111</b> <button>提交订单</button>
   </p>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/car.js"></script>
</body>

car.js
$(".jia").click(function(){
    var i = $(this).prev().text();
    i++;
    $(this).prev().text(i);
    var price = $(this).parent().prev().text();
    var zong = i*price;
    $(this).parent().next().text(zong);
    getTotal();
});
$(".jian").click(function(){
    var i = $(this).next().text();
    i--;
    if(i == 0){
        if(confirm("是否删除该商品？")){
            $(this).parents("tr").remove();
        }
    } else{
        $(this).next().text(i);
        var price = $(this).parent().prev().text();
        var zong = i*price;
        $(this).parent().next().text(zong);
    }

    getTotal();
});
function getTotal(){
    // var sum = 0;
    // var arr = $("tr:not(tr:first)").find("td:last");
    // for(var i = 0; i<arr.length; i++){
    //     sum += Number(arr[i].innerHTML);
    // }
    // $("b").text(sum);
    var sum = 0;
    $("tr:not(tr:first)").find("td:last").each(function(){
        sum += Number($(this).text());
    });
    $("b").text(sum);
}

五、ES6基础

1.ECMAScript6 简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言

1.1 ECMAScript 和 JavaScript 的关系

要讲清楚这个问题，需要回顾历史。
1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织ECMA，希望这种语言能够成为国际标准
ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。
因此，ECMAScript （宪法）和 JavaScript（律师）的关系是，前者是后者的规格，后者是前者的一种实现

1.2 ES6 与 ECMAScript 2015 的关系

2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指JavaScript 语言的下一个版本。
ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了ES2015、ES2016、ES2017 等等

2.搭建前端环境

2.1 Node 环境

2.1.1 什么是Node.js

简单的说 Node.js 就是运行在服务端的 JavaScript。
JavaScript程序，必须要依赖浏览器才能运行！没有浏览器怎么办？OK，nodejs帮你解决
Node.js是脱离浏览器环境运行的JavaScript程序，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

2.1.2 Node.js有什么用

如果你是前端程序员，你不懂得像PHP、Python或Ruby等动态编程语言，然后你想创建自己的服务，那Node.js是一个非常好的选择。
Node.js 是运行在服务端的 JavaScript，如果你熟悉Javascript，那么你将会很容易的学会Node.js。当然，如果你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。

2.1.3 安装

2.1.3.1 下载

官网：https://nodejs.org/en/
中文网：http://nodejs.cn/
LTS：长期支持版本
Current：最新版
安装：Windows下双击点击安装——>Next——>finish
注意：
node-v14.5.0-x64.msi 最新版本，如果是win7系统的话，可能安装不了。
如果是win7系统，安装node-v10.14.2-x64.msi这个版本

2.1.3.2 查看版本

在dos窗口中执行命令查看版本号

node -v

2.1.4.1 创建文件夹

用vscode打开目录，其目录下创建 hello.js

console.log(“hello,nodejs”);

打开命令行终端：Ctrl + Shift + y
输入命令

node hello.js

第一次运行，可能会报错！
兼容性的问题，以管理员身份运行即可

2.1.4 服务器端应用开发（了解）

创建 node-server.js

const http = require("http"); // node中自带的require引入方法，http也是node中自带的服
务对象
http.createServer( function(request,response){
// 发出http请求的头部信息
// http的状态码：200；OK
// 请求的内容类型：text/plain
response.writeHead(200,{"Content-Type": "text/plain"});
//响应的数据 "hello,welcome！" ,此时，并不支持中文（以后一定会解决！）
response.end("hello,welcome!");
} ).listen(8888); // 监听端口
console.log("服务器已启动，请访问 http://127.0.0.1:8888");

服务器启动成功后，在浏览器中输入：http://localhost:8888/ 查看webserver成功运行，并输出html页面
停止服务：ctrl + c

2.2 NPM环境

2.2.1 什么是NPM

NPM全称Node Package Manager，是Node.js包管理工具
是全球最大的模块生态系统，里面所有的模块都是开源免费的，也是Node.js的包管理工具，相当于前端的Maven
如果一个项目需要引用很多第三方的js文件，比如地图，报表等，文件杂而乱，自己去网上下载，到处是广告和病毒
那么，我们就想办法，把这些js文件统一放在一个仓库里，大家谁需要，谁就去仓库中拿过来，方便多了
npm就是这个仓库系统，如果你需要某个js文件，那就去远程仓库中下载，放在本地磁盘中，进而引用到我们的项目中

2.2.2 NPM工具的安装位置

node的环境在安装的过程中，npm工具就已经安装好了。
Node.js默认安装的npm包和工具的位置：Node.js目录\node_modules
在这个目录下你可以看见 npm目录，npm本身就是被NPM包管理器管理的一个工具，说明 Node.js已经集成了npm工具

#在命令提示符输入 npm -v 可查看当前npm版本
npm -v

2.2.3 使用npm管理项目

2.2.3.1 项目初始化

全新创建一个目录，作为项目目录，使用dos命令进入此目录，输入命令

npm init
# 接下来是一堆项目信息等待着你输入，如果使用默认值或你不知道怎么填写，则直接回车即可。
# package name: 你的项目名字叫啥
# version: 版本号
# description: 对项目的描述
# entry point: 项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）
# test command: 项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
# git repository: 如果你要将项目上传到git中的话，那么就需要填写git的仓库地址（这里就不写地址了）
# keywirds： 项目关键字（我也不知道有啥用，所以我就不写了）
# author: 作者的名字（也就是你叫啥名字）
# license: 发行项目需要的证书（这里也就自己玩玩，就不写了）

最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
我们之后也可以根据需要进行修改。
上述初始化一个项目也太麻烦了，要那么多输入和回车。想简单点，一切都按照默认值初始化即可，

npm init -y

2.2.4 修改npm镜像和存储地址

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。
这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。
设置镜像和存储地址：

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#设置npm下载包时保存在本地的地址（建议英文目录）
npm config set prefix "E:\\repo_npm"
#查看npm配置信息
npm config list

2.2.5 npm install命令的使用

npm install jquery

使用 npm install 安装依赖包的最新版
模块安装的位置：项目目录\node_modules
安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
同时package.json 文件中，依赖包会被添加到dependencies节点下，

jQuery版本有很多，上述命令下载的什么版本的？最新版
如果我的项目使用1.9.1版本进行开发的，通过npm安装的3.5.1版本太新，会导致项目失效，如何
安装指定版本库？

npm install jquery@1.9.1

3. ES6基本语法

ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对
象、内建函数等通用语法。
本部分只学习前端开发中ES6的必要知识，方便后面项目开发中对代码的理解。

3.1 let声明变量

与我们的JavaScript中var声明变量有什么区别？
1、作用域不同

{
var a = 0; // var声明的变量是全局变量
let b = 0; // let声明的变量是局部变量
} 
console.log(a);
console.log(b); //b is not defined：b没有定义

2、声明次数不同

// var可以声明多次
// let只能声明一次
var m = 1;
var m = 2;
let n = 3;
let n = 4; //SyntaxError: Identifier 'n' has already been declared（语法错误：n已
经声明过了）
console.log(m);
console.log(n);

3、声明与使用顺序不同

// var 声明的变量会全局存储
// let 声明的变量只能在执行后才存储
console.log( x ); //没有报错，输出：undefined
var x = "苹果";
console.log(y); //y is not defined（y没有定义）
let y = "香蕉";

3.2 const声明常量

const 声明常量,为只读变量
\1. 一旦声明之后，其值是不允许改变的
\2. 一但声明必须初始化，否则会报错 SyntaxError: Missing initializer in const declaration（语法错
误，声明常量丢失了初始化）

3.3 解构赋值

解构赋值是对赋值运算符的扩展
它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
解构，顾名思义，就是将集合型数据进行分解，拆分，把里面的值逐一遍历获取
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

3.3.1 数组解构

var arr = [1,2,3];
// 传统的js
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a,b,c);
//es6的解构
var [x,y,z] = arr;
console.log(x,y,z);

3.3.2 对象解构

var user = {
username : "吕布",
weapon:"方天画戟",
horse:"赤兔马"
};
// 传统的js
let mingzi = user.username;
let wuqi = user.weapon;
let zuoji = user.horse;
console.log("姓名:"+mingzi+",武器:"+wuqi+",坐骑:"+zuoji);
//es6的解构
let {username,weapon,horse} = user; // 注意：解构的变量名必须是对象中的属性
console.log("姓名:"+username+",武器:"+weapon+",坐骑:"+horse);

3.4 模板字符串

模板字符串相当于加强版的字符串
用反引号 `,除了作为普通字符串，还可以用来定义多行字符串
还可以在字符串中加入变量和表达式。

3.4.1 定义多行字符串

再见了，\n

let str = `hello,
你俩在哪呢？
心情不好，出来喝点啊！`;
console.log(str);

3.4.2 字符串插入变量和表达式

再见了，字符串的拼接用 +

let name = `吕布`;
let age = 24;
// 传统的拼接字符串
var info1 = "我叫:"+ name +",我今年"+age+"岁！";
console.log(info1);
// es6的拼接字符串
var info2 = `我叫:${name},我明年${age+1}岁！`;
console.log(info2);

3.4.3 字符串中调用函数

还能这么玩

function test(){
return "吃喝玩乐";
} 
let str = `悲催的人生，从${test()}开始`;
console.log( str );

3.5 声明对象简写

定义对象的时候，可以用变量名作为属性名

let name = `吕布`;
let age = 28;
//传统
let user1 = {
name : name,
age : age
};
console.log(user1);
//es6新语法中的简写
let user2 = {name,age};
console.log(user2);

3.6 定义方法简写

// 传统
let user1 = {
say : function(){
console.log("大家好！");
}
};
user1.say();
//es6
let user2 = {
    say(){
console.log("大家好啊！");
}
};
user2.say();

3.7 对象拓展运算符

拓展运算符 {…} 将参数对象中所有可以遍历的属性拿出来，然后拷贝给新对象

3.7.1 拷贝对象(深拷贝)

科幻电影中的一滴血，就可以制作出一个完全一模一样的克隆人

let user1 = {
name:"项羽",
age:34
};
let user2 = {...user1}; // 深拷贝（克隆）
console.log(user1);
console.log(user2);

3.7.2 合并对象

吞噬合并（两个对象合并成一个对象）

let user1 = {
name:"项羽",
age:34
};
let user2 = {head:"诸葛亮"};
let user = {...user1,...user2};
console.log( user );

3.8 函数的默认参数

形参处已声明，但不传入实参会怎样？

function test(name , age = 18){
console.log(`我叫${name}，我今年${age}岁`);
} 
test("吕布",33); //我叫吕布，我今年33岁
test("貂蝉"); //我叫貂蝉，我今年18岁
test("关羽",null); //我叫关羽，我今年null岁
test("马超",""); //我叫马超，我今年岁
test("张飞",undefined); //我叫张飞，我今年18岁

3.9 函数的不定参数

定义方法时，不确定有几个参数？

function test( ...arg ){
console.log(`传入了${arg.length}个参数`);
for(var i = 0 ;i<arg.length;i++){
console.log(arg[i]);
}
} 
test(1);
test(1,2);
test(1,2,3,4,5,6);
test();
test("郭","嘉",28);

3.10 箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体

// 传统
var f1 = function(a){
return a*10;
} 
console.log( f1(10) );
// es6
var f2 = a=>a*10;
console.log( f2(20) );
// 当箭头函数一个参数时，（）可以省略
// 当箭头函数没有参数或者有多个参数，要用（）括起来
// 当箭头函数的函数体有多行语句，用｛｝括起来，表示代码块
// 当只有一条语句，并且需要返回时，可以省略｛｝，结果会自动返回
var f3 = (a,b) => {
let sum = a+b;
return sum;
}
console.log( f3(3,7) );
// 可以将f3进行简化
var f4 = (a,b) => a + b;
console.log( f3(11,22) );

3.11 Promise（了解）

用来解决回调函数的嵌套噩梦（后面学习ajax才能更好的理解）

setTimeout(()=>{
console.log(1);
setTimeout(()=>{
console.log(2);
setTimeout(()=>{
console.log(3);
setTimeout(()=>{
console.log(4);
},1000);
},1000);
},1000);
},1000);

使用promise

next = n =>
//Promise的构造函数接收一个参数，是函数，
//并且传入两个参数：resolve(异步操作执行成功后的回调函数)，reject(异步操作执行失败后的回
调函数)
new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(n);
}, 1000);
});
next(1)
.then(res => { // 成功
console.log(res);
return next(2); //在then方法中调用的next方法，一定要用return ，否则不会通过resolve
把数据往下传递
})
.then(res => {
console.log(res);
return next(3);
})
.then(res => {
console.log(res);
})
.catch(() => { //处理失败：catch方法的第二个参数是失败的回调
console.log("出错啦！");
});

3.12 模块化

如果在a.js文件中定义了5个方法，现在b.js文件中想使用a中的5个方法，怎么办？
java语言的做法是import引入之后，就能使用了。es6的模块化，就是这个过程
将一个js文件声明成一个模块导出之后，另一个js文件才能引入这个模块
每一个模块只加载一次（是单例的），若再去加载同目录下同文件，直接从内存中读取。

3.12.1 传统的模块化

创建user.js文件

function addUser(name){
return `保存${name}成功！`;
} 
function removeUser(id){
return `删除${id}号用户！`;
} /
/ 声明模块并导出
// module.exports={
// save:addUser,
// delete:removeUser
// }
// 声明模块导出的简写
module.exports={
addUser,
removeUser
}

test.js

let user = require("./user.js"); //引入user模块
console.log( user );
let result1 = user.addUser("吕布");
let result2 = user.removeUser(101);
console.log(result1);
console.log(result2);

3.12.2 ES6的模块化

user.js

let name = "老孙";
let age = 66;
let fn = function(){
return `我是${name}!我今年${age}岁了！`;
} /
/ 声明模块并导出
export{
name,
age,
fn
}

test.js

import {name,age,fn} from "./user.js"
console.log(name);
console.log(age);
console.log(fn);

运行test.js，报错：SyntaxError: Unexpected token { （语法错误，在标记{的位置）
原因是node.js并不支持es6的import语法，我们需要将es6转换降级为es5！

3.13 babel环境

babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有的环境中执行。
这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持

3.13.1 安装babel客户端环境

创建新目录 lagou-babel，在终端中打开，运行命令：

npm install --global babel-cli

查看版本

babel --version

如果报错1：（win7系统中）
‘babel’ 不是内部或外部命令，也不是可运行的程序或批处理文件。（babel命令在当前系统中不被认可）
由于babel是通过npm安装，所以babel会默认安装到 E:\repo_npm
在 E:\repo_npm 这个目录下，进入dos命令，执行 babel --version，如果是成功的，说明babel已经安装成功
但是在vscode的终端中打不开，那么只可能是两个原因：
环境变量没有配置
系统环境变量中 path中加入 ;E:\repo_npm;
在任意位置进入dos窗口，babel --version可以了，说明环境变量配置成功
vscode关掉，重新以“管理员身份运行 ”
如果报错2：（win10系统中）

windows10默认禁止运行有危险的脚本，修改一下系统策略就好了
开始菜单-> Windows PowerShell (切记要以管理员身份运行)，输入代码

set-ExecutionPolicy RemoteSigned

3.13.2 安装转码器

\1. 创建lagou-babel专属目录，在其中初始化项目

npm init -y

\2. 创建babel配置文件 .babelrc ，并输入代码配置：

{
"presets": ["es2015"],
"plugins": []
}

\3. 安装转码器

npm install --save-dev babel-preset-es2015

\4. 转码

创建dist目录，用来存放转码后的文件

babel user.js --out-file .\dist\user.js
或 ba
bel user.js -o .\dist\user.js

\5. 运行转码后的文件

node .\dist\test.js

3.14 ES6模块化的另一种写法

3.14.1 as的用法

user.js：如果你不想暴露模块当中的变量名字，可以通过as来进行重命名的操作:

let name = "老孙";
let age = 66;
let fn = function(){
return `我是${name}!我今年${age}岁了！`;
} /
/ 声明模块并导出
export{
name as a, // 将属性重命名
age as b,
fn as c
}

test.js

import {a,b,c} from "./user.js";
console.log(a);
console.log(b);
console.log(c());

也可以接收整个模块
test.js

import * as info from "./user.js"; // 通过*来批量接收，用as来指定接收的对象名字
console.log(info.a);
console.log(info.b);
console.log(info.c());

3.14.2 默认导出

可以将所有需要导出的变量放入一个对象中，然后通过default export进行导出

/*****************导出****************************/
export default{
name:"老孙",
eat(){
return "吃点啥！";
}
} /
*****************导入****************************/
import p from "./person.js";
console.log( p.name, p.eat() );

3.14.3 重命名export和import

如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，
为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时可以这样做：

/*******************student1.js**************************/
export let name = "我是来自student1.js";
/*******************student2.js************************/
export let name = "我是来自student2.js";
/*******************test_student.js************************/
import {name as name1} from './student1.js';
import {name as name2} from './student2.js';
console.log( name1 ); // 我是来自student1.js
console.log( name2 ); // 我是来自student2.js

六、Bootstrap基础

1.bootstrap简介

1.1 什么是Bootstrap？

Bootstrap来自 Twitter，是目前最受欢迎的响应式前端框架。
Bootstrap是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。

1.2 为什么使用 Bootstrap？

移动设备优先：自 Bootstrap3 起，框架包含了贯穿于整个库移动设备优先的样式。
不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。
也就是说，针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。

1.3 下载与使用

中文官网：https://www.bootcss.com/
英文官网：http://getbootstrap.com

下载好的，压缩包解压出来。就得到了bootstrap的资源文件了。
分别是css、js、font字体，全部放在项目的根目录即可

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<title>123</title>
</head>
<body style="padding:100px;">
<h1>Hello, Bootstrap!</h1>
<!-- 注意：这两个按钮的class样式是Bootstrap定义的 -->
<button class="btn btn-primary">学习充电</button>
<button class="btn btn-success">极速入职</button>
</body>
</html>

2.Bootstrap的使用

2.1 表格

和之前的表格相比，标签更丰富更加语义化，效果更佳美观

2.1.1 丰富的标签

2.1.2 好看的类样式

2.1.3 情景色类样式

2.1.4 响应式表格

表格的父元素设置响应式，小于768px，出现边框

<table class="table table-responsive">
<caption>经营产品大全</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>产品1</td>
<td>2020-1-1</td>
<td>待发货</td>
</tr>
<tr class="active">
<td>产品2</td>
<td>2020-1-2</td>
<td>已发货</td>
</tr>
<tr class="success">
<td>产品3</td>
<td>2020-1-3</td>
<td>未付款</td>
</tr>
<tr class="warning">
<td>产品4</td>
<td>2020-1-4</td>
<td>已退货</td>
</tr>
<tr class="danger">
<td>产品5</td>
<td>2020-1-5</td>
<td>已退款</td>
</tr>
</tbody>
</table>

2.2 表单

2.2.1 表单布局

2.2.1.1 默认布局

<body style="padding:100px;">
<form>
<div class="form-group">
<label>邮箱</label>
<input type="email" class="form-control" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label>密码</label>
<input type="passowd" class="form-control" placeholder="请输入密码">
</div>
<div class="form-group">
<button class="btn btn-primary">提交</button>
</div>
</form>
</body>

2.2.1.2 内联布局

让所有表单元素居于一行
注意：当小于768px时,会自动还原成移动端样式.

<form class="form-inline">

2.2.2 表单控件

2.2.2.1 输入框

<form>
<div class="form-group">
<label for="">输入框</label>
<input type="text" class="form-control" placeholder="请输入文本...">
</div>
</form>

2.2.2.2 文本框

<div class="form-group">
<label for="">文本框</label>
<textarea class="form-control" cols="30" rows="5"></textarea>
</div>

2.2.2.3 复选框

checkbox 默认
checkbox-inline 内联

<div class="checkbox">
<label>
<input type="checkbox"> 抽烟
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 喝酒
</label>
</div>
<hr>
<div class="checkbox-inline">
<label>
<input type="checkbox"> 洗澡
</label>
</div>
<div class="checkbox-inline">
<label>
<input type="checkbox"> 烫头
</label>
</div>

2.2.2.4 复选按钮

<form>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> 音乐
</label>
<label class="btn btn-primary">
<input type="checkbox"> 体育
</label>
<label class="btn btn-primary">
<input type="checkbox"> 美术
</label>
<label class="btn btn-primary">
<input type="checkbox"> 电脑
</label>
    </div>
</form>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

2.2.2.5 单选框

<label class="radio">
<input type="radio" name="sex"> 男
</label>
<label class="radio">
<input type="radio" name="sex"> 女
</label>
<hr>
<label class="radio-inline">
<input type="radio" name="gender"> 耕
</label>
<label class="radio-inline">
<input type="radio" name="gender"> 织
</label>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

2.2.2.6 单选按钮

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="gender"> 男
</label>
<label class="btn btn-primary">
<input type="radio" name="gender"> 女
</label>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

2.3 按钮

<button class="btn btn-default">默认按钮</button>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-info">信息按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-link">连接按钮</button>

按钮大小

<button class="btn btn-primary btn-lg">超大按钮（高清大屏台式机）</button>
<button class="btn btn-primary">大按钮（笔记本屏幕）</button>
<button class="btn btn-primary btn-sm">小按钮（平板电脑）</button>
<button class="btn btn-primary btn-xs">超小按钮（手机）</button>

按钮状态
激活状态：按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）;
禁用状态：当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变;

<button class="btn btn-default">默认按钮</button>
<button class="btn btn-default active">激活按钮</button>
<button class="btn btn-default" disabled>禁用按钮</button>

2.4 图片

.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框

<img src="img/1.jpg" class="img-rounded" width="33%">
<img src="img/1.jpg" class="img-circle" width="33%">
<img src="img/1.jpg" class="img-thumbnail" width="33%">

响应式图片

<img src="img/1.jpg" class="img-responsive">

2.5 下拉菜单组件

<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">教育 <span
class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">前沿技术</a></li>
<li><a href="#">名师制作</a></li>
<li><a href="#">24小时导师</a></li>
</ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

用法的关键核心
\1. 外围容器使用 class="dropdown"包裹
\2. 内部点击按钮事件绑定 data-toggle=“dropdown”
\3. 菜单元素使用 class=“dropdown-menu”

2.6 分页组件

<ul class="pagination">
<li class="previous"> <a href="#"> &laquo; </a> </li>
<li class="active"> <a href="#">1</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
<li class="next"> <a href="#">&raquo;</a> </li>
</ul>

<ul class="pager">

2.7 栅格系统

bootstrap的栅格系统会将整个页面水平方向上平均分成12个小格子
当浏览器大小发生变化的时候，我们可以控制每行的元素占用几个格子，从而达到响应式的效果

<style>
.a{
height: 50px;
border: 1px solid black;
background-color: #eeeeee;
}
</style>
<body>
<div class="container">
<div class="row">
<!-- col-lg-3 当大屏幕时，一个div占3份，一行显示4个div -->
<!-- col-md-4 当中屏幕时，一个div占4份，一行显示3个div -->
<!-- col-sm-6 当小屏幕时，一个div占6份，一行显示2个div -->
<!-- 超小屏幕时，一个div占12份，一行显示1个div，默认 -->
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
</div>
</div>
</body>

2.8 缩略图组件

配合响应式的栅格系统

<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/2.jpg">
</div>
</div>
<!-- 其余3张图片 -->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/2.jpg">
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/2.jpg">
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/2.jpg">
</div>
</div>
</div>
</div>

自定义内容

<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/2.jpg">
<div class="caption">
<h3>视频标题</h3>
<p>视频介绍，美女众多...</p>
<p>
<a href="#" class="btn btn-primary">试看</a>
<a href="#" class="btn btn-warning">购买</a>
</p>
</div>
</div>
</div>
<!--其余3个省略-->
</div>
</div>

2.9 模态框组件

data-toggle=“modal” 触发类型:模态框modal
data-target="#myModal" 触发的节点
data-backdrop=“static” 点击黑灰色背景，不会关闭模态框

<button class="btn btn-warning" data-toggle="modal" data-target="#myModal">弹框
</button>
<!-- 声明定义模态框组件 -->
<div class="modal" id="myModal" data-backdrop="static">
<!-- 窗口声明 -->
<div class="modal-dialog">
<!-- 内容声明 -->
<div class="modal-content">
<!-- 1.框的标题 -->
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span>&times;</span>
</button>
<h4 class="modal-title">友情提示</h4>
</div>
<!-- 2.框内信息 -->
<div class="modal-body">
服务器错误，请稍后再试！
<hr>
<img src="img/1.jpg" width="200px">
<hr>
<input type="text">
</div>
<!-- 3.框的按钮 -->
<div class="modal-footer">
<button class="btn btn-info">确定</button>
<button class="btn btn-default" data-dismiss="modal">取消
</button>
</div>
</div>
</div>
</div>

3.案例

3.1 首页轮播大图

\1. 大小屏幕自动适应,扩大缩小浏览器
\2. 滚动数字区点击左右切换图片
\3. 左右区域点击切换
\4. 默认5秒钟自动切换下一张
\5. 最后一张,回到第一张

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 滚动圆点区 -->
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel"></li>
<li data-slide-to="2" data-target="#myCarousel"></li>
</ol>
<!-- 图片区 -->
<div class="carousel-inner">
<div class="item active">
<img src="img/1.jpg">
</div>
<div class="item">
<img src="img/2.jpg">
</div>
<div class="item">
<img src="img/3.jpg">
</div>
</div>
<!-- 左右切换 -->
<a href="#myCarousel" data-slide="prev" class="carousel-control left">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

data 属性解释：
\1. data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置；
\2. data-slide-to 来向轮播底部创建一个原始滑动索引，data-slide-to=“2” 将把滑动块移动到一个特
定的索引，索引从 0 开始计数。
\3. data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放

3.2 响应式导航条

在这里插入图片描述

<!-- 默认的导航条样式 -->
<div class="navbar navbar-default">
<!-- 响应式的容器 -->
<div class="container">
<!-- 导航条的头部 -->
<div class="navbar-header">
<a href="#" class="navbar-brand">老孙科技股份有限公司</a>
<!-- data-toggle="collapse" 数据切换的事件，特效是折叠-->
<!-- data-target="#nav" 折叠效果的目标是下面的#nav容器-->
<button class="navbar-toggle" data-toggle="collapse" datatarget="#nav">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- 导航项 -->
<div id="nav" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"> <a href="#"> <span class="glyphiconglyphicon-home"></span> 主页</a> </li>
<li> <a href="#"> <span class="glyphicon glyphicon-camera"></span> 产品</a> </li>
<li> <a href="#"> <span class="glyphicon glyphicon-tint"></span>竞争</a> </li>
<li> <a href="#"> <span class="glyphicon glyphicon-earphone">
</span> 联系我们</a> </li>
</ul>
</div>
</div>
</div>