【jquery学习】2019.6.8-优快云博客

本文深入探讨了使用jQuery进行网页交互设计的技巧，包括滑动面板、动画效果、HTML操作、CSS样式调整及AJAX数据更新等核心功能。通过具体实例，读者可以学习如何利用jQuery简化复杂的DOM操作，实现动态网页效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一些实例
整个代码送上

jquery学习

<h>本页部分文字点击即消失</h>

<hr>

<!-- Slide panel-->
<div>
	<div class="header">1.Slide panel</div>
	<div class="panel">
		<p>W3School - 领先的 Web 技术教程站点</p>
		<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
	</div>
	<h class="flip">请点击这里</h>
	<!-- Slide panel实例-->
	<script type="text/javascript"> 
		$(document).ready(function(){
		$(".flip").click(function(){
		    $(".panel").slideToggle("3000");
		  });
		});
	</script>
</div>

<hr>

<!-- animation动画效果-->
<div style="height: 300px;">
	<div class="header">2.animation动画效果</div>
	<button class="button2">开始动画</button>
	<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
	<div class="div1" style="background:#98bf21;height:100px;width:100px;position:relative;margin-left: 45%;">
	</div>
	<!-- animate动画效果-->
	<script> 
		$(document).ready(function(){
		  $(".button2").click(function(){
		    var div=$(".div1");
		    div.animate({height:'300px',opacity:'0.4'},"slow");
		    div.animate({width:'300px',opacity:'0.8'},"slow");
		    div.animate({height:'100px',opacity:'0.4'},"slow");
		    div.animate({width:'100px',opacity:'0.8'},"slow");
		  });
		});
	</script> 
</div>

<hr>

<div>
	<div class="header">3.html操作</div>
	<h2>This is a heading</h2>
	<p class="p3">恐龙.</p>
	<p class="p3">化石.</p>
	<button class="button3-1" >内容修改</button>
	<button class="button3-2">追加内容</button>
	<button class="button3-3">在前头加</button>
	<button class="button3-4">在后头加</button>

	<script type="text/javascript">
		$(document).ready(function(){
		  $(".button3-1").click(function(){
		  	$(".p3").html("仙女");
		  });
		  $(".button3-2").click(function(){
		  	$(".p3").append(" <b>傻子</b>.");
		  });
		  $(".button3-3").click(function(){
		  	$(".p3").before("<b>大</b>")
		  });
		  $(".button3-4").click(function(){
		  	$(".p3").after("<b>子</b>")
		  });
		});
	</script>
</div>

<hr>

<div>
	<div class="header">4.css操作</div>
	<h2>This is a heading</h2>
	<p class="p4">我要变绿.</p>
	<p class="p4">嘻嘻.</p>
	<button class="button4">修改样式</button>
	<script type="text/javascript">	
		$(document).ready(function(){
		  $(".button4").click(function(){
		    $(".p4").css({"color":"#aaa","font-size":"150%","border":"1px solid #aaa"});
		  });
		});
	</script>
</div>

<hr>

<div>
	<div class="header">4.通过ajax修改</div>
		<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
		<button id="b01" type="button">改变内容</button>
		<script type="text/javascript">
			$(document).ready(function(){
			  $("#b01").click(function(){
			  $('#myDiv').load('newone.docx');
			  });
			});
		</script>
	</div>