Jquery是一个 js 函数库,又常常被叫做 jq 里面代码很多,但是用的时候代码很少,是目前 js 的主流框架。
引用
- 下载地址:两个版本,开发测试用的,实际网站用的(都一样)http://jquery.com/
然后在代码里面引入后用 :<script src=" 文件路径 "></script>
- CDN(内容分发网络)
不下载也可以通过CDN:内容分发网络引用(就是有的网站服务器存的有 jquery 库,填好 CDN 地址直接让用户把它加载到浏览器缓存以后就可以随时使用),就是以下两条:
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
$( )、jQuery( )等自定义名字
全局函数,jQuery 快捷名为 $
1)自定义名字
var jq = $.noConflict();
var obj = jq("div"); // 得到所有的div标签
2)$() 查询
$() 方法有两个参数:第一个参数可以使选择器,可以是对象
第二个参数可选默认是document。就是在全文档下查找,表范围
3)$()方法的返回值
$()返回的是一个 jq对象,jq对象是一个类数组。比如:
$("div") 返回值是一个装有所有(大于等于0)div标签的类数组
$(document) 返回值是一个装有当前 document对象的类数组
4)jq 对象
属性:($()方法返回的 jq对象有四个属性)
length:返回的元素个数
selector:创建 jq对象(不是DOM对象)的选择器字符串(前提是创建时有选择器的字符串)
context:上下文,元素所在document对象
jquery:jq的版本号,是否存在,主要为了跟其他类库作区分
5)元素属性 attr()
更改:传对象或者下面第二种方式,按照键值对更改,类数组中所有元素都更改
获取:只传属性名,没有设置过获得的是 undefined,只获取类数组中第一个元素
获取和更改:
// 回调函数:第一杆参数是属性,index代表所选多个标签的第几个,oldValue代表获取的旧值,newValue代表设置的新值
6)元素样式 css( )
跟attr()方法类似,不过这个方法作用于css样式,而不是元素的html属性
获取:只获取类数组中第一个元素,获取数值时会转化为有单位的字符串
设置:设置类数组中所有元素,可以设置复合样式,一个样式可直接写样式名和值
7)元素内容
val():获取:类数组第一个元素的value值
设置:设置所有元素的value值(参数为值或者函数)
html():获取:类数组第一个元素的 HTML内容,包括子元素的标签名
设置:设置所有元素的 HTML内容,标签会被解析,跟DOM中的innerHTML一样会格式化替换调内部的内容( jq里就是用的它实现的)
例如:
text():获取:获取类数组中所有元素的所有子孙文本节点的纯文本内容
设置:设置所有元素的文本内容,内容内部的标签不会被解析
8)遍历
长辈:
- parent() //爸爸
- parents() //爸爸爷爷...
- parentsUntil() //爸爸爷爷..到某个标签结束
晚辈:
children() //儿子
同胞:
- siblings() //所有同胞元素
- next() //下一个同胞元素
- nextAll() //下一个和后面所有同胞元素
- nextUntil(“元素1”) //到元素1之间的所有同胞
9)盒子尺寸
(不用带px)
10)盒子位置
- offset() // 获取或设置坐标值(相对文档)设置值后变成相对定位,返回一个坐标对象,设置也传对象属性是left和top //offset().top offset({left:100})
- position() // 获取坐标值(相对父亲)只能读取不能设置,readOnly
- scrollTop() // 设置或获取元素滚动条垂直卷去的距离:设置scrollTop(100)
- scrollLeft() // 设置或获取元素滚动条水平卷去的距离
11)data( )
data()方法可以给 jq 元素设置和获取数据,以键值对的方式:
12)修改文档结构
- append() //在被选元素的结尾插入n个元素:$(‘#div’).append(‘你好’,’666’)
- prepend() //在被选元素的开头插入n个元素
- after() //在被选元素之后插入n个元素
- before() //在被选元素之前插入n个元素
- replaceWith() //把被选元素替换掉
- remove() //删除被选元素和他的后代
- empty() //删除被选元素的后代
- clone() //克隆元素(包括后代),返回的对象不在文档中//var cp1=$(‘#p1’)
- clone(true) //浅克隆----深克隆
13)事件
(return false阻止冒泡)
鼠标:
- click 单击对象(按下松开)
- dblclick 双击对象
- mousedown 在对象上按下时
- mouseup 按下,在对象上松开时
- mousemove 鼠标在对象上移动时
- mouseover 鼠标指针穿过被选元素区域触发,穿过其子元素区域也触发
- mouseout 鼠标指针离开被选元素或者子元素区域
- mouseenter 鼠标指针穿过被选元素区域
- mouseleave 鼠标指针离开被选元素区域
键盘:
焦点在哪里哪个控件的键盘事件才触发
- keypress 键盘按键被按下并松开。
- keydown 键盘按键被按下。
- keyup 键盘按键被松开。
表单:
- focus 节点获得焦点后触发
- blur 节点失去焦点后触发
- focusin 将要获得焦点时触发,发生在focus事件之前
- focusout 将要失去焦点时触发,发生在blur事件之前
- change 内容改变时
//input
- reset 表单重置时
- submit 表单提交时
加载(图片文档等):
- load 完成加载
- abort 加载被中断
- error 加载发生错误
悬浮:
- hover //注:hover(fn1,fn2) hover事件要求有两个回调函数,分别是移入和移除,只写一个回调函数时,两个状态都触发同一个函数
14)事件对象
事件触发时会传入回调函数一个事件对象,这个对象的属性包含了事件触发时的一些信息
鼠标:
- altKey 鼠标事件发生时,是否按下alt键,返回一个布尔
- ctrlKey 鼠标事件发生时,是否按下ctrl键,返回一个布尔
- metaKey 鼠标事件发生时,是否按下windows/commond键,返回一个布尔
- shiftKey 鼠标事件发生时,是否按下shift键,返回一个布尔
- clientX,clientY 返回鼠标位置相对于浏览器窗口左上角的坐标,单位为像素
- screenX,screenY 返回鼠标位置相对于屏幕左上角的坐标,单位为像素
键盘:
- altKey,ctrlKey,metaKey,shiftKey 返回一个布尔值,表示是否按下对应的键
- key 返回一个字符串,表示按下的键名。如果同时按下一个控制键和一个符号 键,则返回符号键的键名。比如,按下Ctrl+a,则返回a。如果无法识别键名,则返回字符串Unidentified
15)绑定事件
mouseleave(fn)
回调函数返回值为false时阻止冒泡
- jq(“button”).click(fn)
jq(“button”).mouseenter(fn)
jq(“button”).
jq(“button”).click(fn).mouseenter(fn).mouseleave(fn)
- bind(“events”,fn); //多事件用空格隔开
jq(“button”).bind(“click mouseenter mouseleave”,fn)
- 不同的事件想触发不同的方法,传一个对象进去
jq(“button”).bind({“click”:fn,”mouseenter ”:fm,”mouseleave”:fo})
- 触发一次one(“event”,fn)
jq(“button”).one(“click”:fn)
16)多元素绑定事件
- 原始的 // 每个 li 都绑定了一个事件
jq(“li”).bind(“click”,function(){alert(jq(this).html())})
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
- 代理//只给ul(一定要绑父亲)绑定了事件(冒泡)
jq(“ul”).delegate(“li”,”click”,function(){alert(jq(this).html())})
- 前面所有的方式都忘掉,用这种:on(“events”,”selector”,fn)
jq(“ul”).on(“click”,”li”,function(){alert(jq(this).html())})
//ul 是on方法第二个参数li的爸爸,on第一个参数是事件,第二个参数是选择器,第三个参数是回调,回调里面的this关键字是个指针,指向触发click事件的对象.
17)事件解绑
对应的unbind undelegate off
例子:jq(“ul”).on(“click mouseenter”,”li”,function(){alert(jq(this).html())})
jq(“ul”).off(“click”)
现象:鼠标移入触发,点击却不触发
18)事件触发
事件的触发有两种方式:
- 真事件触发:真的用鼠标点了
事件名调用时不传参数(不传回调函数):$(‘#div’).click()
- 假事件触发:用代码让事件触发
$(‘#div’).trigger(‘click’))
19)动画
隐藏:
- hide(sd,fn) 隐藏元素
- show(sd,fn) 显示元素
- toggle(sd,fn) 隐藏显示开关(来回调用)
//参数都是可选的,sd 是速度可填slow fast normal或数字(ms),fn是回调函数
淡入淡出:
- fadeIn(sd,fn) 淡入已经隐藏的元素
- fadeOut(sd,fn) 淡出已经显示的元素
- fadeToggle(sd,fn) 淡出入开关
- fadeTo(sd,alpha,fn) 自定义透明度
//参数都是可选的,sd 是速度可填slow fast normal或数字(ms),alpha是透明度,fn是回调函数
滑动隐藏:
- slideUp(sd,fn) 向上滑动隐藏
- slideDown(sd,fn) 向下滑动隐藏
- slideToggle(sd,fn) 上下滑动显示开关
//参数都是可选的,sd 是速度可填slow fast normal或数字(ms),fn是回调函数
自定义//帧动画,补间动画:
- animate( {属性},sd,fn) 动画
//要让元素实现动画,必须设置定位
//参数:{ }必填,sd 可选动画时间,fn可选回调函数
例如:
动画队列,队列按照顺序依次执行:
停止属性改变:
- jq( ".div ").stop( bool,bool ) // 停止动态改变的属性的现象
//参数:都可选布尔值,第一个是否停止所有队列,第二个是否立即执行完所有效果