表单简介
-
表单的组成部分
-
form标签容器
-
表单域:input 标签,textarea。。select、、
-
提交按钮:<input type = “submit”>
<button type = “submit”>提交</button>
-
-
表单操作的特点:
-
提交数据时会出现跳转的情况
-
form标签的属性
-
action target method enctpe
-
常用的使用方式:
- 使用表单进行数据采集(用输入框等元素获取输入内容),使用ajax进行请求发送即可(提交)
阻止标签的默认行为
在submit事件中,设置e.even
<a href="http://www.baidu.com">跳转到百度</a>
$("a").on("click",function(e){
e.preventDefault();//阻止默认行为
return false;//或者返回false也可阻止跳转
})
//form 标签
<form action="http://www.baidu.com">
<input type="submit">
</form>
表单和ajax结合使用
快速获取表单中的数据
1.serialize()函数
-
作用:可以快速获取表单中的数据(只能获取纯文本数据)
-
使用方式:$(form的选择器).serialize()
-
结果形式:
- 名= 值&名=值&名=值…
-
注意:这两种内容格式可以通过$.get $.ajax进行直接发送
<form id="form1">
<input type="text" name = "uesername"/>
<input type="password" name = "password"/>
<input type="submit" value="提交">
</form>
$("#form1").serialize()
表单元素的reset()方法可以重置表单中的数据 (DOM方法 jQuery没有)
模板引擎
- 传统方式的字符串拼接比较麻烦,html与js书写在一起不方便维护
- 模版引擎:可以将生成结构的字符串拼接操作简化。
art-template使用,官网下载js文件
- 使用步骤:
- 引入template-web.js
- 准备数据(通常为请求得到的数据)
- 准备模板
- 使用script标签,设置type为 text/template,设置id
- 内部书写需要的结构内容
- 结构模板语法进行操作
- 调用template方法处理
- template(id名,数据)
- 返回值为将数据和模板结合后得到的字符串
//1.引入模板引擎的js文件
<script src = "template-web.js"></script>
//2.定义模板
//模板使用script标签,将type设置为非js格式,推荐写为text/template
<script type="text/template" id = "template">
{{$data}}
//data的属性可直接写属性:
<div><p>{{name}}</p></div>
<div><p>{{age}}</p></div>
<div><p>{{sex}}</p></div>
</script>
<script>
var data = {
name: "jack",
age:18,
sex:"男",
love:["吃","喝","玩"]}
</script>
//在js中引入模板结构内容
//参数1:模板的id名 参数2:要传入的数据
var htmlStr = template("template",data);
document.getElementById("box").innerHTML =htmlStr;
##模板引擎的语法
-
{{}}基本值的访问方式
- {{}}是模板的基本标记,标记中会进行模板与法的执行,标记外原样输出
- {{$data}}代表template()的参数2
- {{$data.属性名}}用于访问$data的属性
- 简写形式{{$data的属性名}}也表示访问$data的属性
-
{{@数据}}
- 如果数据中含有html标签结构,可以生成,如果不加@就不会生成
-
{{each}} 模板数据遍历
- 可以统一遍历数组和对象两种形式
- 在each中$index和$value是模板默认提供的名称,$index代表索引/属性名$value 代表元素值/属性值
- 可以通过自定义名称替换$index与$value
-
过滤器
- 作用:用来对模板中某些数据进行处理的一个方法
- 设置方式:
- 在调用模板功能前设置
<script type="text/template" id = "template"> {{time|过滤器名称}} </script> <script> var data123={ time:1578125356223 } template.defaults.improts.过滤器名称 = function(time){数据处理程序,return 数据} </script>
- 过滤器的返回值,会作为模板中最终展示的数据
- 模板中的写法
{{time}}这是普通的输出方式 {{time|过滤器名称}} 这是通过过滤器进行处理的一个方法
模板引擎实现方式
正则表达式:
-
对字符串进行匹配、替换、
-
正则.test(); 匹配:检测字符串是否满足某些规则;
-
字符串.replace(); 替换;
-
字符串.match(); 正则.exec(); 提取:将满足规则的内容取出;
1. exec()正则提取方法:
- 参数:要进行提取的字符串
- 返回值:提取到的内容所在的数组
- 规则:每次提取到一个新内容,再次调用再取新内容,取不到时返回null
var str = '姓名:{{name}}年龄:{{age}}';
var reg = /{{[a-z]+}}/g;
console.log(reg.exec(str));//"{{name}}"
console.log(reg.exec(str));//"{{age}}"
console.log(reg.exec(str)); //null
-
如果希望提取所以满足规则的内容,可以进行while循环
-
凡是被括号包裹的部分,也会进行单独提取!
.可以取到除了换行符以外的所有字符
exec()的特点是每次调用后,结果都会累计
2.replace()
- 参数1可以为普通字符串,也可以为正则表达式
match和exec的小区别:
-
用法区别
-
功能区别:
-
match可以一次提取所有数据,但是没法分组
-
exec每一次取一个,可以分组
-