7.解析地址栏参数
var url="https://www.baidu.com?city=上海&id=123&name=张三&age=18";
<1>.function getUrl(isurl){
var pos=isurl.indexOf("?");//先找到"？"所在的下标
var arr=isurl.slice(pos+1).split("&");//对下标进行截取
for(var i in arr){
//["city=上海", "id=123", "name=张三", "age=18"]
var ind=arr[i].indexOf("=")+1;//找到"="所在的下标
arr[i]=arr[i].slice(ind);//进行截取
}
return arr;
}
console.log(getUrl(url));// ["上海", "123", "张三", "18"]
<2>.function getUrl(name,str){
var pos=str.indexOf("?")+1;
var arr=str.slice(pos).split("&");
for(var i in arr){
var newarr=arr[i].split("=");
if(newarr[0]==name){
return newarr[1];
}
}
}
console.log(getUrl("city",url));//上海
console.log(getUrl("id",url));//123
8.匿名自执行函数
(function(){
var a=b=10;
console.log(a);
})();
console.log(b);
9.日期对象
new Date()//获取当前日期，包含年/月/日，时分秒
new Date("2018/6/1" 或"2018-6-1"或 2018,5,1);
.getFullYear()获取四位数的年份
.getMonth()获取月份，0~11，0表示1月
.getDate()获取日//星期;
.getHours()获取时;
.getMinutes()获取分;
.getSeconds()获取秒;
.getTime()从1970年1月1日8点到现在的毫秒值
//.get获取 .set设置
.setFullYear()设置四位数的年份
.setMonth()设置月份，0~11，0表示1月
.setDate()获取日;
.setHourush(array[i]);
}s()获取时;
.setMinutes()获取分;
.setSeconds()获取秒;
.setTime()以毫秒数设置日期，会改变整个日期
//开启定时器 属于Bom window对象
1.间隔调用
setTnterval(匿名函数，毫秒值)//每隔一段时间调用一次
setInterval(function (){
console.log("hello")
},1000)//每一秒会打印出hello
2.超时调用
setTimeout(匿名函数，毫秒值)//超过指定时间只执行一次
setTimeout(function(){
console.log("hello")
},1000)//只打印出一个hello
//清除定时器
clearInterval(句柄)//清除间隔调用
var num=0;
var timer=null;//句柄
timer=setInterval(function(){
num++;
if(num==10){
clearInterval(timer);
}
console.log(num);
},1000);
clearTimeout(句柄)//清除超时调用
//计算未来的第五天是周几
var date=new Date();
var day=date.getDate();
date.setDate(day+5);
console.log(date.getDate());//哪天
console.log(date.getDay());//周几
10.Dom
document object model
(1).查找元素
<1>.通过ID名
getElementById("ID名")
<2>.通过标签名
document.getElementByTagName("标签名")//找到的是类数组
父元素.getElementByTagName("标签名")
<3>.通过类名
document.getElementByClassName()
在标准的浏览器里不存在兼容问题
<4>. document.querySelector('.bg/#box/ul')//第一个元素
document.querySelectorAll('.bg/#box/ul')//所有的元素
<5>.表单里：name名字
document.getElementsByName('name名')
document.body之整个页面
(2).改变样式。。。//没弄完
元素.style.属性名=属性值
元素.style.background='red';
如果遇到符合属性，改驼峰
元素名.style.borderLeft='1px solid red';
获取行内样式：元素名.style.background为字符串类型
类名的添加样式和删除样式
元素.className='类名1 类名2...'
元素.className='';
改变内容：
元素.innerHTML='内容'
元素.innerText='内容'
元素.value 只对表单元素生效
改变标准属性：
获取属性
元素.属性名
设置属性
元素.属性名=属性值
改变自定义属性
获取属性
元素.getAttribute("属性名")
改变属性
元素.setAttribute("属性名"，"属性值")
删除属性
元素.removeAttribute("属性名")
(3).事件
鼠标事件
<1>onclick 单击
<2>onmouseover 鼠标滑过
<3>onmouseout 鼠标离开
<4>onmousedown 鼠标按下
<5>onmousemove 鼠标移动
<6>onmouseup 鼠标释放
<7>ondblclick 鼠标双击
键盘事件
<1>onkeydown 按下
<2>onkeypress 按下
<3>onkeyup 释放
非字符键 keydown keyup
字符键 keydown keypress keyup
焦点事件：
onfocus 获取焦点
onblur 失去焦点
11.
全局变量是window的属性，全局函数是window的方法
location 获取地址栏信息
location.href
location.search
navigator 判断浏览器的版本和型号
navigator.userAgent用户代理字段
navigator.search获取地址栏？以后的参数
encodeURI(地址) //编码 以编码的方式进行地址栏传参
decodeURI(传过来的地址) //编码 吧传过来的地址进行解码，获取参数
history 历史记录
history.go(11) 前进11步
history.go(-11)后退11步
history.back() 后退1步
history.forward()前进1步
Dom树
document（根）
html
head body
meta style link div a b span ...
1.元素节点：所有的标签都是元素节点
2.属性节点：所有的属性都是属性节点
3.文本节点：内容（空白文本）都是文本节点
节点关系：1.父子关系 2.兄弟关系
1.操作子节点
父元素.childNodes获取父元素下所有字节点，包括文本节点
返回值是类数组，通过下标访问元素，有length属性
第一个子元素：父元素.firstChild 都包含空白节点
最后一个子元素：父元素.lastChild 都包含空白节点
2.操作兄弟节点：都包含文本节点 可以使用多次，多于两次最好就别用了，不优化
.previousSibling 上一个兄弟节点
.nextSibling 下一个兄弟节点
3.操作父节点
子元素.parentNode可以使用多次，多于两次最好就别用了，不优化
父元素.children 只查找元素子节点，不查找文本节点，返回值：类数组通过下标访问元素，有length属性
.firstElementChild第一个子元素，不包含文本节点
.lastElementChild最后一个子元素，不包含文本节点
节点的属性
类型：nodeType 名字：nodename 值：nodeValue
元素节点：1 大写的标签名 null
属性节点：2 属性名 属性值
文本节点：3 #text 文本自身
注释节点：8
文档节点：9
备注：元素节点的名字 nodeName tagName
创建节点
1.创建元素节点 document.creatElement("")
2.创建文本节点 document.creatTextNode("文本内容")
追加子节点
父节点.appendChild(子节点)将元素节点追加到父元素末尾处
删除子节点
父节点.removeChild(子节点)
克隆节点
要克隆的节点.cloneNode(true/false)
false:默认 只克隆结构，不克隆内容 DIV
true：结构和内容都克隆 DIV+里面的内容
插入到哪个节点之前：
父元素.insertBefore(子节点，哪个节点之前)
方法封装
1.通过id封装
function $(id){
return document.getElementById(id);
}
2.添加类方法的封装
function addClass(obj,cls){
obj.className+=""+cls;
}
3.删除类方法的封装
function removeClass(obj,cls){
空格分成数组
var ar=obj.className.split("");
查找下标
var index=arr.indexOf(cls);
删除项
arr.splice(index,1);
把数组用空格连接起来转成字符串赋值给className
obj.className=arr.join("")
}
4.判断DOM元素上是否有某个类
function hasClass(obj,cls){
var arr=obj.class.split("");
if(arr.indexOf(cls)!=-1){
return true;
}else{
return false;
}
}
网友评论