JQuery
- JavaScript框架,简化js开发(本质上是一些js文件,封装了js原生代码)
- jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨 是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优 化HTML文档操作、事件处理、动画设计和Ajax交互。
- 快速入门
- 下载JQuery
- 目前JQuery有三个大版本:
- 1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,
- 2.x:不兼容ie678,很少有人使用,官方只做BUG维护,
- 3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,目前该版本是官方主要更新维护的版本
- jquery-xxx.js 与 jquery-xxx.min.js区别:min没有缩进,体积小,加载速度快
- 目前JQuery有三个大版本:
- 导入JQuery的js文件:导入min.js文件
- 使用:
- 下载JQuery
- JQuery对象和js对象的区别和转换
- JQuery对象在操作时,更加方便。
- JQuery对象和js对象方法不通用的.
- 互相转换
- JQuery - >JS:
JQuery对象[索引]
或者JQuery对象.get(索引)
- JS - > JQuery:
$(JS对象)
- JQuery - >JS:
- 选择器:筛选具有相似特征的元素(标签)
- 基本操作:
- 事件绑定:
$("#b1).click(function(){...})
- 入口函数:类似于onload
$(function(){...})
- window.onload:只能定义一次,如果定义多次,后面会覆盖前面的
- $(function):可以定义多次
- 样式控制:
$("#div1").css("backgroundColor","pink");
$("#div1").css("background-color","pink");
- 事件绑定:
- 分类:
- 基本选择器:
- 标签选择器:(元素选择器)
$("html标签名")
获得所有匹配标签名称的元素
- id选择器:
$("#id的属性值")
获得与指定i属性值匹配的元素
- 类选择器:
$(".class属性值")
获得与指定class属性值匹配的元素
- 并集选择器:
$("选择器1,选择器2,....")
获取多个选择器选中的所有元素
- 标签选择器:(元素选择器)
- 层级选择器:
- 后代选择器:
$("A B")
选择A元素内部的所有B元素
- 子选择器:
$("A > B")
选择A元素内部的所有B子元素
- 后代选择器:
- 属性选择器:
- 属性名称选择器 :
$("A[属性名]")
包含指定元素的选择器
- 属性选择器:
$("A[属性值 = '值']")
包含指定属性等于指定值的选择器
- 复合属性选择器:
$("A[属性值 = '值'][]...")
含多个属性条件的选择器
- 属性名称选择器 :
- 过滤选择器:
- 首,尾元素选择器 :
:first
获得选择的元素中的第一个元素:last
获得选择的元素中的最后一个元素
- 非元素选择器:
:not[selector]
不包括指定内容的元素
- 偶,奇数选择器:
:odd
奇数,从 0 开始计数:even
偶数,从 0 开始计数
- 等于,大于,小于索引选择器:
:eq[index]
指定索引元素:gt(index)
大于指定索引元素:lt(index)
小于索引元素
- 标题选择器:
:header
获得标题(h1~h6)元素,固定写法
- 首,尾元素选择器 :
- 表单过滤选择器
- 可用,不可用元素选择器
:enabled
获得可用元素disabled
获得不可用元素
- 选中选择器:
:checked
获得单选/复选框选中的元素:selected
获得下拉框中的元素
- 可用,不可用元素选择器
- 基本选择器:
- 基本操作:
- DOM操作
- 内容操作:
- html():获取/设置元素的标签体内容
<a><font>内容</font></a> --> <font>内容</font>
- text(): 获取/设置元素的标签体纯文本内容
<a><font>内容</font></a> --> 内容
- val(): 获取/设置元素的value属性值
- html():获取/设置元素的标签体内容
- 属性操作:
- 通用属性操作:
- attr():获取/设置元素的属性(自定义属性)
- removeAttr():删除属性
- prop():获取/设置元素的属性(固有属性)
- removeProp():删除属性
- 对class属性操作:
- addClass():添加class属性值
- removeClass():删除class属性值
- toggleClass():切换class属性(有变没有,没有变有)
- css():
- 通用属性操作:
- CRUD操作:
append()
父元素将子元素追加到末尾appendTo()参照物调换
- 对象1.append(对象2): 将对象2添加到对象1元素内部,并且在末尾
prepend()
:父元素将子元素追加到开头prependTo()参照物调换
- 对象1.prepend(对象2):将对象2添加到对象1元素内部,并且在开头
after()
:添加元素到元素后边insertAfter()调换
- 对象1.after(对象2): 将对象2添加到对象1后边。(同级关系)
before()
:添加元素到元素前边insertBefore()调换
- 对象1.before(对象2): 将对象2添加到对象1前边。(同级关系)
remove()
移除元素- 对象.remove():将对象删除掉
empty()
:清空元素的所有后代元素。- 对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点
- 内容操作:
- 动画
- 三种方式显示和隐藏元素
- 默认显示和隐藏
- show([speed],[easing],[fn])
- speed:代表动画的速度,有三个预定义的值(“slow”,“normal”,“fast”),还可以自定义输入毫秒值
- easing:动画效果,默认“swing”,还有参数“linear”
- swing:动画执行的效果是先慢后快再慢
- linear:动画执行速度均匀
- fn:在动画执行完成之后时执行的函数,每个元素执行一次
- hide([speed,[easing],[fn]])
- toggle([speed],[easing],[fn])
- show([speed],[easing],[fn])
- 滑动显示和隐藏方式
- slideDown([speed],[easing],[fn])
- slideUp([speed,[easing],[fn]])
- slideToggle([speed],[easing],[fn])
- 淡入淡出显示和隐藏方式
- fadeIn([speed],[easing],[fn])
- fadeOut([speed],[easing],[fn])
- fadeToggle([speed,[easing],[fn]])
- 默认显示和隐藏
- 遍历:
- js的遍历方式:for(初始化值,循环结束条件,步长)
- jq的遍历方式:
jq对象.each(callback)
jq对象.each(function(index,element){});
- index:就是元素在集合中的索引
- element:代表集合中每一个元素对象
- this:代表集合中每一个元素对象,同上
- 回调函数返回值:
- true:如果当前function返回为true,则结束本次循环,继续下次循环(continue)
- false:如果当前function返回为false,则结束循环(break)
$.each(object,[callback])
- object:要遍历的对象
- callback:每次循环执行的方法
for...of
:jQuery3.0版本之后提供的方式for(临时遍历 of 要遍历的容器){}
- 事件绑定:
- jQuery标准的绑定事件方式
jq对象.事件方法(回调函数)
如$("#div").click(function(){})
- 如果调用事件方法,不传递回调函数,则会除法浏览器默认行为
- 如:表单对象.submit();//让表单提交
- 如果调用事件方法,不传递回调函数,则会除法浏览器默认行为
- on绑定事件/off解除绑定
jq对象.on("事件名称",回调函数)
如$("#btn").on("click",function () {})
jq对象.off("事件名称")
如$("#btn").off("click");
- 如果off方法不传递任何参数,则将组件上的所有事件全部解除绑定
- 事件切换:toggle
jq对象.toggle(fn1,fn2,...)
- 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2…
- 注意:1.9版本 .toggle() 方法被删除,使用jQuery Migrate(迁移)插件可以恢复此功能。
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
- jQuery标准的绑定事件方式
- 插件:增强JQuery的功能(类似定义方法)
- 实现方式:
$.fn.extend(方法名1:function(){},方法名2:function(){}...)
:增强通过JQuery获取的对象的功能(给JQ对象增加新方法) 如:$("#div").方法名
$.extends(方法名1:function(){},方法名2:function(){}...)
:增强JQuery对象自身的功能(给JQ本身增加新方法) 如:$/JQuery.方法名
- 实现方式:
- 三种方式显示和隐藏元素