jQuery学习精心整理文档格式.docx
《jQuery学习精心整理文档格式.docx》由会员分享，可在线阅读，更多相关《jQuery学习精心整理文档格式.docx（8页珍藏版）》请在冰豆网上搜索。
#test"
）.hide（）-隐藏所有id="
的元素
}）;
}）;
三、jQuery选择器
1、jQuery元素选择器
jQuery使用CSS选择器来选取HTML元素。
）选取<
p>
元素。
p.intro"
）选取所有class="
intro"
的<
p#demo"
）选取所有id="
demo"
2、jQuery属性选择器
jQuery使用XPath表达式来选择带有给定属性的元素。
[href]"
）选取所有带有href属性的元素。
[href='
#'
]"
）选取所有带有href值等于"
#"
的元素。
[href!
='
）选取所有带有href值不等于"
[href$='
.jpg'
）选取所有href值以"
.jpg"
结尾的元素。
3、jQueryCSS选择器
$（'
"
）.css（"
background-color"
"
red"
）;
四、事件函数
jQuery事件
Event函数
绑定函数至
$（document）.ready（function）
将函数绑定到文档的就绪事件（当文档完成加载时）
$（selector）.click（function）
触发或将函数绑定到被选元素的点击事件
$（selector）.dblclick（function）
触发或将函数绑定到被选元素的双击事件
$（selector）.focus（function）
触发或将函数绑定到被选元素的获得焦点事件
$（selector）.mouseover（function）
触发或将函数绑定到被选元素的鼠标悬停事件
五、JQuery隐藏与显示
1、语法
$（"
selector"
）.hide（speed,callback）;
//speed:
显示隐藏的速度，slow,fast或毫秒
）.show（speed,callback）;
//callback:
显示或隐藏后执行的函数名
$（selector）.toggle（speed,callback）;
//切换显示和隐藏
六、jQuery淡入淡出
$（selector）.fadeIn（speed,callback）;
//用于淡入已隐藏的元素。
$（selector）.fadeOut（speed,callback）;
//淡出显示的元素。
$（selector）.fadeToggle（speed,callback）;
//淡入淡出
fadeTo（）方法允许渐变为给定的不透明度（值介于0与1之间）。
$（selector）.fadeTo（speed,opacity,callback）;
七、jQuery上下滑动
$（selector）.slideDown（speed,callback）;
\\向下滑动元素
$（selector）.slideUp（speed,callback）;
\\向上滑动元素
$（selector）.slideToggle（speed,callback）;
\\向上及向下滑动元素
八、jQuery动画
$（selector）.animate（{params},speed,callback）;
--params参数定义形成动画的CSS属性
***如需对位置进行操作，要先把元素的CSSposition属性设置为relative\fixed\absolute****
实例：
button"
）.click（function（）{
div"
）.animate（{
left:
'
250px'
opacity:
0.5'
---透明度
height:
+=150px'
----相对应用，在原先基础上
width:
toggle'
--预设值，hide\show\toggle
//队列animate
vardiv=$（"
）
div.animate（{CSS属性},speed,callback）;
//
}）
}
九、停止动画stop（）
$（selector）.stop（）;
--停止当前动画，继续下一个动画
$（selector）.stop（true）;
----停止所有动画
$（selector）.stop（true,true）;
----停止动画完成当前动画
十、callback的用法
实例
）.hide（1000,function（）{alert（"
十一、jQuery方法、动作连接用法
$（selector）.css（"
color"
）.slideUp（100）.slideDown（100）;
---每个方法可换行，中途不要用分号
十二、jQuery获取与设置
∙text（）-设置或返回所选元素的文本内容
∙html（）-设置或返回所选元素的内容（包括HTML标记）
∙val（）-设置或返回表单字段的值
∙attr（）方法用于获取属性值
alert（"
html:
+$（selector）.html（））;
十二、使用回调函数设置
#btn1"
#test1"
）.text（function（i,origText）{
return"
Oldtext:
"
+origText+"
Newtext:
Helloworld!
（index:
+i+"
）"
;
#btn2"
#test2"
）.html（function（i,origText）{
Oldhtml:
Newhtml:
Hello<
b>
world!
/b>
（index:
#w3s"
）.attr（"
href"
function（i,origValue）{
returnorigValue+"
/jquery"
）.click（function（）{--同时设置多个属性值
）.attr（{
:
title"
W3SchooljQueryTutorial"
十三、在被选元素的位置插入内容
append（）-在被选元素的结尾插入内容
prepend（）-在被选元素的开头插入内容
after（）-在被选元素之后插入内容
before（）-在被选元素之前插入内容
functionafterText（）
{
vartxt1="
I<
//以HTML创建新元素
vartxt2=$（"
i>
/i>
）.text（"
love"
//通过jQuery创建新元素
vartxt3=document.createElement（"
big"
//通过DOM创建新元素
txt3.innerHTML="
jQuery!
img"
）.after（txt1,txt2,txt3）;
//在img之后插入新元素
}
十四、jQuery删除元素
remove（）----删除被选中的元素
empty（）----删除被选中的元素的子元素
）.remove（“.cl”）---删了“p”中class为cl的元素
十五、jQuery--获取并设置CSS类
∙addClass（）-向被选元素添加一个或多个类
∙removeClass（）-从被选元素删除一个或多个类
∙toggleClass（）-对被选元素进行添加/删除类的切换操作
∙css（）-设置或返回样式属性
$（selector）.addClass（"
CSS类名"
）---设置多个CSS类以空格隔开
$（selector）.removeClass（"
）---移除CSS类
propertyname"
）----返回CSS属性的值
value"
）----设置CSS属性的值
$（selector）.css（{"
:
value1"
---设置多个CSS属性值
十六、jQuery尺寸
jQuerywidth（）和height（）方法
$（selector）.width（）方法设置或返回元素的宽度（不包括内边距、边框或外边距）
$（selector）.height（）方法设置或返回元素的高度（不包括内边距、边框或外边距）
jQueryinnerWidth（）和innerHeight（）方法
innerWidth（）方法返回元素的宽度（包括内边距）。
innerHeight（）方法返回元素的高度（包括内边距）。
jQueryouterWidth（）和outerHeight（）方法
outerWidth（）方法返回元素的宽度（包括内边距和边框）。
outerHeight（）方法返回元素的高度（包括内边距和边框）。
outerWidth（true）方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight（true）方法返回元素的高度（包括内边距、边框和外边距）。
十七、jQuery遍历-祖先---可直接在parent（）.css属性
span"
）.parent（）;
返回被选元素的直接父元素
）.parents（）;
------返回被选元素的所有祖先元素
）.parents（"
ul"
----返回所有<
span>
元素的所有祖先，并且它是<
ul>
元素
）.pa
升级会员 