Web实训知识点0409

最新推荐文章于 2021-11-13 21:00:38 发布

是在为难我大雄

最新推荐文章于 2021-11-13 21:00:38 发布

阅读量76

点赞数

本文链接：https://blog.csdn.net/weixin_44781447/article/details/89288087

版权

一：Jquery的使用
1：加入Jquery库文档就绪（需要写一个函数 $document），ready（function（{}）），相当于$ function（）{}）。
2：jQuery的基本语法: $(s e l e c t) . a c t i o n () 。 j Q u e r y 的选择器：当要选择 “ p 标签的第一个和第三个 ” ，可以$ (“p eq(0)”)，$(“p eq(1)”)
二：jQuery动画效果:
1：隐藏和显示。
两个方法：hide（），show（）。
使用**hide()方法隐藏：
$(‘selected’).hide(speed,cellback)
使用show()**方法展示：
$(‘selected’).show(speed,cellback)
speed规定隐藏和显示的速度，取值为“show”，“fast”，毫秒，
callback参数，是隐藏和显示完成后。
列子：

<p>Jquery动画效果,隐藏和显示。</p>
<input type="button" value="隐藏" id="button1">
<input type="button" value="显示" id="button2">
<input type="button" value="按钮" id="button3">
<script>      
  $(document).ready(function(){            
$("#button1").click(function(){               
 $("p").hide(1000)               
 alert("恭喜你，隐藏完成")            })           
 $("#button2").click(function(){              
  $("p").show(2000,function(){           
     alert("恭喜你，显示完成")         
   })     
   })              
  $("#button3").click(function(){            
    $("p").toggle(1000,function(){           
     $("p").css({color:"yellow"})
})              
  })       
 })    </script>

2：Jquery动画效果：滑动。
两个方法slidedown（），slideup（）。
**slideToggle()**切换滑动模式。
toggle切换，在动画效果方法的后面加上。
3：Jquery动画效果
animate（）方法用于创建自定义的动画
语法：$(select).animate({params},speed,cellback)
其他参数和上面的一样。
当使用animate（）方法的时候，必须使用camel标记法书写所有的属性名。
例子：css：background-color 在animate中：backgroundColor
animate（）：使用相对值
4：jQuery停止动画：stop()
stop（）：用于在动画完成前对它进行停止。暂停队列中的一个动画，如果对列中有多个动画，那么暂停该动画，然后系统会执行后面的动画。
5：jquery-----链（chaining）
通过jquery 可以把方法，链接到一起。chain允许我们在一条语句中运行多个jquery方法。
$(“p”).css({color:“red”}).slideUp(1500).slideDown(1500).animate(backgroundColor:“blue”);
代码的意思是：P先会变红，向上移1.5秒的速度，移动然后向下移1.5s的速度移动最后，将背景颜色变为蓝色。
不用链的写法是：
$(“p”).css({color:“red”});
$(" p ") . s l i d e U p (1500);$ (“p”).slideDown(1500);
$(“p”).animate(backgroundColor:“blue”);
三：课堂作业
代码：

   <html>
	<head>
		<meta charset="utf-8" />
		<title>二级菜单</title>
		<script src="jquery-1.8.3.min.js"></script>
		<script>
			$(document).ready(function(){
				
			})
		</script>
		<style>
			*{
				list-style: none;
				text-decoration: none;
				font-family: "黑体";
			}
			a{
				color: black;
			}
			nav{
				height: 40px;
				width: 500px;
				background-color: aqua;
				margin: 0 auto;
			}
			nav ul {
				margin: 0 auto;
			}
			nav ul li{
				height: 40px;
				width: 70px;
				text-align: center;
				line-height: 40px;
				float: left;
				margin-left: 8px;
				position: relative;
			}
			nav ul li:hover{
				background-color: green;
			}
			nav ul li:hover a{
				color: yellow;
			}
			nav ul li ul{
				float: none;
				padding: 0;
				position: absolute;
				left: -8px;
				display: none;
			}
			nav ul li ul li{
				background-color: indigo;
				height: 40px;
				width: 90px;
			}
			nav ul li ul li:hover{
				background-color: yellow;
				
			}
			nav ul li ul li:hover a{
				color: indigo;
				
			}
		</style>
	</head>
	<body>
		<nav>
			<ul>
				<li>
					<a href="#">首页</a>
				</li>
				<li "divDisplay_one()" "div_one()">
					<a href="#">课程大厅</a>
					<ul id="one">
						<li>
							<a href="#">web网页实战</a>
						</li>
						<li>
							<a href="#">服务端技术</a>
						</li>
						<li>
							<a href="#">Python技术</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">学习中心</a>
				</li>
				<li "divDisplay_two()" "div_two()">
					<a href="#">经典案例</a>
					<ul id="two">
						<li>
							<a href="#">Java</a>
						</li>
						<li>
							<a href="#">HTML</a>
						</li>
						<li>
							<a href="#">C#</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">关于我们</a>
				</li>
			</ul>
		</nav>
	</body>
	<script>
		var a = $("#one");
		var b = $("#two");
		function divDisplay_one(){
			a.css({display:"block"});
		}
		function div_one(){
			a.css({display:"none"});
		}
		function divDisplay_two(){
			b.css({display:"block"});
		}
		function div_two(){
			b.css({display:"none"});
		}
	</script>
</html>

是在为难我大雄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web实训知识点0409

一：Jquery的使用1：加入Jquery库文档就绪（需要写一个函数（document），ready（function（）），相当于（document），ready（function（{}）），相当于（document），ready（function（）），相当于function（）{}）。2：jQuery的基本语法:(select).action()。jQuery的选择器：当要选择“p标签的...
复制链接

扫一扫