【工作积累】前端开发的一些总结
1）关于下面代码的执行顺序：
如果是加载页面时，通过ajax请求后台来加载数据。我们需要把$.ajax放在$(function(){...})中, 但如果$(function(){...})中还有其他内容，需注意其执行顺序，如：
$(function() {
alert("aaa");
$.ajax({
//ajax的一些代码
});
alert("bbbb");
});
执行结果会是：弹出aaa-->弹出bbb-->执行$.ajax渲染。 所以当需要在$.ajax渲染成功之后，再执行某些内容。则需要把这些内容放在$.ajax的success回调之中，而不要放到$.ajax
之后（比如alert("bbb")的位置）。
2）子元素触发事件也会让父元素触发事件，如何阻止？
<a href="javascript:f1()"><div>点我</div><input id="btn" type="button" value="点击" onclick="f2()" /></a>
对应的·f1 f2的js函数如下：
function f1() {
alert("我是父元素");
}
function f2() {
alert("我是子元素button");
}
父元素为a，子元素为button。当点击a时，会弹出“我是父元素”，点击button时，会依次弹出“我是子元素button”和“我是父元素”，这是不合理的，所以我们需要阻止事件冒泡（即阻止
触发父元素）:
$(function() {
$("#btn").bind("click", function(e){
//e.stopPropagation();
return false;
});
});
这样，即可防止点击Button时，其父元素的事件也被触发。 注：用e.stopPropagation();无效，return false是关键； bind的是click而非onclick
3）<font></font>可用于包含一些我们真正需要的文本信息。如果一个列里的内容包括说明和数据，如 年纪：23 我们则需要把23放在font中，以便以后取的时候，可以快速通过选择器
font快速选择到，而不是通过substring去截取，这样很容易出错；
4）如何获取一个table中的值，用json或者Array保存起来（以一个4*1的表格为例）？
<table name='info' > <tr><td class='ip_name'>xxxx</td></tr> <tr><td>说明:<font>yyyyy</font></td></tr> <tr ><td><font>zzzzz</font></td></tr> <tr><td>类型:<font>hhhhh</font></td></tr> </table>
用each函数遍历每行中每列的内容，
var json_str = new Array();
$table.find("font").each(function() {
val = $(this).text();//获取值
if(num_i == 1){
json_str.xxxx = val;
}else if(num_i == 2){
json_str.yyyy = val;
}else if(num_i == 3){
json_str.zzzz = val;
}else if(num_i == 4){
json_str.hhhhh = val;
}
num_i++;
});
类似的情形，还可以获取多行多列表里面，某一行的内容。
5）indexOf函数的使用——尽量减少与后台的交互
前台搜索情况，如果不是组合查询（多条件查询），可以不用走后台，用indexOf 函数；判断字段唯一性，可以获取已有字段的字符串，形如"id1, id2.id3, ……"，判断用户新输入的
是否在该字符串中。也可以用indexOf函数
6）小问题：checkbox的onclick函数不触发？检查该函数命名是否与关键字重合？
可以用<a>把<table>包围起来： <a><table>...</table></a> 让整个table变成可点击的。
控制$div显示在body中间：（这个常用来做弹窗效果。）
var top = ($(window).height() - $divName.height())/2;
var left = ($(window).width() - $divName.width())/2;
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
$div.css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();
7）window.open与window.location.href区别
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
location.href 属性返回当前页面的 URL。并且该url可以是某个action的url，在做excel的导出时，可以用到。
8）如何用jquery获取多选框选中的值？
测试页面：
<label>多选框测试</label> <input name="checkbox" type="checkbox" value="value1" /> <input name="checkbox" type="checkbox" value="value2" /> <input name="checkbox" type="checkbox" value="value3" /> <input name="checkbox" type="checkbox" value="value4" /> <input type="button" value="多选按钮测试" onclick="submit()" />
测试js:
function submit() {
$checkbox = $("input[name='checkbox']:checked");//这里的这种选择器是关键
alert($checkbox.length);
if($checkbox) {//表示有选中的多选框
for(var i=0; i<$checkbox.length; i++) {
alert($checkbox[i].value);
}
}
}
测试：当全不选时，弹出0（选中的数组的长度）。 当选中第一、三时，依次弹出：2 value1 value3;当选中第二、三、四时，依次弹出：3 value1 value3 value4 以此类推