jQuery实用代码杂记(21-35)

21. 验证元素是否为空

This will allow you to check if an element is empty. 

$(document).ready(function() { 
  if ($('#id').html()) { 
   // do something 
   } 
});

22. 替换元素

$(document).ready(function() { 
   $('#id').replaceWith(' 
<DIV>I have been replaced</DIV> 
'); 
});

23. jQuery延时加载功能

$(document).ready(function() { 
   window.setTimeout(function() { 
     // do something 
   }, 1000); 
});

24. 移除单词功能

$(document).ready(function() { 
   var el = $('#id'); 
   el.html(el.html().replace(/word/ig, "")); 
});

25. 验证元素是否存在于jquery对象集合中

$(document).ready(function() { 
   if ($('#id').length) { 
  // do something 
  } 
});

26. 使整个DIV可点击

$(document).ready(function() { 
    $("div").click(function(){ 
      //get the url from href attribute and launch the url 
      window.location=$(this).find("a").attr("href"); return false; 
    }); 
 
}); 

// how to use 
<DIV><A href="index.html">home</A></DIV>

27. ID与Class之间转换

当改变Window大小时，在ID与Class之间切换

$(document).ready(function() { 
   function checkWindowSize() { 
    if ( $(window).width() > 1200 ) { 
        $('body').addClass('large'); 
    } 
    else { 
        $('body').removeClass('large'); 
    } 
   } 
$(window).resize(checkWindowSize); 
});

28. 克隆对象

$(document).ready(function() { 
   var cloned = $('#id').clone(); 
}); 
// how to use 
<DIV id=id></DIV>

29. 使元素居屏幕中间位置

$(document).ready(function() { 
  jQuery.fn.center = function () { 
      this.css("position","absolute"); 
      this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); 
      this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); 
      return this; 
  } 
  $("#id").center(); 
});

30. 写自己的选择器

$(document).ready(function() { 
   $.extend($.expr[':'], { 
       moreThen1000px: function(a) { 
           return $(a).width() > 1000; 
      } 
   }); 
  $('.box:moreThen1000px').click(function() { 
      // creating a simple js alert box 
      alert('The element that you have clicked is over 1000 pixels wide'); 
  }); 
});

31. 统计元素个数

$(document).ready(function() { 
   $("p").size(); 
});

32. 使用自己的 Bullets

$(document).ready(function() { 
   $("ul").addClass("Replaced"); 
   $("ul > li").prepend("‒ "); 
}); 

// how to use 
ul.Replaced { list-style : none; }

34. 禁用Jquery（动画）效果

$(document).ready(function() { 
    jQuery.fx.off = true; 
});

35. 与其他Javascript类库冲突解决方案

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