第一个例子:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>点击就消失.</p>
</body>
</html>
//说明如下:
$(this).hide()
jQuery 的 hide() 函数,隐藏当前的 HTML 元素。
$("p").hide()
jQuery 的 hide() 函数,隐藏所有 <p> 元素。
$(".test").hide()
jQuery 的 hide() 函数,隐藏所有 class="test" 的元素。
$("#test").hide()
jQuery 的 hide() 函数,隐藏 id="test" 的元素。
总结:1.普通HTML元素的选择 $("p")
2.包含类选择器的HTML元素选择 $(".test")
3.包含id选择器的HTML元素选择 $("#test")
4.文档对象的选择 $(document)
5. $(this) 表示当前元素,即调用方法的元素。
6.$("p").click()
例子2.
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#test").click(function(){
$(this).fadeOut();
});
});
</script>
</head>
<body>
<div id="test" style="background:yellow;width:200px">CLICK ME AWAY!</div>
<p>如果您点击上面的框,它会淡出。</p>
</body>
</html>
总结:
$(this).fadeOut();用于淡出。
例子3:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>Island Trading</h3>
<div class="ex">
<button class="hide" type="button">Hide me</button>
<p>Contact: Helen Bennett<br />
Garden House Crowther Way<br />
London</p>
</div>
<h3>Paris Trading</h3>
<div class="ex">
<button class="hide" type="button">Hide me</button>
<p>Contact: Marie Bertrand<br />
265, Boulevard Charonne<br />
Paris</p>
</div>
</body>
</html>
总结:
1.取得当前元素的父元素 $(this).parents(".ex")
2.$(this).parents(".ex").hide("slow");慢慢隐藏
3。$(".ex .hide"),取得div下class选择器为hide的元素
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>点击就消失.</p>
</body>
</html>
//说明如下:
$(this).hide()
jQuery 的 hide() 函数,隐藏当前的 HTML 元素。
$("p").hide()
jQuery 的 hide() 函数,隐藏所有 <p> 元素。
$(".test").hide()
jQuery 的 hide() 函数,隐藏所有 class="test" 的元素。
$("#test").hide()
jQuery 的 hide() 函数,隐藏 id="test" 的元素。
总结:1.普通HTML元素的选择 $("p")
2.包含类选择器的HTML元素选择 $(".test")
3.包含id选择器的HTML元素选择 $("#test")
4.文档对象的选择 $(document)
5. $(this) 表示当前元素,即调用方法的元素。
6.$("p").click()
例子2.
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#test").click(function(){
$(this).fadeOut();
});
});
</script>
</head>
<body>
<div id="test" style="background:yellow;width:200px">CLICK ME AWAY!</div>
<p>如果您点击上面的框,它会淡出。</p>
</body>
</html>
总结:
$(this).fadeOut();用于淡出。
例子3:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>Island Trading</h3>
<div class="ex">
<button class="hide" type="button">Hide me</button>
<p>Contact: Helen Bennett<br />
Garden House Crowther Way<br />
London</p>
</div>
<h3>Paris Trading</h3>
<div class="ex">
<button class="hide" type="button">Hide me</button>
<p>Contact: Marie Bertrand<br />
265, Boulevard Charonne<br />
Paris</p>
</div>
</body>
</html>
总结:
1.取得当前元素的父元素 $(this).parents(".ex")
2.$(this).parents(".ex").hide("slow");慢慢隐藏
3。$(".ex .hide"),取得div下class选择器为hide的元素