前端基础知识

xiaoxiao2021-02-28  46

虽然目前前端JavaScript都是用框架进行开发,但是框架中的函数都是由原生js封装成的,因此适当了解js基础知识是有必要的。 JavaScript在前端中的主要作用是: 页面行为:部分动画效果、页面与用户的交互、页面功能。 1 js的嵌入页面的方式。 1 行间事件(主要用于事件),2 页面标签嵌入,3 外部引入,一般开发中第三种用的比较多。 一 变量 js中的变量与C语言有些类似,需要先定义,不同的是js中用var关键字来定义变量,比如: var iNum = 22; var sTr = ‘ABC’; 上面定义了一个数字类型和字符串类型的变量。 js中有5中基本变量类型:1 number数字类型 2 string字符串类型 3 Boolean布尔类型 4 undefined类型 5 null类型。其中前三种和其他语言的类似,undefined类型是变量声明未初始化如 var a;null类型是表示空对象,如var a=null;在页面上获取不到对象时,返回值就是null。还有一种复合类型:object,与Python中的对象类似。

二 获取元素的方法 1 使用内置对象document上的getElementById()方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量比如:

var oDiv = document.getElementById('div');

获取到的就是一个div对象,但是把javascript写在元素的上面,就会出错,因为页面上从上往下加载执行的,javascript去页面上获取元素div的时候,元素div1还没有加载,因此可以可以把js放在页面的最下面。但是这样不太方便也不习惯,开发中主要是使用第二种方法:用window.onload函数进行加载全部页面后再执行,例如:

window.onload = function(){ var oDiv = document.getElementById('div1'); }

三 操作元素属性 主要有两种方法1 ‘.’操作 2 ‘[ ]’操作 其中‘.’操作与python中获取对象的方法与属性类似,比如: 读取属性值存储到变量中: var oD = document.getElementById(‘link’); var oD1 = oD.href; 先获取到link对象 然后将link对象中的href属性存储到 oD1变量中,然后就可以对属性进行设置了。 通过“[ ]”操作属性: oA.style[sVal1] = sVal2; sVal1是字符串的话用[]包裹起来。 innerHTML可以读取或者写入标签包裹的内容,比如:oDiv.innerHTML = ‘百度一下’ 就可以向div标签中写数据了。 总结:这只是简单介绍一下用js对html中的元素进行获取和修改,js和其他编程语一样,有函数,循环和判断等一些用法,这只是最简单的获取和修改元素,这样可以对js原生代码有简单的了解。

转载请注明原文地址: https://www.6miu.com/read-37128.html

最新回复(0)