javaScript笔记总结2

由于(html标签)普通标签不具有交互能力的,要利用js做交互,所以引申到要操作标签的内容

获取对应的标签节点,有多少种方式?

通过DOM提供的方法/API

通过id来获取对象/标签节点,ps通过id获取对象,前面一定是document开头的

document.getElementById("id")       --->对象

ps.方法后面一定要加上括号,那个获取元素就相当于方法

document.getElementById(id)     //这个写法是错的,因为直接id相当于是变量,会报错的
document.getElementById("id")   //正确写法

拿到对象之后,要干嘛.并没有表达要做什么,(你生了个娃,你没教他去上学,他会去上学吗?)

所以涉及到标签的操作/事件的讲解(点击事件)

document.getElementById("box").onclick=function(){alert(1);}

innerHTML和innerText的区别

innerHTML:获取标签节点的内容/获取标签节点的操作权限

​ 能解析标签

innerText:获取文本内容,会以文本的形式将标签展示出来

​ 不能解析标签

等号问题

​ 在js里面,遇到等号,要先看等号的右边,右边读完才进行赋值。

document.getElementById("btn").onclick=function(){
    document.getElementById("btn").innerHTML="我真帅";
    document.getElementById("btn").style.color="blue";
    document.getElementById("btn").style.backgroundColor="red";
}
//注意:复合样式-号连字符,在js使用的时候要变成驼峰命名

变量

假如你使用的时候,可能要操作一堆属性,每次都要获取一次,好蠢哦,写很多重复的代码 —>变量

假设你有个同学他的名字非常长,每次叫他的时候,经过他同意之后,给他取给外号(变量),当你叫他的时候,直接叫他的外号。

var —>用于声明/注册变量

变量命名:

• ​严格区分大小写(注意大小写)
• 见名知意(尽量反应出那个东西代表含义)
• 可以使用$,_字母,数字,但是不能以数字开头
• ​尽量不要使用中文作为变量名(虽然是不会报错,不推荐使用)
• 不能使用关键字(已经存在的/正在使用)、保留字。 保留字(备胎,class)：当前版本可能没有特殊含义，但是以后会有。

<button id="btn"></button>
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        btn.innerHTML="我真帅";
        btn.style.color="red";
        btn.style.backgroundColor="red";    //style是来操作行内样式
    }

注意事项

• 所有变量必须是先声明,才能够使用,变量不一定要马上赋值
• (不知道会用到什么变量)可以先声明变量不赋值,是合法,符合语法规则
• 每使用一个变量的时候,而是使用它代表的值
• 一个变量只能声明一次,不要重复声明

var goudan=undfined;    //后台悄悄的赋值undfined
var goudan; dachui;     --->错误的,因为分号在js里面代表的是结束
var goudan;                 
var dachui;         //--->简写     var goudan,dachui,baiyun;
var baiyun;
//换行--->为了代码结构更清晰,更明了(美观)

注释

单行注释 //

多行注释 /**/

js里的系统自带的弹窗

str代表字符串

alert(str); 只有确定按钮,没有返回值(返回默认undfined 没有意义)

confirm(str); 比alert多一个取消按钮,点确定返回ture,取消返回false

prompt(str,str1); 比confirm还要多一个输入框,点确定返回输入框的内容,点取消返回null

​ 第二个参数,用来显示输入框的默认值。

confirm("123")      //执行完之后,就代表它的返回值,需要标记,我们就用一个变量存起来
ture        -->真
false       -->假
null        -->空

关于引入js的方式可能存在一些问题

• scipt标签用来引入外部js时,script里面的js代码不会被解析

• head结束标签之前,引入外部js时,会报错

• Cannot set property ‘onclick’ of null,表示不能给一个null设置一个属性
• 原因如下,因为文档是从上往下解析,然后读到js文件,body里面的内容还没有获取到,结果就是一个空对象

那问题来了,如果一定要head结束标签之前引入外部js,又怎样做到不报错?

方法一:使用window.onload,等整个文档加载完成之后,再执行外部js的代码

//在外部js写这些
window.onload=function(){
    //code
};

方法二:让外部js不去触发window.onload,但是等你的资源加载完成再执行,也可以使用下面的方法

<script src="demo1.js" defer="defer"></script>
//等一会再加载,延迟加载,具体要延迟多久?同样会推迟到整个资源加载完之前,一定会在window.onload之前加载

比较优先级/权重/谁最先执行

执行顺序:3–>2–>1

//demo1.js使用window.onload
<script src="demo1.js"></script>    //1
//demo2.js使用defer
<script src="demo2.js" defer="defer"></script>  //2
<script>    //3
    alert(1)
</script>