day08
1.构造函数-jQuery
创建一个jQuery的方法，获取到页面节点，并在jQuery的原型上添加html的方法和css的方法，html的方法能修改页面节点内的内容，css方法能修改样式
html代码：
<body>
<div class="mydiv"></div>
<div class="my"></div>
<script src="./js/jQuery.js"></script>
<script>
var div = new jQuery('.mydiv');
div.html('今天天气真不错').css({
width:'200px',
height:'200px',
backgroundColor:'green',
'font-size':'24px' //有 - 连接符要用' '引起来，或者去掉 -， 首字母大写
});
div.css('color','red');
new jQuery('.my').html('直接修改内容');
</script>
</body>
js代码：
<script>
(function () {
//将所有自己封装的方法放进自运行函数中，以免造成变量污染---很重要
var n = 0;
function jQuery(selector) {
//根据选择器获取标签
//this instanceof jQuery 就return new jQuery()
this.selector = document.querySelector(selector);
}
jQuery.prototype.html = function (str) {
this.selector.innerHTML = str;
//返回当前构造函数的实例化对象
//从而实现链式调用
return this; //相当于return div
}
jQuery.prototype.css = function (p, v) {
//修改单一的具体样式
if (typeof p == 'string') {
//这里不能用点. 要用[],能将表达式解析成变量
this.selector.style[p] = v;
}
//批量修改样式
if (typeof p == 'object') {
// 用 for...in 对对象进行循环，得到对象的属性名称
for (var attr in p) {
//这里绝不能用点，要用中括号[]
this.selector.style[attr] = p[attr];
}
}
return this;
}
//暴露一个接口，使这个方法能在外部被调用
window.jQuery = jQuery;
})();
</script>
重要知识点：以免造成变量污染，jQuery需要将所有自己封装的方法放进自运行函数中，
然后在window上暴露一个接口，使外部能用它。
2.正则表达式
1.创建方法
1.直接量：
其本身是一个对象，表达的意义是一种规则。
（1）在两个斜杠中间写规则。
（2）在正则表达式得双斜杠后边还可以加字母i、g、m，表达其属性。
2、构造方法RegExp()
（1）使用new操作符，new RegExp();
（2） 使用new操作符，可以将已经存在的正则表达式用来给函数RegExp()传参，构造新的正则表达式。
练习代码：
<script>
//正则表达式的定义
//两种定义方式：字面量和实例化对象
var reg = /abc/;
//支持字面量的正则表达式作为RegExp的实参
var reg1 = new RebExp('abc');
console.dir(reg, reg1);
//支持变量
var reg2 = new RegExp(reg);//使用场景：动态匹配用户输入的关键词
var keywords = '夏装';
var reg3 = RegExp(keywords);
console.log(reg3);
</script>
3.正则表达式的使用
正则表达式的方法：
exec()方法，用于检索字符串中是否有正则表达式的匹配值，有则返回匹配值，否则返回null。
test()方法，用于检测字符是否匹配某个模式，有则返回true，否则返回false。
compile()方法，用于在脚本执行过程中编译正则表达式，也可用于改变和重新编译正则表达式。
正则表达式支持string的split（）和replace（）方法：
split()方法，用于把一个字符串分割成字符串数组。
replace()方法，用在字符串中的一些字符替换另一些字符，或替换与正则表达式匹配的字符串。
match()方法，可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，并以数组形式返回匹配结果。
代码：
<script>
var str = '你好 搜索 按时吃';
var arr = str.split(/\s+/g);
console.log(arr);
</script>
面试题，要求把字符串中的空格全部替换
<script>
//
var str = '你好 搜索 按时吃';
var arr = str.replace(/\s+/g, ' ');
console.log(arr);
</script>
面试题：要求文本高亮
<style>
.wb {
color: red;
}
</style>
</head>
<body>
<div class="mydiv">
个人是么人是PV额外 芬喷雾侧卧当前外婆的家 微博敲完的no完全非农Epiphone无法进分区WWI五期间前往附件二级完全平均分和评价范围我放弃平均分棋牌微博非我方微博非我也会我去去帮我
</div>
<script>
//面试题：要求文本高亮
var keywords = '微博';//用户输入的动态数据
var hotReg = new RegExp(keywords,'ig');
//获取到原始内容
var html = document.querySelector('.mydiv').innerHTML;
//方式一
/* document.querySelector('.mydiv').innerHTML = html.replace(hotReg, `<span style ="color:red">${keywords}</span>`); */
//方式二
document.querySelector('.mydiv').innerHTML = html.replace(hotReg,function($) {
return `<span class = 'wb'>${$}</span>`;
})
</script>
</body>
利用正则表达式与forEach打印歌词滚动条
<script>
//单引号或双引号要换行加 \
var lrc = `[ti:大鱼]
[ar:王若伊]
[al:大鱼]
[ly:尹约]
[by:ttpod]
[00:00.410]大鱼 - 王若伊
[00:01.410]作词：尹约
[00:02.310]作曲：钱雷
[00:03.161]开唱
[00:04.447]海浪无声将夜幕深深淹没
[00:14.200]漫过天空尽头的角落
[00:24.995]大鱼在梦境的缝隙里游过
[00:35.848]凝望你沉睡的轮廓
[00:55.898]看海天一色 听风起雨落
[01:17.705]执子手吹散苍茫茫烟波
[01:24.506]大鱼的翅膀 已经太辽阔
[01:32.112]我松开时间的绳索
[01:38.017]怕你飞远去
[01:41.620]怕你离我而去
[01:45.173]更怕你永远停留在这里
[01:51.876]每一滴泪水
[01:55.428]都向你流淌去
[01:59.623]倒流进天空的海底
[02:05.201]
[02:20.568]海浪无声将夜幕深深淹没
[02:27.118]漫过天空尽头的角落
[02:34.029]大鱼在梦境的缝隙里游过
[02:40.733]凝望你沉睡的轮廓
[02:47.051]看海天一色 听风起雨落
[02:53.654]执子手吹散苍茫茫烟波
[03:00.637]大鱼的翅膀 已经太辽阔
[03:08.087]我松开时间的绳索
[03:14.187]看你飞远去 看你离我而去
[03:21.039]原来你生来就属于天际
[03:27.889]每一滴泪水 都向你流淌去
[03:35.540]倒流回最初的相遇`;
var lrcArr = lrc.trim().split('\n');
console.log(lrcArr);
var lrcReg = /^\[(\d{2}):(\d{2})\.(\d{3})\](.*)$/;
var metaReg = /^\[(\w+):(.*)\]$/;
var metaObj = {
ti: '歌名',
ar: '演唱',
al: '专辑',
ly: '弹唱',
by: '导演'
}
lrcArr.forEach(function (l, ind) {
var r = l.trim().match(lrcReg) || l.trim().match(metaReg);
// console.log(r);
if (r.length == 3) {
setTimeout(function () {
console.log(metaObj[r[1]],':',r[2]);
}, 0);
} else {
setTimeout(function () {
console.log(r[4]);
}, r[1] * 60000 + r[2] * 1000);
}
});
</script>
将forEach换成for循环时，要注意变量作用域的问题
用以下代码：
<script>
for (var i = 0; i < lrcArr.length; i++) {
/* 由于i使用var声明的，js中for循环是不构成代码块的，也就是在for里面声明的是全局变量，每次调用这个匿名函数，匿名函数中要引用变量i，但匿名函数中却没有找到，只能向上一层找，就找到了全局变量i，这时经过i++，i已经变成了最后一个,所以每次都会打印最后一句歌词，解决方法：将for循环里面的代码封装成自运行函数,形成闭包，或者用let来声明，形成区块作用域*/
var l = lrcArr[i];
var r = l.trim().match(lrcReg) || l.trim().match(metaReg);
if (r.length == 3) {
console.log(metaObj[r[1]], ':', r[2]);
} else {
//闭包
setTimeout((function(l){
return function(){
console.log(l);
}
})(r[4]),r[1] * 60000 + r[2] * 1000);
}
}
</script>
扫一扫
3504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
