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

}

相关文章
|
JavaScript 前端开发
JavaScript基础总结
JavaScript基础总结
41 0
|
1月前
|
Web App开发 JavaScript 前端开发
JavaScript基础
JavaScript基础
11 0
|
6月前
|
JavaScript 前端开发 Java
JavaScript基础(一)
javascript是一种运行在客户端(浏览器)的编程语言,可以用来创建动态更新的内容,控制多媒体,制作图像动画等交互效果。
51 1
|
11月前
|
存储 JavaScript 前端开发
Javascript基础
Javascript基础
105 0
|
存储 JavaScript 前端开发
JavaScript基础(1)
JavaScript 是 Web 的编程语言。 所有现代的 HTML 页面都可以使用 JavaScript。 本教程将教你学习从初级到高级 JavaScript 知识。
141 1
|
JavaScript 前端开发 程序员
4 JavaScript基础(2)
JavaScript对象:自定义对象、宿主对象、内建对象 内建对象: 由ES标准中定义的对象,在所有ES实现中都可以使用[Math、String、Number…] **宿主对象:**由js环境提供的对象,如[BOM、DOM] **自定义对象:**程序员自定义 :::
96 0
|
JavaScript 前端开发 Java
JavaScript的基础使用
JavaScript的基础 一、javascript简介 JavaScript简称js,最初由网景(现在的Mozilla)公司创建,由于商标冲突原因,其标准版本命名为ECMAScript,但是一般人们还是叫JavaScript,只在谈标准的时候说到ECMAScript这个名字。值得注意的是JavaScript与java没有任何关系,就像雷峰塔(神话中镇压白娘子的塔)和雷锋。此外js(JavaScript)和jsp(java servlet pages)也没有关系。   js的工作分为两部分,一部分属于js语言本身的特性,而另一部需要依靠宿主环境(web浏览器)才能完成。 二、javascri
JavaScript的基础使用
|
存储 移动开发 JavaScript
一篇学完JavaScript基础
前言 学习Javascript也有好长时间了,遂把这一阶段的学习内容整理成笔记,巩固所学知识,同时也会参考一些博客,书籍上的内容,查漏补缺,给自己充充电🔋🔋 文章内容如有错误,欢迎指正批评✔️✔️
一篇学完JavaScript基础
|
存储 JavaScript 前端开发
JavaScript基础(上)
JavaScript基础(上)
140 0
JavaScript基础(上)
|
存储 移动开发 JavaScript
JavaScript基础(下)
JavaScript基础(下)
160 0
JavaScript基础(下)
下一篇
无影云桌面