JS基操整理篇

最新推荐文章于 2024-11-15 19:51:40 发布

bug的搬运工

最新推荐文章于 2024-11-15 19:51:40 发布

阅读量192

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42704356/article/details/105729260

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JS基操整理篇

url传参中文乱码
获取url拼接参数
ajax请求
返回上一页
刷新界面
缓存使用
延时处理
定时器
获取/设置标签属性
.val .text .html
input标签
select标签
js实现点击按钮复制

url传参中文乱码

//对参数编码两次解码两次解决
//编码
encodeURI(encodeURI(dat))
//解码
decodeURI(decodeURI(dat))

获取url拼接参数

function getUrlParam(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造正则表达式对象
	var r = window.location.search.substr(1).match(reg); //匹配目标参数
	if(r != null) return unescape(r[2]);
	return null; //返回参数值
}

ajax请求

$.ajax({
	url:"/tes/add",
	type: "post",
	contentType: "application/x-www-form-urlencoded",
	data: {
		params: val
	},
	dataType: 'json',
	success: function(res) {
		
	},
	error: function() {
		layer.msg('请求服务器失败！！')
	}
});

返回上一页

//都可以
window.history.go(-1);
window.history.back();

刷新界面

location.reload();

缓存使用

//存
localStorage.setItem(key,value);
//取
localStorage.getItem(key);

延时处理

//延时处理一次
setTimeout(function() {
	//do something
	//1秒
}, 1000)

//div等元素延时 delay() 下方链接

delay教程连接

定时器

//每多长时间处理一次
var interval= setInterval(function() {
	//do something
	console.log(1)
	//1秒
}, 1000)
//停止处理
window.clearInterval(interval);


//setTimeout setInterval可一起使用 每一秒干嘛 30秒后停止
var interval= setInterval(function() {
	//do something
	console.log(1)
	//1秒
}, 1000)
//停止处理
setTimeout(function() {
	window.clearInterval(interval);
	//10秒
}, 10000)

获取/设置标签属性

//设置属性
$("#img").attr("src", "www.baidu.com");
//获取属性值
$("#img").attr("src");

.val .text .html

//.val() 有参赋值 无参取值 只能用在表单元素 input textarea select button 
//.html() .text() 有参赋值 无参取值 不能作用于表单元素
//.html()会拿到元素内的包括标签代码的信息 .text()只拿到文本 都会拿到后代元素的信息
<div id="tes">
	<div>22 <span>1</span> </div>
</div>
console.log($('#tes').html()); // <div>22 <span>1</span> </div>
console.log($('#tes').text()); // 22 1
//有参赋值
<div id="tes"> </div>
$('#tes').html('<div> 22 <span>1</span> </div>')
//会变成
//<div id="tes">
//	<div>22 <span>1</span> </div>
//</div>
$('#tes').text('<div> 22 <span>1</span> </div>')
//会变成
//<div id="tes">
//	"<div>22 <span>1</span> </div>"
//</div>

input标签

//禁用
disabled="disabled"
//隐藏边框
style="border: none;"
//禁用提示
autocomplete=off

select标签

//获取选中项显示的值   sele：select标签的id 
$("#sele option:checked").text()
//获取选中项的值
$('#sele').val()

js实现点击按钮复制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div id="text">我是被复制的内容</div>
		<button onclick="copy()">复制</button>
		<input >
	</body>
</html>
<script>
	function copy(){
		var text = document.getElementById("text").innerText;
		
		var inp = document.createElement("input"); // 直接构建input
		inp.value = text; // 设置内容
		document.body.appendChild(inp); // 添加临时实例
		inp.select(); // 选择实例内容
		document.execCommand("Copy"); // 执行复制
		document.body.removeChild(inp); // 删除临时实例
	}
</script>