前段時間釋出了Jquery類庫1.4版本,使用者也越來越多,為了方便大家對Jquery的使用,下面列出了一些Jquery使用技巧。比如有禁止右鍵點選、隱藏搜尋文字框文字、在新視窗中開啟連結、檢測瀏覽器、預載入圖片、頁面樣式切換、所有列等高、動態控制頁面字型大小、獲得滑鼠指標的X值Y值、驗證元素是否為空、替換元素、延遲載入、驗證元素是否存在於Jquery集合中、使DIV可點選、克隆物件、使元素居中、計算元素個數、使用Google主機上的Jquery類庫、禁用Jquery效果、解決Jquery類庫與其他Javascript類庫衝突問題。
具體如下:
1. 禁止右鍵點選
1. $(document).ready(function(){
2. $(document).bind(“contextmenu”,function(e){
3. return false;
4. });
5. });
2. 隱藏搜尋文字框文字
1. $(document).ready(function() {
2. $(“input.text1”).val(“Enter your search text here”);
3. textFill($(`input.text1`));
4. });
5.
6. function textFill(input){ //input focus text function
7. var originalvalue = input.val();
8. input.focus( function(){
9. if( $.trim(input.val()) == originalvalue ){ input.val(“); }
10. });
11. input.blur( function(){
12. if( $.trim(input.val()) == “ ){ input.val(originalvalue); }
13. });
14. }
3. 在新視窗中開啟連結
1. $(document).ready(function() {
2. //Example 1: Every link will open in a new window
3. $(`a[href^=”http://”]`).attr(“target”, “_blank”);
4.
5. //Example 2: Links with the rel=”external” attribute will only open in a new window
6. $(`a[@rel$=`external`]`).click(function(){
7. this.target = “_blank”;
8. });
9. });
10. // how to use
11. <A href=“http://www.opensourcehunter.com” rel=external>open link</A>
4. 檢測瀏覽器
注: 在版本jQuery 1.4中,$.support 替換掉了$.browser 變數。
1. $(document).ready(function() {
2. // Target Firefox 2 and above
3. if ($.browser.mozilla && $.browser.version >= “1.8” ){
4. // do something
5. }
6.
7. // Target Safari
8. if( $.browser.safari ){
9. // do something
10. }
11.
12. // Target Chrome
13. if( $.browser.chrome){
14. // do something
15. }
16.
17. // Target Camino
18. if( $.browser.camino){
19. // do something
20. }
21.
22. // Target Opera
23. if( $.browser.opera){
24. // do something
25. }
26.
27. // Target IE6 and below
28. if ($.browser.msie && $.browser.version <= 6 ){
29. // do something
30. }
31.
32. // Target anything above IE6
33. if ($.browser.msie && $.browser.version > 6){
34. // do something
35. }
36. });
5. 預載入圖片
1. $(document).ready(function() {
2. jQuery.preloadImages = function()
3. {
4. for(var i = 0; i“).attr(“src“, arguments[i]);
5. }
6. };
7. // how to use
8. $.preloadImages(“p_w_picpath1.jpg”);
9. });
由於文章字數限制 其他內容請到http://www.cnblogs.com/ywqu/archive/2010/03/01/1675355.html 檢視。