字符串-->string 数值-->number true/false-->boolean 未定义-->Undefined 对象/null-->Object 函数-->function
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="http://www.baidu.com";
② window.location.href="http://www.baidu.com";
}
跳转页面,加载新界面之后可以点击回退按钮返回
function gotobaiduByAssign(){
location.assign("http://www.baidu.com"); }
跳转页面,加载新界面之后没有回退按钮,无法返回
function gotobaiduByReplace(){
location.replace("http://www.baidu.com"); }
刷新当前页面
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("http://www.baidu.com","百度","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(新节点,老节点) 在父节点中用新节点替换老节点
