前端之jQuery拾遺

jopen 8年前發布 | 19K 次閱讀 jQuery Ajax框架

</div>

前不久看的一些jQuery知識，在此進行一些簡單的記錄。

一些基礎

window.onload與$(document).ready()對比

  • window.onload

    • 必須等網頁中所有內容加載完（包含圖片）之后執行

    • 不能同時寫多個window.onload
      • </ul> </li>

    • $(document).ready()

      • DOM結構繪制完畢后執行，DOM關聯元素并未加載完畢

      • 能同時寫多個
        • </ul> </li> </ul>

        事件冒泡

        • 如果一個元素嵌套在另一個元素里，并且都被綁定了click事件，那么內層的被點擊之后，會按照從里到外的順序依次觸發

          </li>

        • 停止事件冒泡方法：

          • 使用事件對象

            • $(‘#span’).bind(‘click’, function(event){ event.stopPropagation(); })
              • </ul> </li> </ul> </li>

            • 阻止事件默認行為:如單擊超鏈接跳轉，單擊表單提交

              • event.preventDefault();
                • </ul> </li>

              • 停止冒泡，阻止事件默認行為可以都使用

                • return false;
                  • </ul> </li>

                • 事件捕獲順序與事件冒泡順序相反

                  </li> </ul>

                  jQuery性能優化

                  • 使用最新版的jQuery庫

                    </li>

                  • 使用合適的選擇器

                    • $(“#id")

                    • $(“p”)、$(“div")

                    • $(“.class")

                    • $(“[attribute=value]")

                    • $(“:hidden")

                    • PS:盡量使用ID選擇器；盡量給選擇器指定上下文
                      • </ul> </li>

                    • 緩存對象

                      </li>

                    • 循環時的DOM操作

                      • 將循環的對象存儲在列表，然后再進行DOM操作，減少DOM操作
                        • </ul> </li>

                      • 數組方式使用jQuery對象

                        </li>

                      • 事件處理

                        • 使用事件監聽

                          • $(“#id).on(“click”, “td”.function(){})
                            • </ul> </li> </ul> </li>

                          • 將你的代碼轉換為jQuery插件

                            </li>

                          • 使用join()來拼接字符串

                            </li>

                          • 合理使用HTML5的Data屬性

                            </li>

                          • 盡量使用原生的js方法

                            </li>

                          • 壓縮JavaScript

                            </li> </ul>

                            jQuery技巧

                            • 禁用右鍵菜單
                              • </ul>

                              1 $(document).ready(function(){
2 $(document).bind(“contextmenu”,function(e){
3 return false;
4   });
5 });

                              • 新窗口打開
                                • </ul>

                                1 $(‘a[href^=“http://"]’).attr(“target”, “_blank");

                                • 判斷瀏覽器類型
                                  • </ul>

                                  1 $.browser.chrome && $.browser.version >= xxx;

                                  • 輸入框文字獲取和失去焦點
                                    • </ul>

                                    1 input.focus()
2 input.blur()

                                    • 返回頭部滑動動畫
                                      • </ul>

                                       1 jQuery.fn.scrollTo = function(speed) {
 2     var targetOffset = $(this).offset().top;
 3     $('html,body').stop().animate({scrollTop: targetOffset}, speed);
 4     return this;
 5 };
 6 // use
 7 $("#goheader").click(function(){
 8     $("body").scrollTo(500);
 9     return false;
10 });

                                      • 獲取鼠標位置
                                        • </ul>

                                        1 e.pageX和e.pageY

                                        • 判斷元素是否存在

                                          • 使用length
                                            • </ul> </li>

                                          • 回車提交表單

                                            </li> </ul>

                                            1 $(document).ready(function() {
2        $("input").keyup(function(e){
3               if(e.which=="13"){
4                  alert("回車提交!")
5               }
6           })
7   });

相關經驗

相關資訊

相關文檔