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';
}

day51——对象、BOM对象、DOM对象的更多相关文章

  1. jQuery对象和普通DOM对象的区别

    1.DOM对象DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系.根据W3C DOM规范,DOM是HTML与XML的应用编程接 ...

  2. 深刻了解jQuery对象和普通DOM对象的区别

    深刻了解jQuery对象和普通DOM对象的区别.互相转化见Q1 Q1,js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样 ...

  3. dom变成jquery对象 先获取dom对象 然后通过$()转换成jquery对象

    dom变成jquery对象   先获取dom对象 然后通过$()转换成jquery对象

  4. jQuery 对象 与 原生 DOM 对象 相互转换

    区别 jQuery 选择器得到的 jQuery对象 和 原生JS 中的document.getElementById() document.querySelector取得的 DOM对象 是两种不同类型 ...

  5. jQuery对象转化为DOM对象

    jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能.我们使用jQuery的同时也能混合JavaS ...

  6. jQuery对象转成DOM对象:

    jQuery对象转成DOM对象: 两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得 ...

  7. JQ对象和原生DOM对象

    相同点:两者本质上都是DOM元素. 不同点:JQ对象是在原生DOM对象上进行了一次封装,使开发人员使用起来更简洁.高效. 两者之间用法也完全不同,很说初学者经常混淆. 其实区分两者并不难, 1.语法不 ...

  8. jquery对象转成dom对象

     jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能.我们使用jQuery的同时也能混合Java ...

  9. javascript的BOM,DOM对象

    BOM对象 window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使 ...

  10. js对象(BOM部分/DOM部分)

    JS总体包括ECMAScript,DOM,BOM三个部分,但是能够和浏览器进行交互的只有DOM和BOM,那么到底什么是DOM和BOM呢 概念 BOM(Browser Object Model)是指浏览 ...

随机推荐

  1. cratedb 做为prometheus 的后端存储

    prometheus 提供了remote_write 以及remote_read 的数据存储方式,可以帮助我们进行数据的长时间存储.方便查询 cratedb 提供了对应的adapter,可以直接进行适 ...

  2. Python 10 训练模型

    原文:https://www.cnblogs.com/denny402/p/7520063.html 原文:https://www.jianshu.com/p/84f72791806f 原文:http ...

  3. MySQL8.0忘记密码后重置密码(亲测有效)

    实测,在mysql8系统下,用mysqld --console --skip-grant-tables --shared-memory可以无密码启动服务 服务启动后,以空密码登入系统 mysql.ex ...

  4. P1501 [国家集训队]Tree II LCT

    链接 luogu 思路 简单题 代码 #include <bits/stdc++.h> #define ls c[x][0] #define rs c[x][1] using namesp ...

  5. nginx架构分析之 事件驱动模型

    事件驱动模型 事件驱动模型是实现异步非阻塞的一个手段.事件驱动模型中,一个进程(线程)就可以了. 对于web服务器来说,客户端A的请求连接到服务端时,服务端的某个进程(Nginx worker pro ...

  6. 如何保证MQ的顺序性?比如Kafka

    三.如何保证消息的顺序性 1. rabbitmq 拆分多个queue,每个queue一个consumer,就是多一些queue而已,确实是麻烦点:或者就一个queue但是对应一个consumer,然后 ...

  7. web程序设计关于我们

    项目名称 福大咸鱼市场 开发团队 项目板块 负责人 美工 黄鸿杰 后端 胡继文 前端 葛家灿 联系方式:1175204449@qq.com

  8. mpvue中按需引入echarts

    大家都知道小程序文件大小不能超过2M, 在项目中引入echarts后,文件大小远远超出2M了.因为echarts文件默认是包含所有图表代码的,所以文件体积会比较大.解决办法如下: 安装 首先我们先安装 ...

  9. Spark2.x(六十二):(Spark2.4)共享变量 - Broadcast原理分析

    之前对Broadcast有分析,但是不够深入<Spark2.3(四十三):Spark Broadcast总结>,本章对其实现过程以及原理进行分析. 带着以下几个问题去写本篇文章: 1)dr ...

  10. C++ std::map 屏蔽排序

    转载:https://blog.csdn.net/sendinn/article/details/96286849 最近在项目中用标准库中的关联性容器map,但知道map默认升序的,但在一个需求时又不 ...