从零开始学Java记录(BootStrap + Jquery + AJax实例)——2019年6月3日
今天又是一个学习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/修饰符
- twitter bootstrap+jquery ajax+Google OAuth2.0实现网站实例
- jquery+ajax(实例)
- jquery利用ajax调用后台方法实例
- AJax / JQuery 注册应用小实例
- SpringMVC+JQuery Ajax简单实例
- jquery--ajax实例(配置是重点)
- jquery中ajax跨域方法实例分析
- jQuery+JSON实现AJAX二级联动实例分析
- 使用jQuery轻松实现Ajax的实例代码
- Jquery AjaxUpload实现文件上传功能代码实例教程
- jQuery中ajax - post() 方法实例详解
- js结合jquery实现的ajax瀑布流加载实例
- ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)
- jquery + ajax + json入门实例
- javaweb+jQuery ajax实例
- JQuery打造PHP的AJAX表单提交实例
- jQuery学习笔记之Ajax用法实例详解
- jQuery实现AJAX定时刷新局部页面实例
- jquery+ajax实现注册实时验证实例详解
- ajax+php+jquery+json 跨域实例