前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件-阿里云开发者社区

前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件

2024-09-26 48

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素，以及JavaScript的鼠标事件处理，通过示例代码展示了这些基础知识点在实际开发中的应用。

一、JavaScript变量

变量是存储数据的容器，例x=10，则x中存储的值为10。
语法：var 变量名 = 值。

1.1、变量的声明

先声明后赋值

var x; // 声明变量x
alert(x); // undefined 所有声明了但是没有赋值的变量，结果都为undefined
X = 10; // x赋值为10

在声明的同时赋值

var x = 'LiuQing';

同时声明多个变量，每个变量用逗号隔开，建议换行书写，没声明完时，后面要写逗号。

var x = 666,
    y = false,
    z = 'LiuQing';

二、JavaScript标识符

标识符，就是指变量、函数、属性的名字，或者函数的参数。
2.1、标识符的命名规则

只能以数字、字母、下划线、$组成。
不能以数字开头。
不能使用关键字、保留字。
具有语义化，即见名知义。
小驼峰命名，如：userName、passWord。

在这里插入图片描述

二、JavaScript获取元素

2.1、JavaScript调试命令

常用的调试命令有alert()与console.log()。
alert命令直接在页面弹出信息，一次只能显示一个数据，并且没有点击确定之前，不能显示下一个数据。
console.log命令，在控制器台打印数据，一次可以打印多个，并且不会堵塞。

var a = 10;
var b = 20;
// 1.一次只能打印一个信息
alert(a,b); // 10
alert(b); // 没有点击确定之前，这个不会显示

// 2.同时打印多个信息
console.log(a,b);

2.2、操作元素内容

元素内容指的是开始标签和结束标签中间的内容部分，单标签是没有内容的，但是有一种标签比较特殊，那就是表单标签，表单标签的内容存储在属性value中，因此能操作元素内容的标签有两种，闭合标签和表单标签。

2.2.1、操作表单元素内容
操作表单元素的内容使用的是表单元素的 value 属性。
语法：

获取表单元素内容：表单元素.value
设置表单元素内容：表单元素.value = 值

例：

<input type="text" id="ipt">
<script>
    // 1.获取标签
    var ipt= document.getElementById("ipt");
    // 2.获取input的value值
    var val = ipt.value;
    console.log(val);

    // 2.设置input的内容
    ipt.value = 54321;
</script>

在这里插入图片描述
第一次打印的信息是空，表示默认值为空

上面代码中，通过标签.value操作表单元素的内容，其他的表单元素内容也是一样的操作方式。

例：

<textarea cols="30" rows="10" id="text">FAFDA</textarea>
<select id="se">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<script>
   // 3.textarea操作内容
   var text = document.getElementById("text");
   text.value = "ujiuye";
   console.log(text.value); // ujiuye

   // 4.下拉列表操作内容
   var se = document.getElementById("se");
   se.value = "2";
   console.log(se.value); // 2
</script>

在这里插入图片描述
2.3、操作闭合标签内容

闭合标签的内容如果需要设置或者修改，使用的是闭合标签的 innerHTML，innerText 属性。
语法：

获取闭合标签内容：标签.innerHTML, 标签.innerText;
设置闭合标签内容：标签.innerHTML = ‘内容值’,
标签.innerText = ‘内容值’;

特点：

用于操作闭合标签内容，会覆盖，后面写的会覆盖前面已经存在的
innerHTML能够识别标签，innerText不能识别标签

例：

<div id="mes">123</div>
var oP = document.getElementById("mes");
// 1.设置内容值
oP.innerHTML = '这是通过innerHTML设置的文本';

// 2.innerHTML会覆盖原本的内容，如果还想要之前的，之前+现在
oP.innerHTML = oP.innerHTML + '这是通过innerHTML设置的文本';

// 3.innerHTML可以识别标签
oP.innerHTML = "<span>我是一个span</span>";

// 4.innerText ：不能识别标签
oP.innerText = "<span>我是一个span</span>";

上面代码中，可以通过innerHTML与innerText属性操作标签的内容部分，不同的是，innerHTML可以获取和识别标签，但是innerText不可以。

2.4、JavaScript操作元素属性

为 HTML 元素提供各种附加信息的就是 HTML 属性，它总是以 “属性名 = 属性值” 这种名值对的形式出现，而且属性总是在HTML元素的开始标签中进行定义。
语法：

获取标签的属性值：标签.属性名
设置标签的属性值：标签.属性名 = "属性值 "

特殊：
操作class属性的时候，需要使用className，标签.className = “属性值”

例：

<!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>LiuQing</title>
</head>

<body>
  <div id="box" title="LiuQing">张俊卿</div>
  <script>
    var oDiv = document.getElementById("box");
    // 1.获取title属性值
    var t = oDiv.title;
    console.log(t);
    // 2.设置title属性
    oDiv.title = "张俊卿";
  </script>
</body>

</html>

在这里插入图片描述
所有元素的属性操作基本都是标签.属性，但是有一个属性比较特殊那就是class，class是保留字，不能直接使用，操作标签的class属性的语法为：标签.className。

例：

<!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>LiuQing</title>
  <style>
    div {
   
      width: 100px;
      height: 100px;
      background: red;
    }

    .active {
   
      width: 200px;
      height: 200px;
      background: pink;
    }
  </style>
</head>

<body>
  <div class="box" id="box">LiuQing</div>
  <script>
    var oDiv = document.getElementById("box");
    // 1.获取class
    var className = oDiv.className;
    console.log(className);
    // 2.设置class
    oDiv.onclick = function () {
   
      oDiv.className = "active";
    }
  </script>
</body>

</html>

在这里插入图片描述

以上代码在点击box时，将会给box添加类名active，即box最后的样式变为宽高200，背景粉色。

2.5、点操作符和中括号操作符
在上面操作元素的属性时，都是使用的点操作符，其实也可以使用中括号操作符

<!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>LiuQing</title>
  <style>
    div {
   
      width: 100px;
      height: 100px;
      background: red;
    }

    .active {
   
      width: 200px;
      height: 200px;
      background: pink;
    }
  </style>
</head>

<body>
  <div class="box" id="box" title="mySelfTitle">LiuQing</div>
  <script>
    var oDiv = document.getElementById("box");
    // 1.获取title属性值
    var t = oDiv["title"];
    console.log(t);

    // 2.设置title属性
    oDiv["title"] = "LiuQing";

    // 3.中括号操作符的正确使用场景
    var tit = "title";
    console.log(oDiv[tit]); // 当是变量时，就只能使用中括号操作符，不能使用点操作符
  </script>
</body>

</html>

在这里插入图片描述
当是某一个具体的属性名时，用点操作符。当是某一个变量时，用中括号操作符，中括号里面放这个变量

2.6、JavaScript操作元素样式

元素样式是写在 style 标签或 style 属性中，用来设置元素的外观的。
语法：

获取元素样式属性：元素.style.样式名
设置元素样式属性：元素.style.样式名 = “样式值”
特殊：
在js中不允许出现font-size这种连接符形式的属性，都需要使用驼峰标识替代

标签.style.fontSize = "样式值"

例：

<!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>LiuQing</title>
  <style>
    #box {
   
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <script>
    var oDiv = document.getElementById("box");
    // 1.设置oDiv宽度为200
    oDiv.style.width = "200px";
  </script>
</body>

</html>

在这里插入图片描述
例：

<!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>LiuQing</title>
  <style>
    #box {
   
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <script>
    var oDiv = document.getElementById("box");
    // 1.操作属性oDiv.style.background = 'red';
    oDiv.style.width = '200px';
    oDiv.style.fontSize = '20px';
  </script>
</body>

</html>

在这里插入图片描述
使用js操作css属性时，像添加width，height这些只有单个单词时，直接使用语法定义：标签.style.属性名 = 属性值。添加类似font-size这种由“两个单词”组成的属性时需要把“-”去掉，第二个单词首字母大写，符合驼峰命名法
即：标签.style.fontSize=’30px’。

三、JavaScript的鼠标事件

onclick ：点击事件
ondblclick ：双击事件
onmouseover ：鼠标移入元素
onmouseout : 鼠标离开元素
onmouseenter ：鼠标移入元素
onmouseleave ：鼠标离开元素
onmousemove: 鼠标在元素中移动
onmousedown：鼠标按下
onmouseup：鼠标抬起
oncontextmenu ：鼠标右键菜单事件.

例子：

<!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>LiuQing</title>
</head>

<body>
  <div id="box">我是box元素</div>
  <script>
    // 1.onclick ：点击事件
    document.getElementById("box").onclick = function () {
    
      console.log("点击了");
    }
    // 2.onmouseover ：鼠标移入元素
    document.getElementById("box").onmouseover = function () {
    
      console.log("鼠标移入元素");
    }
  </script>
</body>

</html>

在这里插入图片描述

前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件

一、JavaScript变量

二、JavaScript标识符

二、JavaScript获取元素

三、JavaScript的鼠标事件

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件

一、JavaScript变量

二、JavaScript标识符

二、JavaScript获取元素

三、JavaScript的鼠标事件

热门文章

最新文章

相关课程

相关电子书

相关实验场景