前端 js

Posted 2020-12-30 又见芳踪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端 js相关的知识，希望对你有一定的参考价值。

伪数组

	function add() {
			// arguments伪数组  跟数组有相同的索引和相同的length ,而方法不同
			// arguments 实参
			// body...
			console.log(arguments);
			// arguments.push(7);
			// console.log(arguments);
			console.log(new Array());
		};

		add(5,6);
	</script>

　dom操作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#active{
			background-color: red;
			width: 100px;
			height: 100px;
		}
	</style>
</head>
<body>
	<div id="active"></div>
	<script>
		
		//DOM  Document Object Model  文档对象模型
		console.log(window)

		//文档
		console.dir(document);
		// html
		console.log(document.documentElement)
		// body
		console.log(document.body)

		// 三步走  1.获取事件对象 2.事件 3.驱动程序 执行的操作

		// 1.获取的DOM的三种方式
		var oDiv = document.getElementById(‘active‘);
		// console.log(oDiv);
		// console.dir(oDiv);

		var isRed = true;
		// 2. 事件名
		oDiv.onclick = function() {

			if(isRed){
				//3.执行的操作	  要干什么
				oDiv.style.backgroundColor = ‘green‘;

				isRed = false;
				oDiv.style.width = ‘200px‘;
				oDiv.style.display = ‘none‘;
			}else{
				oDiv.style.backgroundColor = ‘red‘;

				isRed = true;
			}
			
		};
		// alert(2);

	</script>
	
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#active{
			background-color: red;
			width: 100px;
			height: 100px;
		}
	</style>
</head>
<body>
	<div id="active"></div>
	<script>
		
		//DOM  Document Object Model  文档对象模型
		console.log(window)

		//文档
		console.dir(document);
		// html
		console.log(document.documentElement)
		// body
		console.log(document.body)

		// 三步走  1.获取事件对象 2.事件 3.驱动程序 执行的操作

		// 1.获取的DOM的三种方式
		var oDiv = document.getElementById(‘active‘);
		// console.log(oDiv);
		// console.dir(oDiv);

		var isRed = true;
		// 2. 事件名
		oDiv.onclick = function() {

			if(isRed){
				//3.执行的操作	  要干什么
				oDiv.style.backgroundColor = ‘green‘;

				isRed = false;
				oDiv.style.width = ‘200px‘;
				oDiv.style.display = ‘none‘;
			}else{
				oDiv.style.backgroundColor = ‘red‘;

				isRed = true;
			}
			
		};
		// alert(2);

	</script>
	
</body>
</html>

　　程序的接口

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	
	
</head>
<body>
	<div id="box"></div>
	<script>
		//入口函数

		// 当窗口加载完成之后 才调用次方法  回调函数


		// 窗口加载 1.文档 2.图片再加载


		// 1.覆盖现象  2 必须等待着图片加载完成才调用次回调函数
		window.onload = function() {
			console.log(document.getElementById(‘box‘));


			// dom操作
		};
		window.onload = function() {
			console.log(2);


			// dom操作
		};
	</script>
	
</body>
</html>

dom的增删改查

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<div id="box">
		<!-- <p>alex</p> -->
	</div>

	<ul id="box2">
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>

	</ul>

	<button id="btn">追加</button>
	<button id="del">删除</button>


	<script>
		
		window.onload = function() {
			
			var oDiv = document.getElementById(‘box‘);
			var oBtn = document.getElementById(‘btn‘);
			var oDel = document.getElementById(‘del‘);
			var oUl = document.getElementById(‘box2‘);
			console.log(oUl.children);
			var lis = oUl.children;


			for(var i = 0; i< lis.length; i++){

				lis[i].onclick = function(){
					
					for(var j = 0; j < lis.length; j++){
						console.log(this);
						this.style.color = ‘black‘;
					}



					console.log(this)
					this.style.color = ‘red‘;
				}
			}


			// 创建DOM
			var oP = document.createElement(‘p‘);

			oBtn.onclick = function(){

				// 追加
				oDiv.appendChild(oP);


				// 修改DOM的属性
				oP.id = ‘p1‘;
				oP.className = ‘p1‘;
				oP.style.color = ‘green‘;
				oP.innerText = ‘alex‘

			};

			oDel.onclick = function(){
				// 删除
				oDiv.removeChild(oP);
			}


		};
	</script>
	
</body>
</html>

　　排他思想

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            #tab{
                width: 480px;
                margin: 20px auto;
                border: 1px solid red;
            }
            ul{
                width: 100%;
                overflow: hidden;
            }
            ul li{
                float: left;
                width: 160px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                background-color: #cccccc;
            }
            
            ul li a{
                text-decoration: none;
                color:black;
            }
            li.active{
                background-color: red;
            }
            p{
                display: none;
                height: 200px;
                text-align: center;
                line-height: 200px;
                background-color: red;
            }
            p.active{
                display: block;
                
            }
            
        </style>
    </head>
    <body>
        <div id="tab">
            <ul>
                <li class="active">
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">新闻</a>
                </li>
                <li>
                    <a href="#">图片</a>
                </li>        
            </ul>
            <p class="active">首页内容</p>
            <p>新闻内容</p>
            <p>图片内容</p>
            
            
        </div>
    </body>
    <script type="text/javascript">
        // console.log(a);
        {
            // let a = 1;
        }
        // console.log(a);

        // for (var i = 0; i < 10; i++) {
        //   // ...
        // }

        // console.log(i);

        var a = [];
        for (let i = 0; i < 10; i++) {
          a[i] = function () {
            console.log(i);
          };
        }
        a[5](); // 10


        window.onload = function(){
            // //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的p也显示出来(添加类);
                    //思路：1.点亮上面的盒子。   2.利用索引值显示下面的盒子。

            var tabli = document.getElementsByTagName(‘li‘);
            var tabContent = document.getElementsByTagName(‘p‘)
         
            for(let i= 0; i < tabli.length; i++){
                // 绑定索引值（新增一个自定义属性：index属性）
                // tabli[i].index  = i;
               
                tabli[i].onclick = function(){
                    
                    // 1.点亮上面的盒子。   2.利用索引值显示下面的盒子。(排他思想)
                    for(var j = 0; j < tabli.length; j++){
                        // tabli[j].className = ‘‘;
                        // tabContent[j].className = ‘‘;

                        console.log(this);
                        tabli[j].className = ‘‘;
                        tabContent[j].className = ‘‘;

                    }    
                    this.className = ‘active‘                 
                    tabContent[i].className = ‘active‘;//【重要代码】
                }
        }
        }
        
    </script>
</html>

　　模态框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            #tab{
                width: 480px;
                margin: 20px auto;
                border: 1px solid red;
            }
            ul{
                width: 100%;
                overflow: hidden;
            }
            ul li{
                float: left;
                width: 160px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                background-color: #cccccc;
            }
            
            ul li a{
                text-decoration: none;
                color:black;
            }
            li.active{
                background-color: red;
            }
            p{
                display: none;
                height: 200px;
                text-align: center;
                line-height: 200px;
                background-color: red;
            }
            p.active{
                display: block;
                
            }
            
        </style>
    </head>
    <body>
        <div id="tab">
            <ul>
                <li class="active">
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">新闻</a>
                </li>
                <li>
                    <a href="#">图片</a>
                </li>        
            </ul>
            <p class="active">首页内容</p>
            <p>新闻内容</p>
            <p>图片内容</p>
            
            
        </div>
    </body>
    <script type="text/javascript">
        // console.log(a);
        {
            // let a = 1;
        }
        // console.log(a);

        // for (var i = 0; i < 10; i++) {
        //   // ...
        // }

        // console.log(i);

        var a = [];
        for (let i = 0; i < 10; i++) {
          a[i] = function () {
            console.log(i);
          };
        }
        a[5](); // 10


        window.onload = function(){
            // //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的p也显示出来(添加类);
                    //思路：1.点亮上面的盒子。   2.利用索引值显示下面的盒子。

            var tabli = document.getElementsByTagName(‘li‘);
            var tabContent = document.getElementsByTagName(‘p‘)
         
            for(let i= 0; i < tabli.length; i++){
                // 绑定索引值（新增一个自定义属性：index属性）
                // tabli[i].index  = i;
               
                tabli[i].onclick = function(){
                    
                    // 1.点亮上面的盒子。   2.利用索引值显示下面的盒子。(排他思想)
                    for(var j = 0; j < tabli.length; j++){
                        // tabli[j].className = ‘‘;
                        // tabContent[j].className = ‘‘;

                        console.log(this);
                        tabli[j].className = ‘‘;
                        tabContent[j].className = ‘‘;

                    }    
                    this.className = ‘active‘                 
                    tabContent[i].className = ‘active‘;//【重要代码】
                }
        }
        }
        
    </script>
</html>

以上是关于前端 js的主要内容，如果未能解决你的问题，请参考以下文章

关于js----------------分享前端开发常用代码片段

回归 | js实用代码片段的封装与总结（持续更新中...）

前端开发常用代码片段（中篇）

前端防扒代码片段