初始JavaScript

最新推荐文章于 2022-07-02 15:37:12 发布

王十一是个喵

最新推荐文章于 2022-07-02 15:37:12 发布

阅读量245

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习案例

本文链接：https://blog.youkuaiyun.com/qq_43398720/article/details/98785413

学习案例专栏收录该内容

22 篇文章

订阅专栏

本文深入讲解JavaScript的基础特性，包括解释性、基于对象、事件驱动及跨平台等特性。介绍了ECMAScript语法标准、DOM和BOM对象，以及三种常见的JavaScript引入方式。探讨了变量声明、注释使用、调试技巧，并通过实例演示了简单的页面交互和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript的特点

解释性
基于对象
事件驱动
跨平台

JavaScript组成

ECMASscript 是JavaScript的语法标准
DOM 文档对象
BOM 浏览器对象

JavaScript引入方式

行内引入

<div onclick="alert('这是行内引入')"></div>

文本内部引入

<script>
	alter('这是文本内部引入');
</script>

外部链接引入

<script src="./js/01.js" type="text/javascript"></script>
新建一个js文件夹，在里面建一个.js后缀的文件，然后引进去
.js 里面写：
alter('外部链接引入');

如果script是用来引入外部元素的，那就不可以再写js代码了，不会执行的

js注释

单行注释【Ctrl+？】 //
多行注释【Ctrl+shift+？】 /**/
注释的作用
- 解释代码
- 提高可读性
- 浏览器不解析

变量（就是储存数据的容器）

语法：var 变量名（内容）=值

声明变量有如下几种方法：
var x=1;
var x=y=1;
var x=1,y=3;
-----------------------
alert（x）;//如果括号里面的内容为变量，就不用加引号

Uncaught SyntaxError:Unexpected indentfier(语法错误)

变量命名规则

见名知义（语义化命名），遵循驼峰标识
不可以使用关键字和保留字
只可以以英文字母，_，$开头
变量名不要相同

调试命令

alert
- 命令直接在页面弹出
- 一次只能显示一个，（同一个括号里只会显示第一个）
- 没有确定之前不会显示下一个
- alert（），如果括号里面是变量的话，就不用加引号
console.log
- 在控制台打印数据
- 一次可以打印多个

简单的交互

交互三步曲：

找谁？
加什么
做什么

<body>
    <div id="div"></div>
    <input id="btn"/>
    <script>
        //一、
    	//通过id属性获取元素
        console.log(document.getElementById("div"));
        //二、
        //点击按钮弹出hello
        //(1)
        document.getElementById('btn').onclick=function(){
            alert('hello');
        }
        //(2)
        var btn=document.getElementById('btn');
        btn.onclick=function(){
            alert('hello');
        }
        //会有这种现象，代码是从上往下执行的，有时候获取标签时，标签还没有被加载，我们取得值为null
        //解决办法  window.onload 它的作用是，当文档和资源都加载完以后再调用
        window.onload=function(){
            var btn=document.getElementById('btn');
        		btn.onclick=function(){
        	    alert('hello');
        	}
        }
    </script>
</body>

鼠标事件

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

over和enter的区别：如果发生鼠标事件的盒子有子元素，over移入到子元素中会被二次触发，enter不会，它只会被触发一次。out和leave也是这样的区别

js操作元素内容和属性

innerHTML,innerText两者的区别

获取时：innerHTML会获取元素里的所有内容，包括标签；innerText只获取元素中的文本内容
赋值时：innerHTML会解析标签，innerText会原样输出

js操作属性

语法：元素.属性名=“属性值”；

var btn=dcument.genElementById('btn');
btn.id='a';

注意：class是一个特殊属性，class是保留字，不可以直接使用，操作class的标签是className。

元素样式

语法：元素.style.样式名=“样式值”；

<div id=div></div>
<scrtip>
	var div=document.getElementById('div');
    div.style.width="200px";//写法一
    div.style="width:200px";//写法二
</scrtip>

注意：js中是不允许出现’_‘的，要用驼峰标识来表示，eg：fontSize。

console.log(box.style);获取的是行内的样式，改变的也是行内的样式

div.style.cssText =""
div.style.cssText +=""//有加号代表还保留原本的以下样式

cssText，就是自己设置的样式