JSapi

web api

1、什么是api: 预定好的一些函数
alert()
prompt()
console.log();
2、webapi的概念：浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
3、JavaScript的组成：ES DOM BOM
4、DOM的顶级对象是document BOM的顶级对象window (重点)
5、节点：页面中所有的内容都是节点（标签 属性 注释 文本） (重点)

获取元素的方式

<div id="box" name="user"></div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <input type="text" name="user">
    <input type="text" name="user">
    <input type="text" name="user">
    <input type="text" name="user">
    <span name="user"></span>

1、通过id名获取 单个元素

var box = document.getElementById('box')
   console.log(box);

2、通过类名获取 多个元素

var box1 = document.getElementsByClassName('box')
// console.log(box1);
// box1.push(1)
console.log(box1);

   for (var i = 0; i < box1.length; i++) {
       console.log(box1[i]);
   }

ps：
伪数组：拥有数组的特点，长度，索引，也能循环，但是不能使用数组特有的方法。

3、通过标签名获取 多个元素

var box2 = document.getElementsByTagName('div')
   console.log(box2);

4、通过name名获取 多个元素

var box3 = document.getElementsByName('user')
   console.log(box3);

5、通过选择器querySelector获取元素 单个元素

var box4 = document.querySelector('#box')
   var box5 = document.querySelector('.box')
   console.log(box4);
   console.log(box5);

6、通过选择器querySelectorAll获取元素 多个元素

var box6 = document.querySelectorAll('.box')
   console.log(box6);

事件

1、事件：触发==》响应
2、事件的三要素：
事件源：要触发的元素
事件类型：鼠标事件 键盘事件 浏览器事件
事件的处理程序：触发元素响应时执行的代码（函数）
3、事件的公式：事件源.事件类型 = 事件的处理程序
onclick: 鼠标事件：单机事件
4、事件函数是异步操作
5、事件函数的this指向事件源
6、事件的书写：
行内书写
内部书写
外部书写

console.log(1);
   var btn = document.getElementById('btn')
   btn.onclick = function () {
       console.log('点击了我');
       console.log(2);
       console.log(this);
   }
   console.log(3);

非表单元素的属性操作

.box {
            width: 300px;
            height: 300px;
        }

<div>
        <img src="" alt="这是一张图片" class="aaa">
    </div>
    <div>
        <button id="show">显示图片</button>
        <button id="change">改变图片大小</button>
        <button id="hide">隐藏图片</button>
    </div>

// 获取元素
   var img = document.querySelector('img')
   var show = document.getElementById('show')
   var change = document.getElementById('change')
   var hide = document.getElementById('hide')
   console.log(img, show, change, hide);
   // 绑定点击事件
   show.onclick = function () {
       img.style.visibility = 'visible'
       // img.style.display = "block"
       console.log(img.src);
       img.src = './QQ截.png'
   }
   change.onclick = function () {
       // img.width = 100
       // img.height = 100
       // 注意单位
       // img.style.width = 100 + 'px'
       // img.style.height = 200 + 'px'
       // img.style.border = '1px solid red'
       // 连接符的属性，要把-去掉，第二个单词首字母大写
       // img.style.borderRadius = 20 + 'px'
       // 通过类名改变宽度 会覆盖原有的类名
       img.className = 'box'
   }
   hide.onclick = function () {
       // img.src = ''
       // img.style.display = "none"
       img.style.visibility = 'hidden'
   }

表单元素属性操作

.box {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            border-radius: 20px;
            text-align: center;
            margin: auto;
        }

        .box div {
            margin-top: 100px;
        }

        .btn {
            width: 200px;
            height: 50px;
            border-radius: 50px;
            border: 0;
            font-size: 20px;
            color: rgb(232, 26, 26);
            background-color: antiquewhite;
        }

<div class="box">
        <div>
            <label for="">姓名:</label>
            <input id="userNmae" type="text">
        </div>
        <div>
            <label for="">密码:</label>
            <input id="password" type="password">
        </div>
        <div>
            <label for="">性别:</label>
            <input id="man" type="radio" name="sex"> 男
            <input id="woman" type="radio" name="sex"> 女
        </div>
        <div>
            <input class="btn" type="button" value="登录">
        </div>
    </div>

var userNmae = document.getElementById('userNmae')
    var password = document.getElementById('password')
    var man = document.getElementById('man')
    var woman = document.getElementById('woman')
    var btn = document.getElementsByClassName('btn')[0]
    btn.onclick = function () {
        if (userNmae.value == '') {
            alert("姓名没有填写")
        } else {
            if (password.value == "") {
                alert('密码没有填写')
            } else {
                if (password.value.length < 6) {
                    alert('密码小于6位')
                } else {
                    if (man.checked || woman.checked) {
                        // alert('登录')
                        console.log('登录');
                        // 禁用
                        // btn.disabled = true
                        this.disabled = true
                        this.value = '登录中......'
                        // 跳转
                        // window.location.href = 'http://www.baidu.com'
                    } else {
                        alert('请选择性别')
                    }
                }
            }
        }
        // console.log('登录');

innerText和innerHTML的区别

<div id="box">
        我们今天学jsapi
    </div>
    <button id="btn">改变文字</button>

var btn = document.getElementById('btn')
    var box = document.getElementById('box')
    btn.onclick = function () {
        console.dir(box);
        // 改变元素内的文字
        // box.innerText = '我们明天还学jsapi'
        // box.innerHTML = '我们明天还学jsapi'
        // box.innerText = '<button id="btn">改变文字</button>'
        // innerHTML: 能解析富文本
        box.innerHTML = '<button id="btn">改变文字</button>'
    }