js常用知识点（必会）

最新推荐文章于 2024-03-13 16:22:14 发布

outside-R

最新推荐文章于 2024-03-13 16:22:14 发布

阅读量358

点赞数

分类专栏： JavaScript 文章标签： js必会

本文链接：https://blog.csdn.net/weixin_45044349/article/details/99649454

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

浏览器的基本组成

1.用户界面
2.浏览器引擎
3.渲染引擎
4.网络
5.UI后端
6.Js引擎
7.数据存储
在这里插入图片描述

<script>
	//1.url(ip地址【网络部分】  资源定位器)
	//2.tcp  【建立连接   三次挥手】
	//3.js html css img
	//4.js时间线
	//5.渲染过程【渲染引擎】
	//6.tcp【四次挥手】
</script>

渲染引擎–渲染模式

1.什么是渲染？渲染引擎，渲染过程
渲染：在电脑绘图中是指用软件从模型生成图像的过程。
渲染引擎：其职责就是渲染，即在浏览器窗口中显示所请求的内容。
过程：解析HTML从而构建DOM树–>CSS Rule树—>构建Render树---->布局Render树—>绘制Render树

Render Tree:
在这里插入图片描述
2.怪异模式

<head>
	<style>
		div{
			width:100px;
			height:100px;
			padding:20px;tMode
			boeder:20px solid black;
		}
		//取决于浏览器
	</style>
</head>
<body>
	<div></div>
	<script>
		console.log(document.compatMode)
		//是否采用标准模式，或怪异模式
	</script>
</body>

3.事件一体化 Label标签

<p>
	<label for="demo">username</label>
	<input type="text" id="demo">
	//鼠标点击任何一个标签，另一个标签可以聚焦
</p>
<script>
	var oLabel = document.getElementsByTagName('label')[0];
	var oInput = document.getElementById('dome');
	//绑定事件
	oLabel.onclick = function(){
		console.log(this);
	}
	oInput.onclick = function(){
		console.log(this);
	}
</script>

4.属性和特性

<input type ="type" value ='aaa' id ='domo' data ='duyi' pr ='du'>
<script>
	//属性   ---大范围    后天努力
	//特性【包含在属性之中】  ---小范围   先天就有  
	//特性： type value id class
	//属性： data  pr 【自定义属性】
	//特性  DOM对象  ===  input  一一对应  映射关系
	var oInput = document.getElementById('domo');
	console.log(oInput.Id);
	console.log(oInput.data); //undefined
	 //自定义的属性----undefined【可以复制，但不会映射】
</script>

5.图片预加载和懒加载【原理】

图片预加载：图片提前加载【图片显示之前，就先加载】
图片懒加载：在滚动页面中加载时出现

//图片预加载
<head>
	<style>
		div{
			width:400px;
			height:200px;
			border:2px solid black;
		}
		img{
			width:100%;
			height:100%
		}
	</style>
</head>
<body>
	<div id ='demo'></div>
	<script>
		//var oImg = document.createElement('img');
		var oImg = new Image();   //【提供创建oImg对象】
		oImg.onload = function(){
			var oDiv = document.getElementById('demo');
			oDiv.appendChild(this);//this--->oImg
		}//绑定事件【下载完的时间】
		oImg.src = ' http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E6%B1%AA%E8%8B%8F%E6%B3%B7%E5%9B%BE%E7%89%87&step_word=&hs=2&pn=24&spn=0&di=80410&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2449484431%2C2691206069&os=596630694%2C1036946458&simid=0%2C0&adpicid=0&lpn=0&ln=1916&fr=&fmq=1565968990657_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=star&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg.cnhuadong.net%2FfVAwWl15BcBC0gW4xhBIkS5qIQ1PueXzgig7HT6Xmb7JWglk4GvgxfBwBW2M2YCqbM7xHERH0BHuQtGBcBCAbABDkb8QxtQCdCDCdCD.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bvgi7w15g2_z%26e3BgjpAzdH3Ffyfpj4AzdH3FkP2B9vxoMl4Gz97eAKGr6DA29fi0CeLlUDZKXnm38A7Z6nei4woFbA1hHXAkABOHfOobeVk3ejYbCXKHpCuXyC7PQC1CDC1CD&gsm=0&rpstart=0&rpnum=0&islist=&querylist=&force=undefined';//图片加载地址
	</script>
</body>

//图片懒加载
<head>
	<style>
		body{height:3000px;}
		div{
			position:absolute;
			top:1500px;
			width:400px;
			height:200px;
			border:2px solid black;
		}
		img{
			width:100%;
			height:100%;
		}
	</style>
</head>
<body>
	<div></div>
	<script>
		//监控滑轮事件
		//不断判断当前div的位置
		//到了临界点，采取图片预加载操作
		//把图片正式的添加到页面中

		var oImg = new Image();   //【提供创建oImg对象】
		oImg.onload = function(){
			var oDiv = document.getElementById('demo');
			oDiv.appendChild(this);//this--->oImg
		}//绑定事件【下载完的时间】
		oImg.src = ' http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E6%B1%AA%E8%8B%8F%E6%B3%B7%E5%9B%BE%E7%89%87&step_word=&hs=2&pn=24&spn=0&di=80410&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2449484431%2C2691206069&os=596630694%2C1036946458&simid=0%2C0&adpicid=0&lpn=0&ln=1916&fr=&fmq=1565968990657_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=star&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg.cnhuadong.net%2FfVAwWl15BcBC0gW4xhBIkS5qIQ1PueXzgig7HT6Xmb7JWglk4GvgxfBwBW2M2YCqbM7xHERH0BHuQtGBcBCAbABDkb8QxtQCdCDCdCD.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bvgi7w15g2_z%26e3BgjpAzdH3Ffyfpj4AzdH3FkP2B9vxoMl4Gz97eAKGr6DA29fi0CeLlUDZKXnm38A7Z6nei4woFbA1hHXAkABOHfOobeVk3ejYbCXKHpCuXyC7PQC1CDC1CD&gsm=0&rpstart=0&rpnum=0&islist=&querylist=&force=undefined';//图片加载地址
	</script>
</body>

6.Math.random( )应用
Math.random( )：取随机数【随机数的区间[0,1)】
运算：
24 * [0 ,1) = > [0,24)
36 - 12 = 24 ==>[12,36)

<script>
	var num = Math.random()*100;
	if(num <= 1){
		console.log('一等奖');
	}else if(num <= 2){
		console.log('二等奖');
	}else if(num <= 3){
		console.log('三等奖');
	}else{
		console.log('谢谢惠顾');
	}
</script>

7.文档碎片–虚拟DOM
虚拟DOM
操作获取修改【性能】

//文档碎片
<body>
	<ul id='wrapper'></ul>
	<script>
		var oF = document.createDocumentFragment();
		var oUl = document.getElementById('wrapper');
		for(var i = 0; i < 10; i ++){
			var newLi = document.createElement('li');
			newLi.innerText = i + '';
			oF.appendChild(newLi);
		}
			oUl.appendChild(oF);
	</script>
</body>


<body>
	<ul id='wrapper'></ul>
	<script>
		var htmlStr = '';
		var oUl = document.getElementById('wrapper');
		for(var i = 0; i < 10; i ++){
			htmlStr +='<li>' + i + '</li>';
		}
			oUl.innerHTML = htmlStr;
	</script>
</body>

8.封装byClassName`

<body>
	<div class="wrapper">
		<p class = '  demo   box   active'>
			<span class='demo   active  '></span>
			<span class=' demo   '></span>
		</p>
		<p class= '  box   demo  '>
			<span class = '   demo   '></span>
		</p>
	</div>
	<script>
	//getElementsByClassName  Document  Element
	//兼容性
		Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName=document.getElementsByClassName || function(_className){
		//_className参数   
		//外界调用形式：1.document.getElementsByClassName('')  2.oDIV.getElementsByClassName('')
		//获取document下面的所有标签
		// *通配符  所有的标签都会被获取
			var allDomArray = document.getElementsByTagName('*');
			var lastDomArray = [];//给获取的demo一个存储空间
			//首先，把标签里的空格先干掉,多少的空格都变成一个空格 
			function trimSpace(strClass){
             //空格：\s  匹配连续多个时： \s+  全局：g   【正则表达式】
            	var reg = /\s+/g
                 //替换   (reg匹配到的内容,' ') ' '：一个空格
                var newStrClass = strClass.replace(reg,' ');
                return newStrClass;
                }
                    //把allDomArray里面所有的className都拿出来
                    //可以用forEach()
                for(var i = 0;i < allDomArray.length;i ++){
                 //console.log(allDomArray[i],allDomArray[i].className);获取所有的demo
				//allDomArray[i].className.indexOf('demo');把所有含有demo的标签拿出来，但会出现demodemo的情况，而我们要的是独立的demo
                var lastStrClass = trimSpace(allDomArray[i].className).trim();
                //.trim()使得代码变得规整
                var classArray = lastStrClass.split(' ');
              	//split()拆分   demo   box   active ---> ["demo", "box", "active"]
                for(var j = 0; j < classArray.length; j++){
                   if(classArray[j] ==_className){
                        lastDomArray.push(allDomArray[i]);
                        break;
                            }
                        }
                    }	
                    return lastDomArray;
                }
                console.log(document.getElementsByClassName('demo'));
	</script>
</body>

9.断点调试
断点：debugger

<ul id ='wrapper'>
	<li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
<ul>
<script>
 	//若出现错误：F12 --->  查看 Sources  然后进行调试
    var oLiArray = document.getElementsByTagName('li');
    //给li里的数都加1
    for(var i = 0; i <oLiArray.length; i++){
    //进行调试时，也可以用console
    	console.log(oLiArray[i],i);
     	oLiArray[i].innerText = parseInt(oLiArray[i].innerText) + 1;
    }
</script>

outside-R

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
js常用知识点（必会）

浏览器的基本组成1.用户界面2.浏览器引擎3.渲染引擎4.网络5.UI后端6.Js引擎7.数据存储<script> //1.url(ip地址【网络部分】资源定位器) //2.tcp 【建立连接三次挥手】 //3.js html css img //4.js时间线 //5.渲染过程【渲染引擎】 //6.tcp【四次挥手】</script...
复制链接

扫一扫