JavaScript入门

最新推荐文章于 2023-03-28 11:04:12 发布

web18296061989

最新推荐文章于 2023-03-28 11:04:12 发布

阅读量1.6k

点赞数 2

分类专栏：面试学习路线阿里巴巴文章标签： javascript jquery 前端经验分享开发语言

本文链接：https://blog.csdn.net/web18296061989/article/details/124874071

版权

文章目录

初识JS

在这里插入图片描述

JS的引入

1.行内式的js 直接写到元素的内部

<body>
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>

2.内嵌式的js

    <script>
        alert('zyj');
    </script>

3.外部js

<script src="my.js"></script>

JS输入输出语句

在这里插入图片描述

变量的命名规范

在这里插入图片描述

运算符的优先级

在这里插入图片描述

断点调试

在这里插入图片描述

arguments的使用

在这里插入图片描述

JS预解析

在这里插入图片描述

对象

在这里插入图片描述
创建对象的第一种方法

创建对象的第二种方法

创建对象的第三种方法

new关键字的执行过程
在这里插入图片描述
对象的遍历

Web APIs

在这里插入图片描述

DOM
在这里插入图片描述

获取元素

在这里插入图片描述

在这里插入图片描述

querySelector获取

事件

事件三要素：
1.事件源：事件被触发的对象
2.事件类型：如何触发什么事件
3.事件处理程序：通过一个函数赋值的方式完成
在这里插入图片描述

在这里插入图片描述

例：在这里插入图片描述

在这里插入图片描述

排它思想

在这里插入图片描述

例：百度换肤

在这里插入图片描述

getAttribute和setAttribute

在这里插入图片描述

tab栏切换

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tab{
          margin: 100px auto;
          width: 800px;
          height: 100px;
        }
        .tab_list{
            width: 800px;
            height: 40px;
            background-color: #ccc;
        }
        .tab_list ul li{
            display: block;
            height: 40px;
            line-height: 40px;
            float: left;
            margin-left: 50px;
            list-style: none;
        }
        .current{
            background-color: red;
            color: #fff;
        }
        .tab_con div{
            display: none;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价(50000)</li>
                <li>手机社区</li>
            </ul>
        </div>

        <div class="tab_con">
            <div class="item" style="display:block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        var tab_list=document.querySelector('.tab_list');
        var lis =tab_list.querySelectorAll('li');
        var items=document.querySelectorAll('.item')
        for(var i=0;i<lis.length;i++){
            lis[i].setAttribute('index',i)
            lis[i].onclick=function(){
                for(var i=0;i<lis.length;i++){
                    lis[i].className='';
                }
                this.className='current';
                var index=this.getAttribute('index');
                for(var i=0;i<items.length;i++)
                {
                    items[i].style.display='none'
                }
                items[index].style.display='block'
            }
        }
    </script>
</body>
</html>

最低0.47元/天解锁文章

web18296061989

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript入门

文章目录初识JSJS的引入JS输入输出语句变量的命名规范运算符的优先级断点调试arguments的使用JS预解析对象Web APIs获取元素事件排它思想例：百度换肤getAttribute和setAttributetab栏切换自定义属性节点操作例：下拉菜单评论留言案例动态生成表格案例方法监听注册事件事件的删除DOM事件流事件对象事件委托其他常用的鼠标事件跟随鼠标移动的图片常见的键盘事件模拟京东快递单号查询BOM基本概念窗口加载事件调整窗
复制链接

扫一扫