|
jquery是一個快速、小巧，功能強大的javascript函數(shù)庫。 jquery主要用來替代原生的javascript，簡化代碼。 前端最頭疼的就是兼容：IE6/7/8兼容的最高版本是jQuery1.9.1
jQuery的操作在一個類中，不會污染頂級變量 基本不用考慮瀏覽器的兼容性 支持鏈?zhǔn)讲僮鞣绞?/p> 隱式迭代 行為層和結(jié)構(gòu)層分離 豐富的插件支持
jQuery符號： jQuery=function jQuery(arg){ alert(arg); } $=window.jQuery=jQuery; $(arg)=jQuery(arg); window.jQuery === window.$ $ === jQuery typeof $ -> function 絕大多數(shù)情況下，直接使用 $ ，如果 $ 被占用，就使用 jQuery jQuery.noConflict() 釋放 $，但不釋放 jQuery $ //jQuery(selector,context) jQuery.noConflict() //釋放 $，但不釋放 jQuery $ //undefined jQuery //jQuery(selector,context) 下面兩句是等價的 $("div").addClass("div");
jQuery("div").addClass("div");
HTML加載完成的三種書寫方式 //html加載完成 $(document).ready(function(){ $("div").addClass("div"); }); //簡寫方式1 $().ready(function(){ $("div").addClass("div"); }); //簡寫方式2 $(function(){ $("div").addClass("div"); }); jquery 行為層方法簡介： .css({}) 改變元素樣式 以下是原生js寫法與jquery寫法對比 // 原生js var alinks=$("a"); for(var i=0;i<alinks.length;i++){ alinks[i].style.color="pink"; alinks[i].style.backgroundColor="#abcdef"; alinks[i].style.border="1px solid #fff"; } // jquery var alinks=$("a"); for(var i=0;i<alinks.length;i++){ alinks.eq(i).css({ "color":"pink", "background-color":"#abcdef", "border":"1px solid #fff" }); } .text() 改變元素內(nèi)的文本 以下是原生js寫法與jquery寫法對比 // 原生js var alinks=$("a"); for(var i=0;i<alinks.length;i++){ alinks[i].innerHTML="喵喵"+i; } // jquery var alinks=$("a"); for(var i=0;i<alinks.length;i++){ alinks.eq(i).text("喵喵"+i); } .html() 改變元素內(nèi)的內(nèi)容，可以帶HTML標(biāo)簽 以下是原生js寫法與jquery寫法對比 // 原生js var alinks=$("a"); for(var i=0;i<alinks.length;i++){ alinks[i].innerHTML="喵喵"+i; } // jquery var alinks=$("a"); for(var i=0;i<alinks.length;i++){ alinks.eq(i).text("喵喵"+i); alinks.eq(i).html("<strong>"+"喵喵"+i+"</strong>"); } 小案例： index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jquery</title> <link rel="stylesheet" href="style.css"> <script src="jquery.js"></script> <script src="script.js"></script> </head> <body> <span class="top"></span> <nav> <a href="#">banner1</a> <a href="#">banner2</a> <a href="#">banner3</a> <a href="#">banner4</a> </nav> <div class="img-box"> <img src="image/cat1.jpg"> <img src="image/cat2.jpg"> <img src="image/cat3.jpg"> <img src="image/cat4.jpg"> </div> </body> </html> style.css * { margin: 0; padding: 0; border: none; } html, body { overflow: hidden;/*解決因為盒模型溢出造成的垂直方向滾動條*/ height: 100%; background-color: rgb(145, 176, 200); } span.top { display: block; width: 16px; height: 16px; margin: 30px auto 40px; border-radius: 50%; background-color: #fff; } nav { position: relative; display: flex;/*彈性盒模型*/ width: 40%; margin: 0 auto 45px; justify-content: space-between;/*實現(xiàn)元素在容器內(nèi)左右均勻分布*/ } nav:before { position: absolute; top: 20px; display: block; width: 100%; height: 10px; content: '';/*激活偽元素*/ background-color: #fff; } nav > a { font-size: 14px; position: relative; /*默認(rèn)是static定位，會被絕對定位覆蓋 修改為相對定位之后，會覆蓋前面的元素*/ padding: 10px 20px; text-decoration: none; color: rgb(144, 146, 152); border: 2px solid rgb(144, 146, 152); background-color: #fff; } .img-box { position: relative; overflow: hidden; width: 250px; height: 250px; margin: 0 auto; background-color: #fff; box-shadow: 0 0 30px 0 rgba(144, 146, 152, .3); } .img-box img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 98%; margin: auto;/*以上5句實現(xiàn)絕對定位的居中*/ } /*# sourceMappingURL=style.css.map */ script.js $(function(){ $("a").click(function(){ $("img").eq($(this).index()) // 獲取當(dāng)前點擊的a的index .css({"opacity":"1"}) .siblings() .css({"opacity":"0"}); }); }); 效果圖
|
|
|
