已经学了一周的jQuery了,还是个刚刚入了门的菜鸟QAQ
除了平常听老师讲讲课还在百度上搞了点知识点总结_
jQuery 对象
•jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。
•jQuery 对象是 jQuery 独有的。
•只有 jQuery 对象才能使用 jQuery 的方法,在 jQuery 对象中无法使用 DOM 对象的任何方法,反之 DOM 对象也无法使用任何 jQuery 的方法。
•约定:如果获取的是 jQuery 对象,那么要在变量前面加上 $
•jQuery 对象中封装了多个 DOM 对象,同时 jQuery 对象是类数组对象
•数组与类数组对象的区别
1.数组的类型是Array
2.类数组对象的类型是 Object
DOM 对象转 jQuery 对象
•使用 $()将 DOM 对象包装起来,就可以转换成 jQuery 对象
var item = document.getElementsByTagName(‘ul’)[0], // DOM对象
$item = $(item); // jQuery对象
jQuery 对象转换为 DOM 对象
jQuery 对象通过 jQuery 提供的 get(index)方法,得到对应的 DOM 对象
var $ul = $(‘ul’),
ul = $ul.get(0);
jQuery 对象是一个类数组对象,可以通过 [] 方式,得到对应的 DOM 对象。
类数组对象
类数组对象本质就是一个对象,只不过存储方式类似于数组的结构
•arguments 对象 ---- 接受函数实参的个数
•jQuery 对象 ---- 底层就是 dom 对象
属性
•length 属性(数组的长度 | 元素的个数)
方法
•get(index):根据 index 放回对应的 dom 对象
•eq(index):根据 index 返回对应的 jQuery 对象
•index():查找元素的索引值
ready 和 onlaod 的区别
ready
1.具有简写方式
2.在一个 HTML 页面中允许出现多个
3.加载完 DOM 结构就执行
4.执行速度快
onload
1.没有简写方式
2.在一个 HTML 页面中只能使用一个
3.需要等页面所有资源加载完才执行
4.执行速度比 ready 慢
jQuery 动画
基本隐藏、显示效果
•show()/ hide()
$(‘div’).show(1000).hide(1000);
若是对同一个 jQuery 对象使用,可以采用链式操作。
滑动式动画效果
•slideDown()/ slideUp()
$(‘div’).slideUp(1000).slideDown(1000);
淡入淡出
•fadeIn()淡入
•fadeOut()淡出
(
′
d
i
v
′
)
.
f
a
d
e
I
n
(
1000
)
.
f
a
d
e
O
u
t
(
1000
)
;
并
发
和
排
队
效
果
•
并
发
效
果
:
设
置
多
个
动
画
同
时
执
行
•
排
队
效
果
:
设
置
多
个
动
画
,
按
照
先
后
顺
序
依
次
执
行
j
Q
u
e
r
y
插
件
j
Q
u
e
r
y
插
件
的
作
用
•
扩
展
j
Q
u
e
r
y
的
功
能
•
呈
现
组
件
化
特
点
日
期
插
件
−
l
a
y
D
a
t
e
插
件
•
l
a
y
D
a
t
e
初
步
使
用
1.
引
入
l
a
y
d
a
t
e
.
j
s
2.
l
a
y
d
a
t
e
(
o
p
t
i
o
n
s
)
开
发
插
件
全
局
函
数
全
局
函
数
,
实
际
上
就
是
j
Q
u
e
r
y
本
身
的
方
法
。
j
Q
u
e
r
y
内
置
的
一
些
功
能
是
通
过
全
局
函
数
实
现
的
。
•
比
如
('div').fadeIn(1000).fadeOut(1000); 并发和排队效果 •并发效果:设置多个动画同时执行 •排队效果:设置多个动画,按照先后顺序依次执行 jQuery 插件 jQuery 插件的作用 •扩展 jQuery 的功能 •呈现组件化特点 日期插件 - layDate插件 •layDate初步使用 1.引入 laydate.js 2.laydate(options) 开发插件 全局函数 全局函数,实际上就是 jQuery 本身的方法。 jQuery 内置的一些功能是通过全局函数实现的。 •比如
(′div′).fadeIn(1000).fadeOut(1000);并发和排队效果•并发效果:设置多个动画同时执行•排队效果:设置多个动画,按照先后顺序依次执行jQuery插件jQuery插件的作用•扩展jQuery的功能•呈现组件化特点日期插件−layDate插件•layDate初步使用1.引入laydate.js2.laydate(options)开发插件全局函数全局函数,实际上就是jQuery本身的方法。jQuery内置的一些功能是通过全局函数实现的。•比如.ajax()就是典型的全局函数
向 jQuery 命名空间添加一个函数,只需要将这个新函数指定为 jQuery 本身的一个属性
$.globalFunction = function(){
// todo…
};
可以通过 jQuery.globalFunction()或者
.
g
l
o
b
a
l
F
u
n
c
t
i
o
n
(
)
来
调
用
当
需
要
添
加
多
个
函
数
可
以
使
用
.globalFunction()来调用 当需要添加多个函数可以使用
.globalFunction()来调用当需要添加多个函数可以使用.extend()函数
$.extend({
functionOne: function(){
// todo…
},
functionTwo: function(){
// todo…
}
});
通过上述代码可以添加全局函数,但是代码存在有关命名空间的风险
我们可以把属于一个插件的所有全局函数封装到一个对象