當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery 简单案例

發(fā)布時間：2023/12/10 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery 简单案例小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

案例一：全選、反選、取消實例

? ??

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><input type="button" value="全選" οnclick="checkAll();" /><input type="button" value="反選" οnclick="reverseAll();" /><input type="button" value="取消" οnclick="cancleAll();"/><table border="1"><thead><tr><th>選項</th><th>IP</th><th>PORT</th></tr></thead><tbody id="tb"><tr><td><input type="checkbox" /></td><td>1.1.1.1</td><td>80</td></tr><tr><td><input type="checkbox" /></td><td>1.1.1.1</td><td>80</td></tr><tr><td><input type="checkbox" /></td><td>1.1.1.1</td><td>80</td></tr></tbody></table><script src="jquery-1.12.4.js"></script><script>function checkAll() {$('#tb :checkbox').prop('checked',true); #prop是jquery的屬性，checked設(shè)置為true，只有checked表示獲取選中的 }function cancleAll() {$('#tb :checkbox').prop('checked',false);}function reverseAll() {$(':checkbox').each(function(k){// this,代指當(dāng)前循環(huán)的每一個元素// Dom/*if(this.checked){this.checked = false;}else{this.checked = true;}*//*if($(this).prop('checked')){$(this).prop('checked', false);}else{$(this).prop('checked', true);}*/// 三元運算var v = 條件? 真值：假值var v = $(this).prop('checked')?false:true;$(this).prop('checked',v);})}</script> </body> </html>全選、反選、取消全選、反選、取消

案例二：菜單欄點擊展開收起實例

　　本實例實現(xiàn)菜單欄點擊一個菜單另一個菜單收起來，類似下圖：

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title><style>.header {background-color: #67b168; color: wheat;}.content {min-height: 30px;}.hide {display: none;}</style> </head> <body><div style="height: 400px;width: 200px;border: 1px solid #d58512"><div class="tiem"><div class="header">標(biāo)題一</div><div class="content hide">內(nèi)容一</div></div><div class="tiem"><div class="header">標(biāo)題二</div><div class="content hide">內(nèi)容二</div></div><div class="tiem"><div class="header">標(biāo)題三</div><div class="content hide">內(nèi)容三</div></div></div><script src='js/jquery-1.11.0.min.js'></script> <script> // 找到所有class為header的標(biāo)簽，然后.click()綁定事件$('.header').click(function(){ // #jQuery默認(rèn)循環(huán)所有選中的標(biāo)簽 // $(this) 當(dāng)前點擊的標(biāo)簽 // $(this).next 當(dāng)前點擊的標(biāo)簽的下一個標(biāo)簽 // 找到當(dāng)前點擊的標(biāo)簽的下一個標(biāo)簽，移除hide樣式,點擊后hide去掉，即展開$(this).next().removeClass('hide'); // 找到當(dāng)前標(biāo)簽的父標(biāo)簽的兄弟標(biāo)簽，然后找樣式為.content的標(biāo)簽$(this).parent().siblings().find('.content').addClass('hide'); // 可以一行完成 // $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')})</script> </body></html> 菜單欄點擊展開其余收起

案例三：模態(tài)編程框案例

本案例實現(xiàn)魔態(tài)編程框案例，點擊添加會出現(xiàn)一個對話框，用于添加一行，編輯可以編輯當(dāng)前行,刪除可以刪除當(dāng)前行

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title><style>.modal{position: fixed;top: 50%;left: 50%;width: 500px;height: 400px;margin-left: -250px;margin-top: -250px;background-color: #eeeeee;z-index: 10;}.shadow {position: fixed;top: 0;left: 0;right: 0;bottom: 0;opacity: 0.6;background-color: #000000;z-index: 9;}.hide {display: none;}</style> </head> <body><a οnclick="addElement();">添加</a><table border="2" id="tb"><tr><td target="hostname">1.1.1.1</td><td target="port">80</td><td><a class="edit">編輯</a><a class="del">刪除</a></td></tr><tr><td target="hostname">2.2.2.2</td><td target="port">80</td><td><a class="edit">編輯</a><a class="del">刪除</a></td></tr><tr><td target="hostname">3.3.3.3</td><td target="port">8000</td><td><a class="edit">編輯</a><a class="del">刪除</a></td></tr></table><div class="modal hide"><div><input name="hostname" type="text"><input name="port" type="text"></div><div><input type="button" value="取消" οnclick="canceModal();"><input type="button" value="確定" οnclick="confirmModal();"></div></div><div class="shadow hide"></div><script src='js/jquery-1.11.0.min.js'></script> <script>function addElement(){$(".modal,.shadow").removeClass('hide');}function canceModal(){$(".modal,.shadow").addClass('hide'); // 清空框中的臟數(shù)據(jù),$('.modal input[type="text"]').val("");} // $('.edit').click(function(){ // $(".modal,.shadow").removeClass('hide'); this 當(dāng)前點擊的標(biāo)簽，parent父標(biāo)簽，prevAll父標(biāo)簽上面的所有同級標(biāo)簽 // var tds = $(this).parent().prevAll(); 循環(huán)獲取tds中的內(nèi)容(td中的內(nèi)容)，賦值給編程框中的value // tds.each(function(){ this 當(dāng)前每個td 獲取自定義屬性的值,hostname/port // var n = $(this).attr('target'); 獲取當(dāng)前td內(nèi)容:1.1.1.1/80 // var v = $(this).text(); 將獲取的內(nèi)容放入相應(yīng)的編程框中 $('.modal input[name="[hostname"]').val(1.1.1.1) 因為hostaname/port為變量，而name=里面需要是“”格式，所以用到字符串拼接 var a1 = '.modal input[name="'; var a2 = '"]'; var temp = a1 + n + a2 // $('.modal input[name="' + n + '"]').val(v) // }); // // }); // 在添加更多一行的時候所產(chǎn)生的 input 和 button 都是動態(tài)生成的，所以不能使用 click，要使用 on$(document).on('click','.edit',function(){$(".modal,.shadow").removeClass('hide'); // this 當(dāng)前點擊的標(biāo)簽，parent父標(biāo)簽，prevAll父標(biāo)簽上面的所有同級標(biāo)簽var tds = $(this).parent().prevAll(); // 循環(huán)獲取tds中的內(nèi)容(td中的內(nèi)容)，賦值給編程框中的valuetds.each(function(){ // this 當(dāng)前每個td // 獲取自定義屬性的值,hostname/portvar n = $(this).attr('target'); // 獲取當(dāng)前td內(nèi)容:1.1.1.1/80var v = $(this).text(); // 將獲取的內(nèi)容放入相應(yīng)的編程框中 // $('.modal input[name="[hostname"]').val(1.1.1.1) // 因為hostaname/port為變量，而name=里面需要是“”格式，所以用到字符串拼接 // var a1 = '.modal input[name="'; // var a2 = '"]'; // var temp = a1 + n + a2$('.modal input[name="' + n + '"]').val(v)});});function confirmModal(){// 創(chuàng)建一個trvar tr = document.createElement('tr');$('.modal input[type="text"]').each(function(){ // 循環(huán)使用dom創(chuàng)建一個td，也就是有幾個input就需要加幾個tdvar td = document.createElement('td'); // 獲取輸入框中輸入的數(shù)據(jù)var v = $(this).val(); // 獲取數(shù)據(jù)庫的屬性var tage = $(this).attr('name'); // 將屬性加入到td中$(td).attr('target',tage); // 將輸入的內(nèi)容加入td中$(td).append(v); // 將td加入tr中$(tr).append(td);}); // 最后將編輯和刪除加入var temp = "<a class='edit'>編輯</a> <a class='del'>刪除</a>"; // 將一行加入到table里面var td2 = document.createElement('td');$(td2).append(temp);$(tr).append(td2);$('#tb').append(tr); // 添加完成后去掉編程框和遮罩層$('.modal,.shadow').addClass('hide'); // 清空框中的臟數(shù)據(jù),否則下次在點擊添加時，還會有上一次填寫的數(shù)據(jù)$('.modal input[type="text"]').val("");}// 刪除tr行 // 在添加更多一行的時候所產(chǎn)生的 input 和 button 都是動態(tài)生成的，所以不能使用 click，要使用 on$(document).on('click','.del',function(){console.log(this,"1");$(this).parent().parent().remove();}); </script> </body></html> 編程框添加刪除案例

?案例四：橫向菜單切換

本案例實現(xiàn)橫向菜單菜單切換，即點擊菜單一現(xiàn)實內(nèi)容一，點擊菜單二，顯示菜單二。。。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.hide{display: none;}.menu{height: 38px;background-color: #eeeeee;line-height: 38px;}.active{background-color: brown;}.menu .menu-item{float: left;border-right: 1px solid red;padding: 0 5px;cursor: pointer;}.content{min-height: 100px;border: 1px solid #eeeeee; }</style> </head> <body><div style="width: 700px;margin:0 auto"><div class="menu"><div class="menu-item active" a="1">菜單一</div><div class="menu-item" a="2">菜單二</div><div class="menu-item" a="3">菜單三</div></div><div class="content"><div b="1">內(nèi)容一</div><div class="hide" b="2">內(nèi)容二</div><div class="hide" b="3">內(nèi)容三</div></div></div><script src='js/jquery-1.11.0.min.js'></script><script>$('.menu-item').click(function(){$(this).addClass('active').siblings().removeClass('active');var target = $(this).attr('a');$('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');});</script> </body> </html> 橫向菜單切換

持續(xù)更新中。。。。。。。。。。。

轉(zhuǎn)載于:https://www.cnblogs.com/liang-wei/p/9629633.html

總結(jié)

以上是生活随笔為你收集整理的jQuery 简单案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python matplotlib.py
下一篇：数据库的多表查询