jQuery工具方法（jquery的工具函數(shù)）
2.1jQuery工具方法:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">var person = {name:'wokong',age:18};var arr = [9,11,43,17,6,20];// $.each(遍歷目標(biāo)，回調(diào)函數(shù)（索引(鍵)，值）)$.each(arr,function (k,v) {console.log(k,v)});console.log($.type($())); //檢查對象的類型console.log($.isFunction()); //檢查是不是函數(shù)console.log($.isArray(arr)); //檢查是不是數(shù)組var json1 = '{"username":"bajie","age":18}';// var json2 = "{'username':'bajie','age':18}";// 用來把json數(shù)組或者json對象的字符串 轉(zhuǎn)換成正常的對象或者數(shù)組console.log($.parseJSON(json1));</script></body></html>
2.2jQuery愛好選擇器練習(xí):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>全選練習(xí)</title></head><body><form>你愛好的運(yùn)動是？<input type="checkbox" id="checkedAllBox"/>全選/全不選<br/><input type="checkbox" name="items" value="足球"/>足球<input type="checkbox" name="items" value="籃球"/>籃球<input type="checkbox" name="items" value="羽毛球"/>羽毛球<input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/><input type="button" id="checkedAllBtn" value="全 選"/><input type="button" id="checkedNoBtn" value="全不選"/><input type="button" id="checkedRevBtn" value="反 選"/><input type="button" id="sendBtn" value="提 交"/></form><script src="js/jquery-1.10.1.js"></script><script type="text/javascript">/*功能說明:1. 點擊'全選': 選中所有愛好2. 點擊'全不選': 所有愛好都不勾選3. 點擊'反選': 改變所有愛好的勾選狀態(tài)4. 點擊'全選/全不選': 選中所有愛好, 或者全不選中5. 點擊某個愛好時, 必要時更新'全選/全不選'的選中狀態(tài)6. 點擊'提交': 提示所有勾選的愛好*/$(function () {// 獲取全選全不選的復(fù)選框var $checkedAllBox = $('#checkedAllBox');// 獲取所有愛好var $items = $(':checkbox[name=items]');// 1. 點擊'全選': 選中所有愛好$('#checkedAllBtn').click(function () {$items.prop('checked',true);$checkedAllBox.prop('checked',true);});// 2. 點擊'全不選': 所有愛好都不勾選$('#checkedNoBtn').click(function () {$items.prop('checked',false);$checkedAllBox.prop('checked',false);});// 3. 點擊'反選': 改變所有愛好的勾選狀態(tài)$('#checkedRevBtn').click(function () {$items.each(function () {this.checked = !this.checked;})// 選中的個數(shù)和我的總數(shù)相等 說明全部選中了// var checkedList = $(':checkbox[name=items]:checked');// if($items.length === checkedList.length){//// 說明全選了// $checkedAllBox.prop('checked',true);// }else{//// 說明沒有全選// $checkedAllBox.prop('checked',false);// }$checkedAllBox.prop('checked',$items.filter(':checked').length === $items.length);// 不選中的長度為0 也是全選$checkedAllBox.prop('checked',$items.filter(':not(:checked)').length === 0);});// 4. 點擊'全選/全不選': 選中所有愛好, 或者全不選中$checkedAllBox.click(function () {$items.prop('checked',this.checked);});// 5. 點擊某個愛好時, 必要時更新'全選/全不選'的選中狀態(tài)$items.click(function () {$checkedAllBox.prop('checked',$items.filter(':not(:checked)').length === 0);})// 6. 點擊'提交': 提示所有勾選的愛好$('#sendBtn').click(function () {$items.filter(':checked').each(function () {alert(this.value);})})})</script></body></html>
2.3jQuery元素滾動:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>13_元素滾動</title></head><body style="height: 2000px;"><div class="box" style="border:1px solid black;width:100px;height:150px;overflow:auto">This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.his is some text.</div><br><br><br><button id="btn1">得到scrollTop</button><button id="btn2">設(shè)置scrollTop</button><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">/*需求:1. 得到div或頁面滾動條的坐標(biāo)2. 讓div或頁面的滾動條滾動到指定位置*/// scrollTop() 讀取滾動條的Y(垂直)坐標(biāo) scrollLeft（） 讀取滾動條的X坐標(biāo)$('#btn1').click(function () {// console.log($('.box').scrollTop())// body html document// html在chrome中是有效的// body在IE中是有效的// html和body 只有一個能夠獲取得到值// console.log($('body').scrollTop())//解決方案：html和body在獲取的過程中 一個有值一個為零 所以讓這兩個獲取的值相加// document在jQuery1.8版本以上才可以使用 但是上邊的解決方案 更加通用// console.log($('html').scrollTop() $('body').scrollTop());console.log($(document).scrollTop());})// 2. 讓div或頁面的滾動條滾動到指定位置$('#btn2').click(function () {// $('.box').scrollTop(200);// 設(shè)置滾動條坐標(biāo)時和讀取一樣// html在chrome中生效 body在IE中生效// 解決方案：html和body同時設(shè)置就行了// $('html,body').scrollTop(200);// 如果jQuery1.8以上版本沒問題 document也是可以使用的$(document).scrollTop(200);})</script></body>
2.4jQuery回到頂部練習(xí):
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#toTop{width: 30px;height: 40px;background: skyblue;text-align: center;line-height: 20px;font-size: 14px;color: #fff;position: fixed;right:200px;bottom:100px;padding: 0 10px;cursor: pointer;}</style></head><body style="height: 2000px"><div id="toTop">回到頂部</div><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">// 能夠?qū)崿F(xiàn)回到頂部的方案一共兩種// 1.時間固定 則路程越長 速度越快 第一種更主流// 2.速度固定 則路程越長 時間越長// 動畫總時長var time = 2000;// 動畫幀時長 動畫總時長 / 動畫幀時長 = 總幀數(shù)var itemTime = 20;// 給回到頂部按鈕綁定單擊事件$('#toTop').click(function () {// 獲取總路程 (當(dāng)前頁面的滾動條位置)var offset = $('html').scrollTop() $('body').scrollTop();// 計算單次偏移 = 總路程 / (動畫總時長 / 動畫幀時長)var itemOffset = offset / ( time / itemTime );// 定時器var timer = setInterval(function () {// 500 -= 5; 495 490 485 480 475 470 ... 0offset -= itemOffset;// 如果當(dāng)前的位置（offset）等于0了 說明已經(jīng)回到頂部 清除定時器if(offset<=0){offset = 0 //修正值clearInterval(timer);}// 每次調(diào)用定時器 都是修改頁面的scrollTop值 每次減小itemOffset$('html,body').scrollTop(offset);},itemTime)})</script></body></html>
2.5jQuery:文檔增刪改:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>17_文檔_增刪改</title></head><style type="text/css">* {margin: 0px;}.div1 {position: absolute;width: 200px;height: 200px;top: 20px;left: 10px;background: blue;}.div2 {position: absolute;width: 100px;height: 100px;/*top: 50px;*/background: red;}.div3 {position: absolute;top: 250px;}</style><body><ul id="ul1"><li>AAAAA</li><li title="hello">BBBBB</li><li class="box">CCCCC</li><li title="hello">DDDDDD</li><li title="two">EEEEE</li><li>FFFFF</li></ul><br><br><ul id="ul2"><li class="re">aaa</li><li title="hello">bbb</li><li class="box">ccc</li><li title="hello">ddd</li><li title="two">eee</li></ul><!--1. 添加/替換元素* append(content)向當(dāng)前匹配的所有元素內(nèi)部的最后插入指定內(nèi)容* prepend(content)向當(dāng)前匹配的所有元素內(nèi)部的最前面插入指定內(nèi)容* before(content)將指定內(nèi)容插入到當(dāng)前所有匹配元素的前面* after(content)將指定內(nèi)容插入到當(dāng)前所有匹配元素的后面替換節(jié)點* replaceWith(content)用指定內(nèi)容替換所有匹配的標(biāo)簽刪除節(jié)點2. 刪除元素* empty()刪除所有匹配元素的子元素 (掏空子元素)* remove()刪除所有匹配的元素 (連自己一起刪除)--><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">/*需求:1. 向id為ul1的ul下添加一個span(最后)2. 向id為ul1的ul下添加一個span(最前)3. 在id為ul1的ul下的li(title為hello)的前面添加span4. 在id為ul1的ul下的li(title為hello)的后面添加span5. 將在id為ul2的ul下的li(title為hello)全部替換為p6. 移除id為ul2的ul下的所有l(wèi)i*/// 內(nèi)部插入:appendTo()，append(),prependTo(),prepend()// 1. 向id為ul1的ul下添加一個span(最后)$('<span>我是appendTo新增的span</span>').appendTo('#ul1');$('#ul1').append('<span>我是append新增的span</span>');// 2. 向id為ul1的ul下添加一個span(最前)$('<span>我是prependTo新增的span</span>').prependTo('#ul1');$('#ul1').prepend('<span>我是prepend新增的span</span>');// 外部插入：before(),after()// 3. 在id為ul1的ul下的li(title為hello)的前面添加span$('#ul1>li[title=hello]').before('<span>我是before新增的span</span>');// 4. 在id為ul1的ul下的li(title為hello)的后面添加span$('#ul1>li[title=hello]').after('<span>我是after新增的span</span>')// 5. 將在id為ul2的ul下的li(title為hello)全部替換為p// $('#ul2>li[title=hello]').replaceWith('<p>我是替換的p標(biāo)簽</p>')// 6. 移除id為ul2的ul下的所有l(wèi)i// remove 是用于刪除節(jié)點的// empty 用于掏空節(jié)點 刪除所有子元素 保留父元素// $('#ul2').remove();// $('#ul2>li').remove();$('#ul2').empty();</script></body></html>
2.6jQuery學(xué)生管理系統(tǒng)練習(xí):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加刪除記錄練習(xí)</title><link rel="stylesheet" type="text/css" href="css.css"/></head><body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="deleteEmp?id=001">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新員工</h4><table><tr><td class="word">name:</td><td class="inp"><input type="text" name="empName" id="empName"/></td></tr><tr><td class="word">email:</td><td class="inp"><input type="text" name="email" id="email"/></td></tr><tr><td class="word">salary:</td><td class="inp"><input type="text" name="salary" id="salary"/></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td></tr></table></div><script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function () {// 獲取三個輸入框var $empName = $('#empName');var $email = $('#email');var $salary = $('#salary');// 給提交按鈕綁定單擊事件$('#addEmpButton').click(function () {// 獲取三個輸入框的值var empName = $empName.val();var email = $email.val();var salary = $salary.val();// 根據(jù)輸入框的值 拼裝節(jié)點// <tr>// <td>Jerry</td>// <td>jerry@sohu.com</td>// <td>8000</td>// <td><a href="deleteEmp?id=002">Delete</a></td>// </tr>$('<tr></tr>').append('<td>' empName '</td>').append('<td>' email '</td>').append('<td>' salary '</td>').append('<td><a href="deleteEmp?id=002">Delete</a></td>').appendTo('#employeeTable tbody').find('a').click(clickA);// 清空三個輸入框的信息$empName.val('');$email.val('');$salary.val('');});// 給刪除按鈕綁定單擊事件$('a').click(clickA);// 定義事件回調(diào)函數(shù) 你定義的 你沒調(diào)用 最終執(zhí)行了function clickA(event) {// 阻止默認(rèn)行為event.preventDefault();// 根據(jù)點擊的a標(biāo)簽 找到對應(yīng)的trvar $tr = $(this).parent().parent();// 獲取當(dāng)前行的namevar name = $tr.children(':first').html();// var name = $tr.children().first().html();if(confirm('你確定要刪除' name '的信息嗎？')){$tr.remove();}}})</script></body></html>
2.7jQuery- offset和position:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}.wrap{width: 200px;height: 200px;background: pink;position: absolute;top: 50px;left:30px;}.inner{width: 100px;height: 100px;background: yellowgreen;position: absolute;top:50px;}.box{width: 150px;height: 150px;background: skyblue;margin-top: 20px;}</style></head><body><div class="wrap"><div class="box"><div class="inner"></div></div></div><button id="btn1">讀取</button><button id="btn2">設(shè)置</button><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">// 讀取wrap相對于頁面左上角的位置// 讀取inner相對于頁面左上角的位置// offset 返回一個對象 有l(wèi)eft和top兩個屬性 元素相對于頁面左上角的位置// position 返回一個對象 有l(wèi)eft和top兩個屬性 元素相對于包含塊左上角的位置// 以上兩個方法 返回值都不帶單位 但是以像素計// offset 傳一個對象 可以設(shè)置元素的位置 設(shè)置時不需要帶單位 不過一般不使用這種方式$(function () {$('#btn1').click(function () {// console.log($('.wrap').offset());// console.log($('.inner').offset());console.log($('.wrap').position());console.log($('.inner').position());});$('#btn2').click(function () {$('.inner').offset({'left':300,'top':200})})})</script></body></html>
2.8jQuery元素的尺寸:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div{width: 100px;height: 150px;background: pink;padding: 10px;margin: 11px;border:10px solid skyblue;/*overflow: scroll;*/}</style></head><body><div></div><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">var $div = $('div');// width和height方法 返回的就是你設(shè)置給當(dāng)前元素的寬度與高度的值console.log($div.width(),$div.height());//內(nèi)部尺寸 包含width paddingconsole.log($div.innerWidth(),$div.innerHeight());//外部尺寸 包含width padding borderconsole.log($div.outerWidth(),$div.outerHeight());// outerWidth和outerHeight 方法傳遞參數(shù)true 則在原有基礎(chǔ)之上添加margin的值console.log($div.outerWidth(true),$div.outerHeight(true))</script></body></html>
2.9jQuery事件的綁定和解綁:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}.wrap{width: 200px;height: 200px;position: absolute;left:50px;top:30px;background: pink;}.inner{position: absolute;top:50px;width: 100px;height: 100px;background: skyblue;}</style></head><body><div class="wrap"><div class="inner">內(nèi)部div</div></div><button id="btn1">取消綁定所有事件</button><button id="btn2">取消綁定某個事件</button><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">// eventName:編碼方便 但只能加一個監(jiān)聽，且有的監(jiān)聽不支持// on:編碼不方便 但是可以添加多個監(jiān)聽(多個事件相應(yīng)同一個回調(diào))，且通用// 1.給wrap綁定點擊監(jiān)聽 （兩種方式）// $('.wrap').click(function () {// console.log('點了我一下1')// });// $('.wrap').click(function () {// console.log('點了我一下2')// });// $('.wrap').on('click mouseleave',function () {// console.log('點了我一下1')// })// 給inner綁定移入移出事件 三種方式// $('.inner').mouseover(function () {// console.log('mouseover');// }).mouseout(function () {// console.log('mouseout');// })// $('.inner').mouseenter(function () {// console.log('mouseenter')// }).mouseleave(function () {// console.log('mouseleave')// })// hover 傳遞兩個參數(shù) 都為函數(shù) 第一個參數(shù)為移入的回調(diào)函數(shù) 第二個參數(shù)為移出的回調(diào)函數(shù)// 如果只傳遞了一個參數(shù) 那么移入和移出都是使用這一個函數(shù)// hover底層使用mouseenter和mouseleave實現(xiàn)的$('.inner').hover(function () {console.log('移入')},function () {console.log('移出')})// 事件的解綁// off() 解除事件 默認(rèn)清除所有的事件監(jiān)聽// off方法允許傳遞參數(shù) 參數(shù)為事件名稱的字符串// 可用于單獨清除某個事件 如果想刪除多個 使用空格分開即可$('#btn1').click(function () {$('.inner').off();});$('#btn2').click(function () {$('.inner').off('mouseleave mouseenter');})</script></body></html>
歡迎關(guān)注我的原創(chuàng)文章：小伙伴們！我是一名熱衷于前端開發(fā)的作者，致力于分享我的知識和經(jīng)驗，幫助其他學(xué)習(xí)前端的小伙伴們。在我的文章中，你將會找到大量關(guān)于前端開發(fā)的精彩內(nèi)容。
學(xué)習(xí)前端技術(shù)是現(xiàn)代互聯(lián)網(wǎng)時代中非常重要的一項技能。無論你是想成為一名專業(yè)的前端工程師，還是僅僅對前端開發(fā)感興趣，我的文章將能為你提供寶貴的指導(dǎo)和知識。
在我的文章中，你將會學(xué)到如何使用HTML、CSS和JavaScript創(chuàng)建精美的網(wǎng)頁。我將深入講解每個語言的基礎(chǔ)知識，并提供一些實用技巧和最佳實踐。無論你是初學(xué)者還是有一定經(jīng)驗的開發(fā)者，我的文章都能夠滿足你的學(xué)習(xí)需求。
此外，我還會分享一些關(guān)于前端開發(fā)的最新動態(tài)和行業(yè)趨勢?；ヂ?lián)網(wǎng)技術(shù)在不斷發(fā)展，新的框架和工具層出不窮。通過我的文章，你將會了解到最新的前端技術(shù)趨勢，并了解如何應(yīng)對這些變化。
我深知學(xué)習(xí)前端不易，因此我將盡力以簡潔明了的方式解釋復(fù)雜的概念，并提供一些易于理解的實例和案例。我希望我的文章能夠幫助你更快地理解前端開發(fā)，并提升你的技能。
如果你想了解更多關(guān)于前端開發(fā)的內(nèi)容，不妨關(guān)注我的原創(chuàng)文章。我會不定期更新，為你帶來最新的前端技術(shù)和知識。感謝你的關(guān)注和支持，我們一起探討交流技術(shù)共同進(jìn)步，期待與你一同探索前端開發(fā)的奇妙世界！
