[置顶] jQuery用法举例（操作table,div,button等)
上一篇介绍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>
注意：以下只是冰山一角，更细节的一些还要进一步学习与代码实现。
（完，待续.........................）