當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js实战代码系列—带你玩jQuery带你飞

發布時間：2025/3/15 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 js实战代码系列—带你玩jQuery带你飞小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

https://blog.csdn.net/hanhanwanghaha一個超級無敵可愛的人鴨歡迎您的關注！
歡迎關注微信公眾號：寶藏女孩的成長日記
如有轉載，請注明出處（如不注明，盜者必究）

前言

有人說現在前后端分離，都不用jQuery了，但是目前大量網站在用jQuery，我看到一篇比較好的文章，學習jQuery很有必要！https://blog.csdn.net/weixin_44747933/article/details/107373570

剛剛用手機實習僧app隨便點了一個，因此學習jQuery還是很有必要的。

專業老師說了一句話：打基礎的時候是很枯燥的，要耐得住寂寞。
哈哈哈哈，其實我的感覺是這樣，每天坐在電腦前面一天就過去了，希望對待學習我們有這樣的態度：我自是年少，韶華傾負。
下面給的這些模板，哈哈哈哈其實不一定只會這個，要學會舉一反三，當遇到類似的時候就可以用上哈哈哈。

好了，我們一起在jquery的世界里飛趴！

引入庫

首先我們要引入jquery庫，在js文件夾右鍵新建，js文件

更改名字 ——> 選擇jquery ——> 創建

后面的代碼中需要引入這個庫，例如：

一個簡單的自定義動畫模板

實現效果，當我自己把它做出來的時候，可愛到化了哈哈哈哈

上代碼

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin:0 ;padding: 0;}#box1{width: 210px;height: 110px;background-color: salmon;position: absolute;left: 0;top: 0;background-image: url(img/pig.jpg);}</style></head><body><div id="box1"></div><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">aa();function aa(){$("#box1").animate({"left":"500px"},2000).animate({"top":"300px"},2000).animate({"left":"0px"},2000).animate({"top":"0px"},2000,function(){aa(); //這一句是循環的意思});}//$("#box1").animate({"left":"600px","top":"300px"},2000);</script></body> </html>

彈出窗口模板

先上效果圖

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin:0 ;padding: 0;}html{width: 100%;}body{width: 100%;overflow: hidden;/* 多出的部分隱藏 */background-color: pink;}.box1{width: 400px;height: 360px;background-color: salmon;position: absolute;right: -400px;top: 200px;border-top-left-radius:5px; /* 左上的圓角顯示 */border-bottom-left-radius:5px; /* 左下的圓角顯示 */background-image: url(./img/me.png);}.box1 span{width: 20px;height: 60px;display: block;background-color:salmon ;position: absolute;left:-20px;top: 150px;border-top-left-radius: 3px;/* 左上的圓角顯示 */border-bottom-left-radius:3px; /* 左下的圓角顯示 */}</style></head><body><div class="box1"><span>悟空鴨</span></div><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(".box1").mouseenter(function(){$(".box1").stop(true,true).animate({"right":"0px"},600);});$(".box1").mouseleave(function(){$(".box1").stop(true,true).animate({"right":"-400px"},600);});</script></body> </html>

哈哈哈 img你可以自己找奧哈哈哈，然后再自己調格式哈哈哈

其實我們可以舉一反三，比如位置，比如里面可能是表格，都可以切換哈哈哈

顯示和隱藏元素模板

這個我們直接上效果哈哈哈
（這邊只演示了隱藏和顯示，剩下的你可以自己玩玩）

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background-color: pink;}#box1{margin-top: 20px;width: 100%;height: 1100px;background-image: url(img/xiaoxue.jpg);}</style></head><body><input type="button" name="btn1" id="btn1" value="顯示小雪" /><input type="button" name="btn2" id="btn2" value="隱藏小雪" /><input type="button" name="btn3" id="btn3" value="顯示和隱藏小雪" /><input type="button" name="btn4" id="btn4" value="淡入小雪" /><input type="button" name="btn5" id="btn5" value="淡出小雪" /><input type="button" name="btn6" id="btn6" value="淡入淡出到(這個可以設置透明度)" /><input type="button" name="btn7" id="btn7" value="展開" /><input type="button" name="btn8" id="btn8" value="折疊" /><input type="button" name="btn9" id="btn9" value="展開和折疊" /><div id="box1"></div><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$("#btn1").click(function(){$("#box1").show();});$("#btn2").click(function(){$("#box1").hide();//document.getElementById("box1").style.display="none";});$("#btn3").click(function(){$("#box1").toggle();});$("#btn4").click(function(){$("#box1").fadeIn(2000);});$("#btn5").click(function(){$("#box1").fadeOut(2000)});$("#btn6").click(function(){$("#box1").fadeTo(1000,0.5);});$("#btn7").click(function(){$("#box1").slideDown()});$("#btn8").click(function(){$("#box1").slideUp();});$("#btn9").click(function(){$("#box1").slideToggle();});</script></body> </html>

夯實基礎

1.script放在body和放在head的區別

放在body中：在頁面加載的時候被執行

放在head中：在被調用時被執行

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){ //表示頁面加載完畢之后執行此處的代碼。（這里的加載完畢是指整個頁面的html標簽全部加載到瀏覽器中）$("#box1").css({"color":"red"}); });</script></head><body><div id="box1">我是仙女</div><img src="img/fariy.jpg"/ id="myimg"></body> </html>

效果圖

2.滾動效果

上效果圖

代碼在此

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{height: 950px;background-image: url(img/fariy.jpg);}#box2{height: 1000px;background-image: url(img/shaohan.jpg);}</style></head><body><input type="button" name="btnopt" id="btnopt" value="點擊我滾動到張韶涵" /><div id="box1"></div><div id="box2"></div><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$("#btnopt").click(function(){$("html,body").animate({scrollTop:"1200px"},3000);});</script></body> </html>

3.事件的合成

先上效果圖

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 1000px;height: 600px;background-color: salmon;}</style></head><body><div id="box1">鼠標移上來魔法開始</div><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> // $("#box1").mouseenter(function(){ // $("#box1").css({"background-color":"red"}); // }); // $("#box1").mouseleave(function(){ // $("#box1").css({"background-color":"salmon"}); // });$("#box1").hover(function(){ $("#box1").css({"background-image":"url(img/haomin.jpg)"});},function(){$("#box1").css({"background-image":"url(img/poter.jpg)"});})</script></body> </html>

4.事件的綁定

這個可以直接上代碼啦，具體效果拿去運行就知道了

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><input type="button" name="btn1" id="btn1" value="添加元素" /><ul><li>成都</li><li>重慶</li><li>上海</li><li>北京</li></ul><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">// 添加一個深圳 append是追加的意思$("#btn1").click(function(){$("ul").append("<li>深圳</li>");}); // 在控制臺輸出鼠標一上去的文本// $("li").on("mouseenter",function(){// var x=$(this).text();// console.log(x);// });//在網頁開發過程中，有些元素是直接寫在html中，有的元素是通過js動態添加到文檔中的。如果綁定事件的時候，都直接綁定到元素上，那么通過js添加的元素就不會綁定對應的事件。 //此時可以通過事件委托的方式，不把事件直接綁定到元素上，而把事件綁定到元素的父元素上，通過父元素委派給子元素，這樣，子元素不管是寫在html中的，還是后面通過js添加的，都會有對應的事件了。// 在控制臺輸出鼠標點擊發生的文本,與上面那個不同的是這個追加的可以顯示,而上面那個不可以$("ul").on("click","li",function(){var x=$(this).text();console.log(x);});</script></body> </html>

5.獲取元素偏移的距離

這個直接拿代碼去溜溜，在控制臺就可以看到元素偏移的距離，運行一下就知道啦！

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#box1{width: 200px;height: 200px;background-color: pink;margin-top: 200px;margin-left: 300px;position: relative;}#box2{width: 50px;height: 50px;background-color: green;position: absolute;left: 50px;top: 30px;}</style></head><body><div id="box1"><div id="box2"></div></div><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">// 在控制臺打印輸出box1向下偏移的距離,打印輸出box2向右偏移的距離var pybox1=$("#box1").offset();var pybox2=$("#box2").position();console.log(pybox1.top,pybox2.left);</script></body> </html>

期待與你的一起學習
https://blog.csdn.net/hanhanwanghaha
一個敲極無敵可愛的人歡迎你的關注。

不懂隨時留言，評論也可，私信也可，看見必回。Come on baby

總結

以上是生活随笔為你收集整理的js实战代码系列—带你玩jQuery带你飞的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。