Jquery获取对象:
//通过jquery 获取jquery对象
//var
u
s
e
r
n
a
m
e
=
username=
username=("#username"); 原始方式
var $username=jQuery("#username"); jquery本身的方式
jQuery:
案例1-弹出广告
技术:
定时器
jQuery
///
jquery和html的整合
jquery是单独的js文件
通过script标签的src属性导入即可
获取一个jquery对象
$(“选择器”) 或者 jQuery(“选择器”)
jquery和html的整合
jquery是单独的js文件
通过script标签的src属性导入即可
获取一个jquery对象
$(“选择器”) 或者 jQuery(“选择器”)
dom对象和jquery对象之间的转换
dom对象===>jquery对象
$(dom对象)
jquery对象===>dom对象
方式1:
jquery对象[index]
方式2:
jquery对象.get(index)
页面加载:
js:
window.οnlοad=function(){}//在一个页面中只能使用一次
jquery 在一个页面中可以使用多次
方式1:
$(function(){…})
方式2:
$(document).ready(function(){});
派发事件:
(
"
选
择
器
"
)
.
c
l
i
c
k
(
f
u
n
c
t
i
o
n
(
)
.
.
.
)
;
等
价
于
原
生
j
s
中
d
o
m
对
象
.
o
n
c
l
i
c
k
=
f
u
n
c
t
i
o
n
(
)
.
.
.
.
掌
握
事
件
:
f
o
c
u
s
b
l
u
r
s
u
b
m
i
t
c
h
a
n
g
e
c
l
i
c
k
j
q
u
e
r
y
中
效
果
:
隐
藏
或
展
示
s
h
o
w
(
毫
秒
数
)
h
i
d
e
(
毫
秒
数
)
滑
入
或
滑
出
s
l
i
d
e
D
o
w
n
(
毫
秒
数
)
:
向
下
滑
入
s
l
i
d
e
U
p
(
毫
秒
数
)
:
向
上
滑
出
淡
入
或
淡
出
f
a
d
e
I
n
(
i
n
t
)
:
淡
入
f
a
d
e
O
u
t
(
i
n
t
)
:
淡
出
/
/
/
/
/
/
/
/
/
/
/
/
/
/
/
/
/
/
/
/
/
案
例
1
−
步
骤
分
析
1.
页
面
加
载
成
功
之
后
("选择器").click(function(){...}); 等价于 原生js中 dom对象.οnclick=function(){....} 掌握事件: focus blur submit change click jquery中效果: 隐藏或展示 show(毫秒数) hide(毫秒数) 滑入或滑出 slideDown(毫秒数):向下滑入 slideUp(毫秒数):向上滑出 淡入或淡出 fadeIn(int):淡入 fadeOut(int):淡出 / 案例1-步骤分析 1.页面加载成功之后
("选择器").click(function()...);等价于原生js中dom对象.onclick=function()....掌握事件:focusblursubmitchangeclickjquery中效果:隐藏或展示show(毫秒数)hide(毫秒数)滑入或滑出slideDown(毫秒数):向下滑入slideUp(毫秒数):向上滑出淡入或淡出fadeIn(int):淡入fadeOut(int):淡出/////////////////////案例1−步骤分析1.页面加载成功之后(function(){…}) 开始一个定时器 setTimeout();
2.编写展示广告方法
获取div,然后调用效果方法
设置另一个定时器 隐藏
3.编写隐藏广告的方法
获取div,然后调用效果方法
选择器总结:
基本选择器★
$("#id值") $(".class值") $(“标签名”)
了解:$("*")
理解:获取多个选择器 用逗号隔开
$("#id值,.class值")
层次选择器 ★
a b:a的所有b后代
a>b:a的所有b孩子
a+b:a的下一个兄弟(大弟弟)
a~b:a的所有弟弟
基本过滤选择器:★
:frist 第一个
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >
:lt(index) <
内容过滤:
:has("选择器"):包含指定选择器的元素
可见过滤:
:hidden 在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
:visible
属性过滤器:★
[属性名]
[属性名="值"]
表单过滤:
:input 所有的表单子标签 input select textarea button
//input -
属性和css
attr():设置或者获取属性(1.6版本之前)
attr(“属性名”):获取
attr(“属性名”,“值”):设置一个
attr({
“属性名”:“值”,
“属性名”:“值”
})
prop():和attr用法一致(1.6版本之后)
(了解)addClass("存在的样式")
removeAttr()
(了解)removeClass()
css():设置获取获取元素的样式
css("属性"):获取
css("属性","值"):设置
css({
"":"",
"":"",
"":""
}):设置多个
width()
height()
/
文档处理:
内部插入(2组方法 任意掌握一组)
外部插入(2组方法 任意掌握一组)
删除(empty remove)
//
val html text
val :设置或者获取values属性
html:获取或者设置标签体内容
遍历数组
方式1:
jquery对象.each(function(){});
方式1:
$.each(jquery对象,function(){});
/
在jquery中创建元素
$("<标签名>").prop(属性).html(内容)