前端知识--JavaScript常用总结篇

最新推荐文章于 2024-09-19 17:56:32 发布

bggl

最新推荐文章于 2024-09-19 17:56:32 发布

阅读量124

点赞数

分类专栏：前端技术文章标签： javascript html

本文链接：https://blog.csdn.net/qq_38749759/article/details/105169375

版权

前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

总结：通俗的讲像是一些逻辑语言，使原本固定网页，可以按照特点的编写逻辑,“动起来”（不依赖后台实现用户交换，提高用户体验感）

基本数据类型

String
Number
Boolean
Undefined
Null

JavaScript中的运算符

>
<
>=
<=
!=
==	比较字面值
===	比较类型和内容

js 函数的语法结构

function 函数名(参数列表){
	方法体
}

// 函数的调用
函数名(参数1,参数2,参数3...);

弹窗函数

alert

弹出一个提示，没有返回值

confirm

提示并获取用户的选择
只用是或者否两个选项，返回true或者false

prompt

弹出一个对话框，用户可以写入内容，返回用户输入的内容字符串

定时器和计时器(计时的单位毫秒)

定时器

定时执行一个函数
- timer=setinterval（函数名，时间间隔）====》开始计时,按照一定的时间间隔，重复调用函数
- clearInterval(timer);=====》停止计时，清空时间

计时器

设置一个时间，到阈(yu四声 )值后执行函数
- setTimeout（函数，时间t ）====》函数延时：t

<script type="text/javascript">
			var a = 0;
			function start(){
				// 创建定时器
				timer = setInterval(func,1000);
			}
			function func(){
				console.log(a);
				a++;
			}
			function stop(){
				// 清楚定时器
				clearInterval(timer);
				console.log(timer);
			}
			
			function fn(){
				console.log("倒计时开始");
				setTimeout(fun01,2000);
			}
			
			function fun01(){
				console.log("倒计时结束");
			
		</script>
	</head>
	<body>
		<button type="button" onclick="start()">开始</button>
		<button type="button" onclick="stop()">结束</button>
		<button type="button" onclick="fn()">倒计时</button>
	</body>

数组排序

格式
- 数组名=数组名.sort（ function (a,b){ return a-b ; // 根据a,b差值判断升降序 } );
- 升降序判读： false为判断依据[ a-b<0] =》a<b=》第一个数《第二个数=》升序

var num=[12,31,42,5];
num=num.sort(function(a,b){
	return  a-b;//升序
});

JavaScript中的正则

正则–验证的规则

创建的方式

var rex = /1[3-9][0-9]{9}/;
var rex = new RegExp("[a-z]{6,}");

使用的方式

var a = "18937012800";
var rex = /1[3-9][0-9]{9}/;
var result = rex.test(a);
console.log(result);

DOM对象

查找HTML元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到HTML 元素

id找到HTML元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

本例查找 id=“intro” 元素：

var x=document.getElementById("intro");

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

如果未找到该元素，则 x 将包含 null。

标签名找到 HTML 元素

本例查找 id=“main” 的元素，然后查找 id=“main” 元素中的所有

元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

类名找到HTML 元素

本例通过 getElementsByClassName 函数来查找 class=“intro” 的元素：

收集到的结果是集合

var x=document.getElementsByClassName("intro");

name找到HTML 元素

本例通过 getElementsByName 函数来查找 name=“intro” 的元素：

收集到的结果是集合

var x=document.getElementsByName("intro");

改变HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

var b=DOM 对象方式找到对象
//b.innerHtml=在html中加内容
//b.innerText;
//b.style='' 改变对象的样式

阐述DOM是什么，怎么向页面动态添加li标签

DOM： document Object Model 文档对象模型

向页面动态添加li标签–document;

<ul id="uls">
    <il id="li">hihihihi</il>
</ul>
<script>
var uls=document.getElementById("uls");
    //1.创建文本
    var tnode=document.createTextNode("bggl");
    //2.创建对象
    var lt=document.createElement("<li>");
    //3.产生关联
    lt.appendChild(tnode);
    //4.动态添加
    uls.appendChild(lt);
</script>

预防div 穿透

box1.onclick =function(){
			console.log("box1");
			event.stopPropagation();//防止div穿透
}

简述servlet访问流程

请列举转发和重定向的区别，并分别解释如何使用转发还是重定向

转发原理图
重定向原理图

区别	转发forward()	重定向sendRedirect()
定义	由服务端发起的跳转	由客户端发起的跳转
根目录	包含项目访问地址	不包含项目访问地址
地址栏	不发生变化	会发生变化
哪里跳转	服务端进行跳转	客户端/web进行跳转
请求域中数据	保留	不保留

原生js 发Ajax请求

Ajax结合json的使用格式

var xhr = new XMLHttpRequest();//创建AJAx对象
xhr.open("get/post","url",true);//开启一个AJAx请求服务，true:为异步
/*如何用post传数据加上这句
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
*/
xhr.send("data");//发送数据
xhr.onreadystatechange=function (){//状态监听事件--
       
	if(xhr.readyState==4&&xhr.status==200){//判断状态码readyState 和响应码status 
		var j=xhr.responseText;//获取后台的返回数据
		var jsons=Json.parse(j);//把后台返回数据转成json数据格式
		//遍历接送
	}
		
}