JQuery——简单API验证

最新推荐文章于 2020-09-17 16:56:57 发布

爪哇天河

最新推荐文章于 2020-09-17 16:56:57 发布

阅读量348

点赞数

分类专栏： web 文章标签： jquery

本文链接：https://blog.csdn.net/ps_zhanglei/article/details/42461053

版权

web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、元素隐藏：

<html>
<head>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>

<!-- 
	直接使用google的类库
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
 	使用微软的类库
 	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
 -->
<script type="text/javascript">
	$(document).ready(function() {
		$("p").click(function() {
			$(this).hide();
		});
		
		/* $("button").click(function(){
			$("p").hide();
		});  */
		
		$("#button1").click(function(){
			$("#test").hide();
		});
		
		$(".button2").click(function(){
			$(".test").hide();
		});
	});
	
	/* $(this).hide() - 隐藏当前元素

	$("p").hide() - 隐藏所有段落

	$("p.test").hide() - 隐藏所有 class="test" 的段落

	$("#test").hide() - 隐藏所有 id="test" 的元素 */


</script>
</head>

<!-- 
	您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
	$(document).ready(function(){
		--- jQuery functions go here ----
	});
	这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
 -->

<body>
	<p>If you click on me, I will disappear.</p>
	<h2>This is a heading</h2>
	<p>This is a paragraph.</p>
	<p>This is another paragraph.</p>
	<p id="test">This one has id.</p>
	<p class="test">This one has class.</p>
	<button type="button" >Click me</button>
	<button type="button" id="button1">Click button1</button>
	<button type="button" class="button2">Click button2</button>
</body>

</html>

2、panel滑动

<html>
<head>

<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".flip").click(function() {
			$(".panel").slideToggle("slow");
		});
	});
</script>

<style type="text/css">
div.panel,p.flip {
	margin: 0px;
	padding: 5px;
	text-align: center;
	background: #e5eecc;
	border: solid 1px #c3c3c3;
}

div.panel {
	height: 120px;
	display: none;
}
</style>
</head>

<body>

	<div class="panel">
		<p>Because time is valuable, we deliver quick and easy learning.</p>
		<p>At W3School, you can study everything you need to learn, in an
			accessible and handy format.</p>
	</div>

	<p class="flip">Show/Hide Panel</p>

</body>
</html>

3、淡入淡出

<html>
<head>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("button").click(function() {
			$("div").fadeTo("slow", 0.1);
		});
	});
</script>
</head>

<body>
	<div id="test" style="background: yellow; width: 300px; height: 300px">
		<button type="button">Click to Fade</button>
	</div>

</body>

</html>

4、动画调整大小

<html>
<head>
<script type="text/javascript" src="js/jquery-2.1.3.min.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>

5、HTML元素操作

<html>
<head>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">



	$(document).ready(function() {
		$("button").click(function() {
			$("p:first").html("W3School");
			
			/* $("p:even").after(" W3School."); */

			$("#p3").append(" <b>W3School</b>.");
			/* 	$(selector).css(name,value)
			$("p").css("background-color","yellow"); */
			$("#p4").css("background-color","blue");
			
			/* $(selector).css({properties})
			   $("p").css({"background-color":"yellow","font-size":"200%"}); */
		   $("#p5").css({"background-color":"yellow","font-size":"200%"});
			   
		  /*  $(selector).css(name)
		   	  $(this).css("background-color");
 			*/
		   $("#result").html($("#p4").css("background-color"));
		   
		});
	});
</script>
</head>

<body>
	<h2>This is a heading</h2>
	<p>This is a paragraph.</p>
	<p>This is another paragraph.</p>
	<p id="p3">This is p3.</p>
	<p id="p4">This is p4.</p>
	<p id="p5">This is p5.</p>
	<p id="p6">This is p6.</p>
	<p id="p7">This is p7.</p>
	<p id="result">Click in the box</p>
	<button type="button">Click me</button>
</body>

</html>