菜鸟前端日记3(原生JS)

本文介绍了JavaScript的基础知识,包括其组成、引入方式及位置选择,并详细解释了如何使用JavaScript进行页面元素的获取、事件处理及样式修改。

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

JavaScript基础

JavaScript是运行在浏览器端,跨平台的web脚本语言。可以向html页面添加交互行为,可以和服务器进行通信。
JavaScript的组成:
1、ECMAScript:JavaScript的核心,描述了语言的基本语法和基本对象。
2、文档对象模型(DOM):描述处理网页内容的方法和接口。
3、浏览器对象模型(BOM):描述与浏览器进行交互的方法和接口

JavaScript引入方式:
1、行间

<input type="button" onclick="alert(1);" value="Click" />

2、内嵌

<script>
  //javascript代码
</script>

3、外链

<script src=“index.js” type=“text/javascript”></script>

JavaScript位置:
可以放在页面的任意位置
通常放在</body>的前面:
原因是html的加载顺序是从上到下加载的,js的大部分作用是获取dom,操作 dom,放在下面是要等dom加载完成时,我们再执行js,这样就可以获取到dom了。

若不想放在底部:

window.onload=function(){
//js代码
}

它虽然放在的上面,但它要等页面上的html标签、图片、文字等都加载完成时才执行这个函数中的代码。
缺点:一个页面中只能用一次,最后一次覆盖前面的。

JavaScript的输出方式
1、 document.write();
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。
2、innerHTML
识别html标签
3、innerText 只识别文本
4、alert()
5、console.log()

简单的运用JavaScript:
通过id获取页面中元素

document.getElementById('id名称')

给元素添加事件处理

元素.onclick = function (){ 
     //这里写要执行的代码
};

改变元素的样式,行间中操作

元素.style.样式名 =

简单的事件
onclick 鼠标单击
onmouseover 鼠标悬浮(同hover)
onmouseout 鼠标移出
onmousemove 鼠标移动
用法:
元素.οnclick=function(){//这里放内容}

Js中的标识符

标识符就是指变量、函数、属性的名字,函数的参数。
命名规则:
1、由字母、数字、_(下划线)、$(美元符)组成。
2、不能以数字开头。
3、不能是关健字或保留字。

关键字:
Js内部有很多给我们定义好的,有特殊意义的不能让我们随便使用的。
http://www.w3school.com.cn/js/pro_js_keywords.asp
保留字:
未来几年可能成为关键字。
http://www.w3school.com.cn/js/pro_js_reservedwords.asp
命名风格:
语义化、驼峰命名(大驼峰、小驼峰)
如:backgroundColor

JavaScript变量

变量是用来存储数据的,在用之前要声明
声明变量的方式:
使用关键字var
声明变量:var 变量名
赋值:变量=数据
声明并赋值:
var 变量名=数据
//只声明没有赋值时值是undefined

JavaScript属性的操作
操作属性的方法:
点(.),中括号([])
style.width=200px;
style[‘width’]=300px;

操作特殊属性的方式:
通过[]的方式获取(脚标)
通过驼峰的方式(去掉-,-后的首字母大写)

元素上的属性:
style,id,value,className,innerHTML,href,src等
注:href值和src值获取到的是绝对路径

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值