JavaScript基础及函数，BOM，DOM的节点及DOM节点操作

JavaScript基础及函数，BOM，DOM的节点及DOM节点操作使⽤js的三种⽅式
1.直接在HTML标签中，使⽤事件属性，调⽤js代码:
<button onclick="alert('点我呀')">点我啊！<tton>
2.在页⾯的任意位置，使⽤script标签
<script type="text/javascript">
alert('哈哈哈')
</script>
3.外部：使⽤script标签 src属性选择外部地址， type属性选择"text/javascript" charset="utf-8"
<script src="js/01-js.js" type="text/javascript" charset="utf-8">
</script>
注意事项:
1.js代码可以放在页⾯的任意位置使⽤，但是放置的位置不同将影响执⾏的顺序。

2.引⼊的外部script标签，不能再包含任何的js代码。

js中的变量
1.变量的声明:
var num1=1; //使⽤var声明的变量，是局部变量，在函数内可⽤
num2="哈哈哈哈"; //直接声明的是全局变量。

全局可⽤。

var a=1,b,c=2; //使⽤⼀⾏代码，声明多个语句，其中b为undefined；
js中声明变量的注意事项
1.js中声明变量的关键字 var，类型取决于赋值类型，默认值 undefined；
2.js中同⼀个变量可以在多次赋值中被修改数据类型。

3.变量可以使⽤var声明，也可以直接赋值声明;var声明的为局部变量;直接声明的为全局变量。

4.js中变量可以重名，相当于后边的覆盖前边的。

5.变量名区分⼤⼩写。

⼤⼩写不同不是同⼀变量。

js中的(6种)数据类型:
null:空，表⽰空的引⽤;
Undefined: 使⽤var声明，但是为赋值的变量;
Number: 数值类型，包含整型和浮点型;
Boolean:真假;
String:字符串;
Object:对象。

js中没有字符，单引号和双引号都是字符串。

常⽤数值函数
①isNaN ⽤于检测⼀个变量是不是⼀个⾮数值(Not a Number)
在检查时会先调⽤Number函数,尝试将变量转化为数值类型如果最终结果能转化为数值则不是NaN
②Number ⽤于将各种数据类型转化为数值类型
>>> Undefined⽆法转换返回NaN
>>> null 转为0
>>> Boolean true转为1 false转为0
>>> String 如果字符串是纯数值字符串,则可以转换
如果字符串包含⾮数字字符,则不可以转换返回NaN
如果是空字符串转为0,可以是空格
③parseInt 将字符串转化为数值类型
>>>如果是空字符串不能转 ""-->NaN
>>>如果是纯数值类型字符串,则可以转换且⼩数点直接舍去,不保留 "123.9"-->123 "123"-->123
>>>如果包含⾮数字字符,则将⾮数值前⾯的整数进⾏转换 "123a"-->123 "a123"-->NaN
④parseFloat 转换机制与parseInt相同,不同的是转换数值字符串时,如果字符串为⼩数则可以保留⼩数点
"123.9"-->123.9 "123"-->123
⑤typeof 检测⼀个变量的数据类型
字符串-->string 数值-->number true/false-->boolean 未定义-->Undefined 对象/null-->Object 函数-->function
常⽤的输⼊输出
alert() 弹窗输出
prompt(); 弹窗输⼊尽收两部分参数,①输⼊提⽰内容②默认框的默认⽂本 (两部分都可以省略) 输⼊的内容默认都是字符串document.write("<h1>12345</h1> <h5></h5>") 在浏览器屏幕上打印
console.log("2222") 浏览器控制台打印
JS中的运算符
①除号⽆论符号两边是整数还是⼩数,出完后都将按照实际结果保留⼩数
② === 要求等式的两边的数据,类型和值都必须相同,如果类型不同,直接返回false
③==只判断两边的数据,并不关⼼两边的数据类型是否相同
④!==不全等 !=不等
⑤条件运算符 a>b?true:false
在JS中,只能进⾏按位运算,如果两边不是数据类型,将转化为数字类型在运算
&& 进⾏逻辑运算
js中的真假判断
1.Boolean true为真 false 为假
2.数值类型 0为假⾮0为真
3.字符串类型 ""为假⾮空字符串为真
4.null/Undefined/NaN 全为假
5.object 全为真
switch结构的()中可以放各种数据类型
⽐对时采⽤===进⾏判断要求类型和值都必须相同
js中的函数的声明与调⽤
函数声明的格式
function函数名(参数1,参数2...){
//函数体代码
return返回值;
}
1.函数调⽤
①直接调⽤函数名(参数1,参数2...);
②通过事件调⽤在HTML标签中,通过事件属性进⾏调⽤
<button onclick="focus('123','345')">点</button>
2.函数的声明与调⽤的注意事项
①函数中有没有返回值,只取决于函数中有没有return ⽆需刻意声明在JS中,有返回值可以不接收没有返回值也可以接收,结果为Undefined
②JS中函数的形参列表与实参列表没有任何关联也就是说有参数可以不赋值(未赋值Undefined),没有参数也可以赋值. 函数的实际参数个数取决于实参列表
③JS中函数是变量的唯⼀作⽤域那么,函数的形参就是属于函数的局部变量
④函数的声明与调⽤语句没有先后之分,即,可以先写调⽤语句,再声明函数 func(); function func() {}
匿名函数的声明与使⽤
1.匿名函数表达式 var func=function(){} 调⽤函数 func();
注意,函数的调⽤语句,必须放在声明语句之后
2.直接将匿名函数,赋值给⼀个事件
window.onload=function () { } //⽂档就绪函数,确保函数中的代码,在HTML⽂档加载完成之后执⾏ document.getElementById("btn2").onclick=function () { }
3.⾃执⾏函数
①!function(){ }(); 开头⽤!表明这是⾃执⾏函数
②(function(){}()); ⽤()将匿名函数声明与调⽤包裹在⼀起
③(function(){})(); ⽤()将匿名函数声明语句进⾏包裹;
JS代码的执⾏顺序
JS代码的执⾏分为两个阶段检查编译阶段代码执⾏阶段
检查编译阶段主要检查语法的错误变量的声明函数的声明等声明操作
执⾏的操作 var num; function func1() {} var func2;
代码执⾏阶段变量的赋值,函数的调⽤等执⾏语句属于代码执⾏阶段
执⾏的操作 console.log(num); num=1; func1(); func2(); func2=function () {};
console.log(num);
var num=1;
func1();
function func1() {}
func2();
var func2=function () {}
arguments对象
1.作⽤⽤于保存函数的所有实参
>>>但函数存在实参时,可以使⽤数组下标访问函数的所有实参
>>>alert(arguments[4])
2.arguments中元素的个数,取决于实参列表,与形参个数⽆关
3.⼀旦函数调⽤时,传⼊了实参,那么对应位数的形参,将与arguments对应的元素进⾏绑定
修改形参,arguments中对应的元素将被改掉,反之也成⽴
但是,如果莫⼀位置没有传⼊实参,那么该位置的形参和arguments将不进⾏关联
4.arguments.callee();执⾏当前函数的引⽤,⽤于在函数中使⽤递归调⽤⾃⾝
BOM
screen对象
console.log(window.screen);
console.log(screen);
console.log(screen.width);
console.log(screen.height);
console.log(screen.availWidth);//可⽤宽度
console.log(screen.availHeight);//可⽤⾼度=screen.height-底部任务栏⾼度
location对象
console.log(location);
console.log(location.href); //完整的URL路径
console.log(location.protocol); //协议名
console.log(location.hostname); //主机名
console.log(location.port); //端⼝号
console.log(location.host); //主机名+端⼝号
console.log(location.pathname); //⽂件路径
console.log(location.search); //从?开始的参数部分
console.log(location.hash); //从#开始的锚点位置
使⽤location进⾏页⾯跳转
function gotobaidu(){
① location="";
② window.location.href="";
}
跳转页⾯,加载新界⾯之后可以点击回退按钮返回
function gotobaiduByAssign(){
location.assign(""); }
跳转页⾯,加载新界⾯之后没有回退按钮,⽆法返回
function gotobaiduByReplace(){
location.replace(""); }
刷新当前页⾯
location.reload(); 刷新页⾯如果本地有缓存,将从缓存中读取相当于按F5
location.reload(true);强制刷新 ,⽆论是否有缓存,都将请求后台加载最新数据,相当于Ctrl+F5
history 对象
console.log(history);
console.log(history.length);//⽤于记录当前页⾯跳转的历史页⾯个数
点击去前⼀页相当于浏览器的前进按钮
function forward(){
history.forward(); }
点击去后⼀页相当于浏览器的后退按钮
function back(){
history.back(); }
表⽰跳转到浏览历史的任意⼀个界⾯
+1 表⽰前⾯⼀页 -1 表⽰后⾯⼀页 0 表⽰当前页因此history.go(0);相当于刷新页⾯
function go(){
history.go(); }
navigator 对象
返回关于浏览器的各种系统信息
console.log(navigator);
输出浏览器的所有插件
for (var i=0;i<navigator.plugins.length;i++) {
console.log(navigator.plugins[i].name); }
window对象的常⽤⽅法
①prompt()弹窗输⼊
②alert() 弹窗输出
③confirm() 待确定删除的提⽰框分别返回true false
④close() 关闭当前浏览器窗⼝
⑤open() 打开⼀个新窗⼝参数⼀新窗⼝的地址参数⼆新窗⼝的名字没啥⽤参数三新窗⼝的各种配置属性 scrollbars=yes表⽰是否显⽰滚动条只在IE有⽤
window.open("","百度","width=600px, height=600px,top=100px,left=100px,scrollbars=yes");
⑥setTimeout 延时器,表⽰延时多少ms执⾏⼀个函数
参数⼀可以传⼊匿名函数,也可以传⼊函数名
参数⼆延时的毫秒数
参数三到参数n 传给回调函数的参数
setTimeout(function(num1,num2){},2000,"哈哈哈",123,456,47)
⑦setInterval 定时器表⽰每隔多少ms执⾏⼀遍函数
其他⽤法与setTimeout完全相同
⑧clearInterval 清除定时器
⑨clearTimeout 清除延时器
声明定时器时可以接受返回的id 并将id返回给clearInterval即可清除
DOM数的节点
DOM节点分为三⼤类元素节点(标签节点) 属性节点⽂本节点
属性节点⽂本节点都属于元素节点的⼦节点,因此操作时,需先选中元素节点,再修改属性和⽂本
查看元素节点
1.使⽤getElement系列⽅法
var li=document.getElementById("first")
var list1=document.getElementsByClassName("cls")
var list2=document.getElementsByName("name")
var list3=document.getElementsByTagName("li")
注意事项
①id不能重名如果id重复,只能取到第⼀个
②获取元素节点时,必须等到DOM树加载完成后才能获取两种⽅式将js写在⽂档最后将代码写⼊window.onload函数中
③通过getElements系列取到的为数组格式,操作时必须取到其中的每⼀个元素,才能进⾏操作,⽽不能直接对数组进⾏操作
document.getElementsByClassName("cls").click()=function(){}; 错误
document.getElementsByClassName("cls")[0].click()=function(){}; 正确
④这⼀系列⽅法,也可以先选中⼀个DOM节点,从选中的DOM节点中,选择需要的节点
document.getElementById("first").getElementsByTagName("li");
2. 通过querySelector系列⽅法
①传⼊⼀个选择器名称,返回第⼀个找到的元素,通常⽤于查找id var dq1=document.querySelector("#id")
②传⼊⼀个选择器名称,返回所有找到的元素⽆论找到⼏个,都返回数组格式 var dqs1= document.querySelectorAll("#div1 li")查看修改属性节点
查看属性节点 .getAttribute("属性名")
设置属性节点 .setAttribute("属性名","属性值")
注意事项 .setAttribute()在⽼版本IE中存在兼容问题,可以使⽤.符号代替
document.getElementById("first").classname="haha";
JS修改css的多种⽅式
1.使⽤setAttribute设置class和style
document.getElementById("first").setAttribute("class","class1")
document.getElementById("first").setAttribute("style","color:red")
2.使⽤.className添加⼀个class选择器
document.getElementById("first").className="class1"
3.使⽤.style.样式名直接修改单个样式,注意样式名必须使⽤驼峰命名法
document.getElementById("first").style.color="red";
document.getElementById("first").style.fontSize="18px";
4.使⽤.style或者.style.cssText添加⼀串⾏级样式
document.getElementById("first").style="color:red"; //IE不兼容
document.getElementById("first").style.cssText="color:red";
查看设置⽂本节点
.innerHTML取到或设置⼀个节点中的HTML代码
document.getElementById("first").innerHTML
document.getElementById("first").innerHTML="<a href=''>hah</a>"
.innerText取到或设置⼀个节点中的⽂本,不能设置HTML代码
document.getElementById("first").innerText
层次节点操作
1. .childNodes获取当前节点的所有⼦节点包括元素节点和⽂本节点
.children获取当前节点的所有元素⼦节点不包括⽂本节点
2. .parentNode获取当前节点的⽗节点
3. .firstChild获取第⼀个⼦节点包括回车等⽂本节点
.firstElementChild 获取第⼀个元素节点不含⽂本节点
.lastChild .lastElementChild 获取最后⼀个
4. .previousSibling获取当前节点的前⼀个兄弟节点包括⽂本节点
.previousElementSibling获取当前节点的前⼀个元素兄弟节点
.nextSibling .nextElementSibling 获取后⼀个
5. .attributes获取当前节点的所有属性节点返回数组格式
创建并新增节点
1. .document.createElement("标签名") 创建⼀个新节点,并将创建的新节点返回需要配合.setAttribute为新节点设置属性
2.⽗节点.insertBefore(新节点,⽬标节点) 在⽗节点中将新节点插⼊到⽬标节点之前⽗节点.appendChild(新节点)在⽗节点的内部最后,插⼊⼀个新节点
3.源节点.cloneNode() 克隆⼀个节点传⼊true表⽰克隆源节点以及源节点的所有⼦节点传⼊false或者不传,表⽰只克隆当前节点,⽽不克隆⼦节点
删除替换节点
1.⽗节点.removeChild(⼦节点) 从⽗节点中,删除指定⼦节点
2.⽗节点.replaceChild(新节点,⽼节点) 在⽗节点中⽤新节点替换⽼节点。