JQuery使用總結

tomlingtm 發布于2019-08-21 12:04 / 1569人閱讀

摘要：目前接觸最多的頁面開發，基本還是使用的。主要原因基于操作方便頁面簡單兼容良好新手多沒有能配合使用其他方案的人。，是的核心理念。

目前接觸最多的頁面開發，基本還是使用 JQuery 的。主要原因基于：操作方便；頁面簡單；兼容良好；新手多……沒有能配合使用其他方案的人。因此，本篇文章就是寫著玩加吐點槽的。

Write Less，Do More是JQuery的核心理念。所以你們就不要在工作中隨意造輪子了！

一、Ajax

絕對禁止同步請求！一定要處理所有可能的情況！

普通示例：

function getData(){
  var params= {}
  $.ajax({
    type: "post",
    dataType: "json",
    url: "xxxxx",
    data: params,
    beforeSend: function(){},
    success: function(data){
       if(data.code != 1){
         // 失敗方法
         return;
       } 
       // 成功方法
    },
    error: function(){},
    complete: function(){}
  });
}

大部分兼容要求不高，公司使用同一個接口，只是傳參不同，因此，共通的ajax請求方案為：

function reqAjax (params) {
  var deferred = $.Deferred();
  $.ajax({
    type: "post",
    dataType: "json",
    url: "xxxx",
    data: params,
    success: function(data){
      deferred.resolve(data);
    },
    error: function(err){
      deferred.reject(err);
    }
  });
  return deferred;
}

主要使用了JQuery（>1.5）的 deferred 對象。請求示例：

function getData () {
  // 1、校驗，或其他方法獲取參數
  var params = {}
  // 2、自定義beforeSend
  // 3、請求數據
  var p = reqAjax(params);
  // 4、自定義success方法
  p.done(function (data) {});
  // 5、自定義error方法，一般屬于超時或網絡不正常
  p.fail(function (err) {});
  // 以上執行成功之后可鏈式調用下一步操作
  p.then(function () {});
}

如果想多帶帶使用Ajax，一般來說推薦兩個方案：Zepto.js 和自己去 github 搜索

二、模板

根據設計的不同，有時需要重復添加一些元素。除了基本的模板插件外，還可以充分使用 JQuery 的 clone 方法

盡量不要拼接字符串！

假設dom結構為：



  字段1：
  字段2：
  字段3：

接口請求成功，處理dom：

// 自己處理循環
function addList(arr){
  // 模擬請求過來的數據
  var data = {
    test1: Math.random().toFixed(5),
    test2: Math.random().toFixed(5),
    test3: Math.random().toFixed(5)
  }
  // 假設父級dom
  var pDom = $(".xxx");
  // 直接克隆已經寫好且隱藏的模板，去掉hidden
  var dom = pDom.find(".test.hidden").clone().removeClass("hidden");
  // 取巧的方法，根據字段標識的名稱取dom元素，然后賦值，一般來說還需要進行其他的處理
  for(var key in data){
    dom.find("."+key).text(data[key])
  }
  // 處理完畢，加入父級dom中
  pDom.append(dom);
}

主要是我不喜歡拼接字符串，懶得很，而且改別人的BUG好惡心。

三、事件

事件使用多看看教程就行，但如何使用得稍微琢磨一下

如：不要在 $(document).ready() 中初始化所有亂七八糟的方法，很難找的……

對于新添加的元素，添加點擊（或其他）事件，可以使用

$(parentDom).on("click", "newDom", function(){});

或

$(newDom).live("click", function(){})

四、動效

作為前端，不要光想著js，好歹也學學 animate.css

PC端使用動效是沒問題的，但移動端網頁，如slideUp、animate之類，最好用css樣式代替，不然會有卡頓效果。

……移動端為什么還用jquery？jquery 壓縮版一般在80~90 kb，對如今的網絡是可以接受的，當然最好用 zepto.js 代替。

請在完成任務之后再考慮優化……

五、No JQuery

不要把不熟悉的東西帶到工作中，除非沒有更好的替代方案

若不想使用JQuery，且不考慮兼容性，可參考：You-Dont-Need-jQuery

雜項

如果有空，記得重構代碼~

本來想寫點具有實用性的東西，但Jquery的特性網上已經有很多了，因此不再贅述，能給新人一點提示就行。

GPU云服務器云服務器使用方法總結 jquery使用 jQuery使用$ nodejs使用jquery

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87408.html

jQuery學習和知識點總結歸納

摘要：目前在前端開發所占的比重越來越高，在我們學習和開發的過程中都會去使用。下面把程序員雷雪松對的知識點總結和歸納分享給大家。過濾對同胞元素的搜索。將匹配元素集合縮減為集合中的最后一個元素。返回指定元素相對于其他指定元素的位置。 jQuery目前在Web前端開發所占的比重越來越高，在我們jQuery學習和開發的過程中都會去使用。jQuery幫我們解決了瀏覽器之間JS一些不兼容的地方和簡化了原...

JohnLui 2019-08-19 18:00 評論0 收藏0
JQuery JS文檔加載寫法總結

摘要：文檔加載注在使用時，可直接簡寫成，但是為了不發生歧義及造成不必要的錯誤，最好是把寫上方式加載完畢加載完畢加載完畢加載完畢加載完畢與別名可互通加載完畢加載完畢加載完畢加載完畢動態綁定元素寫法使用綁定動態生成的元素時，不能直接用該對象操作，而是 1.文檔加載 1.JS window.onload=function(){ document.getElementById(m...

shiyang6017 2019-08-22 10:42 評論0 收藏0
jQuery總結

摘要：是小巧輕量級的函數庫。本著寫得少，做的多的原則來替代原生代碼，選擇器為其核心內容。一引入引入方法，注意引入要在代碼上。二使用原始書寫代碼簡寫如下兩種方式注意書寫盡量使用原始書寫方法，以提高代碼讀寫區分加載。 JQuery是小巧、輕量級的javascript函數庫。本著寫得少，做的多的原則來替代javascript原生代碼，選擇器為其核心內容。一、引入JQuery：cdn引入方法，注意：...

CODING 2019-08-23 15:05 評論0 收藏0
前端知識點總結——JQ

摘要：前端知識點總結什么是第三方的極簡化的操作的函數庫第三方下載極簡化是操作的終極簡化個方面增刪改查事件綁定動畫效果操作學習還是在學，只不過簡化了函數庫中都是函數，用函數來解決一切問題為什么使用操作的終極簡化解決了大部分瀏覽器兼容性問題凡是讓用的前端知識點總結——JQ 1.什么是jQuery: jQuery: 第三方的極簡化的DOM操作的函數庫第三方: 下載極簡化: 是DOM操作的...

jayzou 2019-08-22 14:59 評論0 收藏0
JQuery使用總結

摘要：目前接觸最多的頁面開發，基本還是使用的。主要原因基于操作方便頁面簡單兼容良好新手多沒有能配合使用其他方案的人。，是的核心理念。目前接觸最多的頁面開發，基本還是使用 JQuery 的。主要原因基于：操作方便；頁面簡單；兼容良好；新手多……沒有能配合使用其他方案的人。因此，本篇文章就是寫著玩加吐點槽的。 Write Less，Do More是JQuery的核心理念。所以你們就不要在工作中...

dreambei 2019-08-01 17:27 評論0 收藏0