前端学习-jsAPI-day_1

最新推荐文章于 2024-07-21 10:17:51 发布

车什里

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量34

点赞数

文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/qq_45689662/article/details/134983224

版权

@TOC

一、getElementById获取元素

<body>
    <div id="time">2023-12-12</div>
    <script>
        // 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        // 2. get 获得 element 元素 by 通过 驼峰命名法 
        // 3. 参数 id是大小写敏感的字符串
        // 4. 返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(typeof timer);
        // 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

二、getElementsByTagName获取某些元素

<body>
    <ul>
        <li>知否知否应是绿肥红瘦1</li>
        <li>知否知否应是绿肥红瘦2</li>
        <li>知否知否应是绿肥红瘦3</li>
        <li>知否知否应是绿肥红瘦4</li>
        <li>知否知否应是绿肥红瘦5</li>
    </ul>
    <ol id="ol">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ol>
    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3. 如果页面中只有一个li 返回的还是伪数组的形式
        // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
        // 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
        // var ol = document.getElementsByTagName('ol'); // [ol]
        // console.log(ol[0].getElementsByTagName('li'));
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));

    </script>

三、H5新增获取元素方式

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');

    </script>
</body>

四、获取特殊元素

<body>
    <script>
        // 1.获取body 元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        // 2.获取html 元素
        // var htmlEle = document.html;
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>
</body>

五、事件三要素

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
        //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //(3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function () {
            alert('点秋香');
        }
    </script>
</body>

六、执行事件步骤

 <style>
        div {
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>

<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2.绑定事件 注册事件
        // div.onclick 
        // 3.添加事件处理程序 
        div.onmouseover = function () {
            console.log('你被选中了');
        }
    </script>
</body>

七、格式化日期年月日

    <style>
        div,
        p {
            width: 300px;
            height: 30px;
            line-height: 30px;
            color: aliceblue;
            background-color: pink;

        }
    </style>
<body>
    <button>显示当前时间</button>
    <div>某个时间</div>
    <p>123</p>
    <script>
        var div = document.querySelector('div');
        var btn = document.querySelector('button');
        var p = document.querySelector('p');
        btn.onclick = function () {
            div.innerText = getDate();
        }
        p.innerText = getDate();
        function getDate() {
            var date = new Date();
            // 我们写一个 2019年 5月 1日 星期三
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
        }
    </script>
</body>

八、innerText和innerHTML

<body>
    <div></div>
    <p>我是文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 innerHTML的区别
        // 1. innerText 不识别html标签 非标准  去除空格和换行
        var div = document.querySelector('div');
        // div.innerText = '<strong>今天是：</strong> 2019';
        // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
        div.innerHTML = '<strong>今天是：2019</strong>';
        // 这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);

    </script>
</body>

九、操作元素之修改元素属性

<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <img src="images/ldh.jpg" alt="" title="刘德华">
    <script>
        // 修改元素属性  src
        // 1. 获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        // 2. 注册事件  处理程序
        zxy.onclick = function () {
            img.src = 'images/zxy.jpg';
            img.title = '张学友'
        }
        ldh.onclick = function () {
            img.src = 'images/ldh.jpg';
            img.title = '刘德华';
        }

    </script>
</body>

十、分时问候案例

<body>
    <div></div>
    <img src="" alt="">
    <script>
        var date = new Date();
        var h = date.getHours();
        var div = document.querySelector('div');
        var img = document.querySelector('img');

        if (h < 12) {
            div.innerHTML = '上午好';
            img.src = 'images/s.gif';

        }
        else if (h < 18) {
            div.innerHTML = '下午好';
            img.src = 'images/x.gif';

        }
        else {
            div.innerHTML = '晚上好';
            img.src = 'images/w.gif';

        }      
    </script>
</body>

十一、操作元素之表单属性设置

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        btn.onclick = function () {
            // input.innerHTML = '点击了';  这个是 普通盒子 比如 div 标签里面的内容
            // 表单里面的值 文字内容是通过 value 来修改的
            input.value = '被点击了';
            // 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
            // btn.disabled = true;
            this.disabled = true;

            // this 指向的是事件函数的调用者 btn
        }
    </script>
</body>

十二、练习练习仿京东显示隐藏密码

<style>
        body {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            margin: 200px auto;
            text-align: center;
            border-bottom: 1px solid #333;
            width: 400px;
        }

        .box input {
            width: 370px;
            border: 0;
            height: 30px;
            outline: none;
        }


        .box img {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>

<body>
    <div class="box"> <input type="password" value="">
        <label for="">
            <img src="images/close.png" alt="" id="eye">
        </label>

    </div>


    <script>
        var input = document.querySelector('input');
        var eye = document.getElementById('eye');
        var flag = 0;
        eye.onclick = function () {

            if (flag) {
                input.type = 'password';
                eye.src = 'images/close.png';
                flag = 0;
            } else {
                input.type = 'text';
                eye.src = 'images/open.png';
                flag = 1;

            }

        }

    </script>
</body>

十三、操作元素之修改样式属性

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function () {
            this.style.backgroundColor = 'purple';
            this.style.width = '100px';
        }
    </script>
</body>

十四、练习关闭淘宝二维码案例

   <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
        }
        .box img {
            width: 60px;
            margin-top: 5px;
        }
        .box .close {
            position: absolute;
            width: 14px;
            height: 14px;
            left: -16px;
            top: -1px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>

<body>
    <div class="box">

        淘宝二维码
        <img src="images/tao.png" alt="">
        <div class="close">×</div>
    </div>
    <script>
        var box = document.querySelector('div');
        var close = document.querySelector('.close');
        close.onclick = function () {
            box.style.display = 'none';
        }

    </script>
</body>

十五、练习循环精灵图

<style>
        * {
            margin: 0;
            padding: 0;

        }

        li {
            list-style-type: none;
        }

        .box {
            width: 250px;
            margin: 100px auto;
        }

        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(images/sprite.png) no-repeat;
        }
    </style>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        // var ul = document.querySelector('ul');
        var lis = document.querySelectorAll('li');
        // console.log(lis);
        for (var i = 0; i < lis.length; i++) {
            // 让索引号 乘以 44 就是每个li 的背景y坐标  index就是我们的y坐标
            var index = i * 44;
            // lis[i].style.backgroundPosition='0 0';
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>
</body>

十六、显示隐藏文本框内容

 <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #ul {
            width: 400px;
            height: 70px;
            background-color: #ccc;
            margin: 200px auto;
            padding: 20px 0;
        }

        li {
            margin: 0 25px;
            width: 350px;
            height: 30px;
            border: 2px solid blue;
            list-style: none;
            /* border-collapse: collapse; */
        }

        li input {
            float: left;
            width: 300px;
            height: 26px;
            outline: none;
            color: #999;
        }

        li button {
            float: left;
            width: 46px;
            height: 26px;
            background-color: blue;
            color: #fff;
            font-size: 14px;
        }
    </style>

<body>
    <ul id="ul">
        <li id="li">
            <input type="text" id="input" value="手机">
            <button id="btn">搜索</button>
        </li>
    </ul>
    <script>
        var input = document.getElementById('input');
        var index = input.value;
        console.log(input.value);
        input.onfocus = function () {
            if (this.value == index) {
                this.value = '';
            }
            this.style.color = '#333';
        }
        input.onblur = function () {
            if (this.value == '') {
                this.value = index;
            }
            this.style.color = '#999';
        }
    </script>
</body>

十七、显示隐藏文本框内容(2)

 <style>
        input {
            color: #999;
        }
    </style>

<body>
    <input type="text" value="手机">
    <script>
        // 1.获取元素
        var text = document.querySelector('input');
        // 2.注册事件 获得焦点事件 onfocus 
        text.onfocus = function () {
            // console.log('得到了焦点');
            if (this.value === '手机') {
                this.value = '';
            }
            // 获得焦点需要把文本框里面的文字颜色变黑
            this.style.color = '#333';
        }
        // 3. 注册事件 失去焦点事件 onblur
        text.onblur = function () {
            // console.log('失去了焦点');
            if (this.value === '') {
                this.value = '手机';
            }
            // 失去焦点需要把文本框里面的文字颜色变浅色
            this.style.color = '#999';
        }
    </script>

</body>

十八、通过className更改元素样式

  <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .change {
            background-color: purple;
            font-size: 24px;
            color: #fff;
            margin-top: 30px;
        }
    </style>

<body>
    <div class="first">文本</div>
    <script>
        var test = document.querySelector('div');
        test.onclick = function () {
            // this.className = 'change';
            // this.className='first change';
            this.className = this.className + 'change';
        }
    </script>
</body>

十九、练习密码框验证信息

  <style>
        div {
            width: 600px;
            margin: 100px auto;
        }

        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }

        .wrong {
            color: red;
            background-image: url(images/wrong.png);
        }
        .right{
            color: green;
            background-image: url(images/right.png);
        }
    </style>

<body>
    <div class="register"> <input type="password" class="ipt">
        <p class="message">请输入6-16位密码</p>
    </div>
    <script>
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        ipt.onblur = function () {
            if (this.value.length < 6 || this.value.length > 16) {
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数不对';
            }else{
                message.className = 'message right';
                message.innerHTML = '您输入的正确';
            }

        }
    </script>
</body>

二十、练习-世纪佳缘用户名显示隐藏内容

<body>
    <input type="text" value="邮箱/手机号">
    <script>
        var input = document.querySelector('input');
        input.onfocus = function () {
            if (input.value === '邮箱/手机号')
                input.value = '';
            this.style.color = '#333';
            this.style.outlineColor = 'pink';

        }
        input.onblur = function () {
            if (this.value === '') {
                this.value = '邮箱/手机号';
                this.style.color = '#999';
            }
        }
    </script>
</body>

二十一、练习-新浪下拉菜单

  <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            width: 50px;
            height: 30px;
            background-color: #999;

        }

        ul {
            list-style: none;
            display: none;

        }
    </style>


<body>
    <div class="div">微博</div>
    <ul>
        <li>私信</li>
        <li>评论</li>
        <li>五</li>
    </ul>
    <script>
        var div = document.querySelector('div');
        var ul = document.querySelector('ul');
        div.onmouseover = function () {
            ul.style.display = 'block';
        }
    </script>
</body>

二十二、练习-开关灯案例

<body>
    <button>开关灯</button>
    <script>
        var btn = document.querySelector('button');
        var flag = 1;
        var htmll = document.documentElement;
        btn.onclick = function () {
            if (flag) {
                htmll.style.backgroundColor = 'black';
                flag = 0;


            } else {
                htmll.style.backgroundColor = '#fff';
                flag = 1;
            }

        }
    </script>
</body>