JavaScript基础

简介: 1 JavaScript书写位置2 元素定位和样式设置3 变量4 事件5 innerHTML属性6 自定义函数

1 JavaScript书写位置

(1)行内:写在标签的属性里,这个属性必须是事件属性,不推荐使用

(2)内嵌:在HTML文件中,放在script标签里<script type="text/javascript">js代码</script>

(3)外链:在单独的js文件里,在HTML文件中,通过script的src属性引用到页面中<script type="text/javascript" src="js文件路径"></script>

2 元素定位和样式设置

元素定位:

(1)document.getElementById(目标标签的id属性值)

(2)document.getElementByName(目标标签的name属性值)

(3)document.getElementByClassName(目标标签的class属性值),多元素查找,查找到的是页面中的一组元素,如果想访问单个元素,需要通过 [元素下标] 来实现,下标从0开始

元素定位后样式设置:

查找到元素后,通过英文的点号来选择对应的样式进行设定。如:

document.getElementById('div1').style.width='800px';

3 变量

(1) 定义:var 变量名

(2)变量命名规则:由字母、数字、下划线、$构成,不建议使用中文,变量名不能以数字开头,不能和js中的关键字相同。

(3)用途:通常用以记录查找到的元素,方便后续进行使用和样式设置。如:

$_blm = document.getElementById('div1').style;

$_blm.width = '800px';

4 事件

事件的3要素:

(1)事件源:定位到的某个页面元素

(2)事件类型:表示如何操作该元素时会发生该事件

(3)匿名函数:定义事件发生时的处理动作

事件:

(1)单击:onclick

(2)双击:ondbclick

(3)鼠标移入:onmouseover

(4)鼠标移出:onmouseout

(5)window.onload事件:当元素都加载完毕后再执行js代码(HTML文件由上至下执行,若js代码放在元素定义之前就会出现问题)

5 innerHTML属性

作用:设置或返回开始和结束标签之间的HTML

元素.innerHTML = ‘元素中html的显示内容’

6 自定义函数

function 函数名(){

js代码

}

相关文章
|
4天前
|
云安全 人工智能 安全
AI被攻击怎么办?
阿里云提供 AI 全栈安全能力,其中对网络攻击的主动识别、智能阻断与快速响应构成其核心防线,依托原生安全防护为客户筑牢免疫屏障。
|
14天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
8天前
|
安全 Java Android开发
深度解析 Android 崩溃捕获原理及从崩溃到归因的闭环实践
崩溃堆栈全是 a.b.c?Native 错误查不到行号?本文详解 Android 崩溃采集全链路原理,教你如何把“天书”变“说明书”。RUM SDK 已支持一键接入。
548 206
|
3天前
|
编解码 Linux 数据安全/隐私保护
教程分享免费视频压缩软件,免费视频压缩,视频压缩免费,附压缩方法及学习教程
教程分享免费视频压缩软件,免费视频压缩,视频压缩免费,附压缩方法及学习教程
223 138
|
存储 人工智能 监控
从代码生成到自主决策:打造一个Coding驱动的“自我编程”Agent
本文介绍了一种基于LLM的“自我编程”Agent系统,通过代码驱动实现复杂逻辑。该Agent以Python为执行引擎,结合Py4j实现Java与Python交互,支持多工具调用、记忆分层与上下文工程,具备感知、认知、表达、自我评估等能力模块,目标是打造可进化的“1.5线”智能助手。
751 56
|
6天前
|
人工智能 移动开发 自然语言处理
2025最新HTML静态网页制作工具推荐:10款免费在线生成器小白也能5分钟上手
晓猛团队精选2025年10款真正免费、无需编程的在线HTML建站工具,涵盖AI生成、拖拽编辑、设计稿转代码等多种类型,均支持浏览器直接使用、快速出图与文件导出,特别适合零基础用户快速搭建个人网站、落地页或企业官网。
1065 157
下一篇
oss云网关配置