【前端狂虐系列】近期前端开发小结

作为一个写后台Java比较多的人,最近有开发前端的需求:切换聊天对象,聊天界面的内容也要随之切换。。目前初具成效,然而也是心酸。。。。。。。。用这个小笔记来记录下一些印象比较深刻的点吧,以供参考~

 

1. top.或parent.

如果一个页面B是被A页面所包围,并且B页面有自己的js,如果A页面的js想获取B页面的dom元素,需要使用

top.$("你的选择器")或parent.$("你的选择器")去获得。但需注意,A页面的js无法直接调用B页面的js函数

——常见于一个iframe嵌入父页面中

父页面想要获取子页面如iframe里面的元素:$(window.frames[0].document.getElementById("元素id"))

iframe想获取所在父页面的js的全局变量,可用parent.js变量名获取;想获取父页面的js的js方法,可用parent.js函数名获取即可。

 

2.情景需求是切换右侧的聊天对象,左侧的聊天面板的显示也随着切换(类似QQ聊天窗口)

默认左侧会有一个聊天窗口的div,当选中右侧聊天对象时,就clone出一个div,并且修改其id属性,显示当前div并隐藏其他div:

var currMsg = top.$("#record").val();

if((!$("#" + msg))) {

$contentDiv = top.$("#message").clone();

$contentDiv.attr("id", msg);

top.$(".dialogue-record").append($contentDiv);

};

top.$("#"+msg+"").siblings().hide();

top.$("#"+msg+"").show();

 

1)其中$("#message")是默认存在的聊天窗口div。currMsg用来获取当前选中的聊天对象的id, if(!$("#" + msg))目的在于控制无限制的clone并append。

 

2)siblings用于获取兄弟节点(当然不包含自己),也可以用$("父元素的选择器").not("你的选择器")来排除,只不过性能上不是很理想

3)clone是用于复制一个jquery对象,后续可以通过attr去修改属性;注意addClass

 

3.addClass无效?

我给一个div增加一个onclick属性,如:onclick = "switch(this)", this可以获取到当前onclick的dom对象。然后在switch里用addClass方法去增加样式,这样是生效的。

但是当你其他地方也想触发switch方法,并且不是通过onclick去触发的,如果你想当然的通过获取到目标dom对象的html字符串如

var e = "<div>...</div>"然后当作参数传递给switch,发现addClass并不会生效!原因是switch方法的参数是只能获取到onclick事件的上下文(在对哪个dom对象onclick),

所以你把目标dom对象的html字符串传递过去是无效的,解决办法是加一个属性(id, data-name等)在dom对象上:

var e = '<div class="serviceInfo-list" name="on" data-username="'+msg.userName+'" οnclick="switch(\''+msg.userName+'\')">'; (注意这里对单引号的转义。。)

用该属性值去代替this传递参数,然后在switch方法里通过选择器来获取即可~

var $target = $("div[data-username='" + msg + "']")

注:addClass和removeClass的操作只适合已经被append到dom上的元素~

 

4.js函数没有重载

当js函数同名,但参数声明不一样时,根据加载顺序会覆盖之前同名的函数,如:

test("hello", "morning");

 

function test(a) {

console.log("a:" + a);

}

 

function test(a, b) {

console.log("a:" + a + ", b:" + b);

}

结果:a:hello, b:morning

说明在调用test函数时,以test(a, b)为准~

 

而这样:

test("hello", "morning");

 

function test(a, b) {

console.log("a:" + a + ", b:" + b);

}

 

function test(a) {

console.log("a:" + a);

}

结果:a:hello

说明在调用test函数时,以test(a)为准~

 

对于情形二,可能不会有test(a),但是定义一个参数较多的js函数,而调用这个js函数的时候,有的地方只传递部分参数(这种情况之前没怎么遇到,但是是存在的),

有的地方传递全部参数,需注意参数的对应是按顺序来的。。

 

5.json结构的数据

类似Java的map,当之前没有这个key时,相当于新增一个键值对;当之前存在这个key时,相当于修改这个键值对的value。

 

6.循环过多页面卡死

避免在循环中过多使用全局变量,注意全局变量的管理(类似Java的全局变量和局部变量,js的局部变量的“生命周期”是代码段,而全局变量是一直存在直到你刷新/关闭页面的)

 

7.删除json的某个键值对

直接用delete json.key(非面向对象型语法)

 

8.用jquery选择器判断html元素是否存在

用jquery的选择器if ($("你的选择器"))是无法判断的,因为即使元素不存在,$("你的选择器")是一定会返回值的,要用$("你的选择器")==0来判断(为0表示不存在,不为0表示存在~)

<div id="test"></div>

 js:

$(function() {
	console.log($("#test2"));
	console.log($("#test2").length);
	
	console.log($("#test"));
	console.log($("#test").length);
});

 id为test2的dom是不存在的,打印结果:

init {context: document, selector: "#test2"}

0

test.jsp:13 [div#test, context: document, selector: "#test"]

1

内容概要:《2024年中国城市低空经济发展指数报告》由36氪研究院发布,指出低空经济作为新质生产力的代表,已成为中国经济新的增长点。报告从发展环境、资金投入、创新能力、基础支撑和发展成效五个维度构建了综合指数评价体系,评估了全国重点城市的低空经济发展状况。北京和深圳在总指数中名列前茅,分别以91.26和84.53的得分领先,展现出强大的资金投入、创新能力和基础支撑。低空经济主要涉及无人机、eVTOL(电动垂直起降飞行器)和直升机等产品,广泛应用于农业、物流、交通、应急救援等领域。政策支持、市场需求和技术进步共同推动了低空经济的快速发展,预计到2026年市场规模将突破万亿元。 适用人群:对低空经济发展感兴趣的政策制定者、投资者、企业和研究人员。 使用场景及目标:①了解低空经济的定义、分类和发展驱动力;②掌握低空经济的主要应用场景和市场规模预测;③评估各城市在低空经济发展中的表现和潜力;④为政策制定、投资决策和企业发展提供参考依据。 其他说明:报告强调了政策监管、产业生态建设和区域融合错位的重要性,提出了加强法律法规建设、人才储备和基础设施建设等建议。低空经济正加速向网络化、智能化、规模化和集聚化方向发展,各地应找准自身比较优势,实现差异化发展。
数据集一个高质量的医学图像数据集,专门用于脑肿瘤的检测和分类研究以下是关于这个数据集的详细介绍:该数据集包含5249张脑部MRI图像,分为训练集和验证集。每张图像都标注了边界框(Bounding Boxes),并按照脑肿瘤的类型分为四个类别:胶质瘤(Glioma)、脑膜瘤(Meningioma)、无肿瘤(No Tumor)和垂体瘤(Pituitary)。这些图像涵盖了不同的MRI扫描角度,包括矢状面、轴面和冠状面,能够全面覆盖脑部解剖结构,为模型训练提供了丰富多样的数据基础。高质量标注:边界框是通过LabelImg工具手动标注的,标注过程严谨,确保了标注的准确性和可靠性。多角度覆盖:图像从不同的MRI扫描角度拍摄,包括矢状面、轴面和冠状面,能够全面覆盖脑部解剖结构。数据清洗与筛选:数据集在创建过程中经过了彻底的清洗,去除了噪声、错误标注和质量不佳的图像,保证了数据的高质量。该数据集非常适合用于训练和验证深度学习模型,以实现脑肿瘤的检测和分类。它为开发医学图像处理中的计算机视觉应用提供了坚实的基础,能够帮助研究人员和开发人员构建更准确、更可靠的脑肿瘤诊断系统。这个数据集为脑肿瘤检测和分类的研究提供了宝贵的资源,能够帮助研究人员开发出更准确、更高效的诊断工具,从而为脑肿瘤患者的早期诊断和治疗规划提供支持。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值