[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/)
- 前端入门
- 前端入职须知
- 入职准备
- 前端ide
- vsc快速上手指南
- 上手指南一
- 常用插件推荐
- 微信开发者
- sublime的使用
- hbuilder入门
- ws
- 前端面试
- 概要
- bat面试题库
- 题库一
- 面试大纲
- 题库二
- 面试大纲
- 前端基础面试题
- js基础面试题
- vue&&react面试题
- 数据结构&&算法面试题
- 题库三
- 001
- 题库四
- 中小公司leader
- 常规题库
- 前端规范
- 001
- css
- 001
- 002
- es6(js)
- 001
- 002
- 003
- 004
- node
- 001
- vue
- 001
- react
- 001
- 预处理器
- 001
- gulp
- 001
- webpack
- 001
- 设计模式
- 001
- web常识
- 001
- koa
- 001
- 小程序
- 001
- 数据结构与算法
- 001
- 推荐文章
- 面试指南
- web性能
- 面试分享
- 001
- ps
- ps入门阶段
- 图片类型以及区别
- 基本概念以及常用工具
- ps操作技巧
- 几个问题
- ps互动教程软件(app)
- 资源导航
- ps站点资源导航
- ui站点导航
- html
- h5专题
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- async&&defer
- fileApi
- h5调用底层能力
- input新解
- canvas实战篇
- 教程
- js
- javascript入门
- js代码审查工具
- js性能优化
- 浏览器dom对象
- js优质资源
- indexDB入门
- jquery
- jq基本语法
- jq插件与原生插件
- Jq使用建议
- ajax后退解决方案
- jq常见问题
- js常用技术
- js控制运动-move.js
- 常用正则归纳
- js实用技术
- 鼠标行为分析
- document.referrer
- 你可能不知道的调试技巧
- 表格文件的读取与下载
- 异步编程那些事
- 数据结构
- 编程环境和模型
- 列表
- 栈
- 队列
- 链表
- 字典
- 散列
- 集合
- 二叉树和二叉查找树
- 参考
- js编程
- js模块机制
- 算法
- 基本算法
- 递归
- 图和图算法
- 图定义
- 系统建模
- 图类
- 搜索图
- 查找最短路径
- 拓扑排序
- 图实践
- 排序算法
- 测试平台
- 冒泡排序
- 选择排序
- 插入排序
- 基本排序的比较
- 希尔排序
- 归并排序
- 快速排序
- 实践
- 二分排序
- 检索算法
- 顺序查找
- 二分查找
- 查找文本数据
- 检索实践
- 高级算法
- 动态规划
- 贪心算法
- 高级算法实践
- 代码重构
- 简化函数参数
- 001
- 002
- 基础巩固
- 001
- es2015实战
- 初识es-module
- 异步编程
- es6工厂函数
- filter|map|reduce
- js实战篇
- 前端图像处理
- touch事件知多少
- 手势与实践
- print表格分页
- 精彩文章推荐
- 001
- 插件库
- 插件大全
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 视频控件
- 发送浏览器通知
- 触屏签名插件
- 图片相关插件推荐
- 待分类插件(pc)
- 待分类插件(手机端)
- 交互组件
- layerjs
- web
- web兼容
- pc端兼容bug汇总
- ie兼容bug汇总
- ie8测试专题
- web常用技术点
- web兼容汇总001
- ie6专题
- css兼容
- web安全
- web安全初级
- app/h5组件
- app教程
- 前端教程
- rubikx的教程
- 与app交互逻辑
- h5唤起app通识
- webview专题
- webview总纲
- js与oc交互协议
- js与安卓交互协议
- 兼容问题汇总
- jsBridge专题
- errorBook.js
- 常用工具
- chrome-devtool使用
- chraels
- 开发注意事项
- web常识
- markdown教程
- 自定义风格思路
- 经验与问题总结
- 总结1
- 前端应该注意哪些seo
- 懒加载和预加载
- https
- 前端重构
- web优化
- 移动端web优化
- http缓存
- web端优化
- 图片专题
- svg专题
- 深入浅出svg
- 地图使用
- 注意事项
- 需求提交
- 常规交互需求提交
- 缓存
- 干货文章
- 浏览器缓存
- 内存
- web性能指南
- 读书笔记
- ui框架
- 概论
- easyui
- bootstrap
- 入门推荐
- modal插件使用
- 按钮组件
- 正确使用栅格布局
- 下拉框插件使用
- 表单使用与验证
- tab切换项插件
- 分页控件
- 进度条控件
- 文件上传控件
- 面板控件
- 常见特效与插件
- weui
- sui-pc
- sui-mobile
- layerUI
- frozen-UI
- rubik-u那些事
- 基本内容
- 小程序
- 小程序入门
- 入门
- 实践踩坑
- 001
- 基本语法
- 开发大纲
- 注意事项
- 微信专题
- 基本入门
- 准备工作
- 定制菜单
- 图文消息与图文推送
- h5支付
- 公众号支付
- node完成微信支付
- 进阶使用
- 微信分享
- weui使用
- 基本使用
- 支付宝专题
- 支付宝h5支付
- app支付接入
- 服务窗支付
- java
- java入门
- eclipse基本使用
- 语言特点
- java代码规范
- 编译调试
- java基本语句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- 常用常识
- 常用常识2
- 部署项目
- web --xml文件解析
- java生成pdf文件
- java读取、写文件案例
- 图片加水印
- 图片加水印2
- java-cookie
- 验证码文件
- sql-mapper语法
- maven教程
- mySql教程
- jeecms
- flash
- flash入门
- flash准备工作
- 运行与编译
- 浏览器中flash设置教程
- flash检测