JavaWeb_day5_JQuery01

1.使用jquery书写定时弹出广告

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
		<script>
			$(function() {
				//书写广告图片的定时操作
				time = setInterval("showAd()", 3000);
			});
			//书写显示图片的函数
			function showAd() {
				//获取广告图片，并让其显示
				$("#dingshiguanggao").show(1000);
				//	清除定时操作
				clearInterval(time);
				//设置隐藏图片的函数
				setInterval("haddenAd()", 3000);
			}
			//书写隐藏图片的函数
			function haddenAd() {
				$("#dingshiguanggao").hide(1000);
				clearInterval(time);
			}
		</script>

2.显示和隐藏（toggle的使用）

<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script>
			//页面加载
			$(function(){
				//获取按钮绑定点击事件
				$("#btn").click(function(){
					//为图片绑定toggle事件
					$("#img1").toggle();
				});
			});
		</script>

<body>
		<div align="center">
		<input type="button" value="显示/隐藏" id="btn"/>
		<img src="img/oppo3.png" width="500px" height="300px"  id="img1"/>
		</div>
	</body>

3.层级选择器

4.使用jquery实现隔行换色（jQuery代码和CSS代码）

<link rel="stylesheet" href="css/隔行换色.css" />
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
//				$("tbody>tr:even").css("background-color","pink");
//				$("tbody>tr:odd").css("background-color","yellow");
				$("tbody>tr:even").addClass("even");
				$("tbody>tr:odd").addClass("jishu");
			});
		</script>

/*偶数行的类的颜色*/
.even{
	background-color: dodgerblue;
}
/*奇数行的类的颜色*/
.jishu{
	background-color: pink;
}

5.使用jQuery实现全选全不选

<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#checkAll").click(function(){
					$("tbody input").attr("checked",this.checked);
				});
			});
			
		</script>

注意：attr属性与jquery的版本有关，在1.8.3及以下有效

其他版本用prop属性（这个属性在任何版本都可以用）

猜你喜欢