js基础2

最新推荐文章于 2022-11-23 17:32:46 发布

来杯柠檬茶

最新推荐文章于 2022-11-23 17:32:46 发布

阅读量107

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/tom199611/article/details/103092886

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

数组和它的函数

创建数组

var aList = new Array(1,2,3);

var aList2 = [1,2,3,'asd'];

长度：aList.length;

2、用下标索引

var aList = [1,2,3,4]; alert(aList[2]); // 弹出3

3、join() 将数组成员通过一个分隔符合并成字符串

var aList = [1,2,3,4]; alert(aList.join('-')); // 弹出 1-2-3-4

indexof函数

i元素第一次出现的索引值。

    <script>
        var aList = [1,2,3,24,14,24,5,24];
        alert(aList.indexOf(aList[7]));
    </script>

4、push() 和 pop()

push 压进队列队尾
pop 队尾出队列

aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4

5、unshift()和 shift() 从数组前面增加成员或删除成员

aList.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
alert(aList); // 弹出1,2,3,4

reverse() 将数组反转

aList.reverse();
alert(aList);  // 弹出4,3,2,1

二维数组

 // 二维数组
     var a2 = [[2,3,4],['a','e','f']];
     alert(a2[1][1]);

熟悉ul和li。列表

    <ul >
        <li>陈冠希</li>
        <li>吴彦祖</li>
        <li>刘德华</li>
    </ul>

·刘德华
·陈冠希
·吴彦祖

要是想要去掉list列表前面的小点 list-style: none;

    <style>
        .box1 {
            list-style: none;

        }


    </style>

</head>
<body>
    <ul class="box1">
        <li>陈冠希</li>
        <li>吴彦祖</li>
        <li>刘德华</li>
    </ul>

刘德华
陈冠希
吴彦祖

类选择，选定后续子类的选用

ul使用box1类。
.box1 li {pass} 这个让所有遵循box1标签下面的li 执行这个css

    <style>
    .box1{
        list-style:upper-roman;
    }
    .box1 li {
        font-size: 99px;
        color: darkred;
    }
    </style>

</head>
<body>
    
    <ul class="box1">
        <li>刘德华</li>
        <li>刘德华</li>
        <li>刘德华</li>
    </ul>

margin外边距和border内边距

在这里插入图片描述
格式
margin : 上，右，下，左；
margin：32px,2px,3px,4px;

在这里插入图片描述
border 就是内嵌入块相对于上一级块的内边距。

css类选择器，

for循环

        var a = [32,23,'a','b'];
        for(var i=0;i<a.length;++i){
            alert(a[i]);

        }

for循环把list列表的内容加载到li标签中

    <script>
        window.onload = function(){
            var aList = ['美人鱼','疯狂动物城','魔兽','美国队长3','湄公河行动'];
            var d1 = document.getElementById('div1');
            var u1 = document.getElementById('ul1');
            var  strli = '';
            for(var i=0;i<aList.length;++i){
                strli += '<li>'+aList[i]+'</li>';
            }
            alert(strli);
            u1.innerHTML = strli;
        }
    </script>
    <style>
    .list1{
        height: 660px;
        width: 660px;
        background-color:deeppink ;
    }
    .list1 ul{
        list-style: none;
    }
    .list2 {
    }
    .list2 li{
        color: green;
        font-size: 55px;
    }
    </style>
</head>
<body>
    <div id="div1" class="list1">
        <ul id="ul1" class="list2">
            <!-- 
            <li></li>
            <li></li> -->
        </ul>
    </div>

数组去重。

第14号元素比如‘32’ 的indexof ：
假如indexof 等于 14的话，第一次出现，没有重复

第14号元素比如‘32’ 的indexof ：
假如indexof 不等于14的话，小于14的话。不是第一次出现。重复的数据

    <script>
        window.onload = function(){
            var alist = [2,3,4,3,5,6,7,8,3,4,5,2,7,8,9,3,4,5,6,3,4,8,9];
            var blist = [];
            for(var i=0;i<alist.length;++i){
                if(alist.indexOf(alist[i]) ==i){
                    blist.push(alist[i]);
                }
            }
            d1 = document.getElementById('d1');
            d1.innerHTML = blist;
        }

    </script>

</head>
<body>
    <div id="d1">
    </div>

获取元素值组成数组

    <script type="text/javascript">
        window.onload = function(){
            //奇数列表行 变色
            var alist = document.getElementsByTagName('li')
                for(var i =0 ;alist.length;++i){
                    if (i%2!=0){
                           alist[i].style.backgroundColor = "yellow"; 

                    }

                }

            
        }
    </script>

</head>
<body>
    <ul id="ul">
        <li>a1</li>
        <li>v2</li>
        <li>b3</li>
        <li>d4</li>
        <li>d5</li>
        <li>g6</li>
        <li>g7</li>
        <li>i8</li>
        <li>k9</li>
    </ul>

js的组成

字符串的操作

先省略

postion:absolute 和left 属性

必须postion :absolute 相对定位时，修改left 属性才能移动块的位置

	<style type="text/css">		
		.box{
			width:200px;
			height:200px;
			background-color:gold;
			position:absolute;
			left:0;
			top:100px;
		}
	</style>

定时器 setInterval的使用

	var timer = setInterval(执行的函数,30);
	//创建一个定时器，每30毫秒就执行一次

	clearInterval(定时器对象);  //关闭某个定时器

动画，

大于500left，就停止下来

            var timer = setInterval(function(){
                var div1 = document.getElementById('div1');
                inipos += speed;
                div1.style.left = inipos+'px';
                if (inipos > 500){
                    clearInterval(timer);
                }
            }, 10);

往复的版本

        
        window.onload = function(){
            var div1 = document.getElementById('div1');
            var inipos = 0;
            var speed = 10;



            var timer = setInterval(function(){
                inipos += speed;
                div1.style.left = inipos+'px';
                if (inipos > 500){
                    speed = -10
                }
                else if(inipos <0){

                    speed = +10;
                }
            }, 10);

        }
    </script>
    <style>
    		.box{
			width:200px;
			height:200px;
			background-color:gold;
			position:absolute;
			left:0px;
			top:100px;
		}
    </style>

div 嵌套div

无缝滚动

选项卡

    
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var bts = $('#d1 input');
            var div2 = $('#d2 div');

            bts.click(function(){
                var a = $(this) //获取点击控件
                // alert(a.index());
                bts.eq(a.index()).addClass('act1').siblings().removeClass('act1');
                //修改div的 display
                div2.eq(a.index()).addClass('act2').siblings().removeClass('act2');
            })
        })
    </script>


    <style>
        .box1{
            border: solid;
            width: 900px;
        }

        .box2{

        }
        .box2 div{
            height: 99px;
            width: 99px;
            background-color: blueviolet;
            float: left;
            margin: 22px;
            display: none;
        }
        .act1{
            background-color: coral;
        }
        .box2 .act2{
            display: block;
        }
    </style>


</head>
<body>
    <div id="d1" class="box1">
        <input type="button" value="点击1" class="act1">
        <input type="button" value="点击2">
        <input type="button" value="点击3">   
    </div>

    <div id="d2" class="box2" >
        <div class="act2">文本1</div>
        <div>文本2</div>
        <div>文本3</div>
    </div>

来杯柠檬茶

关注

0
点赞
踩
0

收藏

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

目录数组和它的函数创建数组3、join() 将数组成员通过一个分隔符合并成字符串4、push() 和 pop()二维数组ul和li。列表类选择子类的选用margin外边距和border内边距css类选择器，for循环数组和它的函数创建数组var aList = new Array(1,2,3);var aList2 = [1,2,3,'asd'];长度：aList.length;2、用...
复制链接

扫一扫