【工作积累】前端开发的一些总结
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 以此类推
相关推荐
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo