js初接触

最新推荐文章于 2023-08-04 16:37:11 发布

JessePinkmen

最新推荐文章于 2023-08-04 16:37:11 发布

阅读量146

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/JessePinkmen/article/details/83830085

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

js基础，写法，查找，控制html、css

为了在浏览器端完成表单验证，发明脚本语言js

1.书写位置

嵌入式

script标签
alert()打印输出结果，语句的结尾加不加分号都行

外链式

script标签，设置script标签的src属性=‘js文件地址’

行内式

行内式js要求，必须是事件的格式。事件：需要用户触发 k=“v事件”

<div onclick="alter('ok')">测试行内式js</div>

用的比较少

2.js的查找标签控制html内容css样式

首先需要实现查找功能，然后控制一个html，再控制css

<script>
	document.getElementById('box').innerHTML = ‘javascript’
	
</script>

document指整个文档，页面
get Element By Id 通过id查找，这样拆分查找这个方法，就很通俗的记了
再js里还是等号=赋值

补充：js的入口函数

//window是浏览器窗口，意思就是当浏览器窗口加载完毕之后再执行大括号里面的命令
window.onload = function(){
js命令
}

下面涉及css样式，变量，数据类型，函数，判断，事件，做一些小例子；

3.控制css样式

window.onload = function(){
	document.getElementById('box').style.css属性=值b
}

js控制样式里没有-了，这个用小驼峰命名：font-size就是fontSize
现在学的是原生js jquery和vue就是封装了很多的js方便使用

4.javascript变量var

查找，保存，再控制，用变量保存数据
定义关键字：var
var 名字 = 值名字可以用$符号
js变量中如果存的是标签，数据类型都是对象型
var obox = document.getElmentById(‘box’)

5.js数据类型

typeof()检查数据类型:
number：数值型，不区分整型和符点型
string：字符串
boolean：布尔型
undefined：未定义类型，只有在程序出现时才能看见，变量未找到
object：对象型，分为空对象null和有数据的对象

js中最复杂的就是有数据的对象

6.js中的函数function

语法规则：function 名字(参数){命令}

demo 封装函数实现弹窗功能

<script>
	function fnAlert(){
		alert('自定义弹窗')
	}
	fnAlert()
</script>

一般的{命令} （参数、条件）

js中函数会预解析，就算把上面demo中的fnAlert放到定义function之前也没有问题
但是对于变量的预解析，在上面已经写过了，会是undefined类型，相当于预解析var 变量,只是出现undefined

js的函数也可以return，退出方法

7.js条件判断

if(条件){}else{}

多重判断if(){}else if(){}…else{}

条件运算符：
与&& 或|| 非！和c语言一样
== === > >= < <=

注意：和=的区别
js是比python更弱类型的语言
== 是值判断数据数值例如2==‘2’他是显示true
=== 判断数值+数据类型，这里2===‘2’就是false
三等号多用于判断金融

+号两种功能，加法运算和字符串拼接

8.js事件

<script>
	window.onload = function(){
		var oBtn1 = document.getElmentById('btn1')
		var oBtn2 = document.getElmentById('btn2')
		var oBtn3 = document.getElmentById('btn3')
	
		obtn1.onclick = function(){
			alert('单击成功')
		}
	}
</script>


<body>
	<button id='btn1'>单机</button>
	<button id='btn2'>鼠标划过</button>
	<button id='btn3'>鼠标离开</button>
</body>

事件语法：事件发生在谁身上（变量）.事件属性（事件类型）= 匿名函数（没有名字的函数）

鼠标点击onclick 划过 onmouseover 离开onmouseout

所有html属性，在js中写法只有class在js中写为ckassName其余都相同

DOM document object model 文档对象模型，js控制元素的方式

9.实现名片的demo

取得input的value：
object_name.value
注意，js中相同类型数值例如字符串就不能回车换行

最好把script写在window.onload里因为有的网页没加载好就先加载script

JessePinkmen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js初接触

js基础，写法，查找，控制html、css为了在浏览器端完成表单验证，发明脚本语言js1.书写位置嵌入式script标签alert()打印输出结果，语句的结尾加不加分号都行外链式script标签，设置script标签的src属性=‘js文件地址’行内式行内式js要求，必须是事件的格式。事件：需要用户触发 k=“v事件”&lt;div onclick="alter('ok')"&...
复制链接

扫一扫

专栏目录