JavaScript基础01

已于 2022-07-13 16:22:40 修改
阅读量96 收藏
点赞数
于 2022-06-07 15:45:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bianca427/article/details/125150761
版权

JavaScript DOM操作 事件处理 样式修改 数据类型
关键词由CSDN通过智能技术生成

目录

1、JS的基本使用

2、JS书写要求

3、JS获取元素的方法

4、js单击事件

5、js双击事件

6、鼠标划入划出事件

7、窗口变化

8、下拉框

 9、js修改样式

10、js修改属性

11、js数据类型

何为JavaScript

JavaScript原名liveScript是一门动态类型，弱类型基于原型的脚本语言。

JavaScript作用

页面特效、前后交互、后台开发（node)

JavaScript在哪里

script标签里、外部的js文件内

1、JS的基本使用

创建JS标签：<script></script>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  如果是标准库，一般会在这里引入  -->
</head>
<body>
//src外部引用js文件
<script src="demo_js.js"></script>

//内部引用
    <script>
        console.log("hello world")
    </script>
</body>
</html>
innerText获取标签内的文字

innerHTML不仅能获取到标签内的文字，还能获取到标签

<body>
  <div>hello world</div>
  <script>
      var obj = document.getElementsByTagName('div')[0];
      obj.innerText = '你好世界';
  </script>

2、JS书写要求

  1. 严格区分大小写
  2. 每一段代码写完分号结尾
  3. 不适用关键字命名
  4. 代码缩进，保持可读性

var是js定义变量的关键字

语法：

        var 变量名(随意取) =document.获取方法(' ')[0];     

        变量名.方法=function{}( 变量名.方法() );

<p id='txt'>我是p段落</p>
<script>
    //获取元素并复制给一个变量
    var t = document.getElementById('txt');
    //innerHTML  innerText
    t.innerHTML = '<h1>我是h1标签</h1>';
</script>

3、JS获取元素的方法

  • id：document.getElementById(' ');通过id获取元素   （唯一）

  • class：document.getElementsByClassName(' ');通过class名字获取元素（获取多个需索引）

  • TagName：document.getElementsByTagName(' '); 通过标签名获取元素 （获取多个需索引）

  • name：document.getElementsByName(' '); 通过name的属性获取元素，一般用于Input （获取多个需索引）

  • Selector：document.querySelector(' '); 通过css选择器获取第一个

                        document.querySelectorAll(' '); 通过css选择器获取所有

<body>
    <div class="box" id="box1">我是第一个div</div>
    <div class="box">我是第二个div</div>
    <input type="text" name="hello" placeholder="请输入">

    <script>
        // id获取
        // var Id = document.getElementById('box1');
        // console.log(Id)
        // Id.innerText = '我是第一个盒子，你看啊，我的内容变了'

        // class获取 class取到的是全部，要改变当中的某个可以加上对应的索引
        // var c1 = document.getElementsByClassName('box');
        // console.log(c1);
        // c1.innerText = '我要通过class去改';

        // 标签名  标签名取到的是全部，要改变当中某个可以加上对应的索引
        // var Name = document.getElementsByTagName('div')[0];
        // console.log(Name)

        // name获取  name取到的是全部，要改变当中某个可以加上对应的索引
        // var myName = document.getElementsByName('hello')[0];
        // console.log(myName);

        // css选择器  querySelector取第一个    querySelectorAll取多个
        // var Select = document.querySelector('.box');
        // console.log(Select)
        // var Select = document.querySelectorAll('.box');
        // console.log(Select)
    </script>
</body>

4、js单击事件

对象.onclick = function(){ this.innerText=' 我被点击了 '};

<body>
    <div class="box"></div>
    <script>
        var oBox = document.getElementsByClassName('box')[0];
        // console.log(oBox) 打印对象是否成功,控制台查看
        oBox.onclick = function (){
            // this代表当前这个对象，oBox
            this.innerText = '好我被点击了';
        };
    </script>
</body>

5、js双击事件

对象.ondblclick = function (){ oBox.innerText = '我被双击了'};

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

    <script>
        var oBox = document.getElementsByClassName('box')[0];
        // ondblclick 双击事件
        oBox.ondblclick = function (){
            oBox.innerText = '我被双击了';
        };
    </script>

</body>

6、鼠标划入划出事件

对象.onmouseenter = function (){ oBox.innerText = '鼠标划入; };

对象.onmouseleave = function (){ oBox.innerText = '鼠标划出'; }

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

    <script>
        var oBox = document.getElementsByClassName('box')[0];
        // onmouseenter 鼠标划入
        oBox.onmouseenter = function (){
            oBox.innerText = '我进来啦';
        }
        // onmouseleave  鼠标划出
        oBox.onmouseleave = function (){
            oBox.innerText = '我又出去啦';
        }
    </script>
</body>

7、窗口变化

window.οnresize= function (){oBox.innerText = '窗口变化了'}  
<body>
    <div class="box"></div>

    <script>
        var oBox = document.getElementsByClassName('box')[0];
        // console.log(oBox)
        // onresize 窗口变化
        window.onresize = function (){
            console.log("我是窗口变化")
            oBox.innerText = '窗口变化了'
        }
    </script>
</body>

8、下拉框

对象..onchange = function (){ console.log("哦豁，下拉框在变化") }

<body>
    <select name="" id="">
        <option value="">广州</option>
        <option value="">深圳</option>
        <option value="">惠州</option>
        <option value="">东莞</option>
    </select>

    <script>
        var sec = document.getElementsByTagName('select')[0];
        //   onchange 下拉框
        sec.onchange = function (){
            console.log("咦，下拉框在变化")
        }
    </script>
</body>

 9、js修改样式

obj.style[变量]=变量值

对象.style.width='100px'

复合写法：对象.style.cssText = 'width:200px;height:200px;background:skyblue';

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;}
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var oBox = document.getElementById('box');
        // oBox.style.width = '100px';
        // oBox.style.height = '100px';
        // oBox.style.background = 'red';
        oBox.style.cssText = 'width:200px;height:200px;background:skyblue';

        // 修改边距
        // oBox.style['margin-left'] = '50px';
        // oBox.style.marginLeft = '100px'

        //赋值修改样式
        //var a = 'width'
        //var b = '10px'
        //oBox.style[a] = b
    </script>
</body>

10、js修改属性

标签属性分为两种：合法属性、自定义属性

<body>
/*自定义属性，当其他属性不可用时用自定义的*/
/*xy="mochuan" 自定义一个属性名为mochuan*/
/*target="_blank"新建窗口打开；obj.target = '_self'当前窗口打开*/
    <a href="https://www.baidu.com" id="myself" target="_blank" class="wrap" xy="mochuan">走你</a>

    <script>
        var obj = document.getElementById('myself');
        // obj.target = '_self';
        // console.log(obj.id)

        // 修改属性
        obj.className = 'suxing'

        // 修改自定义属性  setAttribute 有则改，无则增
        obj.setAttribute('xy','zdysuxing')

        // 添加name属性为pppp
        obj.setAttribute('name','pppp')
    </script>
</body>

11、js数据类型

<body>
<script>
    var a = 2
    var b = 5.6
    var c = [] /*数组*/
    var d = {} /*字典*/
    var e = true /*布尔值（小写）*/
    var f = null /*空值*/
    var g
    alert(typeof a)/*弹出窗口显示什么类型*/
    alert(typeof b)
    alert(typeof c)
    alert(typeof d)
    alert(typeof e)
    alert(typeof f)
    alert(typeof g)
</script>
</body>

案例：根据属性和属性值修改盒子样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form{
        margin:20px 10px 20px 10px;
        padding:10px;
        }
        div{
        width:200px;
        height:100px;
        border:2px solid gray
        }
    </style>
</head>
<body>
    <form action="" >

        <p>属&emsp;性：<input type="text"></p>
        属性值：<input type="text"><br>
         <input type="button" value="设置">
    </form>
    <div>小荷才露尖尖角</div>
    <script>
        //获取盒子
            var box = document.getElementsByTagName('div')[0];
            console.log(box)
        //获取所有input
            var att = document.getElementsByTagName('input');
            console.log(att)
            att[2].onclick = function (){
                var a = att[0].value;
                var val = att[1].value;
            console.log(a)
            console.log(val)
                box.style[a] = val;
            }
    </script>
</body>
</html>

Bianca427
关注
01-JavaScript基础.md
02-08
01-JavaScript基础.md
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
热门推荐
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
Javascript基础01（初识javascript）
qq_45741129的博客
11-23 610
1
JavaScript基础学习01
CZNEU的博客
03-16 615
JavaScript 概念 一门客户端脚本语言 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 脚本语言：不需要编译，直接就可以被浏览器解析执行了 功能 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。 JavaScript发展史 如果没有JavaScript，我们在浏览器端注册账号时，会把注册的表单发送到服务器，如果填写的信息有误不能注册，服务器会隔一段时间才返回错误，需要重新填写，这样就很费时间。 1992年，No
智能社—JavaScript基础01
前端界的小学生
09-29 625
一. JavaScript变量类型 1.String 字符串 2.Boolean 布尔 3.Number 数字 4.Function 函数 5.Object 对象 6.Undefined 未定义 二. 1. typeof 变量名 检测变量类型 2.window.onload= 页面加载完毕后执行 3.isNaN(变量名) 检测变量是否为空或未定义 三.变量类型转换
JavaScript 基础知识 Day01
qq_73990369的博客
07-19 1119
刚学习了JS的基础知识，JS数据类型中只有number这一个数字类型，所以number在计算的时候会保留小数，不会自动取整，需要通过另外一个方法parseInt来进行取整。
JavaScript 基础入门
YUELEI118的博客
04-26 2227
视频 学习笔记 JavaScript JavaScript是一门脚本语言 脚本语言和非脚本语言的区别： 程序的目标文件可以用记事本打开的就是脚本语言，JAVA的目标程序是Class文件，用记事本打不开 包含三大块 DOM编程： DOM是指对HTML中的节点进行操作。例如：div span .class #id 对网页的内容进行增删改的过程 BOM编程 对浏览器的操作，例如：后退，刷新，地址栏等 ECMAScript JavaScript的核心语法 总结：DOM和BOM的关系
JavaScript基础语法
weixin_72043867的博客
08-20 1067
JS介绍、输入输出、变量常量、数据类型、数据类型转换
Javascript基础思维导图01
m0_64526818的博客
12-05 1231
JavaScript 基础（超详细）
TKOP_的博客
03-02 1万+
这篇笔记大概囊括了 JavaScript 基础的所有知识点。适合 js 初学者去查看特定知识点或者已经自学完 js 的伙伴去完成查漏补缺的过程。知识点的梳理参照了《JavaScript 高级程序设计》的内容，所以这算是一篇读书笔记。知识点的具体介绍主要有书中重要讲述、代码示例、思维图表、重难点解析、个人思考总结和他人的启发。虽不敢说这是最详细的笔记，但对于每个知识我都会尽力将自己的所思所想清楚地记录下来并分享。
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门.pdf
12-16
故事中的“JavaScript基础修炼要诀”可能涵盖变量声明、常量（直接量）的概念、操作符的使用、数组和对象的理解以及基础的函数知识。这些都是学习JavaScript时必不可少的基础知识，为后续深入学习和实践打下坚实的...
JavaScript基础第01天笔记.md
07-04
JavaScript基础第01天笔记.md
JavaScript基础第01天笔记1
08-03
JavaScript是Web开发中不可或...总结起来，JavaScript基础学习涵盖了许多方面，包括语法、数据类型、控制结构、与HTML的交互以及在不同环境下的应用。深入理解这些基础知识，将有助于成为一个熟练的JavaScript开发者。
01-JavaScript-基础1
08-03
JavaScript 是一种广泛用于客户端Web开发的脚本语言，由Netscape公司开发，它是一种基于对象和事件驱动的编程语言。JavaScript的出现极大地...学习和掌握JavaScript的基础知识，对于任何Web开发者来说都是至关重要的。
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 949
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 461
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
最新发布
2301_77012231的博客
10-01 557
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1211
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
JavaScript基础知识测试
"Js基础试题汇编文档包含了JavaScript的基础知识，包括数据类型、变量声明、字符串、模板字符串、逻辑真假值、类型转换、内置对象、数组特性、JSON操作、正则表达式、DOM操作、事件处理以及元素位置和事件传播等核心...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值