常用的jQuery代码段

效率在总结中提升！

1、js实现placeholder效果

Html代码：

1. <form name="testForm" action="" method="">
   
2.                   <input type="text" name="hotGoods" class="text1">
   
3.           </form>

复制代码

Js代码：

1. <script type="text/javascript">
   
2.       $(document).ready(function() {
   
3.         $("input.text1").val('请输入您要搜索的内容').css('color','#ccc');
   
4.         textFill($('input.text1'));
   
5.       });
   
6.       function textFill(input){
   
7.         var originalvalue = input.val(); //请输入您要搜索的内容
   
8.         // console.log(originalvalue);
   
9.         input.focus( function(){
   
10.           if( $.trim(input.val()) == originalvalue ){ 
    
11.                   input.css('color', '#333');
    
12.                   input.val(''); 
    
13.           }
    
14.         });
    
15.         input.blur( function(){
    
16.           if( $.trim(input.val()) == '' ){ 
    
17.                   input.css('color', '#ccc');
    
18.                   input.val(originalvalue); 
    
19.           }
    
20.         });
    
21.       }
    
22.           </script>

复制代码

2、预加载图片--此代码主要用在页面图片较多的情况下，阻止页面一次性加载所有图片
代码如下：

1. <script type="text/javascript">
   
2.                         $(document).ready(function() {
   
3.                     jQuery.preloadImages = function(){
   
4.                             // console.log(arguments); //["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg"]
   
5.                             // console.log(arguments.length); //4
   
6.                         for(var i = 0; i<arguments.length; i++){
   
7.                                 console.log($('<img>').attr('src', arguments[i]));
   
8.                                 $('.img_box').append($('<img>').attr('src', arguments[i]));
   
9.                         }
   
10.             }
    
11.             // 使用
    
12.             $.preloadImages("images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg");
    
13.           });
    
14.                 </script>

复制代码

3、页面样式切换

Html代码：

1. <ul class="styleSwitch">
   
2.                         <li><a href="#" rel="style1.css">样式一</a></li>
   
3.                         <li><a href="#" rel="style2.css">样式二</a></li>
   
4.                         <li><a href="#" rel="style3.css">样式三</a></li>
   
5.                 </ul>

复制代码

Js代码：

1. <script type="text/javascript">
   
2.                         $(function(){
   
3.                                 $('.styleSwitch li a').click(function(){
   
4.                                         $('link[rel="stylesheet"]').attr('href','css/'+$(this).attr('rel'));
   
5.                                 })
   
6.                         })

复制代码

4、返回顶部按钮

Html代码:

1. <a href="javascript:void;" class="top">回顶部</a>

复制代码

Js代码：

1. $('a.top').click(function () {
   
2.   $(document.body).animate({scrollTop: 0}, 800);
   
3.   return false;
   
4. });

复制代码

5、获得鼠标当前的X、Y值
代码如下：

1. <script type="text/javascript">
   
2.                         $(function(){
   
3.                                 $(document).mousemove(function(e){
   
4.                                         $('.xy').html('当前鼠标坐标：(' + e.pageX + ',' +e.pageY +')');
   
5.                                 });
   
6.                         })
   
7.                 </script>

复制代码

6、自动修复破损图片
如果在你的网站上发现了破碎的图片链接，你可以用一个不易被替换的图像来代替它们
代码如下：

1. $('img').on('error', function () {
   
2.   $(this).prop('src', 'img/broken.png');
   
3. });

复制代码

即使你的网站没有破碎的图像链接，添加这段代码也没有任何害处。

7、鼠标悬停（hover）切换class属性
代码如下：

1. $('.btn').hover(function () { 
   
2.   $(this).[color=DarkOrange]toggleClass[/color]('hover'); 
   
3. });

复制代码

注：直接使用CSS实现该效果可能是更好的解决方案，但你仍然有必要知道该方法

8、禁用input字段
代码如下：

1. 有时你可能需要禁用表单的 submit 按钮或者某个 input 字段，直到用户执行了某些操作（例如，检查“已阅读条款”复选框）。可以添加 disabled 属性，直到你想启用它时：
   
2. $('input[type="submit"]').prop('disabled', true);
   
3. 你要做的就是执行 removeAttr 方法，并把要移除的属性作为参数传入：
   
4. $('input[type="submit"]').removeAttr('disabled');

复制代码

9、验证元素是否为空
代码如下：

1. $(document).ready(function() {
   
2.   if ($('#id').html()) {
   
3.    // do something
   
4.    }
   
5. });

复制代码

10、使元素居于屏幕中间位置
Html代码：

1. <div class="center" style="width:200px;height:200px;background:#ccc;">我现在在屏幕的中间位置哦！</div>

复制代码

Js代码：

1. <script type="text/javascript">
   
2.                         $(function(){
   
3.                                 jQuery.fn.center = function(){
   
4.                                         this.css('position','absolute');
   
5.                                         this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
   
6.                     this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
   
7.                     return this;
   
8.                                 }
   
9. 
   
10.                                 $('.center').center();
    
11.                         })
    
12.                 </script>

复制代码

注：此代码可用于页面弹出框的位置控制

11、引用谷歌主机上的jQuery类库（也可以用百度CDN）
代码如下：
方法一：

1. <script src="http://www.google.com/jsapi"></script>
   
2. <script type=text/javascript>
   
3. google.load("jquery", "1.2.6");
   
4. google.setOnLoadCallback(function() {
   
5.     // do something
   
6. });
   
7. </script>
   
8. <script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

复制代码

方法二：（更快更有效）

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

复制代码

12、与其他Javascript类库冲突解决方案
代码如下：

1. $(document).ready(function() {
   
2.    var $jq = jQuery.noConflict();
   
3.    $jq('#id').show();
   
4. });

复制代码