本文详细介绍了JavaScript中的正则表达式用法，包括数字方法、字符串方法、大小写转换、字符串截取及正则相关方法。同时，讲解了DOM操作，如属性读取、事件监听及批量处理，并提供了实例代码。此外，还提到了定时器的使用以及能力检测的重要性。
学习JavaScript的笔记（三）
正则表达式
在js中，一切数据本质上都是对象，都有各自的属性和操作方法（值类型创建的时候，也是通过对象的方式创建的）
数字方法
保留两位小数
var i = 11;
console.log(i.toFixed(2));
注：此时的数据类型已经被转换成了字符串，因为只有字符串才能保留小数
字符串方法
- length属性：返回字符串的长度
- charAt()：表示通过指定位置返回该位置的字符
- indexOf()：表示通过指定字符首次出现的额索引值，如果没有则返回-1
- concat()：表示字符串的拼接
- split()：字符串转换成数组
var str = 'hello world!'
console.log(str.length);
console.log(str.indexOf('w'));
console.log(str.charAt(4));
console.log(str.split());
字符串大小写转换与字符串截取
toUpperCase():转换成大写字母
toPowerCase():转换成小写字母
slice(start, end):从start截取到end，包括start不包括end
substr(start, howmany):从start截取howmany个数
substring(start,end):从start截取到end，包括start不包括end
正则方法
正则表达式：是被用来匹配字符串中的字符组合的模式，是最简单的数据（字符串）验证方式。常用于表单的验证
创建方式：使用正则字面量，/表达式/
正则数据类型：引用正则数据类型，同时也提供了一些方法
正则方法：
exec():用于将首次匹配到的字符以数组的形式输出
test():用于检测字符串中是否含有正则表达式匹配的字符串
返回值：
true（满足条件）
false（不满足条件）
var str = 'hello world';
var zz = /lo/;
console.log(zz.exec(str));
console.log(zz.test(str));
正则的字符串方法
split():切割字符并返回切割后的数组
var str = 'hello world';
var zz = / /;
console.log(str.split(zz));
match():用于匹配到的字符串以数组形式输出（参数可以使用字符串或者正则）
var str = 'hello world';
var zz = /hello/;
console.log(str.match(zz));
search():返回首次匹配到的字符串所在的位置，没有则返回-1
var str = 'hello world';
var zz = /l/;
console.log(str.search(zz));
replace(参数1, 参数2)：将匹配到的字符串转化成新的字符串
参数1：匹配到的字符串
参数2：替换的字符串
var str = 'hello world';
var zz = /hello/;
console.log(str.replace(zz,'and'));
正则表达式
精确匹配：表示匹配的字符只含有普通字符
/abd/表示匹配到的字符串只含有abc这三个字母，顺序不能颠倒
预定义特殊字符：
\n：换行
\t：制表符
注意：预定义字符串是一个整体，不能拆分匹配，必须整体匹配
修饰符：
书写位置必须在//后面
g - 执行全局匹配
i - 不区分大小写
m - 执行多行匹配
字符集与边界符
字符集：假如想让多个字符匹配一个字符，需要用到字符集：[]
- 简单类：书写所有的可能性（如[abc]表示匹配到的结果可能是a或b或c）
console.log(/[abc]/.test('aojkj'));
- 范围类：范围可能性：[0-9],[a-z],[A-Z]
console.log(/[0-9]/.test('23234320aojkj'));
- 组合类：表示不同范围的类型组合，如[0-9a-z]
console.log(/[0-9a-z]/.test('j'));
- 负向类：表示不包括后面书写匹配字符集的可能性，[^]必须书写在中括号左侧
console.log(/[^0-9]/.test('a'));
边界符
- /^abc/：表示开头匹配abc
- /abc$/：表示结尾匹配abc
- /\b/：表示单词边界
- /\B/:表示非单词边界
量词
用于处理一系列紧密相连的同类数据，通过{}定义量词
- {n}:硬性量词，表示出现n次
- {n,m}:软性量词，表示至少出现n次，最多出现m次
- {n,}:至少出现n次
- +:同{1,}，至少出现1次
- *:同{0,}：出现0次或者多次
- ?:同{0,1}：出现0或者1
或与分组
或操作符：|表示可能性，如 a|b|c
用于处理多个重复数据，通过()定义分组
分组的反向引用，内部捕获：\编号（如捕获第一字符串：\1；只能在内则表达式之内使用），外部捕获：$1（只能内则表达式之外使用）
//反向引用外部捕获
var str = 'hello:456*789';
console.log(str.replace(/([0-9]+)\*([0-9]+)/,'$2+$1'));
非捕获组
表示不会创建反向分组的字符串
(?=exp)：表示其后紧接指定字符串的字符串
(?!exp)：表示其后没有紧接字符串的字符串
预定义类
预定义类表示一些特殊字符，是一些特殊字符的简写
. [^\n\r]：表示除了换行和回车以外的任意字符
\d [0-9]：表示数字字符
\D [^0-9]：表示非数字字符
\s：空白字符
\S：非空白字符
\w：单词字符（所有的单词字母下划线）
\W：非单词字符
<script type="text/javascript">
var str = 'hello:456*789';
console.log(str.replace(/(\d+)\*(\d+)/,'$2+$1'));
</script>
var zz = /\.(jpg|png)/;
console.log(zz.test("111.jpg"));
匹配中文：[\u4e00-\u9fa5]
var zz = /[\u4e00-\u9fa5]/g;
console.log(zz.test("abc"));
console.log(zz.test("我"));
定时器
- 单次定时器:
setTimeout();（启动单次定时器）
clearTimeout();（清除单次定时器）
console.log("start");
var timebar = setTimeout(function(){
console.log("hello", arguments);
}, 3000, 200, 'no');
// clearTimeout(timebar); -----结束单词定时器
console.log("end");
- 循环定时器
setInterval();（启动循环定时器）
clearInteval();（清除循环定时器）
console.log("start");
var timebar = setInterval(function(){
console.log("hello", arguments);
}, 2000, 200, 500)
// clearInterval(timebar);//结束循环定时器
注：第一个参数可以传递函数，第二个参数表示间隔多少时间（毫秒为单位），后面的参数可以传递其他数值
DOM
定义：文档对象模型，描绘了一个层次化的节点数，屯需开发人员添加、移除、修改页面中的某一部分
document
- document表示文本对象，document拥有页面几乎所有的方法和属性
读取：document.title 页面的标题
辅助：document.title = “hello” - 一般操作元素就需要先获取元素
获取元素的方法：通过给标签添加id值，再通过getElementById()
注：通过id得到的数据类型是属性
读取和赋值方法同上
<h1 id="app1" class="doc">你好</h1>
<script type="text/javascript">
var app = document.getElementById('app1');
console.log(app1);
console.log(app1.className);
</script>
属性操作
- 属性操作方法
getAttribute():得到元素自导属性或者自定义属性
setAttribute():设置元素自带属性或自定义属性 - 点语法操作的属性与上面两者的区别
2.1 点语法只能读取带元素自带属性，而上面两者可以读取元素自带属性和自定义属性
2.2 使用点语法，有些属性名需要改名（如class更改为className），而使用以上两种可以不用更改名字
2.3 点语法得到的style为对象，而get…得到的style为字符串
2.4 点语法得到style可以继续打点，而get…得到的style不能继续打点
<div id="app1" style="font-size: 20px;" class="demo">
demo
</div>
<script type="text/javascript">
//获取id
var app = document.getElementById('app1');
//点语法获取clsss
console.log(app.className);
//getAttribute()语法获取class
console.log(app.getAttribute('class'));
//点语法获取style
console.log(app.style);
//getAttribute()获取style，得到字符串
console.log(app.getAttribute('style'));
//setAttribute语法修改属性
app.setAttribute('class', 'demo1');
app.setAttribute('style', 'font-size: 200px;')
//点语法修改属性值
app.className = "demo2";
app.style.fontSize = "150px";
</script>
DOM事件
事件监听：
onclick 点击 ondblclick 双击
onmouseenter 鼠标进入 onmouseleave 鼠标离开
onmousedown 鼠标按下 onmouseup 鼠标弹起
onfocus 获取焦点 onblur 失去焦点
onload 加载完毕之后
元素绑定事件：元素.事件名 = fn
注：
- 在body标签中书写js语句时，要写在所有html元素之后
- 如果js书写在head标签中，一定要书写onload事件，windows.onload表示加载完html语句之后执行内部的语句
<span>按钮</span><input type="button" name="" id="app" value="请点击我" />
<div><input type="text" name="" id="text" value="" /></div>
<script type="text/javascript">
var app = document.getElementById('app');
var text = document.getElementById('text');
app.onclick = function cli(){
app.value = "你点击了我";
console.log("你点击了我");
}
text.onmouseenter = function ent(){
console.log("进入");
}
text.onmouseleave = function lea(){
console.log("离开");
}
</script>
批量处理
getElementsByTagName()：可以通过元素的标签名得到元素，不管元素嵌套得有多深，都可以查找到，得到的是页面上所有同种标签组成的类数组对象
注：类数组保存数据顺序和嵌套没有关系，和标签首次出现的顺序有关
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<script type="text/javascript">
var app = document.getElementsByTagName('div');
//遍历添加事件
for(var i = 0; i < app.length; i++){
app[i].onclick = (function(a){
return function(){
console.log(a);
}
})(i)
}
</script>
<!-- 输入div#demo.demo1出现以下 -->
<div id="demo" class="demo1"></div>
<script type="text/javascript">
var str = 'div#demo.demo1';
var demo = /(\w+)#(\w+)\.(\w+)/;
var res = str.replace(demo, function(match, $1, $2, $3){
return '<' + $1 + ' id=' + '"' + $2 + '"' + ' class=' + '"' + $3 + '"' +'>' + '</' + $1 + '>';
})
console.log(res);
</script>
对应和排它
能力检测
注：该篇博客为自己视频学习时记录下的笔记，部分内容来源于学习视频
扫一扫
380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
