jQuery

最新推荐文章于 2024-07-24 14:22:29 发布

土拨鼠本鼠

最新推荐文章于 2024-07-24 14:22:29 发布

阅读量164

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/AXN567/article/details/116023263

版权

jQuery

jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程。掌握了各种事件意思即可改动出现不同效果，比较容易上手。

点击消失术

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide(); });
	$("h1").click(function(){
    $(this).hide();  });});
</script>
</head>
<body>
<p>如果你讨厌我，点我我就会消失</p>
<p>你还真点啊!</p>
<p>气死我了!</p>
	<h1>我也讨厌你！</h1>
</body>
</html>

这个代码很有趣，点击文字文字就会被隐藏。可以在$("p")里改变其形式，例如“#p”、“.p”，再在<p>里改下就可以限制点击消失或者不隐藏。很简单好玩的一个例子，可以去Hbuilder里自己试试：

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素

我消失了，我又出来了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();  });
	 $("h2").mousemove(function(){
    $(".test").show(); });});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p class="test">这是另外一个段落。</p>
<button class="test">点我</button>
</body>
</html>

这是另一种点击隐藏的小实例，运用的事件不同，运行出来的效果也不同。
点击那个按钮，会隐藏运用了class="test"的文字，包括按钮。最开始的例子是点击隐藏就结束了，这里新增一个

$("h2").mousemove(function(){
    $(".test").show(); })；

如果mousemove这里还是click，则点击标题隐藏的文字和按钮又会出现；这里运行出来的效果是隐藏后鼠标移到标题上即可显示出隐藏的内容。

$("*") 选取所有元素 
$(this) 选取当前 HTML 元素 
$("p.intro") 选取 class 为 intro 的 <p> 元素 
$("p:first") 选取第一个 <p> 元素 在线实例 
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素  
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素   
$("[href]") 选取带有 href 属性的元素 
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 
$("tr:even") 选取偶数位置的 <tr> 元素 
$("tr:odd") 选取奇数位置的 <tr> 元素

淡淡的出现，淡淡的隐去

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000); });
	 $("p").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000); });});
</script>
</head>
<body>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

这个实例是点击按钮即会有设置好大小颜色的方块慢慢显现，$("#div3").fadeIn(3000)改变这段代码中后面括号里的数字，即可改变淡入的时间，很快的出现或者慢动作出现
本来只能通过这个按钮控制它出来，想要他以相同的速度淡出可以再设置一个按钮，或者将其中代码改为

$(document).ready(function(){
	$("button").click(function(){
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(3000);});});

也就是fadeIn和fadeOut的结合版，这样点击按钮淡入，再点一次即淡出。
我上面的实例用的和这个方法不同，不点击按钮淡出，而是设置了一个fadeOut，是的点击上面那串

以下实例演示了 fadeIn() 使用了不同参数的效果。

文字即可淡出。

显示or隐藏面版

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow"); });});
</script>
<style type="text/css"> 
#panel,#flip
{padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;}
#panel
{padding:50px;display:none;}
</style>
</head>
<body>
<div id="flip">点我就可以查看我的秘密啦！</div>
<div id="panel">想看我的秘密你想得美!</div>
</body>
</html>

这个就是简单的点击按钮就可以下滑一个面板，再点击就可隐藏起来。实际上最开始也是只能单一的显示或者隐藏，用了slideToggle即可两者皆用。

简单动画

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    `$("div").animate({left:'+=25px',height:'+=15px',width:'+=15px'});`  });});
</script> 
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:fixed;"></div>
</body>
</html>

颜色可以自己设置，最开始的效果是一个方块从左平移到右，很简单的原始动画。改一些设定，可以有点击一下按钮就会往右一点同时还会变大一点儿，多点几下会越来越大越来越右，每次增大多少右移多少根据 $("div").animate({left:'+=25px',height:'+=15px',width:'+=15px'});
来改变，可以做出不同效果的简单动画。

以上就是全部内容啦，应为运行图片都是动态效果不太好截图，我也不太知道怎么放视频，所以好奇效果的可以复制去运行康康，完整代码都在上面了，还可以自己改改改成效果更好哒。

下次见啦！

土拨鼠本鼠

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery

jQuery点击消失术<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).r
复制链接

扫一扫