8.21 学习日志

最新推荐文章于 2022-07-15 09:42:18 发布

DA_CHUAN_

最新推荐文章于 2022-07-15 09:42:18 发布

阅读量147

点赞数 1

文章标签： js 学习日志

本文链接：https://blog.csdn.net/DA_CHUAN_/article/details/99999856

版权

复习

在执行代码时,有两种作用域,一种是AO主要用于函数里或者花括号里执行期上下文对象,另外一种是GO对象,一般来说是window对象,
//脚本加载时
// GO==>浏览器:window node.js:global
//1.检查语法
//2.
//变量变为GO对象的属性
//函数变为GO对象的方法

	// var a=20
	// GO{
	// 	a:undefined
	// }
	
	
	//函数能不能无限自调用:就算是大括号里面是空的

闭包引起的问题

			//垃圾回收机制:对象是引用数据
			//在引用标识所在作用域内  都能引用对象
			//作用域完毕的时候,会销毁AO中的变量
			//总结:系统辨别对象没有能力再被使用时,引用计数为0 对象释放
			
			//内存泄漏
			
			//如何解决闭包引起的内存泄漏?
			//1.尽量避开闭包的使用,使用高级语法:做兼容
			//2.手动释放,优化代码,每次使用容器前先清空. xxx=null

//浏览器如何把html文件变为UI页面?

	// BOM操作 (browser object model)  关键字是:window
	//1.浏览器去翻译html文件中的代码:生成window对象
	//window==>
	//所有标签(节点对象)都在这个对象中:DOM
	//浏览缓存相关的功能也在这个对象中
	//浏览器的信息和系统信息也在这个对象中
	//navigatior也在这个对象中
	//设备和显示效果也在这个对象中
	//总结:不是w3c 的规范  是所有浏览器自己都做了这些解构
	
	
	
	//DOM (document object model)
	//2.把标签按照文档流顺序进行解析==>像树一样的数据结构:DOM树
	//3.把css样式按照顺序进行解析==>也像树一样的数据结构:CSS样式结构体
	//4.把DOM树和CSS样式结构体结合==>renderTree 呈现树
	//6.GPU绘制引擎  按照呈现树的顺序去绘制整个UI页面
	//这个阶段主要学习DOM树的操作
	//总结:是w3c 的规范 
	
	//节点:12大节点  作业:查博客看看有哪些节点
	// 文档document

在script中获取元素的办法
1.var div1=document.getElementById(“div1”),id选择器,选择id为div1的标签,一般来说id最好一样的只有一个,不然和class使用冲突.返回第一个id为div1的节点对象,如果没有这个id 返回值:null
//2.通过class获取没有返回空容器
var divs=document.getElementsByClassName(“div11”) 类名选择器
3.通过Name获取没有返回空容器
var div2=document.getElementsByName(“div2”)
name选择器
4.通过标签名获取没有返回空容器
var divs=document.getElementsByTagName(“hqyj”)
var divs=document.getElementsByTagName(“h1”)
以上4中方法是es5之前的方法,其中id选择器是最快的
//5.返回选择器选择的元素们的第一个,没有的话:null
var divs=document.querySelector(".div11")
console.log(divs)

//6.返回选择器选择的元素们,没有的话:空容器
var divs=document.querySelectorAll(".div11")
console.log(divs)

var ul1 = document.querySelector("#box")
			var re = ul1.firstChild
			var re = ul1.firstElementChild
			var re = ul1.lastChild
			var re = ul1.lastElementChild
			var re = ul1.nextSibling
			var re = ul1.nextElementSibling
			var re = ul1.previousSibling
			var re = ul1.previousElementSibling
			var re = ul1.children[2]
			var re = ul1.getson(2)

不同的选择器可以选择不同的标签

作业:

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

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

<body>
    <style>
        .div_tr {
            width: 150px;
            height: 50px;
            border: 1px solid burlywood;
        }
    </style>
    <script>
    </script>
    <script>
            //列变颜色
        for (let q = 0; q < 7; q++) {
            var td1 = document.createElement("td");
            td1.classList.add(`td${q}`)
            document.body.appendChild(td1);


            for (let i = 0; i < 6; i++) {
                let tr1 = document.createElement("tr");
                tr1.classList.add(`tr${q}${i}`);
                td1.appendChild(tr1);
                var div_tr = document.createElement("div");
                div_tr.classList.add("div_tr");
                tr1.appendChild(div_tr)

                if (i % 2 == 0) {
                    tr1.style.backgroundColor = `#C5AE5D`;
                }
                if (i % 2 == 1) {
                    tr1.style.backgroundColor = `#5089B6`;
                }
                tr1.onclick = function () {
                    for (let i = 0; i < chuanru.length; i++) {                       
                        if (i % 2 == 0) {
                            chuanru[i].style.backgroundColor = `#C5AE5D`;
                        }
                        if (i % 2 == 1) {
                            chuanru[i].style.backgroundColor = `#5089B6`;
                        }
                    }
                    let first1 = tr1.parentElement.children;
                    for (let i = 0; i < first1.length; i++) {
                        first1[i].style.backgroundColor = "red";
                    }
                    let last1 = document
                    change(q, first1);
                }
            }
        }
        var change1 = 0;
        var chuanru = {};

        function change(nub = 0, chuan_ru) {
            change1 = nub;
            chuanru = chuan_ru;
            console.log(change1);
        }
    </script>

    <script>
        var change1 = 0;
        var chuanru = {};
        function change(nub = 0, chuan_ru) {
            change1 = nub;
            chuanru = chuan_ru;
            console.log(change1);
        }
    </script>

</body>

</html>

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

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

<body>
    <style>
        .div_tr {
            width: 150px;
            height: 50px;
            border: 1px solid burlywood;
        }
    </style>
    <div class="father1">

    </div>
    <script>
        var div = document.querySelector(".father1")

        for (let q = 0; q < 7; q++) {
            var td1 = document.createElement("td");
            td1.classList.add(`td${q}`)
            div.appendChild(td1);


            for (let i = 0; i < 6; i++) {
                let tr1 = document.createElement("tr");
                tr1.classList.add(`tr${q}${i}`);
                td1.appendChild(tr1);
                var div_tr = document.createElement("div");
                div_tr.classList.add("div_tr");
                tr1.appendChild(div_tr)

                if (i % 2 == 0) {
                    tr1.style.backgroundColor = `#C5AE5D`;
                }
                if (i % 2 == 1) {
                    tr1.style.backgroundColor = `#5089B6`;
                }
                tr1.onclick = function () {
                    for (let ne = 0; ne <7; ne++) {
                        var bian1= tr1.parentElement.parentElement.children[ne];
                        console.log(jilu);
                        
                        var bian2=bian1.children[jilu].style.backgroundColor= (jilu % 2 ?  `#C5AE5D`:`#5089B6` );
                    }
                    get(tr1, i);
                }
            }
        }
    </script>
    <script>
        var jilu = 0;
        function get(trr, num) {
            jilu = num;
            x = trr.parentElement.parentElement.children;
            for (let m = 0; m < x.length; m++) {
                x[m].children[num].style.backgroundColor = "red";
            }
            
            
        }
    </script>

</body>

</html>

DA_CHUAN_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8.21 学习日志

复习在执行代码时,有两种作用域,一种是AO主要用于函数里或者花括号里执行期上下文对象,另外一种是GO对象,一般来说是window对象,//脚本加载时// GO==>浏览器:window node.js:global//1.检查语法//2.//变量变为GO对象的属性//函数变为GO对象的方法 // var a=20 // GO{ // a:undefined // }...
复制链接

扫一扫