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对象的更多相关文章

jQuery对象和普通DOM对象的区别
1.DOM对象DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系.根据W3C DOM规范,DOM是HTML与XML的应用编程接 ...
深刻了解jQuery对象和普通DOM对象的区别
深刻了解jQuery对象和普通DOM对象的区别.互相转化见Q1 Q1,js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样 ...
dom变成jquery对象先获取dom对象然后通过$()转换成jquery对象
dom变成jquery对象先获取dom对象然后通过$()转换成jquery对象
jQuery 对象与原生 DOM 对象相互转换
区别 jQuery 选择器得到的 jQuery对象和原生JS 中的document.getElementById() document.querySelector取得的 DOM对象是两种不同类型 ...
jQuery对象转化为DOM对象
jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能.我们使用jQuery的同时也能混合JavaS ...
jQuery对象转成DOM对象：
jQuery对象转成DOM对象: 两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得 ...
JQ对象和原生DOM对象
相同点:两者本质上都是DOM元素. 不同点:JQ对象是在原生DOM对象上进行了一次封装,使开发人员使用起来更简洁.高效. 两者之间用法也完全不同,很说初学者经常混淆. 其实区分两者并不难, 1.语法不 ...
jquery对象转成dom对象
jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能.我们使用jQuery的同时也能混合Java ...
javascript的BOM，DOM对象
BOM对象 window对象所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使 ...
js对象(BOM部分/DOM部分)
JS总体包括ECMAScript,DOM,BOM三个部分,但是能够和浏览器进行交互的只有DOM和BOM,那么到底什么是DOM和BOM呢概念 BOM(Browser Object Model)是指浏览 ...

随机推荐

使用packer 打包nodegui 应用
packer 是nodegui 团队提供的专门用来打包noodegui 应用程序的工具安装packer yarn 方式安装 yarn add @nodegui/packer 效果 [fsevents ...
使用Maven创建一个普通java项目
1.创建项目: 使用Maven目的是是我们能够轻松的管理各种别人写过的包创建好之后,我们去找我们所需要的包:在mvnrepository.com中找自己所需要的包例子: 最后将依赖写入pom.xm ...
LCA的几种做法
P3379 LCA $ 1:$蜗牛爬式 void dfs(int u,int fa) { f[u]=fa;//预处理father for(int i=head[u]; i; i=e[i].nxt) i ...
Android Studio 本地化操作
1.打开 string.xml 文件,在右上角,点 open-editor 2.点左上角的“地球”图标,就会弹出选择国家列表,输入zh会自动筛选,能很快选到中国简体中文 3.选择后,会在原来的列表中添 ...
C# 简单通信（实现文件传输）
https://blog.csdn.net/Sayesan/article/details/82185772 之前写过一个简单通信传输,不过只有聊天的功能,现在实现了文件传输的功能,借鉴于网上一篇博客 ...
蓝牙BLE：蓝牙(BLE)协议栈
蓝牙协议是通信协议的一种,一般而言,我们把某个协议的实现代码称为协议栈(protocol stack),BLE协议栈就是实现低功耗蓝牙协议的代码,理解和掌握BLE协议是实现BLE协议栈的前提.当前的蓝 ...
006-tomcat 多实例安装、appBase和docBase、Context说明
一.多实例部署主要是为了充分利用服务器资源,并且可以交叉部署应用.主要做法可以有使用docker部署,多实例部署. 多实例多应用:多个 Tomcat 部署多个不同的项目.这种模式在服务器资源有限,或 ...
google cloud storage products
https://cloud.google.com/products/storage/ BigTable Cloud Bigtable 是 Google 面向大数据领域的 NoSQL 数据库服务.它也是 ...
使用filebeat发送nginx日志到kafka
1.配置filebeat_nginx.yml filebeat.modules: - module: nginx access: enabled: true var.paths: ["/va ...
Java技术体系 JDK与JRE
从广义上讲,Clojure.JRuby.Groovy等运行于Java虚拟机上的语言及其相关的程序都属于Java技术体系中的一员.如果仅从传统意义上来看,Sun官方所定义的Java技术体系包括以下几个组 ...

day51——对象、BOM对象、DOM对象

day51

JSON对象

RegExp对象

Math对象

BOM对象

DOM对象

查找标签

直接查找

间接查找

标签操作

文本节点操作

属性操作

获取值操作

类操作

css设置

事件

绑定事件的方式

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

随机推荐

热门专题