第八周的信息管理创新实践课学习周记

最新推荐文章于 2021-05-13 14:29:29 发布

_PiPi_

最新推荐文章于 2021-05-13 14:29:29 发布

阅读量73

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/YX010831/article/details/116019247

版权

第八周周记

知识点复习
代码的实现

知识点复习

jQuery简单运用
jQuery代码固定格式
jQuery 类选择器可以通过指定的 class 查找元素。
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。

语法:
$(selector).fadeIn(speed,callback);

jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。

语法:
$(selector).fadeOut(speed,callback);

jQuery 效果- 动画
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。

语法：
$(selector).animate({params},speed,callback);

jQuery animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

代码的实现

1.简单运用jQuery

<!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(){
  $("p").click(function(){
    $(this).hide();
  });
	 $("h1").click(function(){
    $(this).hide();
});
	  });
</script>
</head>
<body>
<p>今天周一</p>
<p>今天周二</p>
<p>今天周三</p>
	<h1>周末啦！</h1>
</body>
</html>

2.jQuery代码固定格式

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

3.用户点击按钮后所有带有 class=“test” 属性的元素都隐藏：

<!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(){
    $(".test").hide();
  });
});
 $(document).ready(function(){
  $("h2").mousemove(function(){
    $(".test").show();
  });
});
</script>
</head>
<body>

<h2>这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p class="test">这是另外一个段落。</p>
<button>点我</button>
</body>
</html>

4.jQuery 动画 - animate() 方法

<!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:'+=100px'
	});
  });
});
</script> 
</head>
 
<body>
<button>开始奔跑！</button>
<p>八百米测试开始：</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

5.jQuery 效果 - 淡入淡出

<!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);
  });
});
	$(document).ready(function(){
  $("button#out").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>

<body>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button>点击淡入 div 元素。</button>
	<button id=out>点击淡出 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>

6.jQuery animate() - 使用队列功能

<!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);
  });
});
	$(document).ready(function(){
  $("button#out").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>

<body>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button>点击淡入 div 元素。</button>
	<button id=out>点击淡出 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>

_PiPi_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第八周的信息管理创新实践课学习周记

第八周周记知识点复习代码的实现知识点复习jQuery简单运用jQuery代码固定格式jQuery 类选择器可以通过指定的 class 查找元素。jQuery fadeIn() 方法jQuery fadeIn() 用于淡入已隐藏的元素。语法:$(selector).fadeIn(speed,callback);jQuery fadeOut() 方法jQuery fadeOut() 方法用于淡出可见元素。语法:$(selector).fadeOut(speed,c
复制链接

扫一扫