jQuery用法举例（操作table,div,button等)

fuerbosi

浏览: 464561 次

最近访客更多访客>>

u012363178

文朝君123

ybj316

yubingxing

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (678)

社区版块

存档分类

2012-07 ( 273)
2012-06 ( 77)
2012-05 ( 35)
更多存档...

上一篇介绍jQuery的简介和一些基本的特性，下面举一些具体的例子加以说明.
1.jQuery template模板
jQuery的代码编写可以从这里开始。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../jQuery/scripts/jquery-1.4.js"></script>
<script  type="text/javascript">
	$(document).ready(function(){

	});
</script>
</head>
<body>
</body>
</html>

接下来的工作就是写里面填东西啦。

2.jQuery对table的操作，代码如下所示：

<!DOCTYPE html>
<html>
<head>
<title>Hello table world!</title>
<style>
.zebra {
		background-color: #dddddd;
		color: #666666;
}

tr.zebraHover {
background-color: #000fff;
}
</style>
<link rel="stylesheet" href="../jQuery/style2.css" type="text/css" />
<script type="text/javascript" src="../jQuery/scripts/jquery-1.4.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		//alert($('#celebs tr').length + ' elements!');
		//alert($('#celebs tbody tr:even').length + ' elements!');
		
		//var fontSize = $('#celebs tbody tr:first').css('font-size');
		//alert(fontSize);
		//获取属性值
		
		//$('#celebs tbody tr:even').css('background-color','#dddddd');
		//$('#celebs tbody tr:even').css('color', '#666666');
		
		
		//key/value键值对	
		$('#celebs thead tr').addClass('zebra3'); 
        /**		
		$('#celebs thead tr').css({
			'color': '#77777',
			'font-size': '14pt',
			'line-height': '3em'
		});
		**/
		
/**		$('#celebs tbody tr:even').css({
			'background-color': '#dddddd',
			'color': '#666666',
			'font-size': '11pt',
			'line-height': '2.5em'
		});
**/
		
		//奇数行
		$('#celebs tbody tr:even').addClass('zebra'); 
		//加上样式
		//$('#celebs tr.zebra').removeClass('zebra');
		//去掉样式
		
		//偶数行
		$('#celebs tbody tr:odd').addClass('zebra2'); 
	/**	$('#celebs tbody tr:odd').css({
			'background-color': '#dd00e3',
			'color': '#88888',
			'font-size': '11pt',
			'line-height': '2.5em'
		});
		**/
		
		//a trilk
		
		$('#celebs tbody tr').mouseover(function() {
			$(this).addClass('zebraHover');
		});
		$('#celebs tbody tr').mouseout(function() {
			$(this).removeClass('zebraHover');
		});
		
		
		//
		$('#celebs tbody tr').click(function() {
			$(this).toggleClass('zebraHover');
		});
	});	  
</script>
</head>
<body>
<table class="data" id="celebs">
	<thead>
		<tr>
		<th>ID</th>
		<th>Name</th>
		<th>Occupation</th>
		<th>Approx. Location</th>
		<th>Price</th>
		</tr>
	</thead>
	<tbody>
		<tr>
		<th>ID</th>
		<th>Name</th>
		<th>Occupation</th>
		<th>Approx. Location</th>
		<th>Price</th>
		</tr>
		
		<tr>
		<th>ID</th>
		<th>Name</th>
		<th>Occupation</th>
		<th>Approx. Location</th>
		<th>Price</th>
		</tr>
		
		<tr>
		<th>ID</th>
		<th>Name</th>
		<th>Occupation</th>
		<th>Approx. Location</th>
		<th>Price</th>
		</tr>
		
		<tr>
		<th>ID</th>
		<th>Name</th>
		<th>Occupation</th>
		<th>Approx. Location</th>
		<th>Price</th>
		</tr>
		
		<tr>
		<th>ID</th>
		<th>Name</th>
		<th>Occupation</th>
		<th>Approx. Location</th>
		<th>Price</th>
		</tr>
	</tbody>
</body>
</html>
</body>
</html>

在里面我们看到：
<link rel="stylesheet" href="../jQuery/style2.css" type="text/css" />
其实就是style2.css文件,里面的内容如下所示：

.zebra2 {
		background-color: #00ff00;
		color: #666666;
}
.zebra3 {
        color: #ee00ff;
		font-size:14pt;
}

当样式比较多的情况或供其他html使用的话，我们可以提取出来，写这个css文件，供项目中所有html,jsp等使用。

3.jQuery对button,div,动画的处理效果，如下所示：

<!DOCTYPE html>
<html>
<head>
<style>
.block2{
     color: #666666;
}

.spoiler{
	color: #666666;
}
</style>
<script type="text/javascript" src="../jQuery/scripts/jquery-1.4.js"></script>
<script  type="text/javascript">
$(document).ready(function(){
	$("#go").click(function(){
		  $("#block").animate({ 
			width: "90%",
			height: "100%", 
			fontSize: "10em", 
			borderWidth: 10
		  }, 1000);
	}); 
	
	$("#right").click(function(){
		$("#blocks").animate({paddingLeft: '+=15px'}, 200);
	});

	$("#left").click(function(){
		$("#blocks").animate({paddingLeft: '-=15px'}, 200);
	}); 
	
	$("#blocks").animate({
		paddingLeft: 50,
		opacity: 0.8
	}, 2000); 
});
</script>
</head>
<body>
<button id="go"> Run</button>
<div id="block">Hello!</div> 

<button id="left">left</button>
 <button id="right">right</button>
<div id="blocks" class="spoiler">
  minggxu9
</div> 
</body>
</html>

4.再举一例,对ul,li的操作，如下所示：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../jQuery/scripts/jquery-1.4.js"></script>
<script>
	$(document).ready(function(){
		$("#content").show();
		/**$('li').click(function() {
		    alert("eee:");
			this.css("backgroundColor","green");
		});**/
		
		//$('#no-script').remove();
		$('p').text('<strong>Warning!</strong> Text has been replaced … '); //纯文本
	    $('p').html('<strong>Warning!</strong> Text has been replaced … '); //记住样式
		//$('#no-script').remove(':contains('Warning')');
		
		//alert($('p:first').text());
		
		//动画效果
		$('p').animate({
			padding: '10px',
			fontSize: '20px'
		}, 1000);
		
		//一种有趣的效guo
		$('#content li').hover(function() {
			$(this).animate({paddingLeft: '+=15px'}, 200);
		}, function() {
			$(this).animate({paddingLeft: '-=15px'}, 200);
		});
		
		$('no-script').toggle(function() {
			$(this).animate({'height':'+=150px'}, 2000, 'linear');
		}, function() {
			$(this).animate({'height':'-=150px'}, 2000, 'swing');
		});
	});
</script>
</head>
<body>
<ul id="content">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

<p id="no-script">
We recommend
</body>
</html>

5.还有一些比如display:none,display:block,insertAfter,insertBefore.prependTo还有appendTo等等。如下所示：

<!DOCTYPE html>
<html>
<head>
<title>Hello jQuery world!</title>
<style>
.spoiler{
    background-color: #00ff00;
	color: #666666;
}
</style>
<script type="text/javascript" src="../jQuery/scripts/jquery-1.7.js"></script>
<script type="text/javascript">

	 $(function() {
			$("<p>Hi there!</p>").insertAfter("#disclaimer");
			$("<p>minggg</p>").insertBefore("#disclaimer");
			
			$('<strong>START!</strong>').prependTo('#disclaimer');
            $('<strong>END!</strong>').appendTo('#disclaimer');
     });
		  
	$(document).ready(function() {
		//alert('Welcome to StarTrackr! Now no longer under police');
		
		$('#hideButton').click(function() {
		    //$(this).hide(); // a curious disappearing button.
			$('#disclaimer').toggle();  //显示与隐藏
	    });
	
	$('#toggleButton').click(function() {
		if ($('#disclaimer').is(':visible')) {  //如果显示就隐藏
			$('#disclaimer').hide();
		} else {								//如果隐藏就显示
			$('#disclaimer').show();
		}
		
	 });
	 
	 //链式操作
	 $('<div>', {
		id: 'specialButton',
		text: '点击我!',
	    
		click: function(){
		alert("Advanced jQuery!")
		}
	}).insertBefore('#disclaimer');
	
	
	$('#hideButton2').click(function() {
		
		if ($('#disclaimer').is(':visible')) {  //如果显示就隐藏
			$('#disclaimer').fadeOut('slow');
		} else {								//如果隐藏就显示
			$('#disclaimer').fadeIn('fast');
		}
	});
	//$('<p>A new paragraph!</p>').addClass('new');
	
	//这种更好看，体验更好
	$('#showButton').click(function() {
		$('#disclaimer').slideToggle('slow');
	});
	/**
	$('#disclaimer').slideToggle('slow', function() {
		alert('The slide has finished sliding!')
	});
	
	
	$('#disclaimer').slideUp('slow', function() {
		$('#hideButton').fadeOut();
	});
	**/
	
	/**鼠标点击事件

    $('#hideButton').click(function() {
	   alert('Welcome to StarTrackr! Now no longer under police');
	  $('#hideButton2').hide();
	}); 	
	
	**/
	
    $('.spoiler').hide();
	
	$('<input type="button" class="revealer" value="Tell Me!"/>').insertBefore('.spoiler');
	
	$('.revealer').click(function(){
		$(this).hide();
		$(this).next().fadeIn();
		//下一个组件显示出来
	});
	
	//position animate
	
	/**$('#disclaimer').animate({
		opacity: 'hide',
		height: 'hide'
	}, 'slow');
	**/
	
	//color animate
	$('#disclaimer').animate({'backgroundColor':'#ff9f5f'}, 2000);
});
		  
</script>
</head>
<body>
<input type="button" id="toggleButton" value="toggle" />
<input type="button" id="showButton" value="show" />
<input type="button" id="hideButton" value="hide" />
<input type="button" id="hideButton2" value="hide2" />
<!-- " style="display:block">与" style="display:none">的区别: 显示与隐藏  -->
<div id="disclaimer" style="display:block">
    this is a good example!!!
	style="display:block">与" style="display:none">的区别: 显示与隐藏
</div>

<br>
Who lost their recording contract today?
<span class='spoiler'>The Zaxntines!</span>
</body>
</html>

注意：以下只是冰山一角，更细节的一些还要进一步学习与代码实现。

（完，待续.........................）

分享到：