一、操作dom元素以及动态创建dom元素
1、childElementCount(获取子节点个数)
<body>
<ul id="nav">
<li>1</li>
<li id="lilist">2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var nav = document.getElementById("nav"); //获取元素nav
console.log(nav.childElementCount); //输出结果:4
</script>
</body>
2、childNodes(获取所有的节点,包括文本和回车,返回的是Nodelist集合类型)
console.log(nav.childNodes);
console.log(nav.childNodes[0]); //输出结果:#text(回车)
(1)nodeType(当前节点的类型,元素的类型是1)
console.log(nav.childNodes[1].nodeType); //输出结果:1
(2)nodeName(当前节点的节点名称,并且名称大写)
console.log(nav.childNodes[1].nodename); //输出结果:LI
(3)nodevalue(节点的值)
console.log(nav.childNodes[1].nodevalue); //输出结果:null
3、children(子元素,返回的是HtmlCollection类型,里面包含所有子元素)
console.log(nav.children);
4、找同胞兄弟元素
(1)nextSibling(下一个节点)
var lilist = document.getElementById("lilist");
console.log(lilist.nextSibling); //输出结果:#text
(2)nextElementSibling(下一个元素)
var lilist = document.getElementById("lilist");
console.log(lilist.nextElementSibling); //输出结果:<li>3</li>
(3)previousSibling(上一个节点)
var lilist = document.getElementById("lilist");
console.log(lilist.previousSibling); //输出结果:#text
(4)previousElementSibling(前一个元素)
var lilist = document.getElementById("lilist");
console.log(lilist.previousElementSibling); //输出结果:<li>1</li>
5、获取父元素里面的第一个或者最后一个
(1)firstElementChild(第一个元素)
console.log(nav.firstElementChild); //输出结果:<li>1</li>
(2)firstChild(第一个节点)
console.log(nav.firstChild); //输出结果:#text
(3)lastChild(最后一个节点)
console.log(nav.lastChild); //输出结果:#text
(4)、lastElementChild(最后一个元素)
console.log(nav.lastElementChild); //输出结果:<li>4</li>
二、元素的追加:往父元素里面添加子元素,即添加元素的意思
dom元素的动态创建
1、appendChild(追加到当前元素的内容之后)
var s = document.createElement("li"); //动态创建dom元素
s.innerHTML = "5"; //动态创建dom元素后给元素设置属性
s.className = "lilast" //动态创建dom元素后给元素设置属性,元素类名为lilast
s.onclick=function (){ //给动态创建的元素添加事件
console.log(1);
}
nav.appendChild(s);
var s = document.createElement("li");
s.innerHTML = "5";
s.className = "lilast"
nav.appendChild(s);
var last = document.getElementsByClassName("lilast")[0]; //动态获取don元素
last.onclick = function () {
console.log(2);
}
只有在动态创建dom元素且输出之后才可以添加事件(也就是说只有元素存在才可以给其添加事件)。
三、获取元素的宽和高
console.log(window.screen);
1、window.screen.availHeight //工作区的高度,不包含任务栏。
window.screen.height//实际的高度,包含任务栏。
window.screen.availWidth
window.screen.width
2、console.log(document.documentElement.clientWidth);//可视区域的宽。
console.log(document.documentElement.clientHeight);
3、console.log(window.innerWidth);//浏览器可视区域的宽和高。
console.log(window.innerHeight);
4、window.pageYOffset //滚动条上偏移
window.pageXOffset
四、window里面的方法或属性(可以省略前面的window)
1、提示框(alert())
(1)带按钮的提示框 该方法具有返回值,返回值为true、false
if(confirm("确定删除!")){
alert("1");
}
else{
alert(2);
}
(2)带输入框的
var x=prompt("请输入价钱!","1");
console.log(x);*/
console.log(window);
2、close(关闭当前的页面)
window.close();
3、open(打开一个页面)
window.open("./index.html");
五、window里面的常用事件
1、onload(加载完成事件)
window.onload = function () {
}
2、onresize(浏览器窗口大小改变的事件)
window.onresize = function () {
console.log(1);
}
六、js里面的对象
window:document对象、history对象、location对象
1、history对象(存储用户访问页面前进倒退)
<body>
<a href="javascript:history.go(-1)">倒退</a>
<a href="javascript:history.go(1)">前进</a>
</body>
2、location对象
href(获取当前页面的地址)
console.log(location.href);
也可以做页面的跳转
location.href="./index.html";
总结:建立所有的全局变量和方法全部是window属性和方法。
七、js里面的内置对象:Array、Math、Date、String、Setinterval、settimeout
1、Math对象
(1)random方法:随机0-1,取小不取大
console.log(Math.random()*10+10);
(2)floor、ceil:向下、向上取整
console.log(Math.floor(1.2)); //输出结果:1
console.log(Math.ceil(1.2)); //输出结果:2
(3)round(四舍五入)
console.log(Math.round(4.5)); //输出结果:4
(4)sqrt(开平方)
console.log(Math.sqrt(3));
(5)pow(次幂)
console.log(Math.pow(2,3)); //输出结果:8
2、String对象
(1)与字符串的区别:(取值与数组相类似)
var s1 = "abc";
var s = new String("abc");
console.log( s,s1); //输出结果:String{"abc"} abc
console.log( s[0]); //输出结果:a
(2)方法:与字符串里的方法类似,可使用字符串里的所有方法,并且能转换为字符串
①charAt
var s = new String("abc");
console.log(s.charAt(1)); //输出结果:b
②concat
var s = new String("abc");
var s2 = new String("efg");
console.log(s.concat(s2)); //输出结果:abcefg
③toString():转化为字符串
var s = new String("abc");
console.log(s.toString()); //输出结果:abc
(3)js里的值类型和引用类型
值类型:值是不可变的,并且占据固定的空间,包括:字符串(string)、数值(number)、布尔值(boolean)、undefined、null。
引用类型:值是可变的,占据空间是可变的,包括:对象(object)、数组(array)、函数(function)。
值类型和引用类型的相互转化:
var m = "abc";
var m1 = new String(m);
console.log(m1); //值类型转化引用类型
console.log(m1.toString()); //引用类型转化为值类型
2、Date对象(主要用于倒计时和当前的时间)
var time=new Date();
console.log(time); //输出的是当前的中国标准时间
(1)时间的设置
①直接在new的时候设置时间
var times=new Date("2019.8.10 12:00:00");
console.log(times);
var times1=new Date(2019,8,10,12,0,0);
console.log(times1); //因国际月份是11个月,所以输出结果为月份加一
②使用 date中的方法设置
var times=new Date();
times.setFullYear(2018);//年
times.setDate(3);//天
times.setHours(12);//时
times.setMinutes(59)//
times.setSeconds(20)//秒
times.setMilliseconds(200);//毫秒
console.log(times);
(2)时间的获取
直接获取
var times=new Date();
console.log(times);
通过方法来获取
var times=new Date();
console.log(times.getDate());//天
console.log(times.getDay());//周几
console.log(times.getFullYear());//年
console.log(times.getHours());//时
console.log(times.getMilliseconds());//毫秒
console.log(times.getMinutes());//分
console.log(times.getMonth()+1);//月 +1
console.log(times.getSeconds());//天
console.log(times.getTime());//到1970年的总毫秒数
console.log(times.getYear());//现在的年份到1900年的年份
console.log(times);
八、js数据格式:json、object、Array
var stu = {
name: "张三",
sex: "男",
age: 23,
eat: function () {
return "吃饭"
}
}
var stu1 = {
"name": "张三",
"sex": "男",
"age": 23,
"eat": function () {
return "吃饭"
}
}
console.log(stu.name, stu1);
1、json数据格式(后台返回的数据格式,如果是对象则直接使用,如果返回的是json字符串格式)
var stus = [
{name: "maodou", age: 1},
{name: "maodou1", age: 2},
{name: "maodou2", age: 3},
{name: "maodou3", age: 4},
{name: "maodou4", age: 5}
];
var m = JSON.stringify(stus);
console.log(JSON.stringify(stus)); //json对象转化为字符串类型
console.log(eval(m)); //json类型的字符串转化为json对象
console.log(JSON.parse(m)); //json类型的字符串转化为json对象
var stu1 = {
"name": "张三",
"sex": "男",
"age": 23,
"eat": function () {
return "吃饭"
}
var k = JSON.stringify(stu1);
console.log(JSON.parse(k)); //json类型的字符串转化为json对象
var stus = [
{name: "maodou", age: 1},
{name: "maodou1", age: 2},
{name: "maodou2", age: 3},
{name: "maodou3", age: 4},
{name: "maodou4", age: 5}
];
for (var i = 0; i < stus.length; i++) {
console.log(stus[i].name); //输出结果:maodou maodou1 maodou2 maodou3 maodou4
}
2、in后边是一个集合
var a=[1,2,3,4];
for(var key in a)
{
console.log(a[key]); //输出结果:1 2 3 4
}
3、break、continue、return三者的区别
break:跳出循环
continue:跳出当前循环执行下一次循环
return:直接终止
for(var i=0;i<10;i++)
{
if(i>5)
{
break;
/!* return;*!/ //直接终止
}
}