作为一个写后台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