標籤：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () { //選取器.跟css一樣 .css()jq修改樣式的方法 $(".hardTool").css("color", "pink");//調用jq的方法,jq內部迴圈 dom數組,這個叫做隱式迭代 //標籤選取器 $("li").click(function () { alert("我被點擊了" + this.innerHTML); }); $("#ComScreen").css({ "fontSize": "50px", "backgroundColor": "#0094ff", "fontFamily": "微軟雅黑" }); }) </script></head><body> <ol> <li class="hardTool">固態硬碟</li> <li class="hardTool">機械鍵盤</li> <li id="ComScreen">視網膜顯示屏</li> <li>水冷機箱</li> </ol></body></html>
$由來,自執行函數
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> //自執行函數,---自動執行,括弧外面訪問不到, //用處,不讓使用者在不經意之間修改 //$符號的由來,jq往window對象裡面註冊的,$跟jquery對象用處一樣 //(function (Name) { // alert(Name + "你好啊"); //})("金三胖"); // (function () { alert("123"); })(); //一般是寫架構的時候用,防止使用者重寫 //就是將函數用括弧括起來 //可以用匿名函數 (function (window) { window.sayHello = function () { alert("haha"); } })(window); say </script></head><body></body></html>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery/jquery-1.9.1.js"></script> <script type="text/javascript"> //注意,jq裡面幾乎都是方法,不需要用等號賦值,調用jq方法,傳入實參,即可 //全域變數分割線---------------- var $liSelect = undefined; var $EditText = $("<input type=‘text‘ />"); //設定失去焦時間點事件 $EditText.blur(function () { if ($liSelect != undefined) { $liSelect.html($(this).val()); } }) //全域變數分割線---------------- //li標籤 高亮選中 //設定為全域的是 為了在新增的時候,能夠添加 function highSelect() { //將其他的li標籤顏色還原 $("li").css("color", "black"); //將自己的變色 $(this).css("color", "pink"); //將自己存到全域變數中 $liSelect = $(this); } //01.dom樹載入完畢 window.onload 頁面資源載入完畢 $(function () { //---為li標籤添加高亮選中的方法 $("li").click(highSelect); 1 //02.jq的id選取器--新增按鈕 $("#btnAdd").click(function () { //彈出輸入框 var userInput = window.prompt("請輸入焦點心名", "比如叉燒雞腿雙拼"); //判斷使用者輸入是否有效 if (userInput != null && userInput.trim() != "比如叉燒雞腿雙拼" && userInput.trim() != "") { //有效就建立li標籤,--使用jq的建立dom元素方法,返回的是 jq對象 var $liCreate = $("<li>" + userInput + "</li>"); //將建立好的li標籤追加到ol裡面去 $liCreate.appendTo("#olList"); //簡單寫法 // $("<li>" + userInput + "</li>").appendTo("#olList"); //為新增的li標籤設定點擊事件 $liCreate.click(highSelect); } }) //03.為插入按鈕,增加點擊事件 $("#btnInsert").click(function () { if ($liSelect != undefined) { //彈出輸入框 var userInput = window.prompt("請輸入焦點心名", "比如叉燒雞腿雙拼"); //判斷使用者輸入是否有效 if (userInput != null && userInput.trim() != "比如叉燒雞腿雙拼" && userInput.trim() != "") { //有效就建立li標籤,--使用jq的建立dom元素方法,返回的是 jq對象 var $liCreate = $("<li>" + userInput + "</li>"); //將建立好的li標籤插入到指定位置 //insertBefore可以傳,jq對象,選取器,dom對象,不可為空 $liCreate.insertBefore($liSelect); //$liCreate.insertBefore(); //為建立好的li標籤設定點擊事件 $liCreate.click(highSelect); } } else { alert("哥們,先選中"); } }); //04.為刪除按鈕,增加點擊事件 $("#btnRemove").click(function () { //判斷 是否選中了li標籤 if ($liSelect != undefined) { //jq裡面可以自刪 $liSelect.remove(); //將刪除的元素置空 $liSelect = undefined; } }) //05.為編輯按鈕,增加點擊事件 //.val()可以設定,或者擷取單標籤的value字<a href="jquery/">jquery/</a> $("#btnEdit").click(function () { ////建立文字框 //var $textCreate = $("<input type=‘text‘ value=‘" + $liSelect.html() + "‘ /> "); ////設定文字框的value 為li標籤的innerHTML ////html()這個方法有點特殊,穿實參,就是設定,不傳,就是擷取innerHTML $EditText.val($liSelect.html());//設定value值 //清空li標籤的innerHTML $liSelect.html(""); //將全域的文字框追加進去 $EditText.appendTo($liSelect); //讓文字框獲得焦點//focus()如果傳入函數,就是設定獲得焦時間點事件,如果不傳,就是讓元素獲得焦點 $EditText.focus(); //為文字框添加失去焦時間點事件 //$textCreate.blur(function () { // //將自己的value值,設定給選中的li標籤即可 // $liSelect.html($(this).val()); //}) }) }) </script></head><body> <input type="button" value="追加li標籤" id="btnAdd" /> <input type="button" value="在指定位置插入li標籤" id="btnInsert" /> <input type="button" value="刪除選中按鈕" id="btnRemove" /> <input type="button" value="修改選中li標籤" id="btnEdit" /> <ol id="olList"> <li>茶葉蛋</li> <li>切糕</li> <li>芭比香包</li> <li>吮指原味雞</li> <li id="Pao">啤酒</li> </ol></body></html>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery/jquery-1.9.1.js"></script> <script type="text/javascript"> //自執行函數,作用不讓外界訪問, //dom樹產生完畢 $(function () { //$("#id")//id選取器 //$(".class")//class選取器 //$("li")//標籤選取器 //返回給我們的是一個jq對象 //jq對象的組成部分 //1.dom數組 2.jq方法 //jq對象只能使用jq方法(.html().val().click()) 不要$("li").innerHTML //----jqdom互轉 // jq對象[索引] 轉換成dom元素 jq對象.get(索引) //$(dom對象) dom轉jq對象 好處,使用jq方法 //--------jq事件 $("li").click(function () { })//為元素設定事件..注意 不要用等號賦值 $("li").click()//如果不傳實參,就是調用 點擊事件 //jq常見屬性 $("input").val("下午天氣不錯");//注意不要用等號賦值,給實參,是賦值 //不給實參.是取值 $("li").html()//給實參,賦值, 不給實參,是取值 會解析標籤 $("li").text();//給實參,賦值, 不給實參,是取值 不會解析標籤 //--樣式設定 $("li").css("color", "red");//用索引值對的方式設定 $("li").css("color");//只傳key 是取值 $("li").css({ "color": "pink", "backgroundColor": "red" })//對象的字面量標記法 //建立dom元素 $("<input value=" + 123 + "/>");//直接寫html標籤 $("<li>小蘋果<li>");//雙標籤,後面半個標籤如果不寫/就會產生2個 //將dom元素追加到dom樹裡面去 //$("<input value=" + 123 + "/>").appendTo("選取器","dom對象","jq對象") //將dom元素從dom樹中移除 $("#btn").remove();//直接調用remove方法即可,能夠自刪 }) </script></head><body></body></html>
鏈式編程
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () { //鏈式編程 //原理是,方法返回了相同的jq對象 //不返回jq對象的方法 //.get() //dom對象 //.html().val().text()不傳實參 字串 //.css("color") .css 方法 只傳樣式名,返回的是字串 $("#btnTest").click(function () { //瀏覽器在調用的時候 dom.onclick()/this是dom對象 $(this).val("雪人兄弟"); })//單擊事件 .dblclick(function () { $(this).css("fontSize", "80px"); })//雙擊事件 .mouseenter(function () { $(this).css("color", "yellow"); }) .mouseleave(function () { $(this).css("color", "black"); }); }) //---自己寫鏈式編程--------------------- //鏈式編程的本質就是返回對象 var fox = new Object(); fox.run = function () { alert("抓小動物"); return this; } fox.eat = function () { alert("吃西瓜"); return this; } fox.play = function () { alert("跟小動物玩耍"); return this; } fox.wash = function () { alert("洗澡澡"); return this; } fox.sleep = function () { alert("zzzzZZZZ"); return this; } fox.name = "小狐狸號號"; fox.run().eat().play().wash().sleep().name; </script></head><body> <input type="button" id="btnTest" value="海爾兄弟" /></body></html>
層次選取器
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () { //後代選取器, 使用空格分隔,後一個選取器,的篩選範圍是前面的選取器找到元素的後代節點 //$("#olSongs .bangzi").css("color", "pink"); ////子代選取器 用>分隔選取器 $("#olSongs>li").css("border", "2px solid #0094ff"); ////next選取器 //$(".bangzi+li").css("backgroundColor", "#0094ff"); //同輩元素 //$("#snow~li").css("fontSize", "40px"); //}) </script></head><body> <ol id="olSongs"> <li>月亮之上</li> <li class="bangzi">江南style</li> <li>小蘋果</li> <li> <ol id="olFoods"> <li>哈根達斯</li> <li id="snow">和路雪</li> <li class="bangzi">五仁月餅</li> <li>泡菜</li> </ol> </li> </ol> <ol id="olPeople"> <li>韓庚</li> <li class="bangzi">蔡妍</li> <li>西蘭花</li> </ol></body></html>
過濾器
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ol { list-style: none; } </style> <script src="jquery/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () { alert("稍等一會"); //過濾器 :first擷取第一個 //$("li:first").css("backgroundColor", "red"); ////:last擷取最後一個 //// $("li:last").css("backgroundColor", "blue"); ////:eq(索引) 根據索引來擷取元素 //$("li:eq(1)").css("backgroundColor", "pink"); ////:not(選取器) 不滿足括弧內的元素 //$("li:not(.noEnd)").css("fontFamily", "楷體"); ////----------分割線 ////:even過濾器 過濾的是索引 //$("#olCartoonPeople li:even").css("backgroundColor", "green"); //$("#olCartoonPeople li:odd").css("backgroundColor", "orange"); //--範圍過濾器 //:gt(索引) 大於 // $("#peopleName li:gt(1)").css("fontSize", "40px"); //:lt(索引) 小於 // $("#peopleName li:lt(2)").css("color", "orange"); //過濾器是以前面過濾出來的元素再次過濾 //如果過濾器複合著寫, 後面的過濾器過濾的元素是前面過濾完之後的 // $("#peopleName li:gt(1):lt(1)").css("fontSize", "100px"); //擷取範圍元素 不推薦將過濾器複合著 //.slice(索引1) 可以取到最小值 ,取不到最大值 //.slice() 大於等於 ,小於 //推薦使用.slice來擷取範圍元素 $("#peopleName li").slice(1, 3).css("color", "pink"); }) </script></head><body> <ol id="peopleName"> <li>0湯姆克魯斯</li> <li>1碧咸</li> <li>2傑克瓊斯</li> <li>3李維斯</li> <li>4匡威</li> </ol> <ol> <li class="noEnd">海賊王</li> <li class="noEnd">妖精的尾巴</li> <li>進擊的巨人</li> <li class="noEnd">名偵探柯南</li> <li>奧特曼</li> <li>哈爾的移動城堡</li> </ol> <ol id="olCartoonPeople"> <li>0毛利小五郎</li> <li>1泰羅奧特曼</li> <li>2徐老師</li> <li>3懶羊羊</li> <li>4聖鬥士星矢</li> <li>5龍貓</li> </ol></body></html>
父子兄弟元素
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () { //.parent可以擷取父節點 //$("#famous").parent().css("border", "10px solid #0094ff"); ////擷取子節點 //$("#famous").children("input").css("backgroundColor", "red"); ////無差別擷取後代元素 .find(選取器) 擷取後代元素 ////select標籤 裡面的option標籤如果沒有value屬性 ////那麼select.value() 擷取到的 是選中的option標籤的innerHTML ////如果有value屬性.擷取到的 就是選中的option標籤的value //$("#famous").dblclick(function () {//通過點擊事件觸發 // alert($(this).find("select").val());//擷取後代中select標籤的value值 //}); alert("稍等一會"); //-----------分割線-----------兄弟元素擷取 //.next擷取緊挨著的 $("#fatFood").next().css("color", "pink"); //.nextAll.擷取之後的所有兄弟節點 $("#fatFood").nextAll().css("backgroundColor", "green"); //擷取前面的 //.prev()之前的緊挨著的 //.prevAll()之前所有的兄弟 $("#fatFood").prev().css("backgroundColor", "yellow"); //擷取除自己以外的所有兄弟 //.siblings()擷取所有兄弟節點(除自己意外) $("#fatFood").siblings().css("fontSize", "100px"); ///------------分割線--------下面是破壞性操作 //破壞性操作,就是改變jq方法的返回對象的操作 //一般是 擷取父子,兄弟元素的方法 $("#fatFood").click(function () { }).next() }) </script></head><body> <ol id="olFirst"> <li>雞腿飯</li> <li>叉燒飯</li> <li id="fatFood">豬腳飯</li> <li>肉卷飯 </li> <li>小炒牛肉</li> <li>水煮肉片</li> </ol> <ol> <li>iphone1</li> <li>iphone2</li> <li>iphone3gs</li> <li id="famous">iphone4s<input type="button" value="點擊購買翻新4s" /> <div style="border: 1px solid #0094ff"> <select> <option value="比較舊">9成新</option> <option value="特別舊">8成新</option> </select> </div> </li> <li>iphone5s</li> <li>iphone6</li> </ol></body></html>
jquery對象和dom對象
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery/jquery-1.9.1.js"></script> <script type="text/javascript"> //01dom對象.進行增刪查改使用的是 dom文法 比如innerHTML,value,onclick,appendChild // document.getElementById("olList").innerHTML //02.調用jq的方法時,他返回的是 jq對象,方法都是jq方法, //所以 千萬不要出現 $("li").innerHTML="123"; //如果我們使用的是 jq對象,那麼所有方法,都有自動提示,如果沒有肯定是你寫錯了 //jq對象有兩大組成部分 //第一大部分,就是dom數組--隱式迭代 //第二大部分,jq方法 //$(function () { // alert($("li").length); //}) //$("li").append //--------------------------------dom,jq對象互轉 $(function () { //通過索引來取--dom元素 $("li")[0].innerHTML = "麻辣燙"; //通過jq對象的get方法 $("li").get(1).innerHTML = "韭菜月餅"; //如何將dom對象轉成jq對象 //好處,更加簡潔 document.getElementById("TeaEgg").onclick = function () { $(this).css({ "color": "#0094ff", "backgroundColor": "yellow", "fontSize": "100px" }) } }); </script></head><body> <ol id="olList"> <li id="TeaEgg">茶葉蛋</li> <li>切糕</li> <li>芭比香包</li> <li>吮指原味雞</li> <li>啤酒</li> </ol></body></html>
Jquery初體驗一
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
