概述
- jQuery是一个JavaScript函数库,一个轻量级的"写的少,做的多"的JavaScript库,是目前最流行的 JS 框架,而且提供了大量的扩展
使用步骤
1.引入JQuery文件 2.入口函数 3.功能实现
- 入口函数
$(document).ready(function(){ ~ })
简写为$(function(){ ~ })
选择器
- id选择器 $(“#id”){}
- 类选择器 $(“.class名”){}
- 标签选择器 $(“标签名”){}
- 并集选择器 $(“名1,名2”){}
- 交集选择器 $(“名1.名2”){}
- 后代选择器 $(“外层名 内层名”){}
- 子代选择器 $(“外层名>内层名”){}
- 通配符选择器 $(“*”){}
- 过滤选择器
$(“li:even”){} //选取下标为偶数的li元素
$(“li:odd”){} //选取下标为奇数的li元素
$(“li:first”){} //选取第一个li元素
$(“li:eq(2)”){} //选取第二个li元素
$(“li:gt(2)”){} //选取大于第二个的li元素
$(“li:lt(2)”){} //选取小于第二个的li元素
$(“li:lt(2)”){} //选取小于第二个的li元素
事件
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click单击 | keypress | submit | load |
dblclick双击 | keydown | change | resize |
mouseleave鼠标指针从元素及其子元素上移开时才触发 | keyup | focus | scroll |
mouseout鼠标指针从元素或者其子元素上移开时都触发 | blur | unload | |
mouseenter鼠标指针移入指定才元素触发 | |||
mouseover鼠标指针移入元素或者其子元素上时都触发 |
效果
- 隐藏元素方法 $(选择器).hide([时间,速度,回调函数])
- 显示元素方法 $(选择器).show([时间,速度,回调函数])
- 显示与隐藏元素方法 $(选择器).toggle([时间/速度,回调函数])
- 淡入元素方法 $(选择器).fadeIn([时间/速度,回调函数])
- 淡出元素方法 $(选择器).fadeOut([时间/速度,回调函数])
- 淡入与淡出元素方法 $(选择器).fadeToggle([时间/速度,回调函数])
- 淡入与淡出元素方法 $(选择器).fadeTo([时间/速度,不透明度,回调函数])//不需不透明度介于0-1之间
- 向下滑动元素方法 $(选择器).slideDown([时间/速度,回调函数])
- 向上滑动元素方法 $(选择器).slideUp([时间/速度,回调函数])
- 向下与向上滑动元素方法 $(选择器).slideToggle([时间/速度,回调函数])
- 动画方法 $(选择器).animate([{属性或样式:值},时间/速度,回调函数])
- 停止动画方法 $(选择器).stop([stopAll清除动画队列,goToEnd立即完成])
- 设置型操作可用链式编程 $(选择器).width(20).height(20).end() //end方法回到前一个状态获取型操作不能链式编程
DOM
- 获取或设置元素的文本内容 $(选择器).text([“值”|“函数”])
- 获取或设置元素的内容 $(选择器).html([“值”|“函数”])
- 获取或设置表单字段的值 $(选择器).val([“值”|“函数”])
- 获取或设置属性值 $(选择器).attr([“属性名”,“值”|“函数”])
- 设置多个属性值 $(选择器).attr({“属性名”:“值”,“属性名2”:“值2”,…})
- 获取或设置布尔型属性 $(选择器).prop([“属性名”,“true/false”])
- 元素内部结尾插入内容 $(选择器).append(“值”)
- 元素内部开头插入内容 $(选择器).prepend(“值”)
- 元素之后插入内容 $(选择器).after(元素1,…)
- 元素之前插入内容 $(选择器).before(元素1,…)
- 删除被选元素 $(选择器).remove([“筛选值”])
- 删除被选元素数据与事件不丢失 $(选择器).detach([“筛选值”])
- 删除被选元素子元素 $(选择器).empty()
- 添加class属性 $(选择器).addClass(“类名”)
- 删除class属性 $(选择器).removeClass(“类名”)
- 添加与删除class属性 $(选择器).toggleClass(“类名”)
- 获取或设置被选元素的一个样式属性 $(选择器).css([“属性名”,“属性值”])
- 获取或设置被选元素的多个样式属性 $(选择器).css([{“属性名”:“属性值”,“属性名”:“属性值”,…}])
- 获取或设置元素宽度 $(选择器).width([“值”])
- 获取或设置元素高度 $(选择器).height([“值”])
- 获取或设置元素宽度(包括内边距) $(选择器).innerWidth([“值”])
- 获取或设置元素高度(包括内边距) $(选择器).innerHeight([“值”])
- 获取或设置元素宽度(包括内边距和边框) $(选择器).outerWidth([“值”])
- 获取或设置元素高度(包括内边距和边框) $(选择器).outerHeight([“值”])
- 获取或设置元素被卷曲宽度 $(选择器).scrollLeft([“值”])
- 获取或设置元素被卷曲高度 $(选择器).scrollTop([“值”])
- 获取相对于页面的位置 $(选择器).offset()
- 获取相对于有定位的父元素的位置 $(选择器).position()
遍历
- 根据其相对于其他元素的关系来"查找"(或选取)HTML元素
- 遍历祖先
- 获取被选元素的直接父元素 $(选择器).parent()
- 获取被选元素的祖先元素 $(选择器).parents([“筛选值”])
- 获取介于两个给定元素之间的祖先元素 $(选择器).parentsUntil([“筛选值”])
- 遍历后代
- 获取被选元素的所有直接子元素 $(选择器).children([“筛选值”]) //相当于子代选择器
- 获取被选元素的后代子元素 $(选择器).find([“筛选值”]) //*代表全部,相当于后代选择器
- 遍历兄弟
- 获取被选元素的兄弟元素 $(选择器).sibling([“筛选值”])
- 获取被选元素的直接弟元素 $(选择器).next([“筛选值”])
- 获取被选元素的所有弟元素 $(选择器).nextAll()
- 获取介于两个给定参数之间的所有弟元素 $(“起始”).nextUntil(“结束”)
- 获取被选元素的直接兄元素 $(选择器).prev([“筛选值”])
- 获取被选元素的所有兄元素 $(选择器).prevAll()
- 获取介于两个给定参数之间的所有兄元素 $(“起始”).prevUntil(“结束”)
- 过滤
- 获取所有被选元素的首个元素 $(选择器).first()
- 获取所有被选元素的最后一个元素 $(选择器).last()
- 获取被选元素中带有指定索引号的元素 $(选择器).eq(索引)
- 获取符合筛选值的被选元素 $(选择器).filter([“筛选值”])
- 获取符合不筛选值的被选元素 $(选择器).not([“筛选值”])
其他方法
- 从被选元素获取数据 $(选择器).data(数据名)
- 向被选元素附加数据 $(选择器).data(数据名,值)
- 使用对象向元素附加数据 $(选择器).data(object对象)
- 移除被选元素附加数据 $(选择器).removeData(数据名)
- 为每个匹配元素规定要运行的函数 $(选择器).each(function(索引,当前元素){~})
- 获取被选元素的DOM对象 $(选择器).get([索引])
- 获取被选元素在兄弟元素里的索引 $(选择器).index()
- 释放变量$的jQuery控制权 var c=$.noConflict() //$变成c
- 创建数组或对象的序列化表示形式 $.param(object,布尔值)
- 以数组的形式返回 jQuery 选择器匹配的元素 $(选择器).toArray()
- 为被选元素绑定事件 $(选择器).bind(事件类型,回调函数) //已有元素才能绑定
- 为被选元素委托事件 $(委托范围).on(事件类型,选择器,回调函数)
其他属性
- 字符串包含jQuery的版本号 $().jquery
- 用于改变以毫秒计的动画运行速率 jQuery.fx.interval = milliseconds;
- 用于对所有动画进行全局禁用或启用 jQuery.fx.off = true|false;
- 包含表示不同浏览器特性或漏洞的属性集 jQuery.support.propvalue
- jQuery对象中元素的数目 $(选择器).length