jQuery用法举例（操作table,div,button等)
来源：互联网 发布：知新教育 编辑：程序博客网 时间：2024/05/16 05:11
上一篇介绍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>注意：以下只是冰山一角，更细节的一些还要进一步学习与代码实现。
（完，待续.........................）
- jQuery用法举例（操作table,div,button等)
- JQUERY动态生成DIV，table等数据
- jquery foreach用法举例
- jquery操作table操作
- div中的table等居中
- asp.net Table控件用法举例
- C++ stl队列Queue用法介绍:删除，插入等操作代码举例
- C++ stl队列Queue用法介绍:删除，插入等操作代码举例
- C++ stl队列Queue用法介绍:删除，插入等操作代码举例
- C++ stl队列Queue用法介绍:删除，插入等操作代码举例
- C++ stl队列Queue用法介绍:删除，插入等操作代码举例
- jquery动态操作table
- Jquery操作table总结
- JQuery操作table
- jquery table操作
- JQuery 操作/获取 table
- jQuery table 操作
- jquery 操作table
- IceGrid
- 自定义Visual Assist X Snippets 宏
- C#中用DataGridView绑定ArcGIS图层的属性表
- mysql 事务处理
- 如何编程创建/布置基于面的设置，比如风口
- jQuery用法举例（操作table,div,button等)
- loongson内核自带源码的编译
- 警惕TimerTask#run可能抛出的异常
- 实用SQL语句大全(上)
- 借用MEF对WCF实现扩展
- css样式属性代码缩写
- Javabean的总结
- eclipse快捷键大全
- C++异常处理
