前端（正则表达式、cookie、本地存储、jQueryUI）
2018-08-30 本文已影响0人
埃菲尔上的铁塔梦i
1、正则表达式
1、什么是正则表达式：
能让计算机读懂的字符串匹配规则。
2、正则表达式的写法：
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;
3、规则中的字符
(1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’
(2）转义字符匹配：
\d 匹配一个数字，即0-9
\D 匹配一个非数字，即除了0-9
\w 匹配一个单词字符（字母、数字、下划线）
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
\b 匹配单词边界
\B 匹配非单词边界
. 匹配一个任意字符，除了换行符‘\n’和回车符‘\r’
\1 重复子项
4、量词：对左边的匹配字符定义个数
? 出现零次或一次（最多出现一次）
+ 出现一次或多次（至少出现一次）
* 出现零次或多次（任意次）
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次
5、任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符
6、限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾
7、修饰参数：
g： global，全文搜索，默认搜索到第一个结果接停止
i： ingore case，忽略大小写，默认大小写敏感
m： multiple lines，多行搜索（更改^ 和$的含义，使它们分别在任意一行对待行首和行尾匹配，而不仅仅在整个字符串的开头和结尾匹配）
8、常用函数
（1）、test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假
（2）、search
用法：字符串.search(正则) 匹配成功，返回位置，否则返回-1
（3）、match
用法： 字符串.match(正则)；匹配成功，就返回匹配成功的数组，否则就返回null
（4）、replace
用法：字符串.replace(正则，新的字符串) 匹配成功的字符去替换新的字符
正则默认规则
匹配成功就结束，不会继续匹配，区分大小写
2、正则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cookie</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
//cookie的读和写需要在服务器环境下
//写cookie
//参数：名称、值、有效期几天、路径
$.cookie('mycookie','ok!',{expires:7,path:'/'});
//读cookie
var val = $.cookie('mycookie');
alert(val);//ok!
</script>
</head>
<body>
</body>
</html>
3、正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//匹配字母a，i表示忽略大小写，g表示全文检索
var re = new RegExp('a', 'ig');
var re2 = /a/ig;
var str = 'abc';
//调用test方法进行匹配，匹配成功返回true，否则返回false
// alert(re2.test(str));//true
//匹配字母ac，忽略大小写，全文检索
re2 = /ac/ig;
// alert(re2.test(str));//false
//匹配数字
var re3 = /\d/;
var str3 = '123';
// alert(re3.test(str3));//true
str3 = '123ab1';
// alert(re3.test(str3));//true
//匹配数字，全文检索
re3 = /\d/g;
// alert(re3.test(str3));//true
//匹配数字开头并结尾
re3 = /^\d$/;
// alert(re3.test(str3));//false
//匹配从开头到结尾有一个或多个数字
re3 = /^\d+$/;
// alert(re3.test(str3));//false
//匹配数字、字母、下划线
var re4 = /\w/;
var str4 = '@asd';
// alert(re4.test(str4));//true
//匹配数字、字母、下划线开头
re4 = /^\w/;
// alert(re4.test(str4));//false
str4 = 'as&d';
// alert(re4.test(str4));//true
//匹配从开头到结尾有一个或多个数字、字母、下划线
re4 = /^\w+$/;
// alert(re4.test(str4));//false
var str5 = '123adfas894fasdfas15122dfad85';
var re5 = /\d+/g;//全文检索一个或多个数字
var arr = str5.match(re5);
// alert(arr);//123,894,15122,85
var re6 = /d/;//匹配字母d
// alert(str5.search(re6));//4//search相当于indexOf()函数
//replace函数用于替换
var str6 = str5.replace(re5, '*');
// alert(str6);//*adfas*fasdfas*dfad*
//正则表达式的替换功能
var s = "Once111a22wolf,3always4a5wolf!";
var regex = /\d+/g;
var s2 = s.replace(regex, " ");
// console.log(s2);
/*叠词*/
//快快乐乐、高高兴兴
regex = /(.)\1(.)\2/;//()表示分组，.表示任意字符，匹配第一组任意字符再出现一次、第二组任意字符再出现一次
// console.log(regex.test("快快乐乐"));//true
// console.log(regex.test("快乐乐乐"));
// console.log(regex.test("高高兴兴"));//true
// console.log(regex.test("快乐快乐"));
//快乐快乐、高兴高兴
regex = /(..)\1/;//匹配两个任意字符再出现一次
// console.log(regex.test("快乐快乐"));//true
// console.log(regex.test("高兴高兴"));//true
// console.log(regex.test("快快快快"));//true
// console.log(regex.test("快快乐乐"));
//叠词切割
// s = 'sdqqfgkkkhjppppkl';
// regex = /(.)\1+/;
// var arr = s.split(regex);
// console.log(arr);//由于()中的是子表达式，会导致保留一个叠词字母，不符合要求
s = 'sdqqfgkkkhjppppkl';
regex = /(.)\1+/g;//匹配叠词，即多个重复的字母
var s2 = s.replace(regex, " ");//将叠词替换为空格
var arr = s2.split(' ');//再按照空格进行切割
// console.log(arr);//返回["sd","fg","hj","kl"]，符合要求
//字符串替换
var s = "我我....我...我.要...要要...要学....学学..学.编..编编.编.程.程.程..程";
var s2 = s.replace(/\.+/g, "");//删除所有的点
// console.log(s2);
var s3 = s2.replace(/(.)\1+/g, "$1");//全文检索叠词，替换为单个字符，例如多个“我”替换成一个“我”
// console.log(s3);
//提取手机号
//regex = /^1[3578]\d{9}$/;手机号的正则，只能匹配17688888888
var s = '我的手机号码是17688888888，曾经用过13187654321，还用过13512345678';
var regex = /1[3578]\d{9}/g;//第一位是1，第二位是3578中的一个，后面9位是任意数字，并全文检索
var arr = s.match(regex);//match方法返回匹配成功的数组
console.log(arr);//["17688888888","13187654321","13512345678"]
</script>
</head>
<body>
</body>
</html>
本地存储
本地存储分为cookie，以及新增的localStorage和sessionStorage
1、cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效。
jquery 设置cookie
$.cookie('mycookie','123',{expires:7,path:'/'});
jquery 获取cookie
$.cookie('mycookie');
2、localStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。
//设置：
localStorage.setItem("dat", "456");
localStorage.dat = '456';
//获取：
localStorage.getItem("dat");
localStorage.dat
//删除
localStorage.removeItem("dat");
3、sessionStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在同源的当前窗口关闭前有效。
localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制，可以将数据更新的通知监听者，Web Storage的api接口使用更方便。
iPhone的无痕浏览不支持Web Storage，只能用cookie。
4、cookie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cookie</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
//cookie的读和写需要在服务器环境下
//写cookie
//参数：名称、值、有效期几天、路径
$.cookie('mycookie','ok!',{expires:7,path:'/'});
//读cookie
var val = $.cookie('mycookie');
alert(val);//ok!
</script>
</head>
<body>
</body>
</html>
5、本地存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>本地存储</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//写入
//[{"id":1,"num":2,....},{}..]
localStorage.setItem('mystorage','ok!');
//读取
alert(localStorage.mystorage);//ok!
//写入
// sessionStorage.setItem('name','tom');
//读取
alert(sessionStorage.name);//tom//没有弹undefined
localStorage.setItem('mystorage','{"goods":["1","2"]}');
</script>
</head>
<body>
</body>
</html>
6、jQuerUI
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQueryUI</title>
<style type="text/css">
.con{
width: 300px;
height: 300px;
border: 1px solid #000;
margin: 50px auto 0;
}
.box{
width: 50px;
height: 50px;
background-color: gold;
cursor: pointer;/*鼠标经过时指针为手的形状*/
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
//draggable()使盒子可以任意拖动
$('.box').draggable({
//约束元素在父级内拖动
containment:'parent',
//限制在X轴方向上可以拖动
axis:'x',
//拖动时透明度变为60%
opacity:0.6,
//可以返回拖动的参数
drag:function(ev,ui){
// console.log(ui);//json格式的对象，offset是绝对位置，position是相对父级的位置
console.log(ui.position.left);//从左到右是1到250
}
});
})
</script>
</head>
<body>
<div class="con">
<div class="box"></div>
</div>
</body>
</html>
