1.jQuery由美國人John Resig建立,至今已吸引了來自世界各地的衆多JavaScript高手加入其teamcss
2.jQuery是繼prototype以後有一個優秀的JavaScript框架。其宗旨是——WRITE LESS.DO MORE!html
3.它是輕量級的js庫(壓縮後只有21k),這是其餘的js庫所不及的,它兼容CSS3,還兼容各類瀏覽器node
4.jQuery是一個快速的,簡潔的JavaScript庫,使用戶能更方便地處理HTMLdocuments、event、實現動畫效果,而且方便地爲網站提供AJAX交互。jquery
5.jQuery還有一個比較大的優點是,它的文檔說明很全,並且各類應用說得很詳細,同時還有許多成熟的插件可供選擇。web
jQuery對象就是經過包裝DOM對象後產生的對象。jQuery對象是jQuery獨有的。若是一個對象是jQuery對象。那麼它就可使用jQuery裏的方法:瀏覽器
$("#p1") -------> jQuery對象 var ele=document.getElementById("p1") ele------>DOM對象
jQuery與DOM對象下的方法和屬性不能混用 jquery對象: jQuery.方法====$.方法 基礎語法:$(selector).action() selector:查找想操做的標籤
3.1:選擇器babel
1 基本選擇器 $("*") $("#id") $(".class") $("element") $(".class,p,div") 2 層級選擇器 $(".outer div"):後代選擇器 $(".outer>div"):子代選擇器 $(".outer+div"):毗鄰選擇器 $(".outer~div"):普通兄弟選擇器 3 基本篩選器 $("li:last"):最後一個 $("li:first"):第一個 $("li:eq(2)"):索引爲2 $("li:odd"):奇數 $("li:even"):偶數 $("li:gt(1)"):大於 $("li:lt(5)"):小於 4 屬性選擇器 $('[id="div1"]'):id爲div1的標籤 $('["alex="sb"][id]'):alex屬性爲sb而且有id屬性 5 表單選擇器 $("[type='text']") 簡寫:$(":text") 注意只適用於input標籤 :$("input:checked")
3.2:篩選器app
3.2.1:過濾篩選器框架
$("li").eq(2):推薦寫法 $("li").first():第一個 $("li").last():最後一個 $("ul li").hasclass("test"):有class的值是test
3.2.2:查找篩選器編輯器
1.查找子標籤: $("div").children(".test"):全部子代中的.test標籤 $("div").find(".test"):全部後代中的.test標籤 2.向下查找兄弟標籤: $(".test").next():下一個兄弟標籤 $(".test").nextAll():找到下面全部的兄弟標籤 $(".test").nextUntil(條件):直到條件成立中止,一樣顧頭不顧尾,最後一個取不到 3.向上查找兄弟標籤: $("div").prev():上一個兄弟標籤 $("div").prevAll():找到上面全部的兄弟標籤 $("div").prevUntil(條件):直到條件成立中止,顧頭不顧尾 4.查找全部兄弟標籤: $("div").siblings() 5.查找父標籤: $(".test").parent():找父標籤 $(".test").parents():找多個父標籤,父標籤的父標籤也是父標籤,一直找到body層 $(".test").parentUntil(條件):找全部的父標籤直到條件成立中止,顧頭不顧尾
注意:jQuery支持鏈式操做,好比:
$("#d1").next().css("color","red").next().css("color","green");
4.1:事件
4.1.1:頁面載入
當DOM載入就緒能夠查詢及操縱時綁定一個要執行的函數。這是事件模塊中最重要的一個函數,由於它能夠極大地提升web應用程序的響應速度。
寫法:
$(document).read(function(){ // 在這裏寫你的JS代碼... })
簡寫:
$(function(){ // 你在這裏寫你的代碼 })
4.1.2:事件綁定
//語法: 標籤對象.事件(函數) eg: $("p").click(function(){})
4.1.3:事件委派(父標籤把方法委派給子標籤)
on方法:事件綁定再也不給指定的標籤綁定,而是綁定給父標籤
語法:$("父級標籤").on(eve,[selector],[data],fn) // 在選擇元素上綁定一個或多個事件的事件處理函數。
off:解除事件(綁定誰解除誰)
events:一個或多個用空格分隔的事件類型和可選的命名空間,如"click"或"keydown.myPlugin" 。 selector:一個選擇器字符串用於過濾器的觸發事件的選擇器元素的後代。若是選擇器爲null或省略,當它到達選定的元素,事件老是觸發。 data:當一個事件被觸發時要傳遞event.data給事件處理函數。 fn:該事件被觸發時執行的函數。 false 值也能夠作一個函數的簡寫,返回false。
4.2:屬性操做
4.3:each循環
jQuery支持兩種循環方式,方式一(類下的方法):
格式:$each(obj,callback) li=[10,20,30,40]; $.each(li,function(i,x){ console.log(i,x) }); 在這裏i是索引,x是值
方式二(實例下的方法):
格式:$("").each(fn) $("tr").each(function(){ console.log($(this).html()) }) 在這裏,$(this)代指當前循環標籤。
擴展
li=[11,22,33,44]; $.each(li,function(i,v){ if (v==33){ return ; } console.log(v) }); //each的參數function內若是出現return 結束檔次循環,相似於continue; 若是出現return false,結束的是整個each循環,相似break。 //結果是11,22,44;由於這裏每次循環都執行一個函數,當v==33的時候只是結束了一次函數
4.4:文檔節點處理
//建立一個標籤對象,用變量名拿對象時要加$,表示這是一個jquery對象 $("<p>") //內部插入 $("").append(content|fn):追加到最後一個位置 ----->$("p").append("<b>Hello</b>"); $("").appendTo(content):子標籤添加到父標籤裏面的最後 ----->$("p").appendTo("div"); $("").prepend(content|fn):添加到第一個位置 ----->$("p").prepend("<b>Hello</b>"); $("").prependTo(content):子標籤添加到父標籤裏面的首尾 ----->$("p").prependTo("#foo"); //外部插入 $("").after(content|fn):添加兄弟標籤到後面 ----->$("p").after("<b>Hello</b>"); $("").before(content|fn):添加兄弟標籤到前面 ----->$("p").before("<b>Hello</b>"); $("").insertAfter(content):標籤添加到某個兄弟標籤的後面 ----->$("p").insertAfter("#foo"); $("").insertBefore(content):標籤添加到某個兄弟標籤的前面 ----->$("p").insertBefore("#foo"); //替換 $("").replaceWith(content|fn):直接oldnode替換成newnode ----->$("p").replaceWith("<b>Paragraph. </b>"); //刪除 $("").empty():清空節點內容 $("").remove([expr]):刪除節點(刪誰誰調用) //複製 $("").clone([Even[,deepEven]])
4.5:動畫效果
1.基本
.show([speed, [easing], [fn]]):顯示 //顯示隱藏的匹配元素。 .hide([speed, [easing], [fn]]):隱藏 //隱藏顯示的匹配元素。 .toggle([speed], [easing], [fn]) //若是元素是可見的,切換爲隱藏的;若是元素是隱藏的,切換爲可見的。 參數介紹: speed:三種預約速度之一的字符串(「slow」,「normal」, or 「fast」)或表示動畫時長的毫秒數值(如:1000)。 easing:(Optional) 用來指定切換效果,默認是」swing」,可用參數」linear」。 fn:在動畫完成時執行的函數,每一個元素執行一次。
2.滑動
.slideDown([speed, [easing], [fn]]):顯示 //經過高度變化(向下增大)來動態地顯示全部匹配的元素。 .slideUp([speed, [easing], [fn]]):隱藏 //經過高度變化(向下減少)來動態地隱藏全部匹配的元素。 .slideToggle([speed, [easing], [fn]]) //經過高度變化來切換全部匹配元素的可見性。 參數同上
3.淡入淡出
.fadeIn([speed, [easing], [fn]]):顯示 //經過不透明度的變化來實現全部匹配元素的淡入效果。 .fadeOut([speed, [easing], [fn]]):隱藏 //經過不透明度的變化來實現全部匹配元素的淡出效果。 .fadeTo([speed, [easing], [fn]]) //把全部匹配元素的不透明度以漸進方式調整到指定的不透明度。 .fadeToggle([speed, [easing], [fn]]) //經過不透明度的變化來切換全部匹配元素的淡入和淡出效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>圖片輪播</title> <style> *{ margin: 0; padding: 0; } .image_carousel{ position: relative; left: 0; top:0; /*border: 1px solid;*/ width: 790px; height: 340px; margin: 138px auto; overflow: hidden; } .image_list li{ list-style: none; position: absolute; left: 0; top:0; } .cut_button{ position: absolute; /*z-index: 1;*/ left: 37%; bottom: 22px; width: 194px; height: 12px; background-color: hsla(0,0%,100%,.3); padding: 5px 10px; border-radius: 12px; line-height: 12px; text-align: center; } .cut_button_list li{ display:inline-block; width: 12px; height: 12px; background-color: #fff; list-style: none; margin-left: 4px; margin-right: 4px; border-radius: 100%; } .cut_button_list li:hover{ background-color: #db192a; } .btn a{ font-size: 25px; color: white; position: absolute; bottom: 141px; width: 30px; height: 60px; background-color: RGBA(0,0,0,0.3); line-height: 60px; text-align: center; text-decoration: none; } .last a{ left: 0; } .next a{ right: 0; } a:hover{ background-color: RGBA(0,0,0,0.7); } </style> </head> <body> <div class="image_carousel"> <div class="image"> <ul class="image_list"> <li class="img"><a href=""><img id="img1" src="//img12.360buyimg.com/da/jfs/t6946/30/363119663/215517/327addf9/597594f1N6d4f6f9a.jpg" alt=""></a></li> <li class="img"><a href=""><img id="img2" src="//img1.360buyimg.com/da/jfs/t6838/58/1188598350/101456/93ca512d/597e7d28N65750c3d.jpg" alt=""></a></li> <li class="img"><a href=""><img id="img3" src="//img12.360buyimg.com/da/jfs/t5614/73/8258277091/129172/cd6b7ea5/59793d03N8173f093.jpg" alt=""></a></li> <li class="img"><a href=""><img id="img4" src="//img11.360buyimg.com/da/jfs/t5728/157/8872231321/301637/86d6fc6a/597fdcf3N78181b6c.jpg" alt=""></a></li> <li class="img"><a href=""><img id="img5" src="//img12.360buyimg.com/da/jfs/t5839/154/8380421091/51117/6f3d50fb/5979ad9dN277885bf.jpg" alt=""></a></li> <li class="img"><a href=""><img id="img6" src="//img11.360buyimg.com/da/jfs/t7027/263/1474527209/100106/e209db17/598165beNf30e7083.jpg" alt=""></a></li> <li class="img"><a href=""><img id="img7" src="//img10.360buyimg.com/da/jfs/t6040/352/7744875341/73277/88588ea2/59814f5fN4746e6f0.jpg" alt=""></a></li> <li class="img"><a href=""><img id="img8" src="//img11.360buyimg.com/babel/jfs/t6886/165/1330183705/71170/e069d1e5/59802506N0c042758.jpg" alt=""></a></li> </ul> </div> <div class="cut_button"> <ul class="cut_button_list"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="last btn"><a> < </a></div> <div class="next btn"><a> > </a></div> </div> <script src="jquery-3.2.1.js"></script> <script> var x=0; //定義全局變量用來標識兩輪播圖位置 //輪播圖切換函數 function cut_img() { $(".cut_button_list li").eq(x).css("background-color","#db192a").siblings().css("background-color","#fff"); $(".image_list li").eq(x).fadeIn(1000).siblings().fadeOut(1000); } //自動切換圖片函數 function auto_cut_img() { if (x!==$(".img").length-1){ x++; } else { x=0; } cut_img() } var ID; cut_img(); ID=setInterval(auto_cut_img,2000); //啓動定時器 $(".cut_button_list li").mouseover(function () { x=$(this).index(); cut_img() }); $(".image_carousel").hover(function () { clearInterval(ID); },function () { ID=setInterval(auto_cut_img,2000); }); //上一張圖按鈕 $(".last").click(function () { if (x!==0){ x--; } else { x=$(".img").length-1; } cut_img() }); //下一張圖按鈕 $(".next").click(function () { auto_cut_img() }) </script> </body> </html>
4.自定義
.animate(params, [speed], [easing], [fn]) //用於建立自定義動畫的函數。 參數介紹: params:一組包含做爲動畫屬性和終值的樣式屬性和及其值的集合。 speed:三種預約速度之一的字符串(「slow」,「normal」, or 「fast」)或表示動畫時長的毫秒數值(如:1000)。 easing:要使用的擦除效果的名稱(須要插件支持).默認jQuery提供」linear」 和 「swing」。 fn:在動畫完成時執行的函數,每一個元素執行一次。
4.6:CSS操做
1.CSS位置操做
$("").offset([coordinates]):偏移,有兩個屬性,分別是top和left,位置是以左上角的位置來判斷的(針對整個窗口去拿位置)
賦值方式:$("").offset({left:200,top:200})
$("").position():定位,也有一個top值和left值(針對父級已定位標籤去拿位置) $("").scroll:滾動條滾動時觸發的事件 $("").scrollTop([val]):調上下的滾動條 返回頂部,要給整個窗口加,$(window).scrolltop(0),能夠取值能夠賦值 $("").scrollLeft([val]):調左右的滾動條 $("").css("cursor","move"):cursor改變鼠標樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="../day45jQuery/jquery-3.2.1.js"></script> <style> *{ margin: 0; } .s1{ width: 200px; height: 200px; background-color: #396bb3; } </style> </head> <body> <div class="s1"></div> <script> var mouse_x=0; var mouse_y=0; $(".s1").mouseover(function () { $(this).css("cursor","move") }); $(".s1").mousedown(function (e) { mouse_x=e.clientX; mouse_y=e.clientY; var $box_top=$(".s1").offset().top; var $box_left=$(".s1").offset().left; $(document).mousemove(function (e) { var new_mouse_x=e.clientX; var new_mouse_y=e.clientY; $(".s1").offset({"left":$box_left+new_mouse_x-mouse_x,"top":$box_top+new_mouse_y-mouse_y}) }) }); $(document).mouseup(function () { $(this).off("mousemove") }) </script> </body> </html>
狀態事件對象:event
event對象是保存事件觸發狀態的對象,由操做系統發送 ele.onkeydown=function (e) { e=e||window.event; console.log(String.fromCharCode(e.keyCode)); e.keyCode拿到的是鍵盤按下鍵的asc碼,而後用String.fromCharCode方法拿到用戶按下的鍵 e.clientX:拿到鼠標的X軸座標 e.clientY:拿到鼠標的Y軸座標
2.尺寸操做
$("").height([val|fn]):拿的是文本框的高 $("").width([val|fn]):拿的是文本框的寬 $("").innerHeight():加上padding的高 $("").innerWidth():加上padding的寬 $("").outerHeight([soptions]):再加上border的高,若是裏面的參數加上ture,會連Maggin都算上 $("").outerWidth([options]):加上border的寬,同上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="jquery-3.2.1.js"></script> <style> *{ margin: 0; padding: 0; } .navbar{ float: left; width: 100%; height: 50px; background-color: #272425; } .left_menu{ float: left; width: 20%; margin-left: -1px; height: 500px; border-right: 1px solid; } .right_content{ position: relative; top: 0; left: 0; float: left; width: 77%; height: 500px; padding-left: 40px; margin-right: -1px; } .operation{ margin-top: 20px; color: white; width: 100%; height: 30px; text-align: center; line-height: 30px; background-color: #396bb3; } .operation_list{ list-style: none; } .operation_list li{ margin: 10px; font-size: 14px; } .operation_list li a{ color: #396bb3; text-decoration: none; } .book_info{ width: 100%; font-size: 14px; } td{ width: 50px; height: 40px; border-top: 1px solid #e1e1e1; } .search_box{ width: 100%; height: 100px; } #search_bar{ padding: 10px; position: absolute; right: 144px; top: 36px; width: 200px; border-radius: 7px; border: 1px solid #e1e1e1; } .search_btn{ color: white; border-radius: 5px; padding: 9px; background-color: #396bb3; position: absolute; right: 93px; top: 34px; } .hide{ display: none; } .shade{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: black; opacity: 0.4; } .model,.model2{ width: 500px; height: 400px; background-color:white; position: fixed; top: 50%; left:50%; margin-top: -200px; margin-left: -250px; } .btn{ width: 50px; height: 30px; border-radius: 5px; color: white; } .del_btn{ background-color: #ff1732; } .btn2{ background-color: #396bb3; } .btn3{ background-color: #4cff82; } .edit_btn{ background-color: #ffdd3f; } .cancel_btn{ background-color: #ff1732; } .input_field{ height: 30px; border-radius: 5px; margin: 10px; } .model{ padding-left: 150px; } #put_info{ margin-left: 100px; } #cancle{ margin-left: 50px; } .head{ width: 80%; height: 100%; margin: 0 auto; } .title{ float: left; color: white; font-size: 28px; line-height: 100%; margin-top: 8px; } .index_link{ float: left; color: #e1e1e1; font-size: 15px; margin-top: 15px; margin-left: 80px; text-decoration: none; } .copyright{ line-height: 30px; text-align: center; font-size: 14px; } </style> </head> <body> <div class="outer"> <div class="navbar"> <div class="head"> <div class="title">圖書管理系統</div> <div ><a href="" class="index_link">首頁</a></div> </div> </div> <div class="left_menu"> <div class="operation">操做</div> <ul class="operation_list"> <!--<li><a href="" >>>>添加書籍</a></li>--> <li><a href="" >>>>草稿箱</a></li> <li><a href="" >>>>設置默認編輯器</a></li> <li><a href="" >>>>備份書籍</a></li> </ul> </div> <div class="right_content"> <div class="search_box"> <form action=""> <input type="text" placeholder="Title" id="search_bar"> </form> <button class="search_btn">查找</button> </div> <button class="btn2 btn" id="add_info">添加</button> <table class="book_info"> <tr> <td>圖書編號</td> <td>書名</td> <td>做者</td> <td>價格</td> <td>分類</td> <td>上架時間</td> <td>操做</td> </tr> <tr> <td>1</td> <td>囚徒健身</td> <td>保羅·威德(美)</td> <td>79¥</td> <td>健身</td> <td>2013年10月</td> <td> <button class="edit_btn btn">編輯</button> <button class="del_btn btn">刪除</button> </td> </tr> <tr> <td>2</td> <td>萬曆十五年</td> <td>黃仁宇</td> <td>18¥</td> <td>歷史</td> <td>1990年1月1日</td> <td> <button class="edit_btn btn">編輯</button> <button class="del_btn btn">刪除</button> </td> </tr> </table> </div> <div class="shade hide"></div> <div class="model hide"> <div>圖書編號:<input type="text" class="input_field" value=""></div> <div> 書名:<input type="text" class="input_field" value=""></div> <div> 做者:<input type="text" class="input_field" value=""></div> <div> 價格:<input type="text" class="input_field" value=""></div> <div> 分類:<input type="text" class="input_field" value=""></div> <div>上架時間:<input type="text" class="input_field" value=""></div> <button class="btn3 btn" id="put_info">提交</button> <button class="cancel_btn btn" id="cancle">取消</button> </div> <div class="copyright"> <p>©All rights reserved</p> <p><b>Powered by</b> Amos</p> </div> </div> <script> var x; //用來判斷是添加仍是編輯 //點擊添加信息,彈出空對話框 $("#add_info").click(function () { $(".shade,.model").removeClass("hide"); $(":text").val("") }); //點擊取消,收回對話框 $("#cancle").click(function () { $(".shade,.model").addClass("hide"); }); //點擊提交信息, $("#put_info").click(function () { //添加頁面 if (x==undefined){ var $tr=$("<tr>"); $(".model :text").each(function () { var $td=$("<td>"); $td.text($(this).val()); $tr.append($td); }); var $td=$("<td>"); var $edit_btn=$("<button>"); var $del_btn=$("<button>"); $td.append($edit_btn.text("編輯").addClass("edit_btn").addClass("btn")); $td.append($del_btn.text("刪除").addClass("del_btn").addClass("btn")); $tr.append($td); $(".book_info").append($tr); $(".shade,.model").addClass("hide"); } //編輯頁面 else { //建立新的tr節點,添加td節點 var $tr=$("<tr>"); $(".model :text").each(function () { var $td=$("<td>"); $td.text($(this).val()); $tr.append($td); }); //拿新建的tr內容去替換舊的tr內容 $tr.children().each(function () { var $index_val=$(this).index();//拿到索引 $(edit_obj[$index_val]).text($(this).text()) }); x=undefined;//把x恢復成原裝 $(".shade,.model").addClass("hide"); //關閉對話框 } }); //點擊刪除按鈕 $(".book_info").on("click",".del_btn",function () { $(this).parent().parent().remove() }); //點擊編輯按鈕 $(".book_info").on("click",".edit_btn",function () { x=1; edit_obj=$(this).parent().siblings();//定義全局變量讓上面知道在操做哪行 $(this).parent().siblings().each(function () { var $input_field=$(".model :text"); var index_val=$(this).index(); //拿到每一個格子的索引值 //把每一個框的value值換成表格裏的值 $($input_field[index_val]).val($(this).text()); }); $(".shade,.model").removeClass("hide"); //彈出對話框 }) </script> </body> </html>