触发事件本质上其实也是增加属性,也可以单独调用
test.onclick = function () { }
test.onclick();
模板引擎–ArtTemplate
使用:
- 引包
- 制作模板:要给script标签添加type属性和id,type属性可以随便写但不能是 text/javascript (建议用text/html),替换的内容用<%= 变量 %>
如:
<script type = "text/html" id = "tpl">
<div>我叫<%= name %></div>
</script>
<!--注意,这里的script标签只是用于写模板-->
- 调用:
第一个参数确定用哪套模板,第二个参数确定用哪个对象进行填充,返回的是html
var html = template('tpl', obj);
- 添加:
div.innerHTML = html;
带参数传递和语句的模板
<script type = "tp" id = "tpl">
<% for (var i = 0; i < list.length; i++) { %>
<div>我叫<%= name %></div>
<div></div>
<% } %>
</script>
取用时:
template('tpl' , '{list:arr}');
前面参数告诉用哪个模板,后面参数说用什么参数填充
自带循环
list位置是对象(或数组) value位置是值 key位置是键(数组中对应下标)
{{each list value key}}
<tr>
<td><%= value.name %></td>
</tr>
{{/each}}
同源&跨域
比较 协议头(http/https) 域名 端口(默认是0),三者全部一样叫同源,否则叫跨域
(是后端的活,前端了解)
跨域的影响:浏览器出于安全的考虑,不允许跨域访问,即自己的服务器不能随便访问跨域的接口
跨域的方法:
CORS技术:Cross Origin Resource Share
在服务器端写响应头:
header("Access-Control-Allow-Origin:*");//所有资源都能访问
header("Access-Control-Allow-Origin:https://www.baidu.com");//只允许访问只能域名的资源
JSONP 方法
专门做跨域请求的一套组合
前端部分(heml + css + js)能发请求的方法:
1.xhr
2.<a href=""></a>
会跳转,所以pass
3.<img src="" alt="">
拿不到响应体
4.<link rel="stylesheet" href="">
拿不到响应体
5.<script src=""></script>
可以用特定方法拿到响应体
<script>
function(obj){
console.log(bj);
}
</script>
在 script 标签src链接的跨域端口后面添加一个 ?callback=test(test是定义的函数名)
可以自动转换JSON为js对象
原理:
script标签引入之后会获取所链接的文件内容并作为js代码执行(如.js / .txt 等),但是例如php代码等会在服务器端的PHP环境进行解析之后才返回给浏览器,然后浏览器引擎再当成js文件进行解析
利用这一特点,可以在本地端:
- 定义一个接收函数:
<script>
function func(obj){
console.log(obj);
}
</script>
传给服务器:
<script src="跨域端口?callback=func(告诉服务器用啥函数名)&参数"></script>
在服务器端:
<?php
$fun = $_GET['callback']
$arr = Array(){
"name" -> "jack" ,
"age" -> 18
}
$json = json_encode($arr); //编码为json对象
echo "$func($json)"; //php中双引号所包含的变量会被解析,相当于把$json 作为js函数的参数返回给指定的接收函数
?>
用js实现的时候,为了防止页面加载的时候就将script标签解析,可以用:
var spt = document.creatElement('script');
spt.src = "" //这里就可以用字符串拼接了
document.head.appendChild(spt);
//JSONP的响应是一个字符串,字符串里写的是函数执行
正则表达式基础:验证字符串是否匹配某种格式
在js中有个对象RegExp
,叫做正则对象
括号里面设置规则:
var reg = new RegExp(/a/); //是否包含a,用两个斜杠包含
或者:
var reg = /a/;
有个很重要的方法叫做test()
,用于测试是否符合要求
reg.test('abcd');
返回布尔值
可以直接用/a/.test('abcd');
预定义类:(注意要用/ /包括起来)
符号 | 说明 |
---|---|
. | 只要出现了除了 \r \n 以外的字符都返回true |
\d | 只要有0-9的数字就返回true |
\D | 只要有**非**0-9的数字就返回true |
\s | 只要出现了不可见字符(空格 \r \n \t 等)就返回true **空字符串表示什么都没有,不满足 |
\S | (S大写)只要出现了可见字符就是true |
\w | 只要出现数字字母下划线就是true |
\W | 只要出现 非 数字字母下划线就是true |