html使用js的变量_JS 20天通关第一天：变量鼠标事件操作元素-CSDN博客

爬虫总是要学一些 js 基础以及 html 基础的要不一些基本反爬手段都解决不了比如：ajax 请求 js加密等等。所以一些基本的 js 知识还是很有必要的，那么就在这20 天我会跟大家一起分享 js 的知识当然 html 知识也是比较重要的这个比较简单网上教程也多的很。

1.什么是js

Js是一门基于对象的，由事件驱动的，解释性，脚本语言

2.引入方式

内联：写在标签中`不推荐使用

内部：`会优先执行这个写在 html 文档中的任意位置但是有些地方是不推荐的建议写在 body 的最后面

外部引入：`不可以在加入任何js 代码不会执行

3.变量

3.1.变量的定义

说明	含义
关键字	var
声明	var 变量名
赋值	var 变量名 = 值
多值赋值	var 变量名 = 值1 = 值2 …… 也就是说具有传递性;
数据类型	字符串""、数字、列表、对象
命名规范1	不可以使用数字开头
命名规范2	除了$ _不可以使用其他特殊字符
命名规范3	不能使用关键字和保留字作为变量名
命名规范4	变量命名不能重复

3.2.Js的简单鼠标事件

函数	事件
onclick	点击事件
onmousedown	鼠标按下事件
onmouseup	鼠标抬起事件
onmousemove	鼠标移动
onmouseover/onmouseout	鼠标移入移出事件
onmouseenter/onmouseleave	鼠标移入移出事件
ondblclick	鼠标双击事件
oncontextmenu	鼠标右击事件
console.log	控制台打印输出

3.3.操作元素内容的方法

有这样一段 html 代码以供下面的演示提供支持

<html lang="en"><head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>Documenttitle>        <style>                .box {                        width: 300px;                        height: 300px;                        border: 1px solid;                        text-overflow: ellipsis;                }style>head><body>        <div class="box" id="box">这是一个 divdiv>        <input type="text" name="" id="pwd">        <input type="submit" value="提交" id="sub">body>html>

实现这样的一个效果

首先引入

<body>        <div class="box" id="box">div>        <input type="text" name="" id="pwd">        <input type="submit" value="提交" id="sub">        <script>         // 内部引入script>    body>

3.3.0 选择元素以及添加事件

 <script>                var box = document.getElementById("box");                var pwd = document.getElementById("pwd");                var sub = document.getElementById("sub");                // 通过 给元素 设置 id 的方式 进行选中 document 文档 也就是 html getElementById()方法通过 元素 id 进行选中                sub.onclick = function() {                   // 给 变量 为 sub 所 绑定的 元素 设置 点击事件                 }script>

3.3.1 操作普通双标签

均有两个作用：一个获取一个设置

a)innerText

第一个功能获取元素.innerText

  console.log(box.innerText);

第二个功能设置元素.innerText = "值"

 console.log(box.innerText="这是修改的样子");

注意点：内容中有html 标签的话是不会被解析的

console.log(box.innerText="这是修改的样子");

b)innerHTML

第一个功能获取元素.innerHTML

第二个功能设置元素.innerHTML = "值"

与上面的 innerText 使用方法以及效果都是一样的

这里有一点不同就是可以添加元素内容中有html 标签的话可以解析的

console.log(box.innerHTML="这是修改的样子");

3.3.2 操作表单

第一个功能获取元素.value

我们需要获取一下输入框中的数据怎么办

console.log(pwd.value);

第二个功能设置元素.innerHTML = "值"

console.log(pwd.value="这是表单修改");

3.3.3 操作类名方法

第一个功能获取元素.className

第二个功能设置元素.className = “指定的类名”

操作方法跟上面几乎都是一样的

这里就不一一举例

3.3.4 操作元素样式的方法

第一个功能获取元素.style.样式属性名这里需要注意只能是获取内联元素的属性

setting.onclick = function() {        mask.style.display;}

第二个功能设置元素.style.样式属性名 = “属性值”

setting.onclick = function() {        mask.style.display="block";}

长按加入这个大家庭

回复‘导航’查看功能

咱也不知道为啥点了再看的都变好看了

html使用js的变量_JS 20天通关第一天：变量 鼠标事件 操作元素

html使用js的变量_JS 20天通关第一天：变量鼠标事件操作元素