Web前端开发笔记：JS中经历的小问题（此片会不断更新~）

原创已于 2022-04-27 18:32:38 修改 · 301 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #jquery

于 2022-03-17 15:43:50 首次发布

Web前端开发——JS拓展专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何在JavaScript中删除DOM节点，获取标准时间格式、radio选框的值，操作滚动高度以及使用jQuery管理cookies。还包括消息栏动画和前后端数据转换技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.删除节点本身，可以通过获取父节点，然后删除子节点的方式来嵌套：

7.前台object类型转至后台python列表类型：

1.删除节点本身，可以通过获取父节点，然后删除子节点的方式来嵌套：

newbutton.addEventListener('click', function () {
                                //通过嵌套来删除自身的方式
                                this.parentElement.parentElement.parentElement.removeChild(this.parentElement.parentElement);
                            })

上面就是一个典例。

2.获取标准时间：

/*
	获取标准格式时间
	入参：date 
	格式：new Date()
	出参：xx-xx-xx xx:xx:xx
*/
function getdate(date) {
	var year = date.getFullYear() - 1;
	var month =
		date.getMonth() + 1 < 10 ?
		"0" + (date.getMonth() + 1) :
		date.getMonth() + 1;
	var day =
		date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
	var hours =
		date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
	var minutes =
		date.getMinutes() < 10 ?
		"0" + date.getMinutes() :
		date.getMinutes();
	var seconds =
		date.getSeconds() < 10 ?
		"0" + date.getSeconds() :
		date.getSeconds();
	let time =
		year +
		"-" +
		month +
		"-" +
		day +
		" " +
		hours +
		":" +
		minutes +
		":" +
		seconds;
	return time 
}

3.获取radio单选框的值：

$('input[name="sexChoose"]:checked').val()

其中，name的值是选定某一个单选框，而checked返回选中状态，而val就是选中状态下的单选框值。

4.设置高度即获取屏幕滚动的相关内容：

本段参考，原文来自：Js/Jquery获取网页屏幕可见区域高度 - 王洪宝 - 博客园获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。部分jquery函数获取方法 alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度alhttps://www.cnblogs.com/whb17bcdq/p/6513766.html

获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

document.body.clientWidth ==> 网页可见区域宽
document.body.clientHeight ==> 网页可见区域高
document.body.offsetWidth ==> 网页可见区域宽(包括边线的宽)
document.body.offsetHeight ==> 网页可见区域高(包括边线的高)
document.body.scrollWidth ==> 网页正文全文宽document.body.scrollHeight ==> 网页正文全文高
document.body.scrollTop ==> 网页被卷去的高
document.body.scrollLeft ==> 网页被卷去的左
window.screenTop ==> 网页正文部分上
window.screenLeft ==> 网页正文部分左
window.screen.height ==> 屏幕分辨率的高
window.screen.width ==> 屏幕可用工作区高度
window.screen.availHeight ==> 屏幕可用工作区高度
window.screen.availWidth ==> 屏幕可用工作区宽度

部分jquery函数获取方法：

// 部分jQuery函数
$(window).height() 　              //浏览器时下窗口可视区域高度
$(document).height()　           //浏览器时下窗口文档的高度
$(document.body).height()　　　　　　//浏览器时下窗口文档body的高度
$(document.body).outerHeight(true)　//浏览器时下窗口文档body的总高度 包括border padding margin
$(window).width() 　   //浏览器时下窗口可视区域宽度
$(document).width()   //浏览器时下窗口文档对于象宽度
$(document.body).width()　　　　　　//浏览器时下窗口文档body的高度
$(document.body).outerWidth(true)　//浏览器时下窗口文档body的总宽度 包括border padding

HTML精确定位:  scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:  设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth: 获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:  获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

5.JQ中移除特定cookie的办法：

$.removeCookie('loginstate', {path: '/'});

这里要注意path是指cookie在哪一路径设置的。

6.消息栏跳出显示一段时间后关闭效果：

// 实现消息栏显示动画
function infobarShow(element, Message,changedWidth, disappearWidth, animateTime, showTime) {
    element.css('display', 'inline-block');
    element.text(Message);
    element.stop().animate({'width': changedWidth.toString() + 'px'}, animateTime);
    var time = setInterval(function () {
        element.stop().animate({'width': disappearWidth.toString() + 'px'}, animateTime);
        clearInterval(time);
    }, showTime)
}

此方法为一个例子，非泛用例。

7.前台object类型转至后台python列表类型：

前台JS/JQ代码：
JSON.stringify(dailyDataArray)
后台（Django）：
json.loads（）

8.promise对象导致值在获取promise中值后和promise对象终结时同时回收或销毁的问题：

问题在于当我们返回promise对象并通过async和await进行取承诺操作时，获取承诺的变量，会在promise失效或是终结时，同时销毁。此时我们需要使用深度拷贝，在取得promise的值时，不使用相等，而使用变量深拷贝promise内部值得方法以完成数据不被销毁。