[TOC] ## 前言 如果你对jq的基本语法还不清楚，和我一起来熟悉一下吧，本文只摘抄了部分jq1.12.1api部分常用语法，对于其他的可以自行查阅线上文档。 ## 历史 在jq出现之前，曾经出现了prototype,Dojo,YUI,ExtJs,MooTools等。有兴趣的可以去了解下。 而14年开始之后，出现了前端基于js的前后端分离框架，ng,vue，react他们开始占据主流的前端框架市场，为前端产品中所使用。 另外，需要提醒的是如果你的产品需要支持ie8这样的古董浏览器，建议使用2.0以下的版本，因为2.0版本开始去掉了去旧版本浏览器的支持代码。 ## 语法 ### 核心 * 对象访问 each,size,length这三个比较常用，一般是针对筛选出的是多个对象的数组进行分别处理时。 ~~~ var $li=$("li") //可以拿到数组对象的长度，是属性不是方法 var len=$li.length var len2=$li.size() //分别代表其位置，当前循环元素 $li.each(function(index,domEle){ }) ~~~ * 插件机制 ~~~ //拓展插件,this会指向当前的元素 jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } }); //基本使用 $("input[type=checkbox]").check(); $("input[type=radio]").uncheck(); ~~~ * data 设置元素内自定义data-属性的值以及获取 ~~~ $("div").data("blah"); // undefined $("div").data("blah", "hello"); // blah设置为hello ~~~ * 多库共存 ~~~ var j = jQuery.noConflict(); // 基于 jQuery 的代码 j("div p").hide(); // 基于其他库的 $() 代码 $("content").style.display = 'none'; ~~~ ### 属性 * 属性 .attr()记忆口诀：单个获取，一对为赋值，赋值多个用对象 ~~~ .attr("attrName") .attr("attrName","attrValue") .attr({"attrName":"attrValue","attrName2":"attrValue2"}) ~~~ 属性 prop(key[value])，prop与attr的区别就是有些属性只能用prop判断，比如选择框checked属性，判断方法是：必须用prop，由于原生的样式比较丑，其实现在很多已经不是用原生属性去做判断了。移除属性 removeProp("attrName") ~~~ $(".checkbox").prop("checked") $(".checkbox").prop("checked", true); $(".checkbox").prop("checked", false); ~~~ * css类 备注其中class可以为定值也可以是一个方法，返回字符串即可 ~~~ addClass(class|fn) removeClass(class|fn) toggleClass(class|fn) //根据逻辑需要 返回需要切换的class,其中切换就是变成和当前状态相反的。 $('div.foo').toggleClass(function() { if ($(this).parent().is('.bar') { return 'happy'; } else { return 'sad'; } }); ~~~ * html代码 `html(),text(),val() `,需要注意的是针对ie8不要针对不合适的标签设置获取值，比如$("input").text('demo'),这样可能会报错。 ### css * css .css()记忆口诀：单个获取，一对为赋值，赋值多个用对象 * 位置 ~~~ offset(),设置元素相对于当前文档的坐标 position(),返回当前元素的left，top 很少用 scrollTop(val),可以设置某元素向上滚动多少 scrollLeft(val), ~~~ * 尺寸 width(),height()比较常用 ### 选择器 这里仅提醒大家与css选择器不同，jq的选择器支持范围更广而且没有兼容问题，可能存在的问题就是样式可能会有二次渲染的问题。 * 基本选择器以及层级选择器 （省略） * 其他常用的，建议必须会的。 :first ,:even,:odd,:last,:eq(index),:has(selector),:hidden,[attr],:nth-child(3n+1),:checked,:selected,:enabled ### 文档处理 友情提示：你的dom结构可能是固定字符串，也可以是某匿名方法返回的，我们一般用的是固定字符串或者调用申明方法。 ~~~ append(),prepend() 分别为元素内部尾部插入以及头部插入元素，append用的尤其多 after().before() 分别为元素外部尾部插入以及头部插入 wrap() 吧元素包裹起来 replaceWith() 替换元素 remove()删除 empty() 清空元素 clone() 复制元素 ~~~ ### 元素过滤 这个是指在当前元素已经确定的情况下，继续进行相关的选择，常用的语法有： `.eq(index),.first(),.last(),.hasClass(''),.not(sel),.find(),.parent(),.next(),.prev(),.siblings().find()` ### 事件 ready(fn),简便写法：$(function(){}) on() .off() 绑定事件 ，前提是这个事件必须是已有的，推荐使用，其中针对没有的dom元素绑定事件都是必须用这种的。 .bind() .unbind() 不推荐使用 hover() 可以同时支持移入以及离开对应的事件 其他的比较常见的是click,resize,blur ,keypress ### 效果 hide(),show(),fadeIn(),fadeOut() slideDown,slideUp可以加时间或者关键字 .animate 可以追加更加丰富的动画，只不过现在都通过css3动画实现，脚本不建议写过多的样式了 ### ajax请求 `.ajax,.get,.post,.getJson` 需要注意的是，如果你希望你的请求方法是同步的，用ajax 设置async为false ，那么同步写的代码就可生效，其默认是true 异步的；或者就需要你把方法写到success回调里面了。 如果你希望对error进行处理，可以封装错误处理类，进行统一的管理。 ### 工具 `.each,.extend,.parseJson,.trim,.fn.jq`其他的不常见，可以不掌握。 ### 事件对象 event.data（触发事件的时候可以传递数据）, .currentTarget,事件源对象. pageX,.pageY,当时的鼠标坐标 .preventDefault,.stopPropagation(), 阻止默认事件以及冒泡事件 .which（获取是哪个案件） .type 事件类型 ### 其他 虽然jq已经不是主流的前端框架了，但在部分常规的项目以及一些需要兼容性较强的项目中，还是用的jq，希望你多少对这部分是熟悉的而不需要查阅文档。 ## 常见问题与技巧 ### window.onload与jq ready区别 | 对比项 | jq | onload | | --- | --- | --- | | 写法 | $(function(){}) |window.onload | | 次数 | 可以写多次 | 只能一次 | | 时机 | 元素加载完，但资源比如图片等可能未加载渲染，时机较早 | 所有资源加载完 | | 便捷性 | 可以在任何需要的时候追加新的事件，会按照顺序执行| 必须写在同一个onload方法里 | **备注：** 某些特殊情况是需要在资源包括图片等关联资源加载完执行的，jq也提供了相关的方法，`$(window).load(function(){})=window.onload` ### jq对象与js原生对象不可混淆 jq对象与js原生对象的方法不可混淆使用，如果你需要的话可以方便的进行转换， ~~~ //从jq对象转为原生对象 var oriDom=$("sel")[0] var oriDom=$("sel").get(0) //从原生对象转为jq对象 var oriDom=document.getElmentById("sel") var $dom=$(oriDom) ~~~ ### 针对未来dom绑定事件需要on 针对尚未生成的dom结构绑定事件，直接绑定是无法生效的，需要用到on写法 `$(".par").on("click",".sub")` ### 特殊事件 * 冒泡事件 冒泡事件是指父元素与子元素绑定了同一个事件类型，当子元素触发时，父元素也会触发，而你不想触发父元素的事件，这个本来的向上事件传递的特性叫冒泡。如果你想避免这个事件，可以用jq特定的方法阻止。 `event.stopPropagation()` * 默认事件 某些dom元素默认的有自己的事件行为，比如a标签的跳转，比如submit按钮的提交等，如果你想避免原来的系统默认行为，可以用jq的阻止默认行为方法 `event.preventDefault()` * 同时阻止默认和冒泡事件 以上两个同时写或者return false ### 合成事件 * hover hover(enter,leave) 可以同时支持绑定两个事件，分别对应鼠标的移入与移出 * toggle toogle(fn1.fn2,fn3,,,,) 按照次序 ，分别执行如下的函数，用于模拟鼠标的连续点击事件 ### 模拟事件 `.trigger("click")`,可以通过关键字触发特定的事件类型，包括用户自定义的事件。也可以直接用简化的写法`.click()` * 定义自定义事件,自定义事件中可以传递参数根据需要 ~~~ $("btn").bind("myClick",function(event,message1,message2){ console.log(message1+message2) }) ~~~ * 触发自定义事件 `$("btn").trigger("myClick",function(event,“my”,“event type”))` ### 绑定不同的事件类型 `bind("click hover")`可以同时绑定多个事件类型 ### 筛选多个原则的元素 `$("sel1,sel2")` ### 链式操作 jq针对获取到的元素可以进行链式操作，也可以不间断的进行相关的元素的查找。比如下面的代码是允许也被建议的。 ~~~ //推荐 $(selector).css().attr().addClass('classA').parent().hide() //不推荐 $(selector).css() $(selector).attr() $(selector).parent().hide() ~~~ 另外针对链式操作建议如下： 针对同一元素三个以上操作的，写在同一行，如果有多个操作的，每个操作单独一行，注意缩进；建议针对不同关联元素的操作进行换行显示。 ~~~ //三个以内的操作 $(selector).css().attr().addClass('classA') //同元素三个以上的操作 $(selector).css() .attr() .addClass() .fadeOut() .hide() //关联元素的写法 $(selector).css().attr().end() .parent().show() ~~~ ### 代码优化建议 * 选择的dom元素如果被用到两次以及以上，建议命名为变量，除非dom在此间发生了变化。 * 注意使用一些jq封装的快捷方法，比如hide(),show(),animate(),trim()，height(),width()等 * ## 参考文档 * [jq1.12.1API](http://hemin.cn/jq/)