js的组成

ECMAScript:JS的语法

DOM:页面文档对象模型

BOM:浏览器对象模型

web APIs

是浏览器提供的一套操作浏览器功能和页面元素的API

主要学习的是DOM和BOM

web APIs是JS独有的

主要学习页面交互功能

API:应用程序编程接口

    // 获取元素

    var p1 = document.getElementById("text")

    console.log(p1);

    console.dir(text);

    // 遍历出每个内容

    var p2 = document.getElementsByTagName("li")

    for (var i = 0; i < p2.length; i++) {

        console.log(p2[i]);

    }

    console.log(p2);

    // 获取某个特定的元素

    var nav = document.getElementById("nav")

    var navlis = nav.getElementsByTagName("li")

    console.log(navlis);

    var box = document.getElementsByClassName("box")

    console.log(box);

    // queryselect 返回的是指定选择器的第一个元素  切记 里面的选择器需要加符号

    var firstbox = document.querySelector(".box")

    console.log(firstbox);

    var nav2 = document.querySelector("#box2")

    console.log(nav2);

    var li2 = document.querySelector("li")

    console.log(li2);

    // 获取到姓名后存储到变量中去

    var unsme = prompt("请输入您的姓名")

    alert("您的姓名是" + unsme)

    // 获取body元素

    var bodylie = document.body

    console.log(bodylie);

    // 获取HTML元素

    var HTMLles = document.documentElement;

    console.log(HTMLles);

DOM:文档对象模型:处理可扩展标记语言的标准编程接口

文档:一个页面就是一个文档,DOM中使用document表示

元素:页面里面所有标签都是元素,DOM中使用element表示

节点:网页中所有的内容都是节点,DOM中使用node表示

语法

var element = document.getElementById(id);

返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。

console.dir()可以打印我们返回的元素对象更好的查看里面的属性和方法

    <p id="text">sss</p>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

    <ul id="nav">

        <li>12</li>

        <li>23</li>

        <li>34</li>

        <li>45</li>

        <li>56</li>

    </ul>

    <div class="box">45678</div>

    <div id="box2">22222</div>

 var btn1 = document.getElementById("btn")

    btn1.onclick = function () {

        console.log("ok");

    }

    // 获取事件源

    var div = document.querySelector("div")

    // 绑定事件 注册事件

    // div.onclick

    // 添加事件处理程序

    div.onclick = function () {

        console.log("hhhhh");

    }

事件基础

事件可以被JS检测到的行为

事件的三部分

事件源事件类型事件处理程序事件三要素

事件源:事件被触发的对象

事件类型:如何触发什么事件

事件处理程序通过函数赋值的方式

操作元素

改变元素内容

element.innerHTML W3C标准

识别HTML标签，保留空格和换行

element.innerText 非标准

不识别HTML标签，去除空格和换行

这两个属性是可以读写的可以获取元素里面内容

    <button id="button">显示时间</button>

    <div id="div">某个时间</div>

    <p id="p2">123</p>

    <script>

        // 点击按钮时 div里面的值发生变化

        var btn = document.getElementById("button")

        var div2 = document.getElementById("div")

        btn.onclick = function () {

            div2.innerHTML = getDate()

        }

        function getDate() {

            var date = new Date()

            var year = date.getFullYear();

            var month = date.getMonth() + 1;

            var dates = date.getDate();

            var day = date.getDay()

            var dateArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

            return ("今天是" + year + "年" + month + "月" + dates + "日" + dateArr[day])

        }

        // 元素可以不用添加事件

        var p3 = document.getElementById("p2")

        p3.innerHTML = getDate()

    </script>

 <!-- 切换图片案例 -->

    <button id="button1">1</button>

    <button id="button2">2</button>

    <img src="../imges/business-pic3.jpg" alt="">

    <script>

        // 获取元素

        var button1 = document.getElementById("button1")

        var button2 = document.getElementById("button2")

        var img = document.querySelector("img")

        // 注册事件  修改图片地址

        button1.onclick = function () {

            img.src = "../imges/business-pic4.jpg"

        }

        button2.onclick = function () {

            img.src = "../imges/business-pic3.jpg"

        }

    </script>

案例

<!-- 分时显示不同的图片 -->

    <img src="../imges/u=1362909999,1391932580&fm=11&gp=0.jpg" alt="">

    <div>上午好</div>

    <script>

        var img = document.querySelector("img")

        var div = document.querySelector("div")

        var time = new Date();

        var h = time.getHours();

        if (h < 12) {

            img.src = '../imges/u=1362909999,1391932580&fm=11&gp=0.jpg'

            div.innerHTML = "上午好好学习"

        } else if (h < 18) {

            img.src = '../imges/u=3070420121,2549906773&fm=26&gp=0.jpg'

            div.innerHTML = "中午好好学习"

        } else {

            img.src = '../imges/u=3279797416,3064979525&fm=26&gp=0.jpg'

            div.innerHTML = "晚上好好学习"

        }

    </script>

 <!-- 点击按钮修改文本内容 -->

    <button>按钮</button>

    <input type="text" value="输入内容">

    <script>

        var btn = document.querySelector("button")

        var input = document.querySelector("input")

        btn.onclick = function () {

            input.value = '是是是'

            // 如果想要某个表单被禁用可以用disabled

            this.disabled = true

            // this指向的是事件函数的调用者

        }

    </script>

 <!-- 点击眼睛查看密码 -->

    <div class="box">

        <label for=""><img src="../imges/business-pic4.jpg" alt="" id="eye"></label> <input type="password" name=""

            id="pwd">

    </div>

    <script>

        var eye = document.getElementById("eye")

        var pwd = document.getElementById("pwd")

        var flag = 0;

        // 点击一次过后flag一定要变化'

        eye.onclick = function () {

            if (flag == 0) {

                pwd.type = "text"

                flag = 1;

            } else {

                pwd.type = "password"

                flag = 0;

            }

        }

    </script>

 <!-- 点击box修改背景 -->

    <div id="box2">eeeeeeeeee</div>

    <script>

        var box2 = document.getElementById("box2")

        var flag = 0

        box2.onclick = function () {

            if (flag == 0) {

                this.style.background = 'blue'

                this.style.width = "350px"

                flag = 1

            } else {

                this.style.background = 'black'

                this.style.width = "450px"

                flag = 0

            }

        }

    </script>

css代码

        img {

            width: 300px;

            height: 300px;

        }

        .box {

            width: 400px;

            height: 400px;

            border: 1px solid #efefef;

            margin: 100px auto;

            position: relative;

        }

        .box input {

            width: 350px;

            height: 30px;

            outline: none;

        }

        .box img {

            width: 20px;

            height: 20px;

            position: absolute;

            top: 7px;

            right: 70px;

        }

        #box2 {

            width: 200px;

            height: 200px;

            background-color: gold;

        }

        .box3 {

            width: 200px;

            height: 200px;

            margin: 0 auto;

            display: block;

            position: relative;

        }

        .box3 i {

            position: absolute;

            left: -10px;

            top:;

            cursor: pointer;

        }

巴特西

JS DOM笔记

js的组成

DOM:文档对象模型:处理可扩展标记语言的标准编程接口

事件基础

操作元素

案例

css代码

最新文章

热门文章