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代码

}

相关文章
|
1月前
|
前端开发 JavaScript API
从0开始学习JavaScript--JavaScript 异步编程
在现代的Web开发中,异步编程变得愈发重要。随着用户期望的提高和网络应用的复杂性增加,有效地处理异步操作成为构建高性能、交互丰富的应用的关键。JavaScript作为一门单线程的语言,采用异步机制来处理并发任务,确保用户体验不受阻塞。
|
30天前
|
JavaScript 前端开发 Java
JavaScript基础(一)
javascript是一种运行在客户端(浏览器)的编程语言,可以用来创建动态更新的内容,控制多媒体,制作图像动画等交互效果。
24 1
|
1月前
|
存储 JavaScript 前端开发
JavaScript基础
JavaScript基础包括介绍和环境配置。它是一种用于网页交互的脚本语言,支持动态特性,最初用于网页,现扩展到服务器端和移动应用。要开始,使用文本编辑器创建.html文件,通过&lt;script&gt;标签内联或链接.js文件引入JavaScript代码。变量用var、let或const声明,数据类型包括基本类型(如Number、String、Boolean等)和引用类型(如Object、Array、Function)。操作符包括算术、逻辑和比较等。控制流程语句如if、for、while和switch用于条件判断和循环执行代码。
|
1月前
|
JavaScript 前端开发 API
JavaScript由哪部分组成,它们的区别是什么?
JavaScript由哪部分组成,它们的区别是什么?
|
1月前
|
存储 缓存 JSON
10个你不知道的JavaScript技巧,让你的代码更加优雅!
10个你不知道的JavaScript技巧,让你的代码更加优雅!
|
6月前
|
存储 JavaScript 前端开发
Javascript基础
Javascript基础
91 0
|
10月前
|
存储 JavaScript 前端开发
JavaScript基础(1)
JavaScript 是 Web 的编程语言。 所有现代的 HTML 页面都可以使用 JavaScript。 本教程将教你学习从初级到高级 JavaScript 知识。
112 1
|
JavaScript 前端开发 程序员
4 JavaScript基础(2)
JavaScript对象:自定义对象、宿主对象、内建对象 内建对象: 由ES标准中定义的对象,在所有ES实现中都可以使用[Math、String、Number…] **宿主对象:**由js环境提供的对象,如[BOM、DOM] **自定义对象:**程序员自定义 :::
77 0
|
存储 移动开发 JavaScript
JavaScript基础(下)
JavaScript基础(下)
139 0
JavaScript基础(下)
|
JavaScript 前端开发 Java
你真的了解JavaScript基础吗?
你真的了解JavaScript基础吗?
79 0