day51——对象、BOM对象、DOM对象
2024-08-23 16:55:53
day51
JSON对象
var a = {'name':'太白','age':89};
序列化:var b = JSON.stringify(a);
反序列化:var c = JSON.parse(b);
RegExp对象
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
// 简写方式
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
坑:
reg2.test(); 什么也不填写,会默认成reg2.test('undefined');
如果'undefined'满足你的正则要求,就返回true
字符串使用正则是的一些方法
var s2 = "hello world";
s2.match(/o/); 匹配元素
s2.match(/o/g); 加上g是全局匹配
s2.search(/o/); 找符合正则规则的字符串的索引位置
s2.split(/o/); 用符合正则的字符串进行分割
var s3 = 'Alex is A xiaosb';
s3.replace(/a/gi,'DSB'); 替换,g全局替换,i不区分大小写
正则加g之后,进行test测试需要注意的问题
var reg3 = /a/g;
var s1 = 'alex is a xiaosb';
reg3.lastIndex -- 0
reg3.test(s1); -- true
reg3.lastIndex -- 1
reg3.test(s1); -- true
reg3.lastIndex -- 9
reg3.test(s1); -- true
reg3.lastIndex -- 13
reg3.test(s1); -- false
置零:
reg3.lastIndex = 0
Math对象
Math.abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 小数部分进行直接舍去。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
BOM对象
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口 (只能关闭用js的window.open() - 打开的页面，了解一下就行了)
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
location对象
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面,就是刷新一下页面
history.forward() // 前进一页，其实也是window的属性，window.history.forward()
history.back() // 后退一页
alert("你看到了吗？");
confirm("你确定吗？")
prompt("请在下方输入","你的答案")
定时器
1. setTimeOut() 一段时间之后执行某个内容,执行一次
示例
var a = setTimeout(function f1(){confirm("are you ok?");},3000);
var a = setTimeout("confirm('xxxx')",3000); 单位毫秒
清除计时器
clearTimeout(a);
2.setInterval() 每隔一段时间执行一次,重复执行
var b = setInterval('confirm("xxxx")',3000);单位毫秒
清除计时器
clearInterval(b);
DOM对象
查找标签
直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName 根据标签名获取标签合集
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" id="d1">
are you ok?
</div>
<div class="c1 c2">
div2
</div>
</body>
</html>
操作:
var divEle = document.getElementById('d1');
var divEle = document.getElementsByClassName('c1');
var divEle = document.getElementsByTagName('div');
间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" id="d1">
are you ok?
<span id="s1">span1</span>
<span id="s2">span2</span>
<span id="s3">span3</span>
</div>
<div class="c1 c2">
div2
</div>
</body>
操作:
var divEle = document.getElementById('d1');
找父级:divEle.parentElement;
找儿子们:divEle.children;
找第一个儿子:divEle.firstElementChild;
找最后一个儿子:divEle.lastElementChild;
找下一个兄弟:divEle.nextElementSibling;
标签操作
创建标签:重点
var aEle = document.createElement('a');
添加标签
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)；
示例:
var divEle = document.getElementById('d1')
divEle.appendChild(aEle)
把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点);
示例:
var divEle = document.getElementById('d1'); 找到父级标签div
var a = document.createElement('a'); 创建a标签
a.innerText = 'baidu'; 添加文本内容
var span2 = document.getElementById('s2'); 找到div的子标签span2
divEle.insertBefore(a,span2); 将a添加到span2的前面
html文件代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" id="d1">
are you ok?
<span id="s1">span1</span>
<span id="s2">span2</span>
<span id="s3">span3</span>
</div>
<div class="c1 c2">
div2
</div>
</body>
</html>
删除节点
获得要删除的元素，通过父元素调用该方法删除。
somenode.removeChild(要删除的节点)
示例: 删除span2标签
var divEle = document.getElementById('d1');
var span2 = document.getElementById('s2');
divEle.removeChild(span2);
替换节点：
somenode.replaceChild(newnode, 某个节点);
somenode是父级标签，然后找到这个父标签里面的要被替换的子标签，然后用新的标签将该子标签替换掉
文本节点操作
var divEle = document.getElementById("d1")
divEle.innerText #输入这个指令，一执行就能获取该标签和内部所有标签的文本内容
divEle.innerHTML #获取的是该标签内的所有内容，包括文本和标签
取值示例:
div2.innerText; 不识别标签
"are you ok? span1 span2 span3"
div2.innerHTML; 识别标签
"
are you ok?
<span id="s1">span1</span>
<span id="s2">span2</span>
<span id="s3">span3</span>
"
设置值:
var div1 = document.getElementById('d1');
div1.innerText = 'xxx';
div1.innerText = '<a href="">百度</a>';
div1.innerHTML = '<a href="">百度</a>';
属性操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18") #比较规范的写法
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的
imgEle.src
imgEle.src="..."
示例:
<a href="http://www.baidu.com">百度</a>
操作
var a = document.getElementsByTagName('a');
a[0].href; 获取值
a[0].href = 'xxx'; 设置值
获取值操作
输入框 input
获取值
var inpEle = document.getElementById('username');
inpEle.value;
设置值
inpEle.value = 'alexDsb';
select选择框
获取值
var selEle = document.getElementById('select1');
selEle.value;
设置值
selEle.value = '1';
类操作
className 获取所有样式类名(字符串)
首先获取标签对象
标签对象.classList; 标签对象所有的class类值
标签对象.classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个
示例:
var divEle = document.getElementById('d1');
divEle.classList.toggle('cc2');
var a = setInterval("divEle.classList.toggle('cc2');",30);
判断有没有这个类值的方法
var divEle = document.getElementById('d1');
divEle.classList.contains('cc1');
css设置
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可
设置值:
divEle.style.backgroundColor = 'yellow';
获取值
divEle.style.backgroundColor;
事件
简单示例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cc1 {
width: 100px;
height: 100px;
background-color: red;
}
.cc2{
background-color: green;
}
</style>
</head>
<body>
<div class="cc1 xx xx2" id="d1">
</div>
<script>
var divEle = document.getElementById('d1');
divEle.onclick = function () {
divEle.style.backgroundColor = 'purple';
}
</script>
</body>
</html>
绑定事件的方式
方式1:
<script>
var divEle = document.getElementById('d1'); 1.找到标签
divEle.onclick = function () { 2.给标签绑定事件
divEle.style.backgroundColor = 'purple';
}
</script>
下面的this表示当前点击的标签
var divEle = document.getElementById('d1');
divEle.onclick = function () {
this.style.backgroundColor = 'purple';
}
方式2
标签属性写事件名称=某个函数();
<div class="cc1 xx xx2" id="d1" onclick="f1();"></div>
<script>
js里面定义这个函数
function f1() {
var divEle = document.getElementById('d1');
divEle.style.backgroundColor = 'purple';
}
</script>
获取当前操作标签示例,this标签当前点击的标签
<div class="cc1 xx xx2" id="d1" onclick="f1(this);"></div>
function f1(ths) {
ths.style.backgroundColor = 'purple';
}
最新文章
- HTTP-崔希凡笔记
- 分享一段视频关于SQL2014 Hekaton数据库的
- vs2003打包
- 【Qt】Qt之自定义界面（窗体缩放）【转】
- Abstract Factory模式的几个要点
- How to recover a skipped tablespace after an incomplete recovery with resetlogs? [ID 1561645.1]
- OpenCV ——遍历图像方法
- xml解析总结-常用需掌握
- WPF 可触摸移动的ScrollViewer控件
- vue 使用微信JSSDK，在IOS端会授权出错
- C语言顺序栈
- Django项目添加应用路径
- C# Work PPT to PDF
- Android 模拟器启动不了-问题解决方案
- c# 遍历所有安装程序 获取所有已经安装的程序
- Fiddler4入门--手机抓包工具安装和使用说明
- 自定义多选框(checkbox)和单选框(radio)css样式
- JDBC连接SQLServer出现的异常
- jQuery（六）：value值操作
- 【加解密专辑】对接触到的PGP、RSA、AES加解密算法整理