web前端

最新推荐文章于 2024-08-18 21:40:26 发布

weixin_44923337

最新推荐文章于 2024-08-18 21:40:26 发布

阅读量71

点赞数 1

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

版权

web前端学习第三阶段：
一、数组
1、如何声明数组:new实例化对象 ,产生一个对象。
new Array()
2、数组的赋值
（1）赋值一个参数，代表的是数组的长度。

var arr = new Array(2)
 console.log(arr);

（2）赋值多个值，代表直接赋值，并且长度自动。

var arr1 = new Array(2, 3, 4);
console.log(arr1);

（3）数组赋值类型不仅可以是number类型，还可以是string,boolean,function,object等类型。

var a = new Array();
        a[0] = 1;
        a[1] = 2;
        a[2] = "a";
        a[3] = function () {
        }
        a[4] = null;
console.log(a);

3、数组的取值

var a = new Array();
     a[0] = 1;
     a[1] = 2;
     a[2] = "a";
     a[3] = function () {
console.log("wo shi  han shu ");
     return 1;
     }
     a[4] = null;
console.log(a[3]);
/*若想要执行a[3]里面的函数，则console.log(a[3]());若函数没有返回值，则输出结果为undefined，若函数有返回值，则输出结果为返回值的值。*/

4、数组的属性：length（长度）

var arr=new Array();
console.log(arr.length);     //输出结果：0

5、数组里面的方法
（1）join方法（数组的拼接）
是将数组转化为string,里面的参数是按照什么符号拼接，默认为逗号拼接方式，若为空字符则以空字符方式拼接。

var k = [1, 2, 3, 4, 5];
console.log(k.join("|"));    //输出结果：1|2|3|4|5

（2）reverse方法（数组的翻转）

var k = [1, 2, 3, 4, 5];
console.log(k.reverse()); //输出结果：(5)[5,4,3,2,1]

（3）slice方法（数组的截取）
里面的参数代表开始索引和截取数组的长度，截取取小不取大，并且截取完成之后对原数组没有影响。

var k = [1, 2, 3, 4, 5];
console.log(k.slice(0, 2)); //输出结果：(2)[1,2]

（4）splice方法（另一种数组的截取）
里面的参数代表开始索引和截取数组的长度，并且截取完成之后对原数组有影响。

var k = [1, 2, 3, 4, 5];
console.log(k.splice(0, 3));  //输出结果：(3)[1,2,3]
console.log(k);               //输出结果：(2)[4,5]

（5）数组的追加
push：数组内容之后追加，返回的值是数组的长度。

var k = [1, 2, 3, 4, 5];
console.log(k.push(0));    //输出结果：6
console.log(k);            //输出结果：(6)[1,2,3,4,5,0]

unshift：数组内容之前追加，返回值是数组的长度。

var k = [1, 2, 3, 4, 5];
console.log(k.unshift(-1));    //输出结果：6
console.log(k);                //输出结果：(6)[-1,1,2,3,4,5]

（6）数组的删除
shift:删除前面的,返回值是删除的值

var k = [1, 2, 3, 4, 5];        
console.log(k.shift());        //输出结果：1     
        console.log(k);         //输出结果：(4)[2,3,4,5]

pop:删除是最后边的,返回值是删除的值
6、数组的例题
（1）、冒泡排序法

（1）、冒泡排序法
var a = [10, 2, 1, 4, 3, 5, 7, 6, 9, 8];
for (var i = 0; i < a.length; i++) {
        var temp = null;
        for (var k = 0; k < a.length - 1; k++) {
            if (a[k] > a[k + 1]) {
                temp = a[k + 1];
                a[k + 1] = a[k];
                a[k] = temp;
            }
        }
    }
console.log(a);  //输出结果：(10)[1,2,3,4,5.6,7,8,9,10]

var a2 = [10, 2, 1, 4, 3, 5, 7, 6, 9, 8];
    var a1 = a2.sort(function (n1, n2) {
        return n1- n2;
    });
    console.log(a1);    //输出结果：(10)[1,2,3,4,5.6,7,8,9,10]

二、js对象
window:document对象,location对象,history对象，内置对象。
document对象：是网页中所有的html标签，主要是为了操作元素的样式变化和数据显示等，要想操作dom元素，首先要获取dom元素，才能对其进行操作。
1、js里面获取dom元素的方式
（1）通过类名称获取（getElementsByClassName）：返回的是htmlcollection集合，用法和数组一致。

<body>
<button id="btn" class="btnlist" name="btninfo">按钮</button>
<script>
var btn=document.getElementsByClassName("btnlist");
    console.log(btn[0]);
</script>
</body>

（2）通过元素的名字来获取（getElementsByName）：返回的是nodelist节点类型，用法和数组一致。

<body>
<button id="btn" class="btnlist" name="btninfo">按钮</button>
<script>
var btn1=document.getElementsByName("btninfo");
    console.log(btn1[0]);
</script>

（3）通过元素的id名称来获取（getElementById）：返回的是单个对象，直接使用。

<body>
<button id="btn" class="btnlist" name="btninfo">按钮</button>
<script>
var btn2=document.getElementById("btn");
console.log(btn2);
</script>

（4）通过元素的标记名称（也就是标签名称）来获取（getElementsByTagName）：返回的是htmlcollection 集合，用法和数组一致。

<body>
<button id="btn" class="btnlist" name="btninfo">按钮</button>
<script>
var btn3=document.getElementsByTagName("button");
console.log(btn3[0]);
</script>

（5）querySelector:返回的是单个元素。

var btn4=document.querySelector(".btnlist");
console.log(btn4);

（6）querySelectorAll:返回的是集合。

var btn5=document.querySelectorAll("#btn");
    console.log(btn5);

（7）直接获取body

console.log(document.body);

2、怎样操作don元素：每一个对象都具有属性和行为（事件），而操作dom元素就是操作它的属性和行为，js不能操作一组对象，只能分开操作。
（1）修改属性

<body>
<button id="btn">按钮</button>
<script>
var btn=document.getElementsByTagName("button");
btn[0].style.background="red";
btn[0].style.width="200px";
</script>
</body>

2）获取对象的属性

console.log(btn[0].style.width);

（3）js获取非行内样式

console.log(window.getComputedStyle(btn[0]).height);

3、dom元素的事件：键盘事件、表单事件、鼠标事件、浏览器事件、触屏事件等（js的事件前缀都带on）
（1）键盘事件：onkeydown(键盘按下)、onkeyup(键盘抬起)、onkeypress(按键事件)。
（2）表单事件：onfocus(获得焦点)、onblur（失去焦点）。
（3）鼠标事件：onclick（单击）、ondbclick、onmouseleave(水平离开)、onmouseout（离开）、onmousemove（鼠标移动）、onmouseenter（鼠标进入）、onmouseover（鼠标悬停）、onmousewheel(鼠标滚轮事件)。
（4）浏览器事件：window事件、onload（加载完成事件）、onresize(窗口变化事件)、onerror（报错事件）、onscroll(滑动事件)。
（5）触屏事件：touch（触屏）、touchstart（开始触屏）、touchmove（触屏移动）、touchend(触屏结束)。
4、如何给dom元素添加事件
（1）常规添加：直接在标签上添加事件

<body>
<button onclick="btndou(1)">按钮</button>
<script>
function btndou(a) {
        console.log(a);
    }
</script>
</body>

（2）动态给dom元素添加事件

<body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById("btn");
    btn.onclick = function () {
        console.log(1);
    }
</script>
</body>

var btn = document.getElementById("btn");
btn.onclick = showinfo;   //不能添加小括号
    function showinfo() {
        console.log(1);
    }

（3）事件的监听

<body>
<button id="btn2">按钮2</button>
<script>
var btn2 = document.getElementById("btn2");
btn2.addEventListener("click",function (){
     console.log(2);
     });
</script>
</body>

var btn2 = document.getElementById("btn2");
btn2.addEventListener("click", showbtn);
    function showbtn() {
        console.log(2);
    }

这只是Js学习中数组和window对象中的一部分，当然这些也都是基础，只有打好基础，我们才能进行后续大量的练习，来将我们的语法和思维逻辑串联起来，进行巩固和应用，真正提升自己的能力。

weixin_44923337

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫