初识JavaScript
-
JavaScript一种脚本语言,是一种动态类型、弱类型 -
JavaScript通常用来操作HTML页面的 -
html骨架,css是样式,js是行为
js代码写在哪里
-
JavaScript代码可以写在页面的script标签里面,或者单独的js文件里面,或者标签属性里面(不推荐) -
写在外部
.js后缀文件里面,通过script标签引入,类似于img的src标签引入-
在引入
js文件的script标签里面,一定不能再写js代码
-
-
script标签可以放置于任何位置,不同位置要注意加载顺序,如果没有什么特殊要求,通常放在body结束之前。-
如果
script里面涉及到操作后面的元素,而script又非得放在前面的话,需要加上window.onload
-
写js代码需要注意什么
-
注释里面是没有要求的
-
严格区分大小写
-
alert()才是js本身自带的,Alert()不是自带的
-
-
语句字符都是半角字符(字符串里面可以使用任意字符)
-
某些完整语句后面要写分号
-
代码要缩进,缩进要对齐
-
引号里面代表字符串,字符串是没有代码的功能的,所以不需要满足上述要求。
注释
-
多行注释
/* */ -
单行注释
//
js里的系统弹窗代码
-
alert("内容")
js里的打印
-
console.log(1);
js获取元素及修改内容
-
其实,要操作页面,就是操作标签,
JS要操作标签,就要先获取标签
-
独有标签的获取:
-
document.title document.title document.body document.body.innerHTML document.body.innerText document.head document.head.innerHTML
-
-
其他标签的获取
-
通过
id获取元素-
document.getElementById("box");
-
-
通过
class获取:(不兼容IE8及以下)-
.getElementsByClassName();
-
-
通过标签名获取
-
.getElementsByTagName();
-
-
通过选择器的写法获取元素:(不兼容IE7及以下)
-
.querySelector(); -
.querySelectorAll();
-
-
通过
name获取-
.getElementsByName();
-
-
注意: 除了ID获取前面必须是document之外,其他的方式,前面可以是某个元素(不能是集合)
-
修改页面
title信息-
document.title = "我要把标题改成666";
-
-
修改别的标签的内容,得用
innerHTML或者innerText-
innerHTML可以识别标签 -
innerText不能识别标签
-
-
获取某个确切的元素,可以直接操作这个元素
-
document.getElementById("box").innerHTML = "吃惊!";
-
-
获取的是一堆元素的集合,设置操作时要通过下标(索引、序号)拿到对应的某一个再用
-
document.getElementsByClassName("box")[0].innerHTML = "美女";
-
-
document.write()-
在文档流关闭之前,给body部分新增内容,在文档流关闭之后,修改整个HTML的内容
-
事件
-
用户的操作 元素.事件 = 函数;
-
鼠标事件
-
onclick左键单击 -
ondblclick左键双击 -
onmouseenter鼠标移入 -
onmouseleave鼠标移出
-
定义变量
-
不能使用关键字或者保留字(js里面已经赋予它有意义的词,或者留着备用的词)
-
只能包含 数字 字母 _ $ 并且不能以数字开头
-
严格区分大小写
-
尽量见名知意
-
var 变量时并不要求立马赋值
-
用,号可以让一个var定义多个变量
-
规范的标签属性:
-
. 符号直接操作(可读可写)
-
-
不规范(自定义)的标签属性:
-
获取
getAttribute -
设置
setAttribute -
移除
removeAttribute
-
注意:所有的 路径/颜色 获取的结果不一定就是你写的内容
通过ID获取的元素赋值给变量后,假设修改了ID,这个变量还是表示这个元素
自定义标签属性的操作方式,同样可以操作符合规范的标签属性
控制元素的样式
-
行内样式标签属性:大部分情况下,
js都是通过操作行内样式达到修改样式的目的当我需要单个属性去修改的时候,我们一般都是直接 . 操作去修改元素的行内样式
-
操作复合属性时,要注意用驼峰写法(去掉-号,-号后面的第一个单词大写)
数据类型
-
number数字 -
string字符串 -
boolean布尔值truefalse -
function函数 -
underfined未定义 一个变量声明之后没有赋值就是undefined -
object在js里面null属于对象类型,但是它不具有很多对象的共性,所以很多资料将它归为单独一类数据类型null
算数运算符
-
+ - * /当不是数字之间的运算的时候 + 字符串拼接 -/*% 尽量将字符串转换成数字(隐式类型转换) NaN :Not a Number number类型 一般在非法运算的时候才会 出现NaN isNaN(参数) 非常讨厌数字 首先尽量把参数转换成数字,然后 当参数是 数字,返回 false 当参数不是数字,返回 true
赋值运算符
-
+= -= *= /= %=++ -- 两个都存在隐式类型转换,会全部转换为数字 ++x x++
比较运算符
-
< > == <= >= != === !==== 和 ===的区别 == 只判断值是否一样 === 不仅仅判断值,还判断类型是否一样
逻辑运算符
针对布尔值 && 与 两边都为真,结果才为真,其他为假 || 或 两边都为假,结果才为假,其他都是真 ! 非 取反,真变假,假变真 当逻辑运算符,两边不一定是布尔值的时候 && 遇到假就停,但是不会进行类型转换 || 遇到真就停,。。。 ! 隐式类型转换,将后面的数据先转换为布尔值再取反
if条件
当if的条件 运算完后不是布尔值的时候,会被强制性的转换为布尔值
哪些值,在转换为布尔值的时候为false
false boolean
0 number
"" string
null object
undefined undefined
NaN number
在if里面,能用布尔值做条件判断的时候,不要用其他的来代替,因为强制数据类型的转换需要耗费时间
在两个值比较的时候,能用三等判断的时候,就用三等判断