js
正则的用法
创建一个正则:
var reg = RegExp('正则表达式') //注意,写在字符串中所有带的元字符都会被转义,应该写作\
var reg2 = /正则表达式/ //内部的元字符就不会转义了
reg.test('待检测的字符串') //如果字符串中含有符合表达式规则的内容就返回true,否则返回false
在字符串中应用正则
var exp = 'alex3714'
exp.match(/d/) //只匹配从左到右的第一个
exp.match(/d/g) //匹配所有符合规则的 返回一个数组
var exp2 = 'Alex is a big sb'
exp2.match(/a/) //只匹配小写a
exp2.match(/a/i) //i表示不区分大小写 A也会被匹配出来
exp2.match(/a/ig) //不区分大小写并匹配所有
exp.search(/正则表达式/i) //不区分大小写,从exp字符串中找出符合条件的子串的第一个索引位置
exp.split(/正则表达式/i,n) //不区分大小写,根据正则切割,返回前n个结果
exp.replace(/正则/gi,'新的值') //i表示不区分大小写,g表示替换所有,将符合正则条件的内容替换成新的值
小问题1
var reg2 = /d/g //正则表示要匹配多个值
reg2.test('a1b2c3') //多次test会的到true true true false 继续test会循环之前的结果
小问题2
var reg3 = /w{5,10}/
reg3.test() //如果什么都不写,那么默认test中传递undefined参数,刚好可以符合9位字符串的规则
Date对象
创建对象:
var dt = new Date() //获取到当前时间
dt.toLocalString() //转换成'2019/8/13 10:18:12'
dt.getFullYear() //年
dt.getMonth() //月 1月是0
dt.getday() //周中天 周日是0
dt.getDate() //月中天 1号是1
dt.getHours() //时 从0开始
dt.getMinutes() //分 从0开始
dt.getSeconds() //秒 从0开始
自定义时间:
var dt2 = new Date('2018/1/1 12:12:12') 1月1日
var dt2 = new Date(2018,1,1); 2月1日
Math对象
面向对象(了解)
function Student(name,age){
this.stu_name = name
this.stu_age = age
}
Student.prototype.show = function(){
console.log(this.stu_name,this.stu_age)
}
var stu = Student('alex',84) // 实例化
stu.stu_name // 查看属性
stu.stu_age
stu.show() // 调用方法
object.prototype.show = function(){
console.log(this.stu_name,this.stu_age)
}
DOM
什么是dom
document object modle 文档对象模型
整个文档就是一颗树
树当中的每一个节点都是一个对象 : 这个对象中维系着 属性信息 文本信息 关系信息
在页面上还有一些动作效果:
根据人的行为改变的 点击 鼠标悬浮
自动在改变的
js是怎么给前端的web加上动作的呢?
1.找到对应的标签
2.给标签绑定对应的事件
3.操作对应的标签
查找标签
直接查找
var a = document.getElementById('baidu') //直接返回一个元素对象
console.log(a)
var sons = document.getElementsByClassName('son') //返回元素组成的数组
console.log(sons)
sons[0] //获取到一个标签对象
var divs = document.getElementsByTagName('div') //返回元素组成的数组
console.log(divs)
间接查找
找父亲
var a = document.getElementById('baidu')
console.log(a)
var foodiv = a.parentNode //获取到父节点的对象
找儿子
var foo= document.getElementById('foo')
foo.children //获取所有的子节点,返回一个数组
foo.firstElementChild //获取第一个子节点
foo.lastElementChild //获取最后一个子节点
找兄弟
var son1 = document.getElementById('son1')
console.log(son1)
var son2 = document.getElementById('son2')
console.log(son2)
son1.nextElementSibling //找下一个兄弟 返回一个对象
son1.previousElementSibling //找上一个兄弟 返回一个对象
操作本身的标签
标签的创建
var obj = document.createElement('标签名') // a div ul li span
obj就是一个新创建出来的标签对象
标签的添加
父节点.appendChild(要添加的节点) //添加在父节点的儿子们之后
父节点.insertBefore(要添加的节点,参考儿子节点) //添加在父节点的某个儿子之前
标签的删除
父节点.removeChild(要删除的子节点)
子节点1.parentNode.removeChile(子节点2)
标签的替换
父节点.replaceChild(新标签,旧儿子)
标签的复制
节点.cloneNode() //只克隆一层
节点.cloneNode(true) //克隆自己和所有的子子孙孙
注意 :如果克隆出来的标签的id是重复的,那么修改之后才能应用到页面上
节点的属性操作
节点对象.getAttribute('属性名')
节点对象.setAttribute('属性名','属性值')
节点对象.removeAttribute('属性名')
节点的文本操作
节点对象.innerText = '只能写文字'
节点对象.innerHTML = '可以放标签'
DOM
事件
绑定方式:
<button id="btn">点击一下</button>
方式一:
var btn = document.getElementById('btn')
btn.onclick = function () {
alert('点我干嘛')
}
方式二:
btn.onclick = clik
function clik() {
alert('不要点')
}
方式三:
<button id="btn" onclick="clik()">点击一下</button>
function clik() {
alert('不要点')
}
BOM
browser object model
定时器
setInterval
每隔一段时间就完成某个操作
var tid = setInterval(fn,n) 每隔n毫秒就调用一次fn函数
var tid = setInterval("fn()",n)
clearInterval(tid) 清除定时器
setTimeOut
在设定时间之后执行一次来完成某个操作
var tid = setTimeout(fn,n) n毫秒之后只调用一次fn函数
var tid = setTimeout("fn()",n)
clearTimeout(tid) 清除定时器
location对象
window的子对象 window.location
属性:
window.location.href 查看当前网页的url
window.location.href = 'http://www.baidu.com' 修改当前网页的url,修改之后会跳转
方法:
window.location.reload() 刷新页面
练习
onscroll事件
window.onscoll 在页面的滚动条滚动的时候触发的事件
document.documentElement.scrollTop 针对获取浏览器的垂直滚动条的位置
select的onchange事件
select对象.options.selectedindex 被选中的选项在options中的索引位置