Web阶段 - JQuery学习总结

概述

• 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