思洋互动网站建设学前班

目前jQuery的大多数用户更趋向于使用jQuery插件来解决面临的难题，这通常是明智的选择。但是当插件相对于你的需求有一定缺陷的时候，你也许更应该想办法自己来解决，下面来看看这些实用的jQuery技巧，他们肯定会能够派上用场的！
广州网站建设,网站建设,广州网页设计,广州网站设计

51CTO编辑推荐阅读：学习jQuery必须知道的几种常用方法

1.测试并提升你的jQuery选择器水平

这个jQuery选择器实验室非常酷，它能在线免费使用，当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段，然后你能尝试预定义使用各种jQuery选择器。如果这还不够你也可以自定义选择器。

2.测试jQuery包装集是否包含某些元素　　

如果你想测试一下某个jQuery包装集中是否包含某些元素，你首先可以尝试使用验证首个元素是否存在：

1. if($(selector)[0]){...}  
2. // 或者这样  
3. if($(selector).length){...}  

来看看这个例子：

1. //例子.如果你的页面有以下html代码  
2. <ul id="shopping_cart_items"> 
3.   <li><input class="in_stock" name="item" type="radio" value="Item-X" />Item X</li> 
4.   <li><input class="unknown" name="item" type="radio" value="Item-Y" />Item Y</li> 
5.   <li><input class="in_stock" name="item" type="radio" value="Item-Z" />Item Z</li> 
6. </ul> 
7. <pre escaped="true" lang="javascript">...  
8. //这个if条件将返回true，因为我们有两个  
9. // input域匹配了选择器，所以<statement>代码将会执行  
10. if($('#shopping_cart_items input.in_stock')[0]){<statement>}  

3.从jquery.org读取jQuery最新版本

你可以使用这句代码读取jQuery的最新版本的代码文件。

1. <script src="http://code.jquery.com/jquery-latest.js"></script>
2.   

你可以使用这个方法来调用最近版本的jQuery框架，当然，你还可以使用下面这个代码从ajax.googleapis.com调用同样的最新版本jQuery：

1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" 
2. type="text/javascript"></script>  

4.存储数据

使用data方法可以避免在DOM中存储数据，有些前端开发er喜欢使用HTML的属性来存储数据：

1. $('selector').attr('alt', 'data being stored');  
2. //之后可以这样读取数据:  
3. $('selector').attr('alt');  

使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的，我们可以使用jQuery的data方法来为页面中的某个元素存储数据：

1. $('selector').data('参数名', '要存储的数据');  
2. //之后这样取得数据:  
3. $('selector').data('参数');  

这个data方法能让你自己明明数据的参数，更语义更灵活，你可以在页面上的任何元素存储数据信息。这个方法的经典应用是给input域一个默认值，然后在聚焦的时候清空它:

1.  <form id="testform"> 
2.  <input type="text" class="clear" value="Always cleared" /> 
3.  <input type="text" class="clear once" value="Cleared only once" /> 
4.  <input type="text" value="Normal text" /> 
5. </form>  

JavaSript部分:
广州网站建设,网站建设,广州网页设计,广州网站设计

1. $(function() {  
2.  //取出有clear类的input域  
3.  //(注: "clear once" 是两个class clear 和 once)  
4.  $('#testform input.clear').each(function(){  
5.    //使用data方法存储数据  
6.    $(this).data( "txt", $.trim($(this).val()) );  
7.  }).focus(function(){  
8.    // 获得焦点时判断域内的值是否和默认值相同，如果相同则清空  
9.    if ( $.trim($(this).val()) === $(this).data("txt") ) {  
10.      $(this).val("");  
11.    }  
12.  }).blur(function(){  
13.    // 为有class clear的域添加blur时间来恢复默认值  
14.    // 但如果class是once则忽略  
15.    if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {  
16.      //Restore saved data  
17.      $(this).val( $(this).data("txt") );  
18.    }  
19.  });  
20. });