您的位置:首页 > Web前端 > BootStrap

从零开始学Java记录(BootStrap + Jquery + AJax实例)——2019年6月3日

2019-06-03 20:39 1441 查看

今天又是一个学习JAVA的好日子!
表单
表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让
网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、
单选按钮、复选按钮、文本域和按钮等。

1、表单控件
.form-control .input-lg(较大) .input-sm(较小)
(1)输入框
.form-control
(2)下拉选择框 select
多行选择设置:multiple=“multiple”
(3)文本域 textarea
< textarea class=“form-control” rows=“3”></ textarea>
(4)复选框 checkbox
.checkbox,水平显示:.checkbox-inline
按钮
1)使用 button 实现
基础样式: btn
附加样式:btn-primary btn-info btn-success btn-warning
btn-danger btn-link btn-default
2)多标签支持:使用 a div 等制作按钮
3)按钮大小
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

按钮组
需要引入 bootstrap 的 fonts 文件夹。
要点:
1、 使用一个类名为 btn-group 的 div 包裹整个按钮组
2、 使用标签 button 、a、span 制作按钮,需要指定类名.btn
3、 使用 span 制作图标
4、 大小分类: btn-group-lg btn-group btn-group-sm btn-group-xs
5、 等分按钮: 自适应分组按钮 btn-group-justified
6、 默认为水平,使用 btn-group-vertical 制作垂直按钮组
7、 按钮工具栏: 在外层套用 .btn-toolbar 即可
8、 注意:btn-group-lg 仅仅是放大按钮,不能将所有的按钮作为连接在一起的按钮组

查询用户列表实例
unction loadData() {
// 发送ajax请求
$.ajax({
type:“get”,
url:“js/data.json”,
data:{
},
dataType:“json”, // 预期服务器返回的数据库
success:function(result){ // 回调函数
console.log(result);
// 判断数据是否查询成功 resultCode 1=成功,0=失败
if (result.resultCode == 1) { // 成功,显示数据列表
// 创建表格的dom
crateTable(result.result);
} else { // 失败,显示提示信息
// 设置提示信息
var msg = “< h2 >暂未查询到用户数据!</ h2>”;
// 将提示信息设置到div中
$("#userInfo").html(msg);
}
}
});
}

正则
一、定义正则
1、显式定义: 一眼就看明白
var 变量名 = new RegExp(“正则表达式模式”);
2、隐式定义: 常用,简单。没那么明显,大家可能一眼没有看出
注意:开头和结尾都必须是斜杠“/”,且不需要使用双引号括起来的
var 变量名 = /正则表达式模式/;
二、方法
1、、test
(1)作用:是否匹配正则表达式模式。
返回:true/false,true:匹配,false:不匹配
2、match
(1)作用:可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
3、exec()
返回字符串数组
三、 修饰符
1、修饰符
修饰符 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
2、用法
(1)new RegExp(“regexp”,“修饰符”)
(2)/regexp/修饰符

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: