jQuery、Bootstrap、Layui和响应式布局
前端
- 一、jQuery
-
- 1.1 概念
- 1.2 jQuery对象的获取
-
- 1.2.1 获取语法
- 1.2.2 基本选择器
- 1.2.3 属性及伪类选择器
- 1.2.4 获取对象-过滤选择器
- 1.2.5 案例
- 1.3 jQuery修改属性
- 1.4 jQuery修改样式
- 1.5 jQuery和DOM对象之间的转换
-
- 1.5.1 jQuery对象转DOM对象
- 1.5.2 DOM对象转jQuery对象
- 1.6 jQuery中的遍历形式
-
- 1.6.1 遍历节点
- 1.6.2 遍历数组或集合
- 1.6.3 案例
- 1.7 jQuery事件
-
- 1.7.1 ready事件
- 1.7.2 click点击事件
- 1.7.3 获取焦点`focus`/失去焦点`blur`事件
- 1.7.4 submit表单提交事件
- 1.7.5 鼠标事件
- 1.7.6 键盘事件
- 1.7.7 事件冒泡
- 1.8 jQuery事件绑定
-
- 1.8.1 on单个事件绑定
- 1.8.2 on多个事件绑定
- 1.8.3 on后添加的元素绑定事件
- 1.9 jQuery元素动态操作
-
- 1.9.1 节点的添加
- 1.9.2 节点的删除
- 1.10 正则表达式-RegExp
-
- 1.10.1 概述
- 1.10.2 语法
- 1.10.3 练习
- 1.10.4 案例-表单验证
- 1.11 jQuery动画
-
- 1.11.1 基本的显示隐藏
- 1.11.2 使用透明方式显示隐藏
- 1.11.3 使用滑动(折叠)方式显示隐藏
- 1.11.4 自定义动画
- 1.12 插件机制
- 1.13 案例
-
- 1.13.1 广告显示和隐藏
- 1.13.2 抽奖
- 二、Bootstrap
-
- 1.1 概念
- 1.2 快速入门
- 三、Layui
-
- 3.1 元素
-
- 3.1.1 字体图标
- 3.1.2 动画
- 3.1.3 按钮
- 3.1.4 表单
- 3.2 组件
-
- 3.2.1 form表单
- 3.2.2 table数据表格
- 四、响应式布局
-
- 4.1 概念
- 4.2 步骤
- 4.3 注意
一、jQuery
1.1 概念
jQuery： 本质是js的库，是将原本复杂的js代码进行封装，提供对应操作的方法，简化使用。
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
- 理念：写的少，做的多。（用更少的代码做更多的事情）
- 注意：jQuery中提供的函数或对象与js中的函数或对象是没有关系的。
-
由于jquery是js的库，所以使用前需要引入相应的库
jquery.min.js是压缩版；jquery.js是未压缩、开发版。 -
目前jQuery有三个大版本：(jquery-xxx.js或者jquery-xxx.min.js)
- 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
功能不再新增。因此一般项目来说，使用1.x版本就可以了，
最终版本：1.12.4 (2016年5月20日) - 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
最终版本：2.2.4 (2016年5月20日) - 3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
- 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
1.2 jQuery对象的获取
注意：使用jQuery语法获取对象后获取的是指定标签代表的jQuery对象
jQuery在进行对象获取时，考虑到了页面不同对象的获取方式，所以参照了CSS选择器的方式进行页面元素的获取。
- 入口函数:
$(function () {
});
window.onload和$(function)区别：window.onload只能定义一次,如果定义多次，后边的会将前边的覆盖掉$(function)可以定义多次的。
1.2.1 获取语法
//简化语法
$("选择器")
//与css书写方式一样 只不过是将css选择器书写在{}前的选择器内容放在""中
1.2.2 基本选择器
//基本选择器
//使用js进行获取
var btns = document.getElementsByTagName("button");
var btns2 = document.getElementsByClassName("btn");
//使用jQuery的形式获取 jQuery的形式获取到的元素都是一组元素
//命名的时候为了和js的变量进行区分，通常jQuery的变量前面都会加上一个$
var $btns = $('button');
var $btns2 = $('.btn');
//典型错误：$ is not defined 该错误的出现意味着jQuery的文件未加载成功
console.log($btns);
console.log($btns2);
1.2.3 属性及伪类选择器
使用css2提供的属性选择器及css3提供的伪类选择器可以更快捷的选择元素
//css2/3中提供的选择器
//获取除了submit按钮之外的其他的input标签
var $inNodes = $('input:not([type="submit"])');
console.log($inNodes);
console.log("--------灵魂分割线----------");
var $btns3 = $('button:nth-of-type(2n+1)');
console.log($btns3);
//jQuery中提供的常用选择器
console.log($('button:eq(1)'));//=
console.log($('button:gt(1)'));//>
console.log($('button:lt(1)'));//<
1.2.4 获取对象-过滤选择器
jQuery中大多数的操作都是以函数的形式存在的，对于元素的获取同样提供了对应的函数
//jQuery中提供的常用过滤器
console.log($('button').eq(1));
console.log($('input[type="text"]').next());
console.log($('button').parent());
console.log($('button').parent().children('button:eq(0)'));
1.2.5 案例
<style>
div {
height: 150px;
width: 150px;
background-color: aqua;
border: black solid 1px;
}
style>
<script src="../js/jquery.min.js">script>
<script>
//jquery准备事件简写
//在页面元素节点加载结束后执行
$(function () {
// 1、通过id获取jquery对象
// 在获取juqery声明变量保存时 一般要求变量名以$开始 用于区分普通对象与jquery对象
var $d1 = $("#d1")
//html()针对innerHtml属性进行操作的方法
$d1.html("通过id获取")
//方法中如果书写参数 则为赋值 不书写则为取值
console.log($d1.html())
// 2、通过class获取jquery对象
var $c1 = $(".c1")
// jquery对象可以理解为对应dom对象的数组
// 在调用赋值方法时 会将代表的所有dom对象进行操作(可以理解为内部自带遍历)
// 在获取调用取值方法时 默认获取第一个(索引为0)的dom对象对应属性的值
console.log($c1)
$c1.html("通过class获取")
// 3、通过标签获取jquery对象
var $div = $("div")
$div.html("通过标签获取")
// 4、通过属性获取标签
var text = $("input[type='text']")
// css style属性的对应方法
// 书写时填入两个值 第一个值为修改或获取的样式值 第二个为赋值
text.css("background-color", "red")
// 5、通过伪类选择
// eq()选择指定索引的jquery对象
var $div2=$("div:eq(1)")
$div2.css("background-color", "red")
// gt()选择大于索引1的jquery对象 lt()小于
// even 偶数索引 odd奇数索引
var $divgt1=$("div:even")
$divgt1.css("background-color", "yellow")
// 6、jquery提供了过滤的方法
// eq方法 在获取的所有jquery中继续获取指定索引
console.log($("div").eq(2))
// next方法 获取当前选择jquery对象下一个元素对象
console.log($("div").eq(1).next())
// parent方法 获取当前标签的父标签对象
console.log($("div").parent())
// children方法 获取当前标签的所有子标签对象
console.log($("div").parent().children())
})
script>
<body>
<div id="d1">
div>
<div class="c1">
c111
div>
<div class="c1">
c222
div>
<div class="c2">
div>
<input type="text">
<input type="password">
body>
1.3 jQuery修改属性
由于html属性过多。所以jquery在封装时只为一些常用的属性提供了对应的方法，其他属性使用统一的方法进行设置修改
jQuery中获取到的元素都是以组的形式存在的，元素值的三种操作方式结合API详细了解
<script src="../js/jquery.min.js">script>
<script>
// 页面主要标签加载后执行
$(function () {
// jquery所有的方法基本都是书写参数进行赋值 不书写则为获取
// html()方法
$("span").html("html方法等价于innerHTML
")
// text()方法
// 将内容直接书写在页面 不识别标签
$("span").text("html方法等价于innerHTML
")
// val()方法
// 设置获取指定对象的值
$("input").val("val方法等价于value属性")
//alert($("input").val()) //在方法中不书写参数则为获取
// attr()属性通用操作方法
// 第一个参数为操作的属性名 第二个参数为修改值
$("input").attr("type","button")
//alert($("input").attr("type"))
})
script>
<body>
<span>span>
<input type="text" value="默认值">
<input type="text">
<input type="text" >
body>
// 得到匹配元素集合中每个元素的合并文本，包括他们的后代
//console.log($('p').text());
console.log($('p').text('揍你啊'));
// 获取集合中第一个匹配元素的HTML内容
console.log($('p').html());
//console.log($('p').html('揍你啊'));
// 获取匹配的元素集合中第一个元素的当前值
console.log($('input').val());
// 将修改集合中每个元素的值
$('input').val("lala");
1.4 jQuery修改样式
多样式的修改语法与json的使用相同，其复合属性可使用"-"链接也可以首字母大写链接
<style>
.div2{
height: 100px;
background-color: green;
}
style>
<script src="../js/jquery.min.js">script>
<script>
$(function () {
// 1、通过修改样式属性的形式修改(不建议使用)
//jquery对style属性提供了对应的css方法
//在进行使用时赋值的样式与css书写样式属性名相同
//在属性字符串书写时不要写错
//jquery支持链式调用（可以重复调用方法设置）
var $div0 = $("div:eq(0)")
// $div0.css("background-color", "red").css("height", 100)
//也支持json数据形式的样式输入
$div0.css({ "background-color": "red", "height": 100 })
console.log($div0.css("height"))
// 2、通过修改class属性的形式修改(建议使用)
//jauery对于class书写提供了操作方法
var $div1 = $("div:eq(1)")
//addClass("class") 添加classs
$div1.addClass("div2")
//removeClass("remove") 移除class
$div1.removeClass("div2")
//hasClass 判断指定class是否存在
console.log( $div1.hasClass("div2"))
//toggleClass 切换class
//如果包含指定class则删除 不包含则添加
$div1.toggleClass("div2")
})
script>
<body>
<div>div>
<div>div>
body>
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function(){
//this.style.color = "red";
//修改单个样式.css(key,val)
//$('button').css('color','darkcyan');
//修改多个样式.css({key:val,key:val,...})
$('button').css({'color':'red','font-size':'20px'})
//获取样式
console.log($('button').css('font-size'));
}
1.5 jQuery和DOM对象之间的转换
jQuery对象只能使用jQuery中提供的函数或属性，同样的jQuery中的属性或函数只能由jQuery对象调用
JavaScript对象(DOM对象)只能使用JavaScript中提供的函数或属性，同样的JavaScript中的属性或函数只能由JavaScript对象进行调用
因此：在使用jQuery获取之后，需要使用DOM对象(Javascript对象)中的属性进行操作，这个时候就需要将jQuery对象转换为对应的DOM对象。
1.5.1 jQuery对象转DOM对象
- 方法
- jQuery中提供了get(index)函数用于对象的转换
- 使用数组下标的形式进行转换。
<script src="../js/jquery.min.js">script>
<style>
div {
height: 100px;
width: 100px;
border: solid 1px;
}
style>
<script>
$(function () {
var $div = $("div")
console.log($div)
//jquery对象可以看做是dom对象的数组
//jquery对象转换为dom对象就是将对应的dom对象从数组中取出来
//1、使用数组索引下标进行获取
console.log($div[0])
// for(var d of $div){
// console.log(d);
// }
//2、jquery提供了转换的方法get()
console.log($div.get(0))
})
script>
<body>
<div>div>
<div>div>
<div>div>
body>
1.5.2 DOM对象转jQuery对象
DOM对象转jQuery对象只需要满足jQuery的格式要求即可，使用
$()包裹js对象后就是jQuery对象
<script src="../js/jquery.min.js">script>
<style>
div {
height: 100px;
width: 100px;
border: solid 1px;
}
style>
<script>
$(function () {
var d1= document.getElementById("d1");
console.log(d1)
//dom转换jquery方法就是使用$()进行包裹 将对应dom对象传入
console.log($(d1))
var div=document.getElementsByTagName("div")
console.log(div)
console.log($(div))
})
script>
<body>
<div id="d1">div>
<div>div>
<div>div>
body>
1.6 jQuery中的遍历形式
数组、集合或json对象的遍历，jQuery中提供了新的更简洁的遍历形式
- 通用语法
要遍历的jquery对象.each(function(){遍历方法})
1.6.1 遍历节点
$('选择器').each(function(index,element){})，该写法是用于遍历获取到的元素对象
//目的：输出元素的内容 函数中不带参数
/* $('button').each(function(){
console.log(this.innerHTML);
}) */
//函数中带有一个参数,该参数代表下标
/* $('button').each(function(index){
console.log(index);
}) */
//参数一：下标，参数二：对象
$('button').each(function(index,element){
console.log(index,element.innerHTML);
})
console.log("-----------灵魂分割线-----------");
1.6.2 遍历数组或集合
$.each(data,function(key,value){})，主要用于遍历数组或json对象等
//遍历指定的集合数据,参数一：代表要遍历的集合对象，参数二：函数
var arr = ["张飞","刘备","关羽"];
/* $.each(arr,function(){
console.log(this);
}) */
/* $.each(arr,function(index){
console.log(index);
}) */
$.each(arr,function(index,element){
console.log(index,element);
})
var json = {"name":'张飞',"age":13};
$.each(json,function(key,val){
console.log(key,val);
})
1.6.3 案例
<script src="../js/jquery.min.js">script>
<style>
div {
height: 100px;
width: 100px;
border: solid 1px;
}
style>
<script>
$(function () {
//1、输出遍历
$("div").each(function(){
//使用this关键字代表每个取出的对象
//取出的时dom对象
console.log(this)
//这种方式与增强for循环结果相似
})
//2、声明索引 在遍历时使用
$("div").each(function(i){
//使用this关键字代表每个取出的对象
//取出的时dom对象
console.log(i,this)
//这种方式与增强for循环结果相似
})
//3、声明索引以及保存对象的变量
$("div").each(function(i,e){
//e与this相同都代表取出的dom对象
console.log(i,e)
})
//数组遍历
var strArr=["aaa","bbb","ccc"];
$.each(strArr,function(index,value){
console.log(index,value)
})
//json数据遍历
var jsonObj={"k1":"v1","k2":"v2"};
$.each(jsonObj,function(key,value){
console.log(key,value)
})
})
script>
<body>
<div>div>
<div>div>
<div>div>
body>
1.7 jQuery事件
jquery针对不同的事件提供了相应的事件方法，通过选择器选择对应的jquery对象调用对应的事件方法，就可以将事件与对应的dom对象进行绑定
事件书写格式
$("dom").事件名(function(){
事件执行方法
})
1.7.1 ready事件
ready和onload的区别：
1、onload事件是在页面的DOM结构及图片资源都加载完毕后执行的，而ready事件是在DOM结构加载完后执
2、onload事件只能使用一次，ready事件可使用多次
$(document).ready(function(){
//就绪执行
})
//简化写法
$(function(){
//就绪执行
})
<script src="../js/jquery.min.js"></script>
<script>
window.onload = function () {
alert("页面加载结束1")
}
//onload只能执行一次 执行后书写的
window.onload = function () {
alert("页面加载结束2")
}
//ready可以书写多个并执行
$(document).ready(function(){
alert("dom标签加载结束1")
})
$(function(){
alert("dom标签加载结束2")
})
</script>
1.7.2 click点击事件
<style>
div {
height: 100px;
width: 100px;
border: solid 1px;
}
</style>
<script src="../js/jquery.min.js"></script>
<!-- jquery旋转插件 -->
<script src="../js/jquery.rotate.min.js"></script>
<script>
$(function () {
//获取jquery对象设置点击事件
$("div").click(function () {
var i = 0;
console.log($(this).html())
setInterval(() => {
//由旋转插件提供的旋转方法
$(this).rotate(i--);
}, 1);
})
})
</script>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
1.7.3 获取焦点focus/失去焦点blur事件
一般用于输入框，当选择输入框获取光标时就是获取焦点，输入结束失去光标就是失去焦点
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
//获取焦点
$("input").focus(function () {
console.log("获取焦点" + this)
})
//失去焦点
$("input").blur(function () {
// console.log("失去焦点" + this)
//失去焦点后将数据输入div
$("div").html($(this).val())
})
})
</script>
<body>
<input type="text">
<div></div>
</body>
1.7.4 submit表单提交事件
<script src="../js/jquery.min.js">script>
<script>
$(function () {
$("form").submit(function(){
console.log("表单提交")
//jquery提交方法可以直接通过方法中的return进行表单的阻止
return false;
})
})
script>
<body>
<form action="#">
<input type="text" name="t">
<input type="submit" value="提交">
form>
body>
1.7.5 鼠标事件
<style>
div{
height: 200px;
width: 200px;
border: solid 1px;
}
style>
<script src="../js/jquery.min.js">script>
<script>
$(function(){
$("div:eq(0)").mousedown(function(){
console.log("鼠标按下")
})
$("div:eq(1)").mouseup(function(){
console.log("鼠标抬起")
})
$("div:eq(2)").mouseover(function(){
console.log("鼠标移入")
})
$("div:eq(3)").mouseout(function(){
console.log("鼠标移出")
})
$("div:eq(4)").mousemove(function(){
console.log("鼠标移动")
})
// event事件对象
//当相应事件发生时 都会创建相应的事件对象 保存对应事件的相应信息
$("div:eq(4)").mousemove(function(event){
//event 就是事件对象 保存事件发生相应的数据
console.log(event);
$(this).html(event.pageX+","+event.pageY)//页面位置
$(this).html(event.offsetX+","+event.offsetY)//当前标签位置
})
})
script>
<body>
<div>mousedowndiv>
<div>mouseupdiv>
<div>mouseoverdiv>
<div>mouseoutdiv>
<div>mousemovediv>
body>
- div鼠标跟随练习
<style>
body {
margin: 0;
height: 100vh;
width: 100%;
/* vh vw视口高度与宽度 就是当前浏览器展示大小 会分成100份 */
}
div {
height: 200px;
width: 200px;
background-color: aqua;
position: absolute;
}
style>
<script src="../js/jquery.min.js">script>
<script>
$(function () {
//为body添加鼠标移动事件
$("body").mousemove(function (e) {
//通过事件对象获取鼠标位置
var x = e.pageX;
var y = e.pageY;
//计算中心位置
var left = x - $("div").width() / 2;
var top = y - $("div").height() / 2;
//设置对应div位置
$("div").css({ "left": left, "top": top })
})
})
script>
<body>
<div>div>
body>
1.7.6 键盘事件
<script src="../js/jquery.min.js">script>
<script>
$(function () {
$("input").keypress(function (e) {
//键盘按下抬起事件
console.log(e.key,e.keyCode)
//key按下的key值
//keyCode 对应码值
})
})
script>
<body>
<input type="text">
body>
- WASD控制div标签页面移动
<style>
body {
margin: 0;
height: 100vh;
width: 100%;
}
div {
height: 100px;
width: 100px;
background-color: aqua;
position: absolute;
left: 0;
}
style>
<script src="../js/jquery.min.js">script>
<script>
$(function () {
//为body添加键盘事件
var setint;
$("body").keypress(function (e) {
clearInterval(setint)
setint= setInterval(() => {
move1(e.key)
}, 100);
})
function move1(key) {
//key代表移动方向
//通过事件获取按键值
var $div = $("div");
//获取当前left属性值字符串
var leftStr = $div.css("left")
//通过 截取与转换转换为数值
var left = parseInt(leftStr.substring(0, leftStr.length - 2))
//获取当前left属性值字符串
var topStr = $div.css("top")
//通过 截取与转换转换为数值
var top = parseInt(topStr.substring(0, topStr.length - 2))
if (key == "d") {
//设置移动
$div.css("left", left + $div.width())
} else if (key == "s") {
$div.css("top", top + $div.height())
} else if (key == "w") {
$div.css("top", top - $div.height())
} else if (key == "a") {
$div.css("left", left - $div.width())
}
}
})
script>
<body>
<div>
div>
body>
1.7.7 事件冒泡
由于页面标签是嵌套书写，所以在对内部标签添加事件后可能会导致外部标签也会触发
事件冒泡指事件向上传递-通常存在于具有包裹关系的元素中
如何阻止事件冒泡？
只要有事件的存在就一定有事件源-event
- 阻止事件冒泡：
event.stopPropagation();
<script src="../js/jquery.min.js">script>
<script>
$(function () {
// $('button').click(function () {
// alert('btn up');
// })
$('div').click(function () {
alert('div up')
})
$('body').click(function () {
alert('body up')
})
$('button').click(function (event) {
//阻止事件冒泡 只允许当前触发
event.stopPropagation();
alert('btn up');
})
})
script>
<body>
<div>
<button>按钮button>
div>
body>
1.8 jQuery事件绑定
jquery事件是以方法的形式进行绑定，不能实现灵活的操作，所以jquery提供了事件绑定与解绑的方法，可以通过字符串参数动态的进行对应事件以及标签的绑定与解绑
1.8.1 on单个事件绑定
通过on方法 将事件字符串以及处理事件的方法传入进行绑定
$("dom").on("事件名"，function(){处理事件函数})
<style>
div {
width: 100px;
height: 100px;
border: solid 1px;
}
style>
<script src="../js/jquery.min.js">script>
<script>
$(function () {
//on 绑定的语法
//$("dom").on("事件名",function(){处理事件方法})
$("button").click(function () {
var name = $("input").val()
//使用on绑定语法 将其事件绑定
$("div").on(name,function(e){
console.log(e.type)
})
})
})
script>
<body>
<input type="text" id="i1"> <button>绑定button>
<div>div>
body>
1.8.2 on多个事件绑定
对于一个标签可以进行多个事件的绑定，on方法同样通过参数也可以同时为标签绑定多个不同事件
- 为多个事件绑定不同函数
使用json数据将多个数据与对应函数进行绑定
$("dom").on({"事件1":"事件函数","事件2"："事件函数"})
1.8.3 on后添加的元素绑定事件
针对通过动态添加到页面中的元素进行事件绑定（此处先做了解，动态增删时演示案例）
- 语法：
$(已存在的父元素).on(事件名,子元素选择器,函数)
//给删除标签添加点击事件
$('table').on('click','.del',function(){
$(this).parent().parent().remove()
})
<style>
div {
width: 100px;
height: 100px;
border: solid 1px;
}
style>
<script src="../js/jquery.min.js">script>
<script>
$(function () {
//为div同时绑定鼠标移入与鼠标移出事件
$("div").on({
"mouseover": function () { console.log("鼠标移入") },
"mouseout": function () { console.log("鼠标移出") }
})
})
script>
<body>
<div>div>
body>
- 为多个事件绑定相同函数
将多个事件字符串使用空格分隔绑定相同的函数
$("dom").on("事件1 事件2 事件3"，"事件函数")
<style>
div {
width: 100px;
height: 100px;
border: solid 1px;
}
style>
<script src="../js/jquery.min.js">script>
<script>
$(function () {
//为div同时绑定鼠标移入与鼠标移出事件 使用相同的事件函数
$("div").on("mouseover mouseout", function (e) {
console.log(e.type)
})
})
script>
<body>
<div>div>
body>
1.9 jQuery元素动态操作
使用JavaScript的形式进行元素的增删时，优点是逻辑清晰明了，缺点是比较繁琐
1.9.1 节点的添加
- 获取子元素 / 父元素
| 函数 | 描述 |
|---|---|
| parent() | 获取父元素 |
| children() | 获取子元素 |
- 节点的添加
| 函数 | 描述 |
|---|---|
| prepend() | 将指定元素元素添加到当前元素的第一个位置 |
| append() | 将指定元素添加到的当前元素的最后一个位置 |
| before() | 在指定行同级之后添加指定标签 |
| after() | 在指定行同级之后添加指定标签 |
<script src="/js/jquery.min.js"></script>
<script>
$(function () {
// append()方法
$("button:eq(0)").click(function () {
//jquery添加方法无需创建标签 会自定根据书写的标签创建对应标签
//append在当前标签末尾添加指定标签
$("tbody").append("" + prompt("请输入姓名") + " " + prompt("请输入年龄") + " " + prompt("请输入性别") + " " + prompt("请输入姓名") + " " + prompt("请输入年龄") + " " + prompt("请输入性别") + " " + prompt("请输入姓名") + " " + prompt("请输入年龄") + " " + prompt("请输入性别") + " " + prompt("请输入姓名") + " " + prompt("请输入年龄") + " " + prompt("请输入性别") + " 1.9.2 节点的删除
- 结点的删除
| 函数 | 描述 |
|---|---|
| empty() | 从被选元素中删除子元素 |
| remove() | 删除被选元素（及其子元素） |
<script src="/js/jquery.min.js">script>
<script>
$(function () {
$("body>button").click(function () {
//清空tboday中的标签
$("tbody").empty()
})
$("td>button").click(function () {
//remove方法 将当前jquery代表的标签删除
$(this).parent().parent().remove()
})
})
script>
<body>
<button>清空表格数据button>
<table border="1">
<thead>
<tr>
<th>姓名th>
<th>年龄th>
<th>性别th>
<th>操作th>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>1td>
<td>1td>
<td><button>删除button>td>
tr>
<tr>
<td>3td>
<td>3td>
<td>3td>
<td><button>删除button>td>
tr>
<tr>
<td>5td>
<td>5td>
<td>5td>
<td><button>删除button>td>
tr>
tbody>
table>
body>
1.10 正则表达式-RegExp
1.10.1 概述
正则表达式主要是为了去处理(验证)一些比较复杂的数据，例如：手机号运营商区分、身份证号验证等
如果只是简单的验证就不要多此一举再去使用正则表达式，例如：是否为空、是否是11位数字等
- 要求：只需要各位掌握其基本的使用形式即可，不需要你写复杂的表达式，因为，通常情况下，公司会提供所需要的正则表达式的语句，或者公司没这方面的要求，通常情况下就直接百度一个。
1.10.2 语法
var patt=new RegExp(pattern,modifiers);或者更简单的方式:
var patt=/pattern/modifiers;
- pattern（模式） 描述了表达式的模式
- modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配
- 方括号用于查找某个范围内的字符:
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [^abc] | 查找任何不在方括号之间的字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| [a-z] | 查找任何从小写 a 到小写 z 的字符。 |
| [A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
| [A-z] | 查找任何从大写 A 到小写 z 的字符。 |
| [adgk] | 查找给定集合内的任何字符。 |
| [^adgk] | 查找给定集合外的任何字符。 |
| (red|blue|green) | 查找任何指定的选项 |
- 量词（掌握加粗的三个使用方式即可）：
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。 |
| n* | 匹配任何包含零个或多个 n 的字符串。 |
| n? | 匹配任何包含零个或一个 n 的字符串。 |
| n{X} | 匹配包含 X 个 n 的序列的字符串。 |
| n{X,Y} | 匹配包含 X 至 Y 个 n 的序列的字符串。 |
| n{X,} | 匹配包含至少 X 个 n 的序列的字符串。 |
| n$ | 匹配任何结尾为 n 的字符串。 |
| ^n | 匹配任何开头为 n 的字符串。 |
| ?=n | 匹配任何其后紧接指定字符串 n 的字符串。 |
| ?!n | 匹配任何其后没有紧接指定字符串 n 的字符串。 |
- RegExp对象方法：
| 方法 | 描述 | FF | IE |
|---|---|---|---|
| compile | 编译正则表达式。 | 1 | 4 |
| exec | 检索字符串中指定的值。返回找到的值，并确定其位置。 | 1 | 4 |
| test | 检索字符串中指定的值。返回 true 或 false |
1.10.3 练习
<script>
//基本语法[识别字符]{长度}[识别字符2]{长度}
var str1 = "111abbb"//要判断的字符串
var regObj1 = /[a]{1}/ //校验规则
//只要包含一个a返回true
console.log(regObj1.test(str1));
console.log("~~~~~~~~~~~~~~~~~~~~~")
var str2 = "a1b1c1cc"//要判断的字符串
var regObj2 = /[abc]{2}/ //校验规则
//只要存在两个连续的字符中包含abc任意两个
console.log(regObj2.test(str2));
console.log("~~~~~~~~~~~~~~~~~~~~~")
var str3 = "aaaaa"
var regObj3 = /a/ //校验规则
//省略写法默认长度为1 如果只有一个字符[]也可以省略
console.log(regObj3.test(str3));
console.log("~~~~~~~~~~~~~~~~~~~~~")
var str4 = "111fuck11"
var regObj4 = /fuck/ //校验规则
//必须包含fuck
console.log(regObj4.test(str4));
console.log("~~~~~~~~~~~~~~~~~~~~~")
var str5 = "asdaaabbccssdda"
var regObj5 = /a{2}b{2}c{2}/ //校验规则
console.log(regObj5.test(str5));
//校验输入的字符串包含连续的aabbcc
console.log("~~~~~~~~~~~~~~~~~~~~~")
//必须是长度为11的数字
//在指定长度设置时 必须使用^与$前后包裹
var str6 = "1.........."
var regObj6 = /^1[0-9]{10}$/ //校验规则
//^必须以之后的识别字符开头 放在识别[]中就是取反
//$必须以之前的识别字符结尾
// 一起使用用于限制字符串总长度
console.log(regObj6.test(str6));
var str7 = "cbaaaaa";
var regObj7 = /[a]{1}[b]{1}[c]{1,}/ //校验规则
//注册账号
//必须以大写字母开头 可以包含字母与数字 长度必须大于6位
var nameObje = /^[A-Z]{1}[0-9A-Za-z]{5,}$/
//注册密码
//只能书写数字 并且长度为6位
var pwdObj = /^[0-9]{6}$/
//注册邮箱
var strs="[email protected]";
var mailObj = /^[A-z0-9]+@(qq|163|sina|126|168)+.com$/
console.log(mailObj.test(strs))
//注册手机号
var phoneObj=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[1|3|5|6]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
script>
1.10.4 案例-表单验证
用户提交表单时对表单中的数据进行验证，同时，当输入框失去焦点时进行快速验证提示，提供用户体验性
在前台向后台发送数据并存储至数据库的过程中，有时前台客户会书写不符合格式要求的数据，这个时候就需要使用表单验证（如果后台接收错误的数据可能会报错，并且通知前台进行响应，为了减少后台以及服务器的压力，在页面进行表单验证，不正确的数据就不会发送给服务器，减少服务器请求次数）
<form action="#">
<label for="uname">username：label><input type="text" name="uname" id="uname"><span>span><br>
<label for="email">email：label><input type="text" name="email" id="email"><span>span><br>
<input type="submit" value="check">
form>
//定义用户名及邮箱的验证规则
let unameVerify = /^[0-9A-z]{6,12}$/i;
let emailVerify = /[0-9A-z]{1,}@[0-9A-z]{2,}\.(cn|com)$/;
//定义表单提交事件
$('form').submit(function(){
//验证表单内容是否完全符合规则
let flag = false;
$('input:not([type="submit"])').each(function(){
let content = $(this).val();
//用户名验证
if($(this).attr('name') == "uname"){
if(!unameVerify.test(content)){
//不符合规则
flag = false;
return;
}
flag = true;
}
if($(this).attr('name') == "email"){
if(!emailVerify.test(content)){
flag = false;
return;
}
flag = true;
}
})
return flag;
})
//通过焦点事件对单个输入框进行验证
$('input:not([type="submit"])').on({
//焦点事件
focus:function(){
if($(this).attr("name") == "uname"){
$(this).next().text("数字+字母6~12位");
$(this).next().css("color","#b0b0b0");
}
if($(this).attr("name") == "email"){
$(this).next().text("邮箱格式：[email protected]/com");
$(this).next().css("color","#b0b0b0");
}
},
//失去焦点事件
blur:function(){
let content = $(this).val()
if($(this).attr("name") == "uname"){
if(!unameVerify.test(content)){
$(this).next().text("用户名格式不正确");
$(this).next().css("color","red");
}
}
if($(this).attr("name") == "email"){
if(!emailVerify.test(content)){
$(this).next().text("邮箱格式不正确");
$(this).next().css("color","red");
}
}
}
})
1.11 jQuery动画
在进行样式操作时，我们可以通过不同的样式切换实现动画的效果，但是如果直接进行样式切换没有过度效果可能不太明显
1.11.1 基本的显示隐藏
jQuery对于显示隐藏的效果（对display属性）提供了显示、隐藏、切换方法
| 函数 | 描述 |
|---|---|
| show() | 显示方法 |
| hide() | 隐藏方法 |
| toggle() | 切换方法 |
<style>
div {
height: 100px;
width: 100px;
background-color: aqua;
}
style>
<script src="../js/jquery.min.js">script>
<script>
$(function () {
var $div = $("div");
$("button:eq(0)").click(function () {
//将display设置为block
$div.show()
})
$("button:eq(1)").click(function () {
//将display设置为none
$div.hide()
})
$("button:eq(2)").click(function () {
//根据当前设置进行隐藏与显示的切换
$div.toggle()
})
})
script>
<body>
<button>显示button><button>隐藏button><button>切换button>
<div>div>
<div>div>
<div>div>
body>
1.11.2 使用透明方式显示隐藏
通过将标签透明度进行设置之后显示隐藏的方法，提供了淡入、淡出、切换、设置对应透明度方法
| 函数 | 描述 |
|---|---|
| fadeIn() | 淡入方法 |
| fadeOut() | 淡出方法 |
| fadeToggle() | 淡入淡出切换方法 |
| fadeTo() | 设置透明度方法 |
<style>
div {
height: 100px;
width: 100px;
background-color: aqua;
}
style>
<script src="../js/jquery.min.js">script>
<script>
$(function () {
var $div = $("div");
// 两个参数 执行时间 回调方法
$("button:eq(0)").click(function () {
// 如果不写参数则使用默认的参数
$div.fadeIn();
})
$("button:eq(1)").click(function () {
// 设置执行时间
$div.fadeOut(1000)
})
$("button:eq(2)").click(function () {
//设置回调方法
//当执行结束后执行回调方法
$div.fadeToggle(2000,function(){
//注意每个标签执行结束后都会执行
alert("执行结束")
})
})
$("button:eq(3)").click(function () {
//设置透明度方法 需要指定透明度
// 执行时间 透明度 回调方法
$div.fadeTo(1000,0.3,function(){
console.log("将透明度修改为50%")
})
})
})
script>
<body>
<button>淡入button><button>淡出button><button>切换button><button>透明度button>
<div>div>
<div>div>
<div>div>
body>
1.11.3 使用滑动(折叠)方式显示隐藏
| 函数 | 描述 |
|---|---|
| slideDown() | 向下滑动方法 |
| slideUp() | 向上滑动方法 |
| slideTogeele() | 切换方法 |
<style>
div {
height: 100px;
width: 100px;
background-color: aqua;
}
style>
<script src="../js/jquery.min.js">script>
<script>
$(function () {
var $div = $("div");
$("button:eq(0)").click(function () {
//执行时间 回调方法
$("p").slideDown(2000);
})
$("button:eq(1)").click(function () {
$("p").slideUp(3000,function(){
console.log("将p标签收起")
});
})
$("button:eq(2)").mouseover(function () {
$("p").slideToggle(5000)
})
})
script>
<body>
<button>显示button><button>隐藏button><button>切换button>
<p>这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话p>
<p>这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话p>
<p>这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话p>
body>
1.11.4 自定义动画
通过设置不同的样式以及过渡，通过jquery动画方法实现动画的展示
| 函数 | 描述 |
|---|---|
| animate(json样式修改，执行时间，回调方法) | 自定义动画方法 |
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
border: solid 1px;
position: absolute;
}
style>
<script src="../js/jquery.min.js">script>
<script>
$(function () {
$("button").click(function () {
//只需要书写最终的样式即可
//注意设置的样式会在指定时间内同时进行变换
$("div").animate({ "border-radius": 50 }, 1000)
//动画顺序执行 会在前一个动画执行结束后执行
//也可以将之后的变化书写在回调方法中(建议)
$("div").animate({
"left": 100,
"width": 50,
"height": 50,
}, 2000)
})
})
script>
<body>
<button>执行动画button>
<div>div>
body>
1.12 插件机制
插件：增强jQuery的功能
-
实现方法：
$.fn.extend(object)
增强 ‘通过jQuery获取的对象’ 的功能。如：$(“#id”)$.extend(object)
增强 ‘jQUery对象自身’ 的功能。如：$ / jQuery
-
$.fn.extend(object)的代码演示：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery对象进行方法扩展title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框
//1.定义jqeury的对象插件
$.fn.extend({
//定义了一个check()方法。所有的jq对象都可以调用该方法
check:function () {
//让复选框选中
//this:调用该方法的jq对象
this.prop("checked",true);
},
uncheck:function () {
//让复选框不选中
this.prop("checked",false);
}
});
$(function () {
// 获取按钮
//$("#btn-check").check();
//复选框对象.check();
$("#btn-check").click(function () {
//获取复选框对象
$("input[type='checkbox']").check();
});
$("#btn-uncheck").click(function () {
//获取复选框对象
$("input[type='checkbox']").uncheck();
});
});
script>
head>
<body>
<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球
body>
html>
$.extend(object)的代码演示：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery对象进行方法扩展title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
$.extend({
max:function (a,b) {
//返回两数中的较大值
return a >= b ? a:b;
},
min:function (a,b) {
//返回两数中的较小值
return a <= b ? a:b;
}
});
//调用全局方法
var max = $.max(4,3);
//alert(max);
var min = $.min(1,2);
alert(min);
script>
head>
<body>
body>
html>
1.13 案例
1.13.1 广告显示和隐藏
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告的自动显示与隐藏title>
<style>
#content {
width: 100%;
height: 500px;
background: #999
}
style>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js">script>
<script>
/*
需求：
1. 当页面加载完，3秒后。自动显示广告
2. 广告显示5秒后，自动消失。
分析：
1. 使用定时器来完成。setTimeout (执行一次定时器)
2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
3. 使用 show/hide方法来完成广告的显示
*/
//入口函数，在页面加载完成之后，定义定时器，调用这两个方法
$(function () {
//定义定时器，调用adShow方法 3秒后执行一次
setTimeout(adShow, 3000);
//定义定时器，调用adHide方法，8秒后执行一次
setTimeout(adHide, 8000);
});
//显示广告
function adShow() {
//获取广告div，调用显示方法
$("#ad").show("slow");
}
//隐藏广告
function adHide() {
//获取广告div，调用隐藏方法
$("#ad").hide("slow");
}
script>
head>
<body>
<div>
<div id="ad" style="display: none;">
<img style="width:100%" src="./image/adv.jpg"/>
div>
<div id="content">
正文部分
div>
div>
body>
html>
1.13.2 抽奖
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery案例之抽奖title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js">script>
<script language='javascript' type='text/javascript'>
/*
分析：
1. 给开始按钮绑定单击事件
1.1 定义循环定时器
1.2 切换小相框的src属性
* 定义数组，存放图片资源路径
* 生成随机数。数组索引
2. 给结束按钮绑定单击事件
2.1 停止定时器
2.2 给大相框设置src属性
*/
var imgs = ["./image/man00.jpg",
"./image/man01.jpg",
"./image/man02.jpg",
"./image/man03.jpg",
"./image/man04.jpg",
"./image/man05.jpg",
"./image/man06.jpg",
];
var startId;//开始定时器的id
var index;//随机角标
$(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled", false);
$("#stopID").prop("disabled", true);
//1. 给开始按钮绑定单击事件
$("#startID").click(function () {
// 1.1 定义循环定时器 20毫秒执行一次
startId = setInterval(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled", true);
$("#stopID").prop("disabled", false);
//1.2生成随机角标 0-6
index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999
//1.3设置小相框的src属性
$("#img1ID").prop("src", imgs[index]);
}, 20);
});
//2. 给结束按钮绑定单击事件
$("#stopID").click(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled", false);
$("#stopID").prop("disabled", true);
// 1.1 停止定时器
clearInterval(startId);
// 1.2 给大相框设置src属性
$("#img2ID").prop("src", imgs[index]).hide();
//显示1秒之后
$("#img2ID").show(1000);
});
});
script>
head>
<body>
<div style="border-style:dotted;width:160px;height:100px">
<img id="img1ID" src="./image/man00.jpg" style="width:160px;height:100px"/>
div>
<div style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
<img id="img2ID" src="./image/man00.jpg" width="800px" height="500px"/>
div>
<input
id="startID"
type="button"
value="点击开始"
style="width:150px;height:150px;font-size:22px">
<input
id="stopID"
type="button"
value="点击停止"
style="width:150px;height:150px;font-size:22px">
body>
html>
二、Bootstrap
1.1 概念
一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
- 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
- 好处：
1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2. 响应式布局：同一套页面可以兼容不同分辨率的设备。- Bootstrap库(Bootstrap的所有js插件都依赖 jQuery，所以在加载bootstrap.min.js前必须先加载jquery.min.js)
bootstrap.min.css、jquery.min.js、bootstrap.min.js
1.2 快速入门
- 下载Bootstrap
- 在项目中将这三个文件夹复制
- 创建html页面，引入必要的资源文件
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>Bootstrap HelloWorldtitle>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js">script>
<script src="js/bootstrap.min.js">script>
head>
<body>
<h1>你好，世界！h1>
body>
html>
三、Layui
Layui：是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。
- 使用之前，需要提前导入Layui的css、js文件
3.1 元素
使用layui的css样式进行页面效果的书写（部分样式使用到js）
3.1.1 字体图标
layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。
<link rel="stylesheet" href="../layui/css/layui.css">
<style>
i {
/* 图标可以看作文本 可以直接通过响应属性进行样式的修改 */
color: red;
/* 在进行修改时注意权重问题 */
font-size: 50px !important;
}
style>
<body>
<i class="layui-icon">i>
<hr>
<i class="layui-icon layui-icon-heart-fill">i>
<hr>
<i class="layui-icon layui-icon-heart" onmouseover="moveup(this)" onmouseout="movedown(this)">i>
body>
<script>
function moveup(e) {
e.classList.replace("layui-icon-heart", "layui-icon-heart-fill")
}
function movedown(e) {
e.classList.replace("layui-icon-heart-fill", "layui-icon-heart")
}
script>
3.1.2 动画
layui 的动画全部采用 CSS3，因此不支持 ie8 和部分不支持 ie9。
<style>
div {
background-color: aqua;
height: 100px;
width: 100px;
}
style>
<link rel="stylesheet" href="../layui/css/layui.css">
<body>
<input type="text" id="i1"> <button onclick="to()">按钮button>
<div id="d1" class="layui-anim">div>
<div class="layui-anim layui-anim-rotate layui-anim-loop">div>
body>
<script>
function to() {
var i1 = document.getElementById("i1")
document.getElementById("d1").classList.add(i1.value)
}
script>
3.1.3 按钮
向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。
<style>
#btnDiv {
width: 200px;
}
style>
<link rel="stylesheet" href="../layui/css/layui.css">
<body>
<a href="#" class="layui-btn layui-btn-primary">原始a>
<span class="layui-btn"> 默认span>
<div class="layui-btn layui-btn-normal">百搭div>
<button class="layui-btn layui-btn-warm">暖色button>
<input type="button" class="layui-btn layui-btn-danger" value="警告">
<i class="layui-btn layui-btn-disabled">禁用i>
<hr>
<a href="#" class="layui-btn layui-btn-primary layui-border-green">原始主色a>
<hr>
<button type="button" class="layui-btn layui-btn-lg">一个标准的按钮button>
<button type="button" class="layui-btn">一个标准的按钮button>
<button type="button" class="layui-btn layui-btn-sm">一个标准的按钮button>
<button type="button" class="layui-btn layui-btn-xs">一个标准的按钮button>
<button type="button" class="layui-btn layui-btn-fluid ">流体按钮button>
<div id="btnDiv">
<button type="button" class="layui-btn layui-btn-fluid ">一个标准的按钮button>
div>
<hr>
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色button>
<hr>
<button class="layui-btn layui-btn-radius">
<i class="layui-icon layui-icon-heart-fill">i>收藏
button>
<hr>
<div class="layui-btn layui-btn-normal">百搭div>
<button class="layui-btn layui-btn-warm">暖色button><br>
<div class="layui-btn-group">
<div class="layui-btn layui-btn-normal">百搭div>
<button class="layui-btn layui-btn-warm">暖色button>
div>
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon">i>
button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon">i>
button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon">i>
button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon">i>
button>
div>
body>
3.1.4 表单
在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。
- 注意：layui的form表单需要对应模块的支持（需要使用js）才能完成对应标签的效果展示
在导入对应css与js的基础上需要添加form模块
- form模块
//在当前页添加模块
layui.use("模块名form", function(){
//操作代码
var form = layui.form //获取form模块
});
//同时添加多个模块
layui.use(['form', 'upload'], function(){
//操作代码
var form = layui.form //获取form模块
,upload = layui.upload; //获取upload模块
});
- 表单组成
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js">script>
<style>
#formDiv {
width: 600px;
border: solid;
}
form {
width: 500px;
}
style>
<body>
<div id="formDiv">
<form action="#" class="layui-form layui-form-pane">
账号:<input type="text" class="layui-input" name="username">
密码:<input type="password" class="layui-input" name="password">
<hr>
<select name="city">
<option value="">请选择一个城市option>
<option value="010">北京option>
<option value="021">上海option>
<option value="0571">杭州option>
select>
<select name="quiz">
<option value="">请选择option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市？option>
<option value="你的第一辆车">你的第一辆车？option>
optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号？option>
<option value="你最喜欢的老师">你最喜欢的老师？option>
optgroup>
select>
<hr>
默认风格：
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁用" disabled>
<br>
原始风格：
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
<br>
开关风格：
<input type="checkbox" name="" title="写作" lay-skin="switch" lay-text="挂掉他|让他活">
<hr>
<textarea name="" class="layui-textarea">textarea>
<hr>
<div class="layui-form-item">
<label class="layui-form-label">账号label>
<div class="layui-inline">
<input type="text" class="layui-input" name="username">
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">密码label>
<div class="layui-inline">
<input type="text" class="layui-input" name="password">
div>
div>
<hr>
form>
div>
body>
<script>
//Demo
layui.use('form', function () {
var form = layui.form;
});
script>
- 案例
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js">script>
<style>
#formDiv{
width: 500px;
border: solid 1px;
}
style>
<body>
<div id="formDiv">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">输入框label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
autocomplete="off" class="layui-input">
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">密码框label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
autocomplete="off" class="layui-input">
div>
<div class="layui-form-mid layui-word-aux">辅助文字div>
div>
<div class="layui-form-item">
<label class="layui-form-label">手机号label>
<div class="layui-input-block">
<input type="text" name="phone" required lay-verify="required" placeholder="请输入手机号"
autocomplete="off" class="layui-input">
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">选择框label>
<div class="layui-input-block">
<select name="city" lay-verify="required">
<option value="">option>
<option value="0">北京1option>
<option value="1">上海2option>
<option value="2">广州3option>
<option value="3">深圳4option>
<option value="4">杭州5option>
select>
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">复选框label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读" checked>
<input type="checkbox" name="like[dai]" title="发呆">
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">开关label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch">
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">单选框label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
div>
div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入内容" class="layui-textarea">textarea>
div>
div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交button>
<button type="reset" class="layui-btn layui-btn-primary">重置button>
div>
div>
form>
div>
body>
<script>
//Demo
layui.use('form', function () {
var form = layui.form;
});
script>
3.2 组件
使用layui的js 进行页面动态效果的书写与实现
3.2.1 form表单
- 事件触发
语法：
form.on('event(过滤器值)', callback);
默认情况下，事件所触发的是全部的form模块元素，但如果你只想触发某一个元素，使用事件过滤器即可。如：
form模块在 layui 事件机制中注册了专属事件，所以当你使用layui.onevent()自定义模块事件时，请勿占用form名。form支持的事件如下：
- 触发select选择
下拉选择框被选中时触发，回调函数返回一个object参数，携带两个成员：
// 默认情况下，事件所触发的是全部的form模块元素
form.on('select()', function(data){
console.log(data);
});
// 如果你只想触发某一个元素，使用事件过滤器即可
form.on('select(test)', function(data){
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
- 触发checkbox复选
复选框点击勾选时触发，回调函数返回一个object参数，携带两个成员：
form.on('checkbox(filter)', function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //是否被选中，true或者false
console.log(data.value); //复选框value值，也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});
- 触发switch开关
开关被点击时触发，回调函数返回一个object参数，携带两个成员：
form.on('switch(filter)', function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //开关是否开启，true或者false
console.log(data.value); //开关value值，也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});
- 触发radio单选
radio单选框被点击时触发，回调函数返回一个object参数，携带两个成员：
form.on('radio(filter)', function(data){
console.log(data.elem); //得到radio原始DOM对象
console.log(data.value); //被点击的radio的value值
});
- 触发submit提交
点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员：
form.on('submit(*)', function(data){
console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
- 表单赋值 / 取值
语法：
form.val('filter', object);
用于给指定表单集合的元素赋值和取值。如果 object 参数存在，则为赋值；如果 object 参数不存在，则为取值。
注：其中「取值」功能为 layui 2.5.5 开始新增
//给表单赋值
form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
"username": "贤心" // "name": "value"
,"sex": "女"
,"auth": 3
,"check[write]": true
,"open": false
,"desc": "我爱layui"
});
//获取表单区域所有值
var data1 = form.val("formTest");
- 表单验证
只需要在表单元素上加上 lay-verify=“” 属性值即可
自定义了类似上面的验证规则后，你只需要把 key 赋值给输入框的 lay-verify 属性即可：
<input type="text" lay-verify="username" placeholder="请输入用户名">
<input type="password" lay-verify="pass" placeholder="请输入密码">
自定义校验规则：
form.verify({
username: function(value, item){ //value：表单的值、item：表单的DOM对象
if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
return '用户名不能有特殊字符';
}
if(/(^\_)|(\__)|(\_+$)/.test(value)){
return '用户名首尾不能出现下划线\'_\'';
}
if(/^\d+\d+\d$/.test(value)){
return '用户名不能全为数字';
}
//如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
if(value === 'xxx'){
alert('用户名不能为敏感词');
return true;
}
}
//我们既支持上述函数式的方式，也支持下述数组的形式
//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
,pass: [
/^[\S]{6,12}$/
,'密码必须6到12位，且不能出现空格'
]
});
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<body>
<form class="layui-form" action="#" lay-filter="formObj">
<div class="layui-form-item">
<label class="layui-form-label">输入框label>
<div class="layui-input-block">
<input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="pwd">
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">下拉选择框label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value="0">写作option>
<option value="1">阅读option>
select>
div>
div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">请填写描述label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" name="desc" class="layui-textarea">textarea>
div>
div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">立即提交button>
<button type="reset" class="layui-btn layui-btn-primary">重置button>
div>
div>
form>
<script src="../layui/layui.js">script>
<script>
layui.use('form', function () {
var form = layui.form;
//对于事件的触发需要使用layui的语法进行设置
//书写语法为 form.on("事件(绑定字符串),function()");
//绑定字符串就是在标签书写的lay-filter="aihao"对应的值
form.on('select(aihao)', function (data) {
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
form.on('submit(*)', function (data) {
console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
//获取表单数据方法
//返回表格中书写的json格式数据
console.log(form.val("formObj"))
return true; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
//表单校验
//layui提供了丰富的表单校验方式
//只需要 lay-verify="校验规则" 就可以在提交前自动进行校验操作
//默认提供了常用的规则 如手机号 邮箱等
//也可以自定义规则书写
//自定义校验需要书写校验规则 之后可以直接通过lay-verify="规则"将对应规则绑定标签
//为当前页面定义校验规则方法
//参数为json格式数据
form.verify({
//校验规则json书写语法
//key 校验规则名称 value 校验相关数组
uname:[
//数组中依次填写 校验正则对象 以及提示信息
/^[0-9]{5}$/,
"账号格式不对"
],
pwd:[/^[A-z0-9]{6}$/,"密码格式不对"]
});
});
script>
body>
3.2.2 table数据表格
创建一个table实例最简单的方式是，在页面放置一个元素
，然后通过 table.render() 方法指定该容器
<script src="../layui/layui.js">script>
<link rel="stylesheet" href="../layui/css/layui.css">
<body>
<table id="table1" lay-filter="test">table>
body>
<script>
//加载模块
layui.use('table', function() {
var table = layui.table;
//第一个实例
table.render({
//用于绑定表格
elem: '#table1',
height: 500,
url: 'data.json' //数据接口
,
page: true //开启分页
,
cols: [
[ //表头
// 表头书写json形式数据
//用于将获取的json数据中对应的属性名与表头实际展示名相匹配
{
field: 'id',
title: 'ID',
width: 80,
sort: true,
fixed: 'left',
unresize: true
}, {
field: 'username',
title: '用户名',
width: 80
}, {
field: 'sex',
title: '性别',
width: 80,
sort: true
}, {
field: 'city',
title: '城市',
width: 80
}, {
field: 'sign',
title: '签名',
width: 177
}, {
field: 'experience',
title: '积分',
width: 80,
sort: true
}, {
field: 'logins',
title: '登录次数',
width: 120,
sort: true
}, {
field: 'score',
title: '评分',
width: 80,
sort: true
}, {
field: 'classify',
title: '职业',
width: 80
}, {
field: 'wealth',
title: '财富',
width: 135,
sort: true,
minWidth: 100
}
]
],
toolbar: true //打开工具栏
,
defaultToolbar: ['filter', 'print', 'exports'] //设置工具栏
,
limits: [1, 3, 5, 7] //设置分页选项
,
title: "标题"
});
});
script>
四、响应式布局
4.1 概念
同一套页面可以兼容不同分辨率的设备。
- 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
4.2 步骤
- 1.定义容器：相当于之前的table、
- 容器分类：
1.container：两边留白
2.container-fluid：每一种设备都是100%宽度- 2.定义行：相当于之前的tr
- 样式：
row- 3.定义元素：指定该元素在不同的设备上，所占的格子数目。
- 样式：
col-设备代号-格子数目
- 设备代号：
1.xs：超小屏幕 手机 (<768px)：col-xs-12
2.sm：小屏幕 平板 (≥768px)
3.md：中等屏幕 桌面显示器 (≥992px)
4.lg：大屏幕 大桌面显示器 (≥1200px)
4.3 注意
- 一行中如果格子数目超过12，则超出部分自动换行。
- 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
- 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
每日一点点进步
不进则退