JS 篇（4）

最新推荐文章于 2023-07-10 23:28:03 发布

Dawn___

最新推荐文章于 2023-07-10 23:28:03 发布

阅读量345

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/Dawn___/article/details/62456647

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

多个盒子的tab栏进行封装

    <script>
    window.onload = function(){
    //想要多个盒子不相互影响，我们可以通过id将他们分开
    //封装tab栏切换函数
    function tab(obj){
    //相当于one传给obj
    var target = document.getElementById("obj");
    var spans = target.getElementsByTagName("span");
    var lis = target.getElementsByTagName("li");
    for(var i=0;i<spans.length;i++){
    spans[i].index = i;
    spans[i].onmouseover = function(){
    for(var j=0;j<spans.length;j++) {
    spans[j].className = "";
    lis[j].className = "";
    }
    this.className = "current";
    lis[this.index].className = "show";
    }
    }
    }
    tab("one");
    tab("two");
    tab("three");
    }
    </script>

三个循环

    <script>
    //从1+……+100 = 5050
    var sum = 0,sum1 = 0,sum2 = 0;
    //1.for循环
    for(var i=0;i<=100;i++){
    sum +=i;
    }
    console.log(sum);
    //    while(条件)
    //    {
    //         语句；
    //    }
    //2.while循环
    var j = 1;
    while(j<=100)
    {
    sum1 +=j;
    j++;
    }
    console.log(sum1);
    //3.do while循环
    var k=1;
    do{
    sum2+=k;
    k++;
    }while(k<=100);
    console.log(sum2);
    </script>

多分支语句switch

多选一
switch(参数)
{
case参数1:
语句；
break; 退出
case参数2:
语句；
break; 退出
……
default:默认的
语句；
}

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <script>
    window.onload = function(){
    var txt = document.getElementById("txt");
    var btn = document.getElementById("btn");
    btn.onclick = function(){
    var val = txt.value;
    switch(val)
    {
    case "苹果":
    alert("苹果的价格是5.5");
    break;
    case "香蕉":
    alert("香蕉的价格是3");
    break;
    case "草莓":
    alert("草莓的价格是18");
    break;
    default:
    alert("查询不到此类水果的价格");
    }
    }
    }
    </script>
    </head>
    <body>
    <input type="text" id="txt"><button id = "btn">查询价格</button>
    </body>
    </html>

下拉菜单的事件：onchange
sele.onchange = function(){}

下拉菜单（switch）

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    body{
    background:url(images/1.jpg) no-repeat;
    }
    </style>
    <script>
    window.onload = function(){
    var sele = document.getElementById("sele");
    sele.onchange = function(){
    //alert(this.value);
    switch(this.value)
    {
    case"1":
    document.body.style.backgroundImage = "url(images/1.jpg)";
    break; 
    case"2":
    document.body.style.backgroundImage = "url(images/2.jpg)";
    break;
    }
    }
    }
    </script>
    </head>
    <body>
    <select name="" id="sele">
    <option value="1">春意绵绵</option>
    <option value="2">夏日炎炎</option>
    <option value="3">秋风瑟瑟</option>
    <option value="4">冬雪皑皑</option>
    </select>
    </body>
    </html>

星座运势

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .box{
    width: 350px;
    height: 250px;
    border: 1px solid #ccc;
    margin: 100px auto;
    }
    .dt{
    padding-left:10px;
    line-height: 35px;
    font-weight:700;
    color: #036;
    }
    .dd-t{
    overflow:hidden;
    }
    .dd {
    padding: 10px;
    }
    .icon {
    width: 50px;
    height: 50px;
    float: left;
    background: url(xingzuotu.png) no-repeat;
    margin-right:10px;
    }
    .yunshi {
    width: 80px;
    height: 13px;
    display: inline-block;
    background: url(yunshi.png) no-repeat ;
    position: relative;
    }
    .star{
    width: 0px;
    height: 13px;
    position: absolute;
    top: 0;
    left: 0;
    //bottom是底端对齐的意思
    background: url(yunshi.png) no-repeat  left bottom;
    }
    </style>
    <script>
    window.onload = function(){
    function $(id){return document.getElementById(id);}
    var textArr = ["白羊座的内容","金牛座的内容","双子座的内容"];
    var arr = [10,4,8,2];
    //盒子一共是80像素，一共分成10份（运势是10分），每一份的8像素
    //或者一共是80像素，分成5份，每份16像素，但是arr的值就不能超过5
    $("sele").onchange = function(){
    //alert(this.value);
    $("ico").style.backgroundPosition = "0 "+(-this.value*50)+"px";
    //索引号×50的关系，但是是负数
    $("content").innerHTML = textArr[this.value];
    $("stAr").style.width = arr[this.value] * 8+"px";
    switch(this.value)
    {
    case"0":
    fn(arr[this.value]);
    break;
    case"1":
    fn();
    break;
    }
    }
    }
    </script>
    </head>
    <body>
    <div class="box">
    <div class="dt">星座运势</div>
    <div class="dd">
    <div class="dd-t">
    <div class="icon" id="ico"></div>
    <div class="right">
    <select name="" id="sele">
    <option value="0">白羊座 03.21-04.19</option>
    <option value="1">金牛座 04.20-05.29</option>
    <option value="2">双子座 04.20-05.29</option>
    </select>
    <div>今日运势：<span class="yunshi">
    <span class="star" id="stAr"></span>
    </span></div>
    </div>
    </div>
    <div class="dd-b" id="content">这几天的财运都很强，但是危机总在不知不觉中发生了，例如：因为太过乐观而误判形势，导致……[详细]</div>
    </div>
    </div>
    </body>
    </html>

添加和删除数组

1.★ push() 方法可向数组的末尾添加一个或者多个元素，并返回新的长度。

    var arr = [1,3,5];
    arr.push(7,9);//将7和9放在数组后面

结果：[1，3，5，7，9]

2.unshift()方法可向数组的开头添加一个或多个元素，并返回新的长度

    var arr = [1,3,5];
    arr.unshift(7,9);//将0放在数组千

结果：[7,9,1,3,5]

注意：

    <script>
    var arr = [1,3,5];
    arr.unshift(7,9);
    console.log(arr);
    var dom = [1,3,5];
    console.log(dom.push(7));
    </script>

前一个和后一个其实是不一样的，前一个返回的是数组，后一个返回的是数组的长度：4

3.pop()移除最后一个元素，返回最后一个值

    var arr = [1,3,5];
    console.log(arr.pop());
    arr.pop();
    console.log(arr);

结果：
5
[1]
console.log(arr.pop())是将最后一个值取出来也就是5并输出，剩下[1,3]，然后arr.pop()，,去掉3，最后只剩下[1]

4.shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值

    var arr = [1,3,5];
    arr.shift();

结果 : [3,5]

5.concat() 连接两个数组或多个数组。它不会改变现有的数组，而仅仅返回被连接数组的一个副本

    <script>
    var aa = [1,3,5];
    var bb = ["a","b","c"];
    console.log(aa.concat(brr));
    </script>

结果 : [1,3,5,”a”,”b”,”c”]

6.join()把数组转化为字符串
作用是将数组各个元素通过指定的分隔符进行连接成为一个字符串
语法：
arrayObject.join(separator)
数组名.join(符号)
参数 separator可选，指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

    <script>
    var txt = ["aa","bb","cc"];
    console.log(txt.join("-"));
    console.log(txt);// 数组本身不会改变
    </script>

7.把字符串转化成数组
split()方法用于把一个字符串分割成字符串数组
语法
stringObject.split(separator,howmany)
参数 separator可选，指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
howmany可选，该参数壳置顶返回的数组的最大长度

    var txt = "aa,bb,cc";
    console.log(txt.split(","));

    var txt = "aa-bb-cc";
    console.log(txt.split("-"));

注意：两个符号要保持一致！！

DOM (重点)

Js由ECMAscript(描述了JS的语法和基本对象）、DOM（处理网页内容的方法和接口）、BOM（与浏览器交互的方法和接口）三个组成。

DOM定义：DOM为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定一个规范。

节点 :与标签，标记，元素等是一个东西。

已经了解过的访问节点：
①getElementById() id 访问节点
②getElementsByTagName() 标签访问节点
③getElementsByClassName() 类名访问节点（有兼容性问题主流浏览器支持ie678 不认识）

封装自己class类的原理：取出所有的盒子，利用遍历的方法，通过每一个盒子的className来判断，如果相等就留下

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    div {
    width: 100px;
    height: 100px;
    background-color: pink;
    margin:10px;
    }
    </style>
    <script>
    window.onload = function(){
    //var dom =  document.getElementsByClassName("demo");
    //alert(dom.length);
    //}
    //封装自己的class类
    function getClass(classname){
    //如果浏览器支持，则直接返回
    if(document.getElementsByClassName){
    return document.getElementsByClassName(classname);
    }
    //不支持的浏览器
    var arr = [];//用于存放满足的数组
    //把所有标签全都取出来
    var dom = document.getElementsByTagName("*");
    //alert(dom.length);
    for(var i=0;i<dom.length;i++){
    if(dom[i].className == classname ){
    arr.push(dom[i]);
    }
    }
    return arr;
    }
    console.log(getClass("demo").length);
    }
    </script>
    </head>
    <body>
    <div></div>
    <div class="demo"></div>
    <div></div>
    <div></div>
    <div class="demo"></div>
    <div></div>
    <div></div>
    <div class="demo"></div>
    <div></div>
    <div></div>
    </body>
    </html>

优化：如果一个div有多个class名

    <script>
    window.onload = function(){
    function getClass(classname){
    if(document.getElementsByClassName){
    return document.getElementsByClassName(classname);
    }
    var arr=[];// 用于返回数组
    var dom = document.getElementsByTagName("*");
    for(var i=0;i<dom.length;i++)//遍历所有的盒子
    {
    var txtarr = dom[i].className.split(" ");// 分割类名并且转换为数组
    for(var j=0;j<txtarr.length;j++)//遍历通过类名分割的数组
    {
    if(txtarr[j] == classname){
    arr.push(dom[i]);// 我们要的是div
    }
    }
    }
    return arr;
    }
    console.log(getClass("test").length);
    }
    </script>

类添加id

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    div {
    width: 100px;
    height: 100px;
    background-color: pink;
    margin:10px;
    }
    </style>
    <script>
    window.onload = function()
    {
    function getClass(classname,id)
    {
    //分为  支持  classname
    if(document.getElementsByClassName)
    {
    //有id 的情况
    if(id)
    {
    var eleId = document.getElementById(id);
    return eleId.getElementsByClassName(classname);
    }
    else{  //没有id
    return document.getElementsByClassName(classname);
    }
    }
    // 不支持的情况
    if(id){
    var eleId = document.getElementById(id);
    var  dom = eleId.getElementsByTagName("*");
    }
    else{
    var dom = document.getElementsByTagName("*");
    }
    var arr = [];
    for (var i = 0;i<dom.length;i++){
    var txtarr =  dom[i].className.split(" ");
    for(var j=0;j<txtarr.length;j++){
    if(txtarr[j] == classname){
    arr.push(dom[i]);
    }
    }
    }
    return arr;
    }
    console.log(getClass("test","one").length);
    }
    </script>
    </head>
    <body>
    <div></div>
    <div class="demo"></div>
    <div></div>
    <div></div>
    <div id="one">
    <div class="demo test one"></div>
    <div class="one"></div>
    <div class="test"></div>
    <div class="one two test"></div>
    <div></div>
    <div></div>
    </div>
    </body>
    </html>

访问关系

(1)父节点：parentNode

    <script>
    window.onload = function(){
    var x = document.getElementById("x");
    x.onclick = function(){
    this.parentNode.style.display = "none";
    //关掉的是他的父亲  
    }
    }
    </script>

(2)兄弟节点

下一个兄弟：
nextSibling （只有ie678认识）
nextElementSibling （其他浏览器认识的）
上一个兄弟节点：
previousSibling
previousElementSibling

我们想要兼容，我们可以合起来写 || （或者）

    <script>
    window.onload = function(){
    var one = document.getElementById("one");
    //one.nextSibling.style.background = "red";
    //兼容的写法
    var div = one.nextElementSibling||one.nextSibling;
    div.style.backgroundColor = "red";
    }
    </script>

注意：必须先写正常浏览器，后写ie678

(3)子节点

firstChild 第一个孩子（ie678）
firstElementChild 第一个孩子（正常浏览器）

    var one.firstElementChild || one.firstChild

lastChild 最后一个孩子
lastElementChild 最后一个孩子

孩子节点

childNodes 选出全部的孩子，它是标准性，
它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点，
火狐、谷歌等高本版会把换行也看作是子节点

    <ul>
    <li>123123</li>
    <li>123123</li>
    <li>123123</li>
    </ul>

这个节点就是7个，实际应是3个。

利用 nodeType==1 时才是元素节点，用此来获取元素节点

    <script>
    var ul = document.getElementById("ul");
    var childrens =ul.childNodes;//选择全部的亲孩子  
    for(var i=0;i<childrens.length;i++){
    if(childrens[i].nodeType == 1)
    {
    childrens[i].style.backgroundColor = "pink";
    }
    }
    </script>

children

选取所有的孩子（只有元素节点）不存在兼容性问题，但是ie678存在注释节点，这个要避免开。也就是所本来有3个，但是你有一条备注，就会被看成是4个

    <script>
    var ul = document.getElementById("ul");
    //选择全部的亲孩子
    var childrens =ul.children;
    alert(childrens.length);
    </script>

dom的节点操作

（1）创建节点

var div = document.creatElement(“li”);
生成一个新的li标签

（2）插入节点

appendChild() 添加孩子，放到盒子的最后面

insertBefore( 插入的节点，参照节点) ，要写满两个参数

    <div id="demo">
    <div id="xiongda"></div>
    </div>
    <script>
    var demo = document.getElementById("demo");
    var childrens = demo.children;
    //创建节点
    var firstDiv = document.createElement("div");
    //添加节点
    demo.appendChild(firstDiv);
    var test = document.createElement("div");
    demo.insertBefore(test,childrens[0]);
    </script>

如图所示：

这里写图片描述

如果将childrens[0]参照点改为null,

    demo.insertBefore(test,null);

则默认新生成的盒子放到最后面，如图所示：

这里写图片描述

（3）移除节点

removeChild() 孩子节点

    var da = document.getElementById("xiongda");
    demo.removeChild(da);

(4)克隆节点（复制节点）

cloneNode()

括号里面可以跟参数：
①如果为true：深层复制，除了复制本盒子，还复制子节点
②如果为false：浅层复制，只复制本节点，不复制子节点

    var last = childrens[0].cloneNode();
    demo.appendChild(last);

这里写图片描述

    demo.parentNode.appendChild(demo.cloneNode(true));

Dawn___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 篇（4）

多个盒子的tab栏进行封装 <script> window.onload = function(){ //想要多个盒子不相互影响，我们可以通过id将他们分开 //封装tab栏切换函数 function tab(obj){ //相当于one传给obj var target = document.getElementById("obj");
复制链接

扫一扫