JQuery中一些常用函数的运用

一、JQuery的效果介绍



二、定时弹出广告图片JQ部分代码

<script type="text/javascript">
	var time;
	$(function(){
		time=setInterval("showAd()",3000);
	});
	
	function showAd(){
		//$("#img1").show();
		//$("#img1").slideDown(3000);
		$("#img1").fadeIn(3000);
		clearInterval(time);
		time = setInterval("hideAd()",5000);
	}
	
	function hideAd(){
		//$("#img1").hide();
		//$("#img1").slideUp(3000);
		$("#img1").slideUp(3000);
		clearInterval(time);
	}
	
</script>

三、toggle函数的代码演练

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("#img1").toggle();
				});
			});
			
		</script>
	</head>
	<body>
		<input type="button" value="显示/隐藏" id="btn1"/><br />
		<img src="../img/registImg.jpg" id="img1" />
	</body>
</html>
四、JQuery的CSS类操作



            代码实现表格的表格隔行换色(JQ部分代码):

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<script>
	$(function(){
		$("tbody tr:even").addClass("even");
		$("tbody tr:odd").addClass("odd");
	});
</script>

五、jquery的属性操作方法


在高版本中,attr()方法改为prop()

             代码实现全选和全不选功能(JQ部分代码):

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
	$(function(){
		//找到下面所有的复选框并设置属性checked()
		/*if($("#select")[0].checked==true){
			$(".selectOne").attr("checked",true)
		}*/
		$("#select").click(function(){
			$(".selectOne").attr("checked",this.checked);
		});
	});
</script>
注:attr(低版本方法)在jquery1.11版本不适用,采用prop()(高版本方法)来替代(在各个版本都适用)。




阅读更多
文章标签: JQuery 常用函数
个人分类: html JQuery
上一篇JS和JQuery的比较
想对作者说点什么? 我来说一句

Jquery API

2011年12月07日 73KB 下载

简单的jquery案例

2011年06月28日 770KB 下载

jQuery常见函数

2011年10月15日 158KB 下载

常用函数连续傅里叶变换对照表

2018年04月15日 142KB 下载

EXCEL常用函数手册

2009年06月06日 424KB 下载

delphi函数手册

2009年11月16日 94KB 下载

jslider中一些运用

2011年11月22日 5KB 下载

ACCP c# 运用一些知识

2008年10月25日 13KB 下载

MATLAB常用函数大全

2015年06月20日 106KB 下载

没有更多推荐了,返回首页

关闭
关闭