一、概念
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
二、快速入门
简单来说,JQuery就是一个JavaScript框架,简称JS开发。
JavaScript框架:本质上就是一些js文件,封装了js的原生代码而已。
使用步骤:
- 下载JQuery,目前有三种版本1.x、2.x、3.x。
- 导入JQuery的js文件,导入xx.min.js文件
- 开始使用
三、JQuery对象和JS对象区别于转换
区别:
- JQuery对象在操作时,更加方便
- JQuery对象和js对象方法不通用
转换:
- jq对象 --> js对象 :jq对象[索引] 或者 jq对象.get(索引)
- js对象 --> jq对象 :$(js对象)
四、选择器
基本选择器 | 标签选择器:$("标签名") |
类选择器:$(".class属性值") | |
id选择器:$("#id属性值") | |
并集选择器:$("选择器1,选择器2...") | |
层级选择器 | 后代选择器:$("A B ") 选择A元素内的所有B元素 |
子选择器:$("A > B") 选择A元素内所有的B子元素 | |
属性选择器 | 属性名称选择器:$("A[属性名]") |
属性选择器:$("A[属性名='值']") | |
复合属性选择器:$("A[属性名=‘值’][]...") | |
过滤选择器 | 首元素选择器::first |
尾元素选择器::last | |
非元素选择器::not(seletctor) | |
偶数选择器::even | |
奇数选择器::odd | |
等于索引选择器::eq(index) | |
大于索引选择器::gt(index) | |
小于索引选择器::lt(index) | |
标题选择器::header 获得标题(h1~h6)元素,固定写法 | |
表单过滤选择器 | 可用元素选择器::enabled 获得可用元素 |
选中选择器::checked 获取单选/复选框中的元素 | |
选中选择器:selected获取下拉框选中的元素 | |
不可用元素选择器::disabled获得不可用元素 |
五、DOM操作
分为三种:对内容的操作,对属性的操作,CRUD操作
对内容的操作
- html()获取/设置元素的标签体内容
- text()获取/设置元素的标签体纯文本内容
- val()获取/设置元素的value属性
对属性的操作
通用属性操作
- attr():获取/设置元素的属性,设置为键值对形式
- removeAttr():删除属性
- prop():获取/设置元素的属性
- removeProp():删除属性
对class属性操作
- addClass(”class属性名“)添加class属性
- removeClass()删除class属性
- toggleClass()切换class属性 toggleClass(”xxx“)如果有xxx则删除,没有则添加
CRUD操作
- 对象1.append(对象2) 将对象2添加到对象1内部的末尾
- 对象1.prepend(对象2) 将对象2添加到对象1内部的开头
- 对象1.appendTo(对象2) 将对象1添加到对象2内部的末尾
- 对象1.prependTo(对象2) 将对象1添加到对象2内部的开头
- 对象1.after(对象2) 对象2添加到对象1的后面
- 对象1.before(对象2) 对象2添加到对象1的前面
- 对象1.insertAfter(对象2) 对象1添加到对象2的后面
- 对象1.insertBefore(对象2) 对象1添加到对象2的前面
- 对象.remove() 移除对象
- 对象.empty() 将对象的后代元素全部清空,但保留当前对象以及其属性点
六、动画
动画的播放分为了三种方式:默认的动画,滑动式动画,淡入淡出式动画。
默认的动画播放:
- show(speed,[easing],[fn])显示
- hide(speed,[easing],[fn]) 隐藏
- toggle([speed],[easing],[fn]) 切换
滑动式动画播放:
- slideDown([speed],[easing],[fn]) 从上往下滑动显示
- sildeUp([speed],[easing],[fn]) 从下往上滑动隐藏
- sildeToggle([speed],[easing],[fn]) 切换
淡入淡出式动画播放:
- fadeIn([speed],[easing],[fn]) 淡入显示
- fadeOut([speed],[easing],[fn]) 淡出隐藏
- fadeToggle([speed],[easing],[fn]) 切换
相关属性:
speed 动画速度(毫秒数)
easing 切换效果
swing 先慢,中快,后慢
linear 匀速
fn 动画完成时要执行的函数
七、遍历
JavaScript的遍历方式类似于java,语法格式:for(初始值,结束条件,步长)。
JQuery的三种遍历方式:
- jq对象.each(callback)
- $.each(Object,[callback])
- for..of: JQuery
第一种遍历方式:
语法:
jQuery对象.each(function(index,element){
函数内容
})其中
index是元素的索引
element是每一个元素对象
this集合中的每一个元素对象第二种遍历方式:
$.each(被遍历的对象,进行操作的回调函数)
第三种遍历方式:
for(元素对象 of 元素集合)
八、事件绑定
标准绑定方式
- jq对象.事件方法(回调函数)
- 如果调用事件方法,不传递回调函数,则触发浏览器默认行为
on绑定事件/off解绑事件
- jq对象.on(”事件名称“,回调函数)
- jq对象.off(”事件名称“) 注:如果不指定解绑事件名称,则解绑该对象的所有事件
事件切换:toggle
- jq对象.toggle(fn1,fn2,。。)
- 版本高了就不好使了
九、插件
插件的使用方式:
第一种:
$.fn.extend({
方法名:function(){}
})
使用jq对象进行调用
第二种:
$.extend({
方法名:function(){}
})
第二种可以直接用$.方法名调用