【工作积累】前端开发的一些总结

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 以此类推