jQuery用法举例(操作table,div,button等)
2012-07-16 11:23
363 查看
上一篇介绍jQuery的简介和一些基本的特性,下面举一些具体的例子加以说明.
1.jQuery template模板
jQuery的代码编写可以从这里开始。
接下来的工作就是写里面填东西啦。
2.jQuery对table的操作,代码如下所示:
在里面我们看到:
<link rel="stylesheet" href="../jQuery/style2.css" type="text/css" />
其实就是style2.css文件,里面的内容如下所示:
当样式比较多的情况或供其他html使用的话,我们可以提取出来,写这个css文件,供项目中所有html,jsp等使用。
3.jQuery对button,div,动画的处理效果,如下所示:
4.再举一例,对ul,li的操作,如下所示:
5.还有一些比如display:none,display:block,insertAfter,insertBefore.prependTo还有appendTo等等。如下所示:
注意:以下只是冰山一角,更细节的一些还要进一步学习与代码实现。
(完,待续.........................)
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操作button为禁用和隐藏
- 汇总常用的jQuery操作Table tr td方法
- jQuery操作表格(table)的常用方法、技巧汇总
- 关于hasetable与ArryList用法举例
- Jquery Table 的基本操作
- Jquery Table 的基本操作
- jquery 滚动条向下滚动或者向上滚动到div位置处,执行操作
- JQuery实现操作Checkbox,Table,鼠标放在图片上放大效果
- JQuery 中几个用法备注令附一个关于操作checkbox的疑问
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
- 使用jquery点击一个实现button或连接,进行以下div显示,在点击隐藏
- 三目运算符“?:”省略中间操作的特殊用法及举例
- 蜗牛—JQuery学习之table操作
- Jquery Table 的基本操作
- jquery给div,Span, a ,button, radio 赋值取值
- jQuery操作表格(table)的常用方法、技巧汇总
- jQuery操作Table学习总结
- JQuery 中几个用法备注令附一个关于操作checkbox的疑问