jquery从零开始学习笔记

最新推荐文章于 2024-04-19 15:29:12 发布

iteye_14075

最新推荐文章于 2024-04-19 15:29:12 发布

阅读量219

点赞数

文章标签： jQuery HTML ViewUI

本文链接：https://blog.csdn.net/iteye_14075/article/details/82037308

版权

第一个例子：
<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的元素

iteye_14075

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery从零开始学习笔记

第一个例子：$(document).ready(function(){ $("p").click(function(){ $(this).hide(); });});点击就消失. //说明如下：$(this).hide() jQuery 的 hide() 函数，隐藏当前的 HTML 元素。 $("p").h...
复制链接

扫一扫