Bootstrap框架
jQuery补充
jQuery中文API文档：http://jquery.cuishifeng.cn/
文档操作
将内容添加到指定元素内部的后面
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B //例子 $("p").append("a"); //把字符a追加到p标签中 $("p").append("<a>aaaa</a>"); //把内容追加到p标签中 $("p").appendTo("a"); //把p标签追加到a标签中 // var newLiel = document.createElement("p"); //创建dom对象 $(newLiel).text("444444"); //赋值 $("p").append(newLiel); //将dom对象添加到标签p中
将内容添加指定元素的前面
1 $(A).prepend(B)// 把B前置到A 2 $(A).prependTo(B)// 把A前置到B 3 //用法和上面的例子一样
将元素添加指定的元素外部的后面
1 $(A).after(B)// 把B放到A的后面 2 $(A).insertAfter(B)// 把A放到B的后面
将元素添加到指定元素外部的前面
1 $(A).before(B)// 把B放到A的前面 2 $(A).insertBefore(B)// 把A放到B的前面
例子：点击按钮在表格上添加一行数据和上删除一行数据
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文本操作</title> 6 </head> 7 <body> 8 <button id="b1">新增</button> 9 <table border="1"> 10 <thead> 11 <tr> 12 <th>#</th> 13 <th>姓名</th> 14 <th>爱好</th> 15 <th>操作</th> 16 </tr> 17 </thead> 18 <tbody> 19 <tr> 20 <td>1</td> 21 <td>jack</td> 22 <td>喊麦</td> 23 <td> 24 <button class="delete">删除</button> 25 <button>编辑</button> 26 </td> 27 </tr> 28 </tbody> 29 </table> 30 31 <script src="../jquery-3.3.1.min.js"></script> 32 33 <script> 34 //找到新增的按钮 35 $("#b1").click(function () { 36 //生成一条数据 tr 37 var newTrEle = document.createElement("tr"); 38 $(newTrEle).html("<td>2</td> <td>shier</td><td>学习</td><td><button class='delete'>删除</button> <button>编辑</button></td>") 39 //把新创建的tr追加到body中去 40 $("tbody").append(newTrEle); 41 }); 42 43 //删除按钮绑定事件 44 $("tbody").on("click",".delete",function () { 45 // this指向的是实际触发事件的元素 46 $(this).parent().parent().remove(); 47 }) 48 </script> 49 </body> 50 </html>
替换
replaceWith()
replaceAll()
clone()// 参数 //实例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>克隆</title> <style> #b1 { background-color: deeppink; padding: 5px; color: white; margin: 5px; } #b2 { background-color: dodgerblue; padding: 5px; color: white; margin: 5px; } </style> </head> <body> <button id="b1">屠龙宝刀，点击就送</button> <hr> <button id="b2">屠龙宝刀，点击就送</button> <script src="../jquery-3.3.1.min.js"></script> <script> // clone方法不加参数true，克隆标签但不克隆标签带的事件 $("#b1").on("click", function () { $(this).clone().insertAfter(this); }); // clone方法加参数true，克隆标签并且克隆标签带的事件 $("#b2").on("click", function () { $(this).clone(true).insertAfter(this); }); </script> </body> </html>
事件
1 click(function(){...}) 2 hover(function(){...}) 3 blur(function(){...}) 4 focus(function(){...}) 5 change(function(){...}) 6 keyup(function(){...})
例子：keydown和keyup事件组合示例
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>键盘事件示例</title> 8 </head> 9 <body> 10 11 <table border="1"> 12 <thead> 13 <tr> 14 <th>#</th> 15 <th>姓名</th> 16 <th>操作</th> 17 </tr> 18 </thead> 19 <tbody> 20 <tr> 21 <td><input type="checkbox"></td> 22 <td>Jack</td> 23 <td> 24 <select> 25 <option value="1">上线</option> 26 <option value="2">下线</option> 27 <option value="3">停职</option> 28 </select> 29 </td> 30 </tr> 31 <tr> 32 <td><input type="checkbox"></td> 33 <td>Tom</td> 34 <td> 35 <select> 36 <option value="1">上线</option> 37 <option value="2">下线</option> 38 <option value="3">停职</option> 39 </select> 40 </td> 41 </tr> 42 <tr> 43 <td><input type="checkbox"></td> 44 <td>shier</td> 45 <td> 46 <select> 47 <option value="1">上线</option> 48 <option value="2">下线</option> 49 <option value="3">停职</option> 50 </select> 51 </td> 52 </tr> 53 <tr> 54 <td><input type="checkbox"></td> 55 <td>EvaJ</td> 56 <td> 57 <select> 58 <option value="1">上线</option> 59 <option value="2">下线</option> 60 <option value="3">停职</option> 61 </select> 62 </td> 63 </tr> 64 <tr> 65 <td><input type="checkbox"></td> 66 <td>Gold</td> 67 <td> 68 <select> 69 <option value="1">上线</option> 70 <option value="2">下线</option> 71 <option value="3">停职</option> 72 </select> 73 </td> 74 </tr> 75 </tbody> 76 </table> 77 78 <script src="../jquery-3.3.1.min.js"></script> 79 <script> 80 //判断条件 81 var flag = false; 82 //找到shift按下的时候把flag设置为true 83 $(window).keydown(function (e) { 84 if (e.keyCode === 16) { 85 flag = true 86 } 87 }); 88 89 //shift台上的时候设置flat设置为false 90 $(window).keyup(function (e) { 91 if (e.keyCode === 16) { 92 flag = false 93 } 94 }); 95 //给select绑定change实例 96 $("select").change(function () { 97 //判断当前的select是否被checkbox选中 98 var currentCheckbox = $(this).parent().parent().find(":checkbox").prop("checked") 99 if (flag && currentCheckbox) { 100 //去到当前的select值 101 var selectValue = $(this).val(); 102 //对所有选中checkbox的select设置统一的值 103 $("input[type='checkbox']:checked").parent().parent().find("select").val(selectValue) 104 } 105 }); 106 </script> 107 </body> 108 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>hover示例</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 .nav { 14 height: 40px; 15 width: 100%; 16 background-color: #3d3d3d; 17 position: fixed; 18 top: 0; 19 } 20 21 .nav ul { 22 list-style-type: none; 23 line-height: 40px; 24 } 25 26 .nav li { 27 float: left; 28 padding: 0 10px; 29 color: #999999; 30 position: relative; 31 } 32 .nav li:hover { 33 background-color: #0f0f0f; 34 color: white; 35 } 36 37 .clearfix:after { 38 content: ""; 39 display: block; 40 clear: both; 41 } 42 43 .son { 44 position: absolute; 45 top: 40px; 46 right: 0; 47 height: 50px; 48 width: 100px; 49 background-color: #00a9ff; 50 display: none; 51 } 52 53 .hover .son { 54 display: block; 55 } 56 </style> 57 </head> 58 <body> 59 <div class="nav"> 60 <ul class="clearfix"> 61 <li>登录</li> 62 <li>注册</li> 63 <li>购物车 64 <p class="son hide"> 65 啥他妈都没有... 66 </p> 67 </li> 68 </ul> 69 </div> 70 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> 71 <script> 72 $(".nav li").hover( 73 function () { 74 $(this).addClass("hover"); 75 }, 76 function () { 77 $(this).removeClass("hover"); 78 } 79 ); 80 </script> 81 </body> 82 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>实时监听input输入值变化</title> 8 </head> 9 <body> 10 <input type="text" id="i1"> 11 12 <script src="../jquery-3.3.1.min.js"></script> 13 <script> 14 /* 15 * oninput是HTML5的标准事件 16 * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化， 17 * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发 18 * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代 19 * 使用jQuery库的话直接使用on同时绑定这两个事件即可。 20 * */ 21 $("#i1").on("input propertychange", function () { 22 alert($(this).val()); 23 }) 24 </script> 25 </body> 26 </html>
事件绑定
1 .on( events [, selector ],function(){}) 2 events： 事件 3 selector: 选择器（可选的） 4 function: 事件处理函数
事件移除
1 .off( events [, selector ][,function(){}]) 2 off() 方法移除用 .on()绑定的事件处理程序。 3 events： 事件 4 selector: 选择器（可选的） 5 function: 事件处理函数
住址后续事件的执行
1 return false; // 常见阻止表单提交等 2 3 //注意： 4 像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。 5 6 //想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件 7 $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件 8 $(this).addClass('hover'); 9 }); 10 $('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件 11 $(this).removeClass('hover'); 12 });
页面加载
1 //No.1 2 $(document).ready(function(){ 3 // 在这里写你的JS代码... 4 }) 5 6 //No.2 7 $(function(){ 8 // 你在这里写你的代码 9 })
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>登录注册示例</title> 8 <style> 9 .error { 10 color: red; 11 } 12 </style> 13 </head> 14 <body> 15 16 <form id="myForm"> 17 <label for="name">姓名</label> 18 <input type="text" id="name"> 19 <span class="error"></span> 20 <label for="passwd">密码</label> 21 <input type="password" id="passwd"> 22 <span class="error"></span> 23 <input type="submit" id="modal-submit" value="登录"> 24 </form> 25 26 <script src="../jquery-3.3.1.min.js"></script> 27 <!--<script src="s7validate.js"></script>--> 28 <script> 29 function myValidation() { 30 // 多次用到的jQuery对象存储到一个变量，避免重复查询文档树 31 var $myForm = $("#myForm"); 32 $myForm.find(":submit").on("click", function () { 33 // 定义一个标志位，记录表单填写是否正常 34 var flag = true; 35 $myForm.find(":text, :password").each(function () { 36 var val = $(this).val(); 37 if (val.length <= 0 ){ 38 var labelName = $(this).prev("label").text(); 39 $(this).next("span").text(labelName + "不能为空"); 40 flag = false; 41 } 42 }); 43 // 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件 44 return flag; 45 }); 46 // input输入框获取焦点后移除之前的错误提示信息 47 $myForm.find("input[type!='submit']").on("focus", function () { 48 $(this).next(".error").text(""); 49 }) 50 } 51 // 文档树就绪后执行 52 $(document).ready(function () { 53 myValidation(); 54 }); 55 </script> 56 </body> 57 </html>
委托事件
1 事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。 2 3 示例： 4 5 表格中每一行的编辑和删除按钮都能触发相应的事件。 6 $("table").on("click", ".delete", function () { 7 // 删除按钮绑定的事件 8 })
动画效果
1 // 基本 2 show([s,[e],[fn]]) 3 hide([s,[e],[fn]]) 4 toggle([s],[e],[fn]) 5 // 滑动 6 slideDown([s],[e],[fn]) 7 slideUp([s,[e],[fn]]) 8 slideToggle([s],[e],[fn]) 9 // 淡入淡出 10 fadeIn([s],[e],[fn]) 11 fadeOut([s],[e],[fn]) 12 fadeTo([[s],o,[e],[fn]]) 13 fadeToggle([s,[e],[fn]]) 14 // 自定义（了解即可） 15 animate(p,[s],[e],[fn])
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>点赞动画示例</title> 8 <style> 9 div { 10 position: relative; 11 display: inline-block; 12 } 13 div>i { 14 display: inline-block; 15 color: red; 16 position: absolute; 17 right: -16px; 18 top: -5px; 19 opacity: 1; 20 } 21 </style> 22 </head> 23 <body> 24 25 <div id="d1">点赞</div> 26 <script src="jquery-3.2.1.min.js"></script> 27 <script> 28 $("#d1").on("click", function () { 29 var newI = document.createElement("i"); 30 newI.innerText = "+1"; 31 $(this).append(newI); 32 $(this).children("i").animate({ 33 opacity: 0 34 }, 1000) 35 }) 36 </script> 37 </body> 38 </html>
each函数
1 描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。 2 3 //例如 4 li =[10,20,30,40] 5 $.each(li,function(i, v){ 6 console.log(i, v);//index是索引，ele是每次循环的具体元素。 7 }) 8 //输出 9 010 10 120 11 230 12 340
遍历一个jquery对象，为每个匹配元素执行一个函数。
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
1 // 为每一个li标签添加foo 2 $("li").each(function(){ 3 $(this).addClass("c1"); 4 }); 5 注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法： 6 也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了： 7 $("li").addClass("c1"); // 对所有标签做统一操作
注意：
在遍历的过程中可以使用return false提前结束each循环。return false提前结束each循环。
1 //终止each循环 2 return false；
data方法
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
描述：在匹配的元素上存储任意相关数据。
1 No.1：data(key, value): 2 $("div").data("k",100);//给所有div标签都保存一个名为k，值为100 3 4 No.2: data(key): 5 描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。 6 7 $("div").data("k");//返回第一个div标签中保存的"k"的值 8 9 removeData(key): 10 描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。 11 $("div").removeData("k"); //移除元素上存放k对应的数据
bootstrap框架
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
它是为实现快速开发Web应用程序而设计的一套前端工具包。
它支持响应式布局，并且在V3版本之后坚持移动设备优先。
官方地址：https://getbootstrap.com
中文地址：http://www.bootcss.com/
bootstrap的全局样式
1 排版、按钮、表格、表单、图片等我们常用的HTML元素，Bootstrap中都提供了全局样式。 2 3 我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。
标题样式
1 <h1>一级标题36px</h1> 2 <h2>二级标题30px</h2> 3 <h3>三级标题24px</h3> 4 <h4>四级标题18px</h4> 5 <h5>五级标题14px</h5> 6 <h6>六级标题12px</h6> 7 <!--除了使用h标签，Bootstrap内置了相应的全局样式--> 8 <!--内联标签应用标题样式--> 9 <span class="h1">一级标题36px</span> 10 <span class="h2">二级标题30px</span> 11 <span class="h3">三级标题24px</span> 12 <span class="h4">四级标题18px</span> 13 <span class="h5">五级标题14px</span> 14 <span class="h6">六级标题12px</span>
文本对齐
1 <!--文本对齐--> 2 <p class="text-left">文本左对齐</p> 3 <p class="text-center">文本居中</p> 4 <p class="text-right">文本右对齐</p> 5 6 //文本大小写 7 <!--大小写--> 8 <p class="text-lowercase">Lowercased text.</p> 9 <p class="text-uppercase">Uppercased text.</p> 10 <p class="text-capitalize">Capitalized text.</p>
表格
|
Class |
描述 |
|
.table-striped |
条纹状表格 |
|
.table-bordered |
带边框的表格 |
|
.table-hover |
鼠标悬停变色的表格 |
|
.table-condensed |
紧缩型表格 |
|
.table-responsive |
响应式表格 |
状态类
|
Class |
描述 |
|
.active |
鼠标悬停在行或单元格上时所设置的颜色 |
|
.success |
标识成功或积极的动作 |
|
.info |
标识普通的提示信息或动作 |
|
.warning |
标识警告或需要用户注意 |
|
.danger |
标识危险或潜在的带来负面影响的动作 |
按钮样式
1 <a class="btn btn-default" href="#" role="button">Link</a> 2 <button class="btn btn-default" type="submit">Button</button> 3 <input class="btn btn-default" type="button" value="Input"> 4 <input class="btn btn-default" type="submit" value="Submit"> 5 6 //样式 7 <!-- Standard button --> 8 <button type="button" class="btn btn-default">（默认样式）Default</button> 9 <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> 10 <button type="button" class="btn btn-primary">（首选项）Primary</button> 11 <!-- Indicates a successful or positive action --> 12 <button type="button" class="btn btn-success">（成功）Success</button> 13 <!-- Contextual button for informational alert messages --> 14 <button type="button" class="btn btn-info">（一般信息）Info</button> 15 <!-- Indicates caution should be taken with this action --> 16 <button type="button" class="btn btn-warning">（警告）Warning</button> 17 <!-- Indicates a dangerous or potentially negative action --> 18 <button type="button" class="btn btn-danger">（危险）Danger</button> 19 <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> 20 <button type="button" class="btn btn-link">（链接）Link</button> 21 22 //按钮大小 23 <p> 24 <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button> 25 <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button> 26 </p> 27 <p> 28 <button type="button" class="btn btn-primary">（默认尺寸）Default button</button> 29 <button type="button" class="btn btn-default">（默认尺寸）Default button</button> 30 </p> 31 <p> 32 <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button> 33 <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button> 34 </p> 35 <p> 36 <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button> 37 <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button> 38 </p>
图片样式
1 <img src="..." class="img-responsive" alt="Responsive image"> 2 3 //形状 4 <img src="..." alt="..." class="img-rounded"> 5 <img src="..." alt="..." class="img-circle"> 6 <img src="..." alt="..." class="img-thumbnail">
辅助类
1 //文本颜色 2 p class="text-muted">...</p> 3 <p class="text-primary">...</p> 4 <p class="text-success">...</p> 5 <p class="text-info">...</p> 6 <p class="text-warning">...</p> 7 <p class="text-danger">...</p> 8 9 //背景颜色 10 <p class="bg-primary">...</p> 11 <p class="bg-success">...</p> 12 <p class="bg-info">...</p> 13 <p class="bg-warning">...</p> 14 <p class="bg-danger">...</p> 15 16 //关闭按钮 17 <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button> 18 19 //下拉三角 20 <span class="caret"></span> 21 //快速浮动 22 <div class="pull-left">...</div> 23 <div class="pull-right">...</div> 24 //内容快居中 25 <div class="center-block">...</div> 26 //清除浮动 27 <div class="clearfix"></div> 28 //显示与隐藏 29 <div class="show">...</div> 30 <div class="hidden">...</div>
实例：模拟滚动条
1 var $d1 = $("#d1"); 2 var width = 0; 3 var theID = setInterval(setValue, 200); 4 5 function setValue() { 6 if (width === 100) { 7 clearInterval(theID); 8 } else { 9 width++; 10 $d1.css("width", width+"%").text(width+"%"); 11 } 12 }
为什么要进行响应式开发
随着移动设备的流行，网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。
什么是响应式
利用媒体查询，让同一个网站兼容不同的终端（PC端、移动端）呈现不同的页面布局
所用技术
用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。
常见属性：
- device-width, device-height 屏幕宽、高
- width,height 渲染窗口宽、高
- orientation 设备方向
- resolution 设备分辨率
