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($())); //檢查對(duì)象的類(lèi)型console.log($.isFunction()); //檢查是不是函數(shù)console.log($.isArray(arr)); //檢查是不是數(shù)組var json1 = '{"username":"bajie","age":18}';// var json2 = "{'username':'bajie','age':18}";// 用來(lái)把json數(shù)組或者json對(duì)象的字符串 轉(zhuǎn)換成正常的對(duì)象或者數(shù)組console.log($.parseJSON(json1));</script></body></html>
2.2jQuery愛(ài)好選擇器練習(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>你愛(ài)好的運(yùn)動(dòng)是？<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">/*功能說(shuō)明:1. 點(diǎn)擊'全選': 選中所有愛(ài)好2. 點(diǎn)擊'全不選': 所有愛(ài)好都不勾選3. 點(diǎn)擊'反選': 改變所有愛(ài)好的勾選狀態(tài)4. 點(diǎn)擊'全選/全不選': 選中所有愛(ài)好, 或者全不選中5. 點(diǎn)擊某個(gè)愛(ài)好時(shí), 必要時(shí)更新'全選/全不選'的選中狀態(tài)6. 點(diǎn)擊'提交': 提示所有勾選的愛(ài)好*/$(function () {// 獲取全選全不選的復(fù)選框var $checkedAllBox = $('#checkedAllBox');// 獲取所有愛(ài)好var $items = $(':checkbox[name=items]');// 1. 點(diǎn)擊'全選': 選中所有愛(ài)好$('#checkedAllBtn').click(function () {$items.prop('checked',true);$checkedAllBox.prop('checked',true);});// 2. 點(diǎn)擊'全不選': 所有愛(ài)好都不勾選$('#checkedNoBtn').click(function () {$items.prop('checked',false);$checkedAllBox.prop('checked',false);});// 3. 點(diǎn)擊'反選': 改變所有愛(ài)好的勾選狀態(tài)$('#checkedRevBtn').click(function () {$items.each(function () {this.checked = !this.checked;})// 選中的個(gè)數(shù)和我的總數(shù)相等 說(shuō)明全部選中了// var checkedList = $(':checkbox[name=items]:checked');// if($items.length === checkedList.length){//// 說(shuō)明全選了// $checkedAllBox.prop('checked',true);// }else{//// 說(shuō)明沒(méi)有全選// $checkedAllBox.prop('checked',false);// }$checkedAllBox.prop('checked',$items.filter(':checked').length === $items.length);// 不選中的長(zhǎng)度為0 也是全選$checkedAllBox.prop('checked',$items.filter(':not(:checked)').length === 0);});// 4. 點(diǎn)擊'全選/全不選': 選中所有愛(ài)好, 或者全不選中$checkedAllBox.click(function () {$items.prop('checked',this.checked);});// 5. 點(diǎn)擊某個(gè)愛(ài)好時(shí), 必要時(shí)更新'全選/全不選'的選中狀態(tài)$items.click(function () {$checkedAllBox.prop('checked',$items.filter(':not(:checked)').length === 0);})// 6. 點(diǎn)擊'提交': 提示所有勾選的愛(ài)好$('#sendBtn').click(function () {$items.filter(':checked').each(function () {alert(this.value);})})})</script></body></html>
2.3jQuery元素滾動(dòng):
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>13_元素滾動(dòng)</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或頁(yè)面滾動(dòng)條的坐標(biāo)2. 讓div或頁(yè)面的滾動(dòng)條滾動(dòng)到指定位置*/// scrollTop() 讀取滾動(dòng)條的Y(垂直)坐標(biāo) scrollLeft（） 讀取滾動(dòng)條的X坐標(biāo)$('#btn1').click(function () {// console.log($('.box').scrollTop())// body html document// html在chrome中是有效的// body在IE中是有效的// html和body 只有一個(gè)能夠獲取得到值// console.log($('body').scrollTop())//解決方案：html和body在獲取的過(guò)程中 一個(gè)有值一個(gè)為零 所以讓這兩個(gè)獲取的值相加// document在jQuery1.8版本以上才可以使用 但是上邊的解決方案 更加通用// console.log($('html').scrollTop() $('body').scrollTop());console.log($(document).scrollTop());})// 2. 讓div或頁(yè)面的滾動(dòng)條滾動(dòng)到指定位置$('#btn2').click(function () {// $('.box').scrollTop(200);// 設(shè)置滾動(dòng)條坐標(biāo)時(shí)和讀取一樣// html在chrome中生效 body在IE中生效// 解決方案：html和body同時(shí)設(shè)置就行了// $('html,body').scrollTop(200);// 如果jQuery1.8以上版本沒(méi)問(wèn)題 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.時(shí)間固定 則路程越長(zhǎng) 速度越快 第一種更主流// 2.速度固定 則路程越長(zhǎng) 時(shí)間越長(zhǎng)// 動(dòng)畫(huà)總時(shí)長(zhǎng)var time = 2000;// 動(dòng)畫(huà)幀時(shí)長(zhǎng) 動(dòng)畫(huà)總時(shí)長(zhǎng) / 動(dòng)畫(huà)幀時(shí)長(zhǎng) = 總幀數(shù)var itemTime = 20;// 給回到頂部按鈕綁定單擊事件$('#toTop').click(function () {// 獲取總路程 (當(dāng)前頁(yè)面的滾動(dòng)條位置)var offset = $('html').scrollTop() $('body').scrollTop();// 計(jì)算單次偏移 = 總路程 / (動(dòng)畫(huà)總時(shí)長(zhǎng) / 動(dòng)畫(huà)幀時(shí)長(zhǎng))var itemOffset = offset / ( time / itemTime );// 定時(shí)器var timer = setInterval(function () {// 500 -= 5; 495 490 485 480 475 470 ... 0offset -= itemOffset;// 如果當(dāng)前的位置（offset）等于0了 說(shuō)明已經(jīng)回到頂部 清除定時(shí)器if(offset<=0){offset = 0 //修正值clearInterval(timer);}// 每次調(diào)用定時(shí)器 都是修改頁(yè)面的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é)點(diǎn)* replaceWith(content)用指定內(nèi)容替換所有匹配的標(biāo)簽刪除節(jié)點(diǎn)2. 刪除元素* empty()刪除所有匹配元素的子元素 (掏空子元素)* remove()刪除所有匹配的元素 (連自己一起刪除)--><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">/*需求:1. 向id為ul1的ul下添加一個(gè)span(最后)2. 向id為ul1的ul下添加一個(gè)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下添加一個(gè)span(最后)$('<span>我是appendTo新增的span</span>').appendTo('#ul1');$('#ul1').append('<span>我是append新增的span</span>');// 2. 向id為ul1的ul下添加一個(gè)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é)點(diǎn)的// empty 用于掏空節(jié)點(diǎn) 刪除所有子元素 保留父元素// $('#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 () {// 獲取三個(gè)輸入框var $empName = $('#empName');var $email = $('#email');var $salary = $('#salary');// 給提交按鈕綁定單擊事件$('#addEmpButton').click(function () {// 獲取三個(gè)輸入框的值var empName = $empName.val();var email = $email.val();var salary = $salary.val();// 根據(jù)輸入框的值 拼裝節(jié)點(diǎn)// <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);// 清空三個(gè)輸入框的信息$empName.val('');$email.val('');$salary.val('');});// 給刪除按鈕綁定單擊事件$('a').click(clickA);// 定義事件回調(diào)函數(shù) 你定義的 你沒(méi)調(diào)用 最終執(zhí)行了function clickA(event) {// 阻止默認(rèn)行為event.preventDefault();// 根據(jù)點(diǎn)擊的a標(biāo)簽 找到對(duì)應(yīng)的trvar $tr = $(this).parent().parent();// 獲取當(dāng)前行的namevar name = $tr.children(':first').html();// var name = $tr.children().first().html();if(confirm('你確定要?jiǎng)h除' 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相對(duì)于頁(yè)面左上角的位置// 讀取inner相對(duì)于頁(yè)面左上角的位置// offset 返回一個(gè)對(duì)象 有l(wèi)eft和top兩個(gè)屬性 元素相對(duì)于頁(yè)面左上角的位置// position 返回一個(gè)對(duì)象 有l(wèi)eft和top兩個(gè)屬性 元素相對(duì)于包含塊左上角的位置// 以上兩個(gè)方法 返回值都不帶單位 但是以像素計(jì)// offset 傳一個(gè)對(duì)象 可以設(shè)置元素的位置 設(shè)置時(shí)不需要帶單位 不過(guò)一般不使用這種方式$(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">取消綁定某個(gè)事件</button><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">// eventName:編碼方便 但只能加一個(gè)監(jiān)聽(tīng)，且有的監(jiān)聽(tīng)不支持// on:編碼不方便 但是可以添加多個(gè)監(jiān)聽(tīng)(多個(gè)事件相應(yīng)同一個(gè)回調(diào))，且通用// 1.給wrap綁定點(diǎn)擊監(jiān)聽(tīng) （兩種方式）// $('.wrap').click(function () {// console.log('點(diǎn)了我一下1')// });// $('.wrap').click(function () {// console.log('點(diǎn)了我一下2')// });// $('.wrap').on('click mouseleave',function () {// console.log('點(diǎn)了我一下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 傳遞兩個(gè)參數(shù) 都為函數(shù) 第一個(gè)參數(shù)為移入的回調(diào)函數(shù) 第二個(gè)參數(shù)為移出的回調(diào)函數(shù)// 如果只傳遞了一個(gè)參數(shù) 那么移入和移出都是使用這一個(gè)函數(shù)// hover底層使用mouseenter和mouseleave實(shí)現(xiàn)的$('.inner').hover(function () {console.log('移入')},function () {console.log('移出')})// 事件的解綁// off() 解除事件 默認(rèn)清除所有的事件監(jiān)聽(tīng)// off方法允許傳遞參數(shù) 參數(shù)為事件名稱(chēng)的字符串// 可用于單獨(dú)清除某個(gè)事件 如果想刪除多個(gè) 使用空格分開(kāi)即可$('#btn1').click(function () {$('.inner').off();});$('#btn2').click(function () {$('.inner').off('mouseleave mouseenter');})</script></body></html>
歡迎關(guān)注我的原創(chuàng)文章：小伙伴們！我是一名熱衷于前端開(kāi)發(fā)的作者，致力于分享我的知識(shí)和經(jīng)驗(yàn)，幫助其他學(xué)習(xí)前端的小伙伴們。在我的文章中，你將會(huì)找到大量關(guān)于前端開(kāi)發(fā)的精彩內(nèi)容。
學(xué)習(xí)前端技術(shù)是現(xiàn)代互聯(lián)網(wǎng)時(shí)代中非常重要的一項(xiàng)技能。無(wú)論你是想成為一名專(zhuān)業(yè)的前端工程師，還是僅僅對(duì)前端開(kāi)發(fā)感興趣，我的文章將能為你提供寶貴的指導(dǎo)和知識(shí)。
在我的文章中，你將會(huì)學(xué)到如何使用HTML、CSS和JavaScript創(chuàng)建精美的網(wǎng)頁(yè)。我將深入講解每個(gè)語(yǔ)言的基礎(chǔ)知識(shí)，并提供一些實(shí)用技巧和最佳實(shí)踐。無(wú)論你是初學(xué)者還是有一定經(jīng)驗(yàn)的開(kāi)發(fā)者，我的文章都能夠滿(mǎn)足你的學(xué)習(xí)需求。
此外，我還會(huì)分享一些關(guān)于前端開(kāi)發(fā)的最新動(dòng)態(tài)和行業(yè)趨勢(shì)?；ヂ?lián)網(wǎng)技術(shù)在不斷發(fā)展，新的框架和工具層出不窮。通過(guò)我的文章，你將會(huì)了解到最新的前端技術(shù)趨勢(shì)，并了解如何應(yīng)對(duì)這些變化。
我深知學(xué)習(xí)前端不易，因此我將盡力以簡(jiǎn)潔明了的方式解釋復(fù)雜的概念，并提供一些易于理解的實(shí)例和案例。我希望我的文章能夠幫助你更快地理解前端開(kāi)發(fā)，并提升你的技能。
如果你想了解更多關(guān)于前端開(kāi)發(fā)的內(nèi)容，不妨關(guān)注我的原創(chuàng)文章。我會(huì)不定期更新，為你帶來(lái)最新的前端技術(shù)和知識(shí)。感謝你的關(guān)注和支持，我們一起探討交流技術(shù)共同進(jìn)步，期待與你一同探索前端開(kāi)發(fā)的奇妙世界！
