JQuery学习（二）

最新推荐文章于 2024-08-09 02:16:38 发布

萧萧可乐

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量337

点赞数

分类专栏： JQuery 文章标签： jquery function xhtml div border html

本文链接：https://blog.csdn.net/NIHAOX1/article/details/7022974

版权

JQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

今天的内容和昨天的有点冲突（也能说是补不足吧结合昨天的一起看可能会好点）
隐藏的编写：
不得不说JQuery是个很强大的JS框架它极大的简化了我们对常用代码的编写
下面是自己未用JQuery写的渐变隐藏代码

先拿出来方便大家对比后面将要介绍的JQ隐藏代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript"> 
var x=0;w=0;h=0;
function a(){
	var show=document.getElementsByTagName("div")[0];
	var p=document.getElementsByTagName("p")[0];
	p.style.visibility="hidden";
	p.style.position="absolute";
	w=parseInt(show.style.width)/100;
	h=parseInt(show.style.height)/100;
	show.style.filter="alpha(opacity=25)";
	show.style.opacity="0.25";
	show.style.position="absolute";
	t=setInterval('b()',10);
	if(x==100){
		clearInterval(t);
		}
	}
function b(){
	var show=document.getElementsByTagName("div")[0];
	show.style.width=(parseInt(show.style.width)-w)+"px";
	show.style.height=(parseInt(show.style.height)-h)+"px";
	x++;
	}
</script>
</head>
<body>
<div style="margin:0 auto; width:1000px; height:175px; border:1px #333333 solid; background-color:#690; text-align:center;">
	<p>这个是平滑消失的例子！</p>
</div><br/>
<button οnclick="a()">点击我试试</button>
</body>
</html>

看上去代码还不是很多对吧？
不过对比JQuery的代码你将会知道什么叫繁琐：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="jquery.js"></script> //先要下载jquery的JS函数库。。。。。引用后才有效果  
<script type="text/javascript"> 
var x=0;
$(document).ready(function(){
    $("button").click(function(){
		if(x==0){
			$("div").hide("slow");
			x=1;
		}else{        				//加了句   实现了点击按钮 DIV显示的效果
			$("div").show("slow");
			x=0;	
			}
		});
});
</script>
</head>
<body>
<div style="margin:0 auto; width:1000px; height:175px; border:1px #333333 solid; background-color:#690; text-align:center;">
	<p>这个是平滑消失的例子！</p>
</div><br/>
<button style="margin:0 auto;">点击我试试</button>
</body>
</html>

令人发指的简化。。。。   （我都怀疑自己当初为什么要学JS了还不如直接看JQuery呢。。嘎嘎当然是玩笑话）
举这个例子的目的一是装B。。二是想说明一个好的框架对于JS开发的意义三当然是今天的课题啦（隐藏的实现）

下面将开始学习多种隐藏的实现啦：
   1.$(selector).hide()    隐藏被选元素
   2.$(selector).show()    显示被选元素
   3.$(selector).toggle()    切换（在隐藏与显示之间）被选元素
   4.$(selector).slideDown()    向下滑动（显示）被选元素
   5.$(selector).slideUp()    向上滑动（隐藏）被选元素
   6.$(selector).slideToggle()    对被选元素切换向上滑动和向下滑动
   7.$(selector).fadeIn()    淡入被选元素
   8.$(selector).fadeOut()    淡出被选元素
   9.$(selector).fadeTo()    把被选元素淡出为给定的不透明度
   10.$(selector).animate()    对被选元素执行自定义动画
   下面是所有对应事件的详细代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="JQuery.js"></script>  //先要下载jquery的JS函数库。。。。。引用后才有效果 
<script type="text/javascript"> 
var x=0;
$(document).ready(function(){
    $("#exp1").click(function(){
		$("#exp1").hide(2000);
		x=1;
		});
	$("#ex1").click(function(){
		if(x!=1){
			alert("哥上面的DIV还没隐藏呢！");
		}else{
			x=0;
			$("#exp1").show(2000);
			}
		});
	$("#ex2").click(function(){
		$("#exp2").toggle(2000);
		});
	$("#ex3").click(function(){
		$("#exp3").slideUp(2000);
		});
	$("#ex3t").click(function(){
		$("#exp3").slideDown(2000);
		});
	$("#ex4").click(function(){
		$("#exp4").slideToggle(2000);
		});
	$("#ex5").click(function(){
		$("#exp5").fadeTo(2000,0.25);
		});
	$("#ex6").click(function(){
		$("#exp6").fadeOut(2000);
		});
	$("#ex6t").click(function(){
		$("#exp6").fadeIn(2000);
		});
	$("#ex7").click(function(){
		$("#exp7").animate({width:1000},"slow");
		$("#exp7").animate({height:175},"slow");
		});
});
</script>
</head>
<body>
<div id="exp1" style="width:1000px; height:75px; background-color:#669900;">
<p>点击我，查看hide()属性的效果 ()内可以设置这些值："slow", "fast", "normal" 或 毫秒。</p>
</div><br />
<button id="ex1">点击我，查看show()</button><br />

<div id="exp2" style="width:1000px; height:75px; background-color:#39C;">
<p>toggle()属性的效果 ()内可以设置这些值："slow", "fast", "normal" 或 毫秒。</p>
</div><br />
<button id="ex2">点击我，查看toggle()</button><br />

<div id="exp3" style="width:1000px; height:125px; background-color:#669900;">
<p>slideUp()属性的效果 ()内可以设置这些值："slow", "fast", "normal" 或 毫秒。</p>
</div><br />
<button id="ex3">点击我，查看slideUp()</button>
<button id="ex3t">点击我，查看slideDown()</button><br />

<div id="exp4" style="width:1000px; height:75px; background-color:#39C;">
<p>slideToggle()属性的效果 ()内可以设置这些值："slow", "fast", "normal" 或 毫秒。</p>
</div><br />
<button id="ex4">点击我，查看slideToggle()</button><br />

<div id="exp5" style="width:1000px; height:75px; background-color:#669900;">
<p>点击我，查看fadeTo()属性的效果 </p>
</div><br />
<button id="ex5">点击我，查看fadeTo()</button><br />

<div id="exp6" style="width:1000px; height:75px; background-color:#39C;">
<p>fadeOut()属性的效果 </p>
</div><br />
<button id="ex6">点击我，查看fadeOut()</button>
<button id="ex6t">点击我，查看fadeIn()</button>
<br />

<div id="exp7" style="width:245px; height:15px; background-color:#669900;">
<p>点击我，查看animate()属性的效果</p>
</div><br />
<button id="ex7">点击我，查看animate()</button><br />
</body>
</html>

其实小弟学习JQery也是上w3school。。。（学校也不开JS课程的。。。。）

所有很多内容和它上面的也比较相似

说是原创其实大部分也是照搬的。。。

不废话了大家一起勉励吧