JS基础

Posted 2020-11-02 cuteboy

【使用JS的三种方式】
（1.）直接在html标签中使用事件属性调用JS代码
（2.）在页面的任意位置使用script标签插入JS代码

（3.）引入外部的JS文件：

【注意事项】
（1.）JS代码可以放在页面的任意位置使用，但是放置的位置不同，将影响JS的执行顺序
（2.）引入外部JS得script标签不能在包含任何的JS代码
【JS中的变量】
（1.）变量的声明：
var num=1; 使用var声明的变量属于局部变量，只在当前作用域有效
num="哈哈"; 不用var声明的变量，默认是全局变量，在整个JS文件中可用
var a=1,b,c=2; 使用一行代码，声明多个语句。其中b为undefind
[js中变量声明的注意事项]
①JS中声明变量的关键字只有var。变量的类型取决于所赋的值。如果声明后未赋值，则为undifind类型
②JS中同一个变量，可以在多次赋值中，被修改数据类型。
var num=1;
num="哈哈哈"；
③变量可以用var声明，也可以直接赋值声明
区别：使用var声明的作用域为局部变量
④在JS中一个变量可以多次使用var声明，后面的声明相当于直接赋值，没有任何卵用。
⑤JS变量区分大小写，大写和小写不是一个变量。

（2.）JS中数据类型：
undefind：使用var声明，但是没有赋值的变量
null：表示空的引用
Boolean：真假
Number：数值类型，包括整型和浮点型
String：字符串
Object:对象

（3.）常用数值函数
①isNaN：用于检测一个变量，是不是非数值（Not aNumber），isNaN在检测时，会先调用Number函数，尝试将变
量转为数值类型，如果最终能转为数值，则不是isNaN
②Number函数：用于将各种数据类型转为数值类型。
>>>undefind：无法转换，返回NaN
>>>null：转为0
>>>Boolean：true转为1，false转为0
>>>字符串：
如果字符串是纯数值字符串，可以转换。"123"-------->123
如果字符串包含非数值字符，不能转换。"123a"------->NaN
如果是空字符串，转为0。 " “/.""----->0

③parseInt()：将字符串转为数值类型
>>>如果是空字符串，不能转。""--->NaN;
>>>如果是纯数值类型字符串，可以转换，且小数点直街舍去，不保留。 "123"--->123 "123.9"----->123
>>>如果字符串包含非数值字符，则将非数值字符前面的整数进行转换。 "123a"--->123 "a123"----->NaN
④praseFloat()：转换机制与parseInt()相同。
不同的是：转换数值字符串时，如果字符串为小数则可以保留小数点。 "123.5"-------->123.5 "123"------->123
⑤typeof()：检测一个变量的数据类型。
字符串-->String 数值-->Number true/false-->Boolean 未定义-->Undefind 对象/null-->Object
函数-->function
【JS中常用的输入输出语句】
（1.）alert()：弹窗输出
（2.）prompt()：弹窗输入，接收两部分参数：①输入输入提示内容： ②输入框的默认文本。（两部分都可省略），输入的内容默认为字符串。
（3.）document.write()：在浏览器屏幕上面打印。
（4.）console.log()：浏览器控制台打印。
【JS中运算符】
（1.）除号：无论符号两边是整数还是小数，除完后都将按照实际结果保留小数。
（2.）a++和++a区别

（3.）===：要求等式两边的数据类型和值必须相同，如果类型不同，直接返回false。
==：只判断两边的数据，值是否相同，并不关心等式两边是否是同一种数据类型。
!=：不等 !==：不全等
（4.）& | 只能进行按位运算，如果两边不是数值类型，将转为数值类型在运算。
&& || 进行逻辑运算

 

【JS中真假判断】
（1.）Boolean类型：true为真 false为假
（2.）数值类型：0为假 非0为真
（3.）字符串类型：""为假 非空字符换为真
（4.）Null/Undefind/NaN:全为假
（5.）Object：全为真
【switch】
（1.）switch结构的括号中（）可以放各种数据类型；比对时，采用“===”进行判断，要求数据类型完全相等。

 

 

【JS中函数的声明与调用】
（1.）函数声明的格式
function 函数名（参数一，参数二）{
//函数体代码
return 返回值;
}
函数调用：
①直接调用： 函数名(参数一，参数二);\
②通过事件调用： 在HTML标签中通过事件属性进行调用：

（2.）函数声明与调用的注意事项：
①函数中有没有返回值，只取决于函数中有没有return，无需刻意声明。
在JS中，有返回值刻意不接收；没有返回值，也可以接收，结果为Undefind。
②JS中函数的形参列表与实参列表没有任何关联。
也就是说，有参数可以不赋值（未赋值Undefind）；没有参数也可以赋值。函数的实际参数个数，取决于实参列表
③JS中，函数是变量的唯一作用域，那么，函数的形参属于函数的局部变量。
④函数的声明与调用语句没有先后之分，即，可以先写调用语句，在声明函数。
func();
function func(){}
【匿名函数的声明与调用】
（1.）匿名函数表达式：var func=function(){};
调用：func();

注意：函数的调用语句，必须放在声明语句之后！！！
（2.）直接将匿名函数，赋值给一个时间：
windoew.onload=functon(){}
文档就绪函数，确保函数中的代码，在HTML文档加载完成之后执行。
document.getElementBy("id").onclick=function(){}
（3.）自执行函数：
① !function(){}(); 开头用!表明这是自执行函数 推荐
② (function(){}()); 用（）将匿名函数声明与调用包裹在一起
③ (function(){})(); 用（）将匿名函数声明语句进行包裹。
【JS代码执行顺序】
（1.）JS代码的执行分为两个阶段：检查编译阶段、代码执行阶段。
检查编译阶段：主要检查语法的错误，进行变量的声明、函数的声明等声明操作。
代码执行阶段：变量的赋值、函数的调用等执行语句，属于代码执行阶段。

【arguements对象】
（1.）作用：用于保存函数的所有实参。
>>>当函数存在实参时，可以使用数组下标访问函数的所有实参。
>>>alert(arguements[6]);
（2.）arguements中元素个数取决于实参列表，与形参个数无关。
（3.）一旦函数调用时，传入了实参，那么对应位数的形参，将与arguements对应的元素进行绑定。
修改形参，arguements中对应的元素将被改掉。反之，也成立。
但是，如果某一位置，没有传入实参，则该位置的形参和arguements将不进行关联。
（4.）arguements.callee(); 指向当前函数的引用，用于在函数中使用递归调用自身。
【screen对象】
（1.）screen.availWidth 可用宽度
screen.availHeight 可用高度=可用高度-底部任务栏高度
【location对象】
（1.）location.href 完整的URL路径
（2.）location.protocol 协议名
（3.）location.hostname 主机名
（4.）location.port 端口名
（5.）location.host 主机名+端口名
（6.）location.pathname 文件路径
（7.）location.search 从？开始的参数部分
（8.）location.hash 从#开始的锚点部分

 

【history对象】
（1.）history.length 用于记录当前页面跳转的历史页面个数
（2.）history.forward(); 点击去前一页。相当于浏览器前进按钮
（3.）history.back(); 点击去后一页
（4.）history.go(0); 表示跳转到浏览历史的任意一个页面。+1表示前面一页，相当于history.forward();
-1表示后面一页，相当于history.back(); 0表示当前页，history.go(0);相当于刷新
【navigator对象】
了解！！返回关于浏览器的各种信息
【window对象常用方法】
（1.）prompt(); 弹窗输入
alert(); 弹出输出
（2.）confirm(""); 带确定、取消的提示框，分别返回true/false
（3.）close(); 关闭当前浏览器窗口
（4.）window.open("http://www.baidu.com","baidu","width=500px,height=600px");
打开一个新窗口
参数一：新窗口的地址
参数二：新窗口的名字，没用
参数三：新窗口的各种配置属性
（5.）setTimeout();延时器，表示延时多少ms执行一个函数。
参数一：可以穿入匿名函数，也可以传入参数名
参数二：延时的毫秒数
参数三~参数n：传给回调函数的参数。

（6.）setInterval(); 定时器，表示每隔多少ms执行一遍函数，其他用法与setTimeout完全相同。

（7.）clearInterval()； clearTimeout()；分别清除定时器、延时器。
声明定时器时，可以接收返回的ID，并将ID传给clearInterval即可清除
【DOM树的节点】
（1.）DOM节点分为三大类：元素节点（标签节点）、属性节点、文本节点。
属性节点和文本节点都属于元素节点的子节点，因此操作时，需先选中元素节点，在修改属性和文本。
【查看元素节点】
（1.）使用getElement系列方法
注意事项：
①ID不能重名，如果ID重复，只能取到一个。
②获取元素节点，必须等到DOM树加载完成后才能获取。
两种方式：a.将JS写在文档最后 b.将代码写入window.onload函数中
③通过getElements系列取到的为数组格式，操作时必须取到其中的每一个元素，才能进行操作，而不是直接对数组进行操作
document.getElementsByClassName("cls")[0].onclick=function(){}
④这一系列方法，也可以先选中一个DOM节点，再从选中的DOM节点中，选择需要的节点：
document.getElementById("first").getElementsByTagName("li");
（2.）通过document.querySelector();系列方法：
传入一个选择器名称，返回第一个找到的元素。通常用于查找ID
document.querySelector("#id");
传入一个选择器名称，返回所有找到的元素，无论找到几个，都返回数组格式,如果需要第一个，需要【0】
document.querySelectorAll("#div1 li");
选中HTML文档中input标签中所有带有value属性的标签

【查看设置属性节点】
（1.）查看属性节点：.getAttribute();
（2.）设置属性节点：.setAttribute();
（3.）注意事项：
.setAttribute();在老版本的IE中会存在兼容性问题，可以使用 . 符号代替。

【JS修改样式的几种方式】
（1.）使用setAttribute()设置class和style
document.getElementById("first").setAttribute("class","cla1");
document.getElementById("first").setAttribute("style","color: red;");
（2.）使用.className添加一个class选择器
document.getElementById("first").className="class1";
（3.）使用.style样式直接修改单个样式。注意样式名必须使用驼峰命名法
document.getElementById("first").style.fontSize="18px";
（4.）使用.style或.style.cssTest添加一串行级样式表
document.getElementById("first").style="color:red;"; IE不支持
document.getElementById("first").style.cssText="color: red;"; IE支持

【查看/设置文本节点】
（1.）.innerHTML：取到或设置一个节点中的HTML代码
（2.）.innerText：取到或设置一个节点中的文本，不能设置HTML代码。