标签：
1.表单文本框的focus
1 va($(‘input[type=text]‘)); 2 function va(a) { 3 for(var i=0;i < a.length; i++){ 4 var $txt= a.eq(i); 5 $txt.focus(function(){ 6 if($(this).val() == this.defaultValue){ 7 $(this).val(‘‘); 8 } 9 }); 10 $txt.blur(function(){ 11 if($(this).val() ==‘‘){ 12 $(this).val(this.defaultValue); 13 } 14 }); 15 } 16 }
此代码用于当表单默认获取用户数据时，比如微信端自动获取姓名，那么就需要增加此段，提升用户体验。如果表单的默认值只是提示功能，使用placeholder即可。
2.实时显示textarea的已写字数
1 wordsNum(); 2 $(document).bind(‘keyup change‘,function(){ 3 wordsNum(); 4 }); 5 function wordsNum(){ 6 var texta = $(".texta textarea"); 7 for(var i=0; i < texta.length; i++){ 8 var text = texta.eq(i).val(); 9 var counter = text.length; 10 $(".texta .var").eq(i).text(counter); 11 } 12 }
此代码多用于textarea，此前只针对该页面单个写，没有考虑到后台可能还需要增加，因此加上for循环遍历。要考虑到后台可能有的操作（数量，移动，顺序等），使代码段更友好，也是我慢慢要提高的。
3.多行省略号
1 //多行省略号 2 $(".words").each(function(i){ 3 var divH = $(this).height(); //容器设置height 4 var $p = $("p", $(this)).eq(0); 5 while ($p.outerHeight() > divH) { 6 $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...")); 7 }; 8 });
多行省略的使用频率极高给指定文本外裹div.words, 然后设置.words的高度，即可实现。单行省略可以通过css直接实现， overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 而多行代码其实也有 display: -webkit-box; -webkit-line-clamp: 3; overflow: hidden; 其中3代表显示3行，最后一行显示...，但火狐是不支持的。
4.下拉框控制
1 selectVal(); 2 $(‘select‘).change(function(){ 3 selectVal(); 4 }); 5 function selectVal(){ 6 for(var i=0;i < $(‘select‘).length; i++){ 7 var $sel = $(‘select‘).eq(i); 8 $sel.siblings(‘.val‘).text($sel.find(‘option[value=‘ + $sel.val() + ‘]‘).text()); 9 } 10 }
下拉框控制在表单中很常见，因为CSS很多样式对select不起作用，所以通常会用一个容器来存储select的值，然后将select隐藏掉。这里使用的是div.val。
5.控制文本框的长度
1 iWidth(); 2 $(window).resize(function(){ 3 iWidth(); 4 }); 5 function iWidth(){ 6 var lw = $(‘.addr label‘).width(); 7 var il = $(‘.addr input‘).css(‘left‘); 8 var iw = $(‘.position img‘).width(); 9 var iWidth = lw - parseFloat(il) -iw - 5; 10 for(var i = 0; i <$(‘input‘).length; i++){ 11 $(‘input‘).eq(i).css(‘width‘, iWidth + ‘px‘); 12 } 13 }
此代码使用频率很少，主要用于有不固定元素时，或者使用rem自适应布局。这段代码并没有什么亮点，也不够成熟，只是想说明一个最近碰到的问题。即留点多余空间，防止有些手机端会在处理数据时进行进位，造成布局的错位。
6.设置头像居中
1 $(function(){ 2 function iconPosition() { 3 var userIcon = $(‘.userIcon‘); 4 var iconLeft = ($(window).width() - userIcon.width())/2; 5 userIcon.css(‘left‘,iconLeft + ‘px‘); 6 } 7 iconPosition(); 8 $(window).resize(function() { 9 iconPosition() 10 }); 11 });
这个是在第一次使用rem布局时，碰到背景宽度不定时，无奈之下使用的。现在想来，那时惯性思维，如今完全可以用css实现了。
使用position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);
结语：
这是一些小的代码段，其他一些插件的使用，或者大的功能块，单独整理Demo. 现在看以前的很多代码，甚至包括一个月之前的代码，都觉得有很多需要优化的地方，也许这也是一种进步了。在你没有更优化的方案时，即使你现在的代码累赘臃肿，但是能实现再想优化。
未来一段时间，努力的方向：
1.拥有整体构建的思维，对应的东西统一起来，代码模块化，同一个模块，那么就尽量做到不写两遍。
2.静下心来看书，《Javascript DOM 编程艺术》《Javascript权威指南》《javascript高级程序设计》三本书4月份入手，然后现在连最薄的一半都没看完，也许该想一下肉疼的书钱！
标签：
原文地址：http://www.cnblogs.com/shifan/p/5655539.html
