JQuery使用总结

tomlingtm 发布于2019-08-21 12:04 / 1392人阅读

摘要：目前接触最多的页面开发，基本还是使用的。主要原因基于操作方便页面简单兼容良好新手多没有能配合使用其他方案的人。，是的核心理念。

目前接触最多的页面开发，基本还是使用 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的特性网上已经有很多了，因此不再赘述，能给新人一点提示就行。

超融合服务器云服务器使用方法总结 jquery使用 jQuery使用$ nodejs使用jquery

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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