JQuery
文档就绪函数
所有jquery函数位于一个document ready函数中
$(document).ready(function(){
---jquery functions---
})
jQuery 语法
基础语法是：$(selector).action()
•美元符号定义 jQuery
•选择符（selector）“查询”和“查找” HTML 元素
•jQuery 的 action() 执行对元素的操作
例:$(this).hide(); 隐藏当前的 HTML 元素
jQuery 选择器
元素选择：
$(this) 选取当前 HTML 元素
$("p") 选取所有 <p> 元素
$("#test") 选取id="test" 的元素
$(".test") 选取所有 class="test" 的元素
$("p.test") 选取所有 class="test" 的 <p> 元素
$("p#test") 选取 id="test" 的第一个 <p> 元素
$(this).parent() 获取当前的父级元素
$(this).next() 获取当前的后一元素
$(this).prev() 获取当前的前一元素
$(this).find(".test") 查找当前的所有 class="test" 的子元素
jQuery 效果
$(selector).hide() 隐藏被选元素
$(selector).show() 显示被选元素
$(selector).hide(speed,callback)
speed可为："slow", "fast", "normal" 或毫秒
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称
切换：同hide 或 show 函数有相同参数
$(selector).toggle() 切换（在隐藏与显示之间）被选元素
jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元
素的可见状态
滑动函数：同hide 或 show 函数有相同参数
$(selector).slideDown() 向下滑动（显示）被选元素
$(selector).slideUp() 向上滑动（隐藏）被选元素
$(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
Fade 函数：
$(selector).fadeIn() 淡入被选元素（同hide 或 show 函数有相
同参数）
$(selector).fadeOut() 淡出被选元素（同hide 或 show 函数有相
同参数）
$(selector).fadeTo() 把被选元素淡出为给定的不透明度(参数为：
speed,opacity,callback，opacity 参数规定减弱到给定的不透明度
)
例：$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
自定义动画
$(selector).animate() 对被选元素执行自定义动画
例1：
<html>
<head>
<script type="text/javascript"
src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
</head>
<body>
<p><a href="#" id="start">Start Animation</a></p>
<div id="box"
style="background:#98bf21;height:100px;width:100px;position:
relative">
</div>
</body>
</html>
例2：
<html>
<head>
<script type="text/javascript"
src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
</head>
<body>
<p><a href="#" id="start">Start Animation</a></p>
<div id="box"
style="background:#98bf21;height:100px;width:200px;position:
relative">
HELLO
</div>
</body>
</html>
179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
