[经验分享] 了解jQuery技巧来提高你的代码质量(1)

奇

671 主题	1 听众	3247 积分

中级设计师

Rank: 5 Rank: 5

纳金币: 324742
精华: 0

电梯直达

楼主

发表于 2012-1-13 10:24:16 |只看该作者 |倒序浏览

jQuery之所以如此流行并被从大公司到个人博客，几乎每个人都广泛使用，是因为它上手和使用相当简单，而且为我们提供了一些人都不知道的相当棒的特性，下面给大家介绍一些实用的jQuery技巧，希望对您有所帮助。
AD：

51CTO推荐专题： jQuery开发手册
目前jQuery的大多数用户更趋向于使用jQuery插件来解决面临的难题，这通常是明智的选择。但是当插件相对于你的需求有一定缺陷的时候，你也许更应该想办法自己来解决，下面来看看这些实用的jQuery技巧，他们肯定会能够派上用场的！
51CTO编辑推荐阅读：学习jQuery必须知道的几种常用方法
1.测试并提升你的jQuery选择器水平
这个jQuery选择器实验室非常酷，它能在线免费使用，当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段，然后你能尝试预定义使用各种jQuery选择器。如果这还不够你也可以自定义选择器。

2.测试jQuery包装集是否包含某些元素　　
如果你想测试一下某个jQuery包装集中是否包含某些元素，你首先可以尝试使用验证首个元素是否存在：
if($(selector)[0]){...}  // 或者这样  if($(selector).length){...}
来看看这个例子：
//例子.如果你的页面有以下html代码  <ul id="shopping_cart_items"> <li><input class="in_stock" name="item" type="radio" value="Item-X" />Item X</li> <li><input class="unknown" name="item" type="radio" value="Item-Y" />Item Y</li> <li><input class="in_stock" name="item" type="radio" value="Item-Z" />Item Z</li> </ul> <pre escaped="true" lang="javascript">...  //这个if条件将返回true，因为我们有两个  // input域匹配了选择器，所以<statement>代码将会执行  if($('#shopping_cart_items input.in_stock')[0]){<statement>}
3.从jquery.org读取jQuery最新版本
你可以使用这句代码读取jQuery的最新版本的代码文件。
<script src="http://code.jquery.com/jquery-latest.js"></script>
你可以使用这个方法来调用最近版本的jQuery框架，当然，你还可以使用下面这个代码从ajax.googleapis.com调用同样的最新版本jQuery：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
4.存储数据
使用data方法可以避免在DOM中存储数据，有些前端开发er喜欢使用HTML的属性来存储数据：
$('selector').attr('alt', 'data being stored');  //之后可以这样读取数据:  $('selector').attr('alt');
使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的，我们可以使用jQuery的data方法来为页面中的某个元素存储数据：
$('selector').data('参数名', '要存储的数据');  //之后这样取得数据:  $('selector').data('参数');
这个data方法能让你自己明明数据的参数，更语义更灵活，你可以在页面上的任何元素存储数据信息。这个方法的经典应用是给input域一个默认值，然后在聚焦的时候清空它:
<form id="testform">  <input type="text" class="clear" value="Always cleared" />  <input type="text" class="clear once" value="Cleared only once" />  <input type="text" value="Normal text" /> </form>
JavaSript部分:
$(function() { //取出有clear类的input域 //(注: "clear once" 是两个class clear 和 once) $('#testform input.clear').each(function(){    //使用data方法存储数据    $(this).data( "txt", $.trim($(this).val()) ); }).focus(function(){    // 获得焦点时判断域内的值是否和默认值相同，如果相同则清空    if ( $.trim($(this).val()) === $(this).data("txt") ) {    $(this).val("");    } }).blur(function(){    // 为有class clear的域添加blur时间来恢复默认值    // 但如果class是once则忽略    if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {    //Restore saved data    $(this).val( $(this).data("txt") );    } });  });

纳金网：http://www.narkii.com