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)是指浏览 ...

随机推荐

关于api创建监控项，添加灵活调度的事件间隔
在api文档中没有明确说明,可以查询数据库,得到的是一个字符串,
趋势投资tz-proj springcloud (vue redis)
https://github.com/deadzq/tz-test-1 https://github.com/deadzq/tz-test-api-1 https://github.com/deadz ...
TCP/IP协议族基本知识
常见的网络拓扑两台主机通信的过程:应用进程产生消息,经由主机的 TCP/IP 协议栈发送到局域网(LAN),最后经过广域网(目前最大的广域网的因特网)中的网络设备(路由器)传给目的主机所在的局域网( ...
Linux后台运行和关闭程序、查看后台任务
fg.bg.jobs.&.ctrl+z 1.& (最经常被用到) 这个用在一个命令的最后,可以把这个命令放到后台执行 2.ctrl + z 可以将一个正在 ...
第08组 Alpha冲刺（4/4）
小李的博客作业博客作业链接组员1李昕晖(组长) 过去两天完成了哪些任务文字/口头描述 11月20日了解各个小组的进度与难以攻破的地方,晚上安排开会,安排新的冲刺任务. 实现地图功能展示Git ...
mysql-创建用户报错ERROR 1396 (HY000): Operation CREATE USER failed for 'root'@'localhost'
创建用户: create user ‘test’@’%’ identified by ‘test’; 显示ERROR 1396 (HY000): Operation CREATE USER faile ...
使用 Microsoft.Extensions.DependencyInjection 进行依赖注入
没有 Autofac DryIoc Grace LightInject Lamar Stashbox Unity Ninject 的日子,才是好日子~~~~~~~~~~ Using .NET Core ...
Python示例项目学习
原文地址:http://www.360doc.com/showweb/0/0/874025604.aspx 「 Python3 实现火车票查询工具」相信很多人学Python都是冲着它强大的爬虫 ...
MYSQL报错：1055 - Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column
1055 - Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'rpa ...
MySQL 设计与开发规范2
目录 1. 规范背景与目的 2. 设计规范 2.1. 数据库设计 2.1.1. 库名 2.1.2. 表结构 2.1.3. 列数据类型优化 2.1.4. 索引设计 2.1.5. 分库分表.分区表 2.1 ...

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

day51

JSON对象

RegExp对象

Math对象

BOM对象

DOM对象

查找标签

直接查找

间接查找

标签操作

文本节点操作

属性操作

获取值操作

类操作

css设置

事件

绑定事件的方式

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

随机推荐

热门专题