Day5l

JSON object

var a = {'name':'太白','age':89};
序列化:var b = JSON.stringify(a);
反序列化:var c = JSON.parse(b);

RegExp object

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 object

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 objects

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 objects

Find label

Direct Find

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

Indirect Find

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;

Label operation

创建标签:重点
    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>

Delete Node

获得要删除的元素，通过父元素调用该方法删除。
somenode.removeChild(要删除的节点)
示例: 删除span2标签
    var divEle = document.getElementById('d1');
    var span2 = document.getElementById('s2');
    divEle.removeChild(span2);

Replace node:

somenode.replaceChild(newnode, 某个节点);
somenode是父级标签，然后找到这个父标签里面的要被替换的子标签，然后用新的标签将该子标签替换掉

Text node operation

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

Property operations

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'; 设置值

Gets the value of the operation

输入框 input
    获取值
        var inpEle = document.getElementById('username');
        inpEle.value;  
    设置值
        inpEle.value = 'alexDsb';

select选择框
    获取值
        var selEle = document.getElementById('select1');
        selEle.value;
     设置值
        selEle.value = '1';

Class Action

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 settings

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可

设置值:
    divEle.style.backgroundColor = 'yellow';
获取值
    divEle.style.backgroundColor;

event

简单示例:
    <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>

Binding way events

方式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-- objects, BOM objects, DOM objects

Day5l

JSON object

RegExp object

Math object

BOM objects

DOM objects

Find label

Direct Find

Indirect Find

Label operation

Text node operation

Property operations

Gets the value of the operation

Class Action

css settings

event

Binding way events

Guess you like