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

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

相关推荐