空白目錄 · zcm-jquery

# jQuery ## 什么是jQuery？ **jQuery 是一個 JavaScript 庫。** **jQuery 極大地簡化了 JavaScript 編程。** **jQuery 很容易學習。** ## jQuery語法 jQuery 語法是為 HTML 元素的選取編制的，可以對元素執行某些操作。基礎語法是：*$(selector).action()* - 美元符號定義 jQuery - 選擇符（selector）“查詢”和“查找” HTML 元素 - jQuery 的 action() 執行對元素的操作 ### 示例 $(this).hide() - 隱藏當前元素 $("p").hide() - 隱藏所有段落 $(".test").hide() - 隱藏所有 class="test" 的所有元素 $("#test").hide() - 隱藏所有 id="test" 的元素 ## jQuery對象 ```javascript <script> //JS代碼和 Jquery可以混合使用。 // $(function(){}) 等價于 window.onload=function(){} // $(function (){ // //alert("123"); // //var div1 = document.getElementById("div1"); // var id = $("div").attr("id"); // // //什么叫Jquery對象。什么叫JS對象。 // //通過jquery的寫法(jq選擇器)找到的對象，我們都叫jquery對象。 // 只有jquery對象可以調用jquery方法。 // //什么又是JS對象。 // var div1 = document.getElementById("div1); // var result = div1.attr("haha"); // alert(result) // }) // $(function (){ // alert("323"); // }) $(function (){ var divs = $("div");//document.getElementsByTagName("div"); //var div1 = $("div").attr("haha"); //alert(div1) //alert(divs.length) // $.each(你要遍歷的對象,function(ss,abc){ ...call back 回調函數。 }) $.each(divs, function(index,obj) { //回調函數中的第一參數表示下標。 //第二個參數表示在循環過程中的每一個對象。 alert(index+" "+obj) }); }) </script> ``` ## jQuery對象與javascript對象轉換 ```javascript <script type="text/javascript"> $(function(){ //JS對象轉換成Jquery對象。 $()包裹起來即可。 //var div1 = document.getElementById("div1"); //var jqDiv1 = $(div1); //alert(jqDiv1.attr("id")) //Jquery對象轉換成JS對象。1.JQ對象.get(index) 2.JQ對象[index] //var div1 = $("#div1")[0]; var div1 = $("#div1").get(0); var result = div1.getAttribute("haha"); alert(result) //注意:DOM 對象才能使用DOM 中的方法，jQuery 對象是不可以使用DOM中的方法。 }) </script> ``` ## jQuery選擇器關鍵點是學習 jQuery 選擇器是如何準確地選取您希望應用效果的元素。 jQuery 元素選擇器和屬性選擇器允許您通過標簽名、屬性名或內容對 HTML 元素進行選擇。選擇器允許您對 HTML 元素組或單個元素進行操作。在 HTML DOM 術語中：選擇器允許您對 DOM 元素組或單個 DOM 節點進行操作。 ### 元素選擇器 ```javascript jQuery 使用 CSS 選擇器來選取 HTML 元素。 $("p") 選取 <p> 元素。 $(".intro") 選取所有 class="intro" 的元素。 $("#demo") 選取所有 id="demo" 的元素。 $("span,#two") 選擇所有的 span 元素和id為two的元素 ``` ### 屬性選擇器 ```javascript $("div[title]") 選取含有屬性title 的div元素。 $("div[title='test']") 選取屬性title值等于'test'的div元素 $("div[title!='test']") 選取屬性title值不等于'test'的div元素(沒有屬性title的也將被選中) $("div[title^='te']") 選取屬性title值以'te'開始的div元素 $("div[title$='est']") 選取屬性title值以'est'結束的div元素 $("div[title*='es']") 選取屬性title值含有'es'的div元素 $("div[id][title*='es']") 組合屬性選擇器,首先選取有屬性id的div元素，然后在結果中選取屬性title值含有'es'的 div 元素 $("div[title][title!='test']") 選取含有 title 屬性值, 且title 屬性值不等于 test 的 div 元素 ``` ### 基礎選擇器 ```javascript $("div:first") :first 選擇第一個 div 元素 $("div:last") :last 選擇最后一個 div 元素 $("div:not(.one)") :not() 選擇class不為 one 的所有 div 元素 $("div:even") :even 選擇索引值為偶數的 div 元素 :odd 為奇數 $("div:gt(3)") :gt() 選擇索引值為大于 3 的 div 元素 :eq() 等于 :lt() 小于 $(":header") :header 選擇所有的標題元素 $(":animated") :animated 選擇當前正在執行動畫的所有元素 $("#two").nextAll("span:first") .nextAll() 選擇 id 為 two 的下一個 span 元素 ``` ### 子元素選擇器 ```javascript $(".one :nth-child(2)") :nth-child(n) 選取每個class為one的div父元素下的第2個子元素 $(".one :first-child") :first-child 選取每個class為one的div父元素下的第一個子元素 :last-child 最后一個子元素 $(".one :only-child ") :only-child 如果class為one的div父元素下的僅僅只有一個子元素，那么選中這個子元素 ``` ### 內容選擇器 ```javascript $("div:contains('di')") :contains() 選擇含有文本 'di' 的 div 元素 $("div:empty") :empty 選擇不包含子元素(或者文本元素) 的 div 空元素 $("div:has(.mini)") :has() 選擇含有 class 為 mini 元素的 div 元素 $("div:parent") :parent 選擇含有子元素(或者文本元素)的div元素 ``` ### 表單對象屬性過濾選擇器 ```javascript $("input:enabled") :enabled 對表單內可用input 賦值操作 $("input:disabled") :disabled 對表單內不可用input 賦值操作 $(":checkbox:checked") :checked 獲取多選框選中的個數 ``` ### 層級選擇器 ```javascript $("body div") 選擇 body 內的所有 div 元素空格隔開表示 $("body > div") > 在 body 內, 選擇直接子元素是 div 的 $("#one").next("div") .next() 選擇 id 為 one 的下一個 div 元素 $("#two").nextAll("div") .nextAll() 選擇 id 為 two 的元素后面的所有 div 兄弟元素 $("#two").siblings("div") .siblings() 選擇 id 為 two 的元素所有 div 兄弟元素 $("#two").prevAll("div") .prevAll() 選擇 id 為 two 的元素前邊的所有的 div 兄弟元素 ``` ### 可見性選擇器 ```javascript $("div:visible") :visible 選取所有可見的 div 元素 $("div:hidden") :hidden 選擇所有不可見的 div 元素 setTimeout(function(){ ($("div:hidden").show()) },2000) //選擇所有不可見的 div 元素，使用time()方法，2秒后設置可見 ``` ## jQuery事件函數 jQuery 事件處理方法是 jQuery 中的核心函數。事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。術語由事件“觸發”（或“激發”）經常會被使用。 ```html <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html> ``` ### jQuery實現全選 ```html <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $("#checkedAll_2").click(function(){ $("input[name='items']").attr("checked",this.checked); }) }) </script> </head> <body> <form method="post" action=""> 你愛好的運動是？<input type="checkbox" id="checkedAll_2" />全選/全不選 <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="乒乓球" />乒乓球 </form> </body> </html> ``` ### jQuery事件冒泡 ```html <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #div1{ width: 200px; height: 200px; background-color: greenyellow; } </style> <script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /** * * 在某一個對象上觸發某一類事件（如上例的click事件），那么此事件會向對象的父級對象傳播， * 并觸發父對象上定義的同類事件。 * 事件傳播的方向是從最底層到最頂層，類似于水泡從水底浮上來一般。 * * 事件的冒泡。 * 阻止事件的冒泡。 * return false; * 1.阻止事件冒泡。 * 2.阻止元素的默認行為。 * event.stopPropagation()... * event.preventDefault()... * */ $(function (){ $("#span1").click(function (){ alert("你點了span") return false; }); $("#div1").click(function (){ alert("你點了div!!!!") event.stopPropagation()//事務的傳播行為。 }); // $("body").click(function (){ // alert("你點了body...") // }) // $("html").click(function(){ // alert("點了html") // }) //綁定事件的方式。 $("a").on("click",function(){ alert("哈哈") //return false; //event.preventDefault(); return false; }) }); </script> </head> <body> <div id="div1"> <span id="span1" style="background-color: #FBD850;">我是一個span</span> </div> <a href="http://www.baidu.com">百度</a> </body> </html> ``` ### jQuery實現添加刪除記錄 ```html <html> <head> <meta charset="UTF-8"> <title>添加刪除記錄練習</title> <link rel="stylesheet" type="text/css" href="css/css.css" /> </head> <script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { // var $flog=$("a").confirm("是否確認刪除這條信息？"); // if($flog){ // // } var $add = $("#addEmpButton"); var $tab = $("#employeeTable"); var $del = $("a") $add.click(function() { var $name = $("#empName").val() var $email = $("#email").val() var $sal = $("#salary").val() $($tab).append("<tr><td>" + $name + "</td><td>" + $email + "</td><td>" + $sal + "</td><td><a href='#'>" + 'Delete' + "</a></td></tr>") }) $("#employeeTable").delegate("a", "click", function() { var flog = confirm("確認刪除這條信息嗎？"); if(flog) { $(this).parent().parent().remove(); } return false; }) }) </script> <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="#">Delete</a> </td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td> <a href="#">Delete</a> </td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td> <a href="#">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> </body> </html> ``` ## jQuery屬性 ```html attr() 設置或返回被選元素的屬性值。 removeAttr(name) 從每一個匹配的元素中刪除一個屬性 prop(name|properties|key,value|fn) 獲取在匹配的元素集中的第一個元素的屬性值。//為checked時用 html([val|fn]) 取得第一個匹配元素的html內容。 text([val|fn]) 取得所有匹配元素的內容。 val([val|fn|arr]) 獲得匹配元素的value值。 ``` ## ajax **AJAX 是與服務器交換數據的藝術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。** AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。簡短地說，在不重載整個網頁的情況下，AJAX 通過后臺加載數據，并在網頁上進行顯示。使用 AJAX 的應用程序案例：谷歌地圖、騰訊微博、優酷視頻、人人網等等。 ```javascript jQuery.ajax(url,[settings]) url:一個用來包含發送請求的URL字符串。 settings:AJAX 請求設置。所有選項都是可選的。 dataType 預期服務器返回的數據類型。 success 請求成功后的回調函數。 jQuery.post(url, [data], [callback], [type]) 通過遠程 HTTP POST 請求載入信息。這是一個簡單的 POST 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數，請使用 $.ajax。 url:發送請求地址。 data:待發送 Key/value 參數。 callback:發送成功時回調函數。 type:返回內容格式，xml, html, script, json, text, _default ``` ```javascript <script type="text/javascript"> $.ajax方法 // $(function(){ // $.ajax({ // type:"post", // url:"http://192.168.14.15:8080/show/ShowAction?startindex=0&endindex=20", // dataType:"json", // success:function(msg){ // $.each(msg.list,function(index){ // $("#app").append("<div><img src='"+this.cover+"' title='"+this.title+"'/>評分:"+this.rate+"</div>") // }) // } // }); // }) $.post方法 $(function(){ $.post("http://192.168.14.15:8080/show/ShowAction?startindex=0&endindex=20", function(msg){ $.each(msg.list,function(index){ $("#app").append("<div><img src='"+this.cover+"' title='"+this.title+"'/>評分:"+this.rate+"</div>") }) },"json"); }) </script> ```