web前端

最新推荐文章于 2022-05-30 07:30:00 发布

weixin_44923337

最新推荐文章于 2022-05-30 07:30:00 发布

阅读量125

点赞数 1

本文链接：https://blog.csdn.net/weixin_44923337/article/details/90697046

版权

一、操作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;*!/ //直接终止
   }
}

weixin_44923337

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端

一、操作dom元素以及动态创建dom元素1、childElementCount（获取子节点个数）<body><ul id="nav"> <li>1</li> <li id="lilist">2</li> <li>3</li> <li>4</li&g...
复制链接

扫一扫