js基础知识04

最新推荐文章于 2024-06-14 11:01:38 发布

fdt__

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量249

点赞数

分类专栏： js基础(未更完) 文章标签： javascript

本文链接：https://blog.csdn.net/Int321/article/details/123908674

版权

js基础(未更完) 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这里写目录标题

习题1（堆栈）

已知下面代码可以修改BOX元素的样式

1 box.style.color = 'red ';

那么下面的写法是否可以修改元素的样式，如果不可以是为什么?


let box = document.getElementById('box');
通过方法获取的元素box是   对象数据类型   的值

console.dir(box);//查看详细信息


//第一种方案
let AA = box.style;
AA.color = 'red' ;    //可以修改
  
//第二种方案
let BB = box.sty1e.color ;
BB = 'red ';    //无法修改

元素对象堆栈
AA存的是引用数据类型，按地址来操作
BB存的是值类型，直接修改值

1.console.dir(box);//查看详细信息

对象的属性（box对象）

id:操作元素的ID值
className:操作元素的CLASS样式类的值
innerHTML:操作的元素的内容(可以识别标签)
innerText:和-innerHTML的区别是不能识别标签
tagName:获取元素的标签名（一般大写)
style:操作元素的行内样式属性值是一个新的对象(cssstyleDeclaration)
box.style.display(box是一个对象，它里面有style属性。style的属性值又是一个新的对象）多维对象

练习1（隔行变色）

1.css实现（真实项目中这样写）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        #newsBox {
            margin: 10px auto;
            box-sizing: border-box;
            /*固定大小*/
            width: 300px;
            padding: 20px;
            border: 2px solid pink;
        }

        #newsBox li {
            line-height: 30px;
            border-bottom: 1px dashed pink;
        }

        #newsBox li:nth-last-child(1) {
            /*获取LI的最后一个元素*/
            border-bottom: none;
        }

        #newsBox li:nth-child(even) {
            background-color: aqua;
        }

        #newsBox li:nth-child(odd) {
            background-color: blue;
        }

        #newsBox li:hover {
            background-color: white;

        }
    </style>
</head>

<body>
    <!-- ul#newsBox>li*5{我是第$个LI} -->

    <ul id="newsBox">
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
    </ul>
</body>

</html>

2.js实现（练习js）

鼠标移入（mouseover）移出（mouseout）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        #newsBox {
            margin: 10px auto;
            box-sizing: border-box;
            /*固定大小*/
            width: 300px;
            padding: 20px;
            border: 2px solid pink;
        }

        #newsBox li {
            line-height: 30px;
            border-bottom: 1px dashed pink;
        }

        #newsBox li:nth-last-child(1) {
            /*获取LI的最后一个元素*/
            border-bottom: none;
        }
    </style>
</head>

<body>
    <!-- ul#newsBox>li*5{我是第$个LI} -->

    <ul id="newsBox">
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
    </ul>
</body>
<script>
    var newsBox = document.getElementById('newsBox');
    var lis = document.getElementsByTagName('li');/*通过标签名获取一组元素（元素集合）
HTMLCollection */
    console.dir(lis);//类数组集合，不是数组

    /*奇数行*/
    for (var i = 0; i <= lis.length; i += 2) {
        lis[i].style.backgroundColor = 'pink';
        lis[i].onmouseover = function () {
            /*this代表当前操作的li*/
            this.style.backgroundColor = 'white';
        }
        lis[i].onmouseout = function () {
            this.style.backgroundColor = 'pink';
        }
    }

    /*偶数行*/
    for (var i = 1; i <= lis.length; i += 2) {
        lis[i].style.backgroundColor = 'blue';
        lis[i].onmouseover = function () {
            this.style.backgroundColor = 'white';
        }

        lis[i].onmouseout = function () {
            this.style.backgroundColor = 'blue';
        }
    }



</script>

</html>

1.函数function()

函数是做某件事的方法或者一个功能体，函数是吧实现某个功能的代码放在一起进行封装。
实现高内聚，低耦合。

1.1创建函数（形参，返回值）

1.形参

//=>ES5老方式
function[函数名]([形参变量1],...){
//函数体:基于JS完成需要实现的功能return[处理后的结果];
}



[函数名]([实参1],...) ;

创建函数的时候我们设置了形参变量，但如果执行的时候并没有给传递对应的实参值，那么形参变量默认的值是: undefined

 // 求两个数的和，算完和后乘以10，然后在除以2...
 //=>sum是函数名，代表这个函数
 // =>n/m是形参，是变量，用来存储执行函数时传递的实参



  function sum(n, m) {
  //形参默认值手动处理
  if(typeof n == 'undefined' ){
          n=0;
  }
      let res = n + m;
      res = res * 10;
      res = res / 2;
      console.log(res);
  }
  console.log(sum);//输出函数本身
  sum(1,2);

2.返回值
函数执行的时候，函数体内部创建的变量我们是无法获取和操作的，如果要想获取内部的信息，我们需要基于RETURN返回值机制，把信息返回才可以。
没有写RETURN，函数默认返回值是undefined
函数体中遇到RETURN，后面代码则不再执行了return

   function sum(n, m) {
       let res = n + m;
       return res; //返回值
   }
   console.log(sum(1, 3));

1.2执行函数（实参）

1.3匿名函数

匿名函数之函数表达式:把一个匿名函数本身作为值赋值给其它东西，这种函数一般不是手动触发执行，而且靠其它程序驱动触发执行（例如:触发某个事件的时候把它执行等)

    this.onclick = function () {}
    
    setTimeout(function(){},1000) //设置定时器，1000MS后执行匿名函数
	
	(function(n){//自执行函数，创建完一个匿名函数，紧接着就把当前函数加小括号执行
		//n=100;
	})(100);

以后讲

1.3arguements

1.4函数底层运行机制

练习2（选项卡）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    li {
        list-style: none;
    }

    .box {
        border: 1px solid black;
        padding: 10px;
        margin: 0 10px 10px 0;
        cursor: pointer;
    }

    #navBox {
        display: flex;
    }

    .detail {
        height: 200px;
        width: 500px;
        border: 1px solid black;
        display: none;
    }

    #tabBox>div.active {
        display: block;
    }
</style>

<body>
    <div id="tabBox">
        <ul id="navBox">
            <li class="box active">读书</li>
            <li class="box">电影</li>
            <li class="box">音乐</li>
        </ul>

        <div class="detail active">1111111</div>
        <div class="detail">22222222</div>
        <div class="detail">333333333</div>
    </div>


</body>
<script>
    var tabBox = document.getElementById('tabBox');

    var navBox = document.getElementById('navBox');
    var lis = navBox.getElementsByTagName('li');

    var tabList = tabBox.getElementsByTagName('div');


    /**************************1.自定义属性*******************************/
    //循环三个LI，给每一个LI都绑定点击事件
    // for (var i = 0; i < lis.length; i++) {
    //     lis[i].zidingyi = i;
    //     lis[i].onclick = function () {
    //         //this.style.backgroundColor = 'pink';
    //         //我想用的是点击这个Li的索引，但是i不是
    //         //changeTab(i);
    //         //解决办法一：自定义属性
    //         changeTab(this.zidingyi);


    //         //changeTab(i);
    //         /*只有代码加载完成才能看到页面，只有看到页面用户才能点击,
    //        加载到循环这个代码了i=0 i < 3 i++  
    //        i=0 navList[0].onclick = function () {... }
    //        绑定事件的时候方法没有执行，点击第一个LI的时候它才执行i++ => 1
    //        循环结束，在点击时i已经变成了3*/


    //     }
    // }
    /**********************2.闭包解决方案***********************************/
    // for (var i = 0; i < lis.length; i++) {
    //     lis[i].onclick = (function (i) {
    //         return function () {
    //             changeTab(i);
    //         }
    //     })(i);

    // }

    /**********************3.ES6中的LET解决方案0***********************************/
    for (let i = 0; i < lis.length; i++) {

        lis[i].onclick = function () {

            changeTab(i);

        }
    }


    //封装一个函数实现选项卡的切换
    //clickIndex:创建函数的时候还不知道点的是谁，所以定义一个入口clickIndex(点击这一项的索引)   批行方法的时候把点击这一项的索引传递进来即可

    function changeTab(clickIndex) {
        //1.先让所有的LI和DIV都没有选中的样式
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = 'box ';//清空上面标签样式
            tabList[i].className = 'detail';
        }
        //2.点击的是谁就给谁加
        lis[clickIndex].className = 'box active';
        tabList[clickIndex].className = 'detail active';

    }



</script>

</html>

fdt__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础知识04

这里写目录标题习题1（堆栈）console.dir(box);//查看详细信息习题1（堆栈）已知下面代码可以修改BOX元素的样式1 box.style.color = 'red ';那么下面的写法是否可以修改元素的样式，如果不可以是为什么?let box = document.getElementById('box');通过方法获取的元素box是对象数据类型的值console.dir(box);//查看详细信息//第一种方案let AA = box.style;AA
复制链接

扫一扫