JQuery:利用闭包JS自定义模块;
入口函数:$(document).read(function(){}) 或者
(
f
u
n
c
t
i
o
n
(
)
)
区
别
:
1.
w
i
n
d
o
w
.
o
n
l
o
a
d
(
)
只
有
1
个
;
J
q
u
e
r
y
可
以
多
个
2.
J
Q
u
e
r
y
优
先
级
大
于
o
n
l
o
a
d
;
因
为
J
q
u
e
r
y
只
要
等
待
d
o
m
树
加
载
完
成
,
o
n
l
o
a
d
要
等
待
所
有
资
源
加
载
J
Q
u
e
r
y
与
D
o
m
对
象
转
换
:
(function(){}) 区别:1.window.onload()只有1个;Jquery可以多个 2.JQuery优先级大于onload;因为Jquery只要等待dom树加载完成,onload要等待所有资源加载 JQuery与Dom对象转换:
(function())区别:1.window.onload()只有1个;Jquery可以多个2.JQuery优先级大于onload;因为Jquery只要等待dom树加载完成,onload要等待所有资源加载JQuery与Dom对象转换:(dom对象) <=> $(dom对象)【下标】
方法:
$().text(‘设置的文本’) :获取包括后代元素纯文本,不会解析标签 和innerText类似
(
)
.
c
s
s
(
′
属
性
′
,
′
值
′
)
:
获
取
第
一
个
d
o
m
对
象
样
式
;
设
置
样
式
(
内
联
样
式
)
选
择
器
:
过
滤
选
择
器
:
().css({'属性','值'}):获取第一个dom对象样式;设置样式(内联样式) 选择器: 过滤选择器:
().css(′属性′,′值′):获取第一个dom对象样式;设置样式(内联样式)选择器:过滤选择器:(‘li:eq(索引)’)
筛选选择器:
(
′
u
l
′
)
.
c
h
i
l
d
r
e
n
(
′
l
i
′
)
<
=
>
('ul').children('li') <=>
(′ul′).children(′li′)<=>(‘ul>li’)
(
′
u
l
′
)
.
f
i
n
d
(
′
l
i
′
)
<
=
>
('ul').find('li') <=>
(′ul′).find(′li′)<=>(‘ul li’)
$(‘ul’).parent(‘li’)
(
′
u
l
′
)
.
e
q
(
i
n
d
e
x
)
<
=
>
('ul').eq(index) <=>
(′ul′).eq(index)<=>(‘li:eq(索引)’)
(
′
u
l
′
)
.
s
i
b
l
i
n
g
s
(
′
l
i
′
)
<
=
>
('ul').siblings('li') <=>
(′ul′).siblings(′li′)<=>(‘ul~li’)
class类操作:
$().addclass(类1 类2)
$().removeclass(类1 类2)【不加参数移除所有类】
$().hasclass(类1)【判断存在类】
$().toggleclass(类)【切换类,有则删,无则加】
动画:
$().show(time,fun):
$().hide(time,fun):
$().toggle(time):
$().animate({style},time,speed,callback(可以嵌套动画)):【(如果样式名中含有-号,要改成驼峰命名法)】
$().stop(bool,bool):是否清除队列,是否到达最终效果
动态创建节点:
$().html():获取【第一个】dom对象的包括后代元素文本(包括标签),会解析标签 和innerHtml类似
(
)
.
a
p
p
e
n
d
(
().append(
().append((‘dom对象’)):需要添加进页面, 和document.creatElement(元素名)类似
标签节点操作:
$().append():父标签下最后添加新标签;操作已有标签是剪切到最后
$().prepend():父标签下第一位添加新标签;操作已有标签是剪切到最后
$(A).before(B):B添加到A之前
$(A).after(B):B添加到A之后
$().empty() :他杀元素;清空元素内容,保留标签
$().remove(): 自杀元素;清空元素本身,包括标签
$().clone(bool【克隆事件】):克隆节点,需要append添加进页面
标签属性:
$().val():获取表单元素的内容(value)【带参是设置】
$().attr({}):操作节点属性【不能操作bool值】
$().removeAttr(‘属性1 属性2’):删除属性
$().prop(‘属性’,‘值’):操作bool值属性
尺寸属性:
width()/height():内容宽高【带参是设置】
innerWidth/height():内边距+内容
outwidth/height():内边距+内容+边框
outwidth/height(true):内边距+内容+边框+外边距
offset():距离dom的距离
position():距离最近定位元素距离
scrollTop/Left():获取整个滚动条移动距离
事件绑定:
$().on(‘事件’,fun(){}):简单绑定:【不支持动态注册,即在dom加载完毕后,添加的dom元素无法注册事件】
$(‘父’).on(‘事件’,‘触发元素’,fun(){}):委托注册,支持动态注册
$().off():解绑所有事件【带参是解绑指定的所有事件】
(
)
.
o
n
(
′
自
定
义
事
件
′
,
f
u
n
(
)
)
:
用
().on('自定义事件',fun(){}):用
().on(′自定义事件′,fun()):用().trigger(‘自定义事件名’)触发
补充:
链式编程:
(
)
.
x
x
(
)
.
x
x
(
)
:
【
只
有
设
置
操
作
可
以
延
续
,
获
取
无
法
延
续
】
显
示
迭
代
:
().xx().xx():【只有设置操作可以延续,获取无法延续】 显示迭代:
().xx().xx():【只有设置操作可以延续,获取无法延续】显示迭代:().each(fun(index,dom对象){})
多库冲突:
.
n
o
c
o
n
f
l
i
c
t
(
)
释
放
.noconflict()释放
.noconflict()释放的控制权
插件库:jq22.com UI:JQueryUI :bootcdn
自定义插件:在JQuery的prototype添加方法