標籤：lex 切換 兩種 eval 高效 常用 ast 設計 foo
一、 jQuery 介紹jQuery是一個快速、簡潔的JavaScript架構，是繼Prototype之後又一個優秀的JavaScript程式碼程式庫（或JavaScript架構）。jQuery設計的宗旨是“write Less，Do More”，
即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，最佳化HTML文檔操作、事件處理、動畫設計和Ajax互動。
jQuery的核心特性可以總結為：具有獨特的鏈式文法和短小清晰的多功能介面；具有高效靈活的css選取器，並且可對CSS選取器進行擴充；擁有便捷的外掛程式擴充機制和豐富的外掛程式。
jQuery相容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
二、jQuery 對象
Query 對象就是通過jQuery封裝DOM對象後產生的對象。jQuery 對象是 jQuery 專屬的. 如果一個對象是 jQuery 對象, 那麼它就可以使用 jQuery 裡的方法: $(“#test”).html();
$("#test").html() 意思是指：擷取ID為test的元素內的html代碼。其中html()是jQuery裡的方法 這段代碼等同於用DOM實現代碼： document.getElementById(" test ").innerHTML; 雖然jQuery對象是封裝DOM對象後產生的，但是jQuery無法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery裡的方法.亂使用會報錯 約定：如果擷取的是 jQuery 對象, 那麼要在變數前面加上$. var $variable = jQuery 對象var variable = DOM 對象$variable[0]：jquery對象轉為dom對象 $("#msg").html(); $("#msg")[0].innerHTML
三、尋找元素 3.1 基本選取器
$("*") 所有的 $("#id") 想對應ID $(".class") 對應的集合 $("element") 對應的元素 $(".class,p,div") 對應集合下面的
$(".outer div") 子選取器 $(".outer>div") 下選取器 $(".outer+div") $(".outer~div")
$("li:first") 第一個 $("li:eq(2)") eq後面想選擇幾個寫幾 $("li:even") 等級 $("li:gt(1)")
$(‘[id="div1"]‘) $(‘["alex="sb"][id]‘)
$("[type=‘text‘]")----->$(":text") 注意只適用於input標籤 : $("input:checked")
例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.1.1.js"></script></head><body><div egon="dog" alex="dog2">egon</div><div egon="dog">egon</div><div class="outer"> <div class="c2"> <div class="c3" id="d3">DIV</div> </div> <p id="d2" class="c3">PPPPPPP</p></div><input type="text"><div> <p class="c1">p1</p> <p class="c1" id="d1">p2</p> <p class="c1">p3</p> <p class="c1">p4</p> <p class="c1">p5</p> <p class="c1" id="p6">p6</p></div><div> <p>12321</p></div><p class="c1"> p7</p><script> // 基本選取器 $("#d1").css("color",‘red‘) //$(".c1").css("color",‘red‘) //$("p").css("color",‘green‘) // $("#d1,div").css("color",‘green‘) // 組合選取器 // $(".outer .c3").css("color",‘red‘) // 篩選器 // $(".c1:first").css("color",‘red‘) // $(".c1:last").css("color",‘red‘) // $(".c1:eq(i)").css("color",‘red‘); // $(".c1:gt(1)").css("color",‘red‘) // 屬性選取器 // $("[egon=‘dog‘][alex]").css("color",‘red‘) // 表單選取器 :只適用於表單標籤 // $("[type=‘text‘]").val("hello") // $(":text").val("hello") // 篩選器 // var i=3; // $(".c1").eq(i).css("color",‘red‘) // console.log($("#d1").hasClass("c1")) // true // 尋找篩選器 // 向下尋找 //$("#d1").nextAll().css("color",‘red‘) //$("#d1").next().css("color",‘red‘) //$("#d1").nextUntil("#p6").css("color",‘red‘) // 向上尋找 // $("#p5").prev(); // $("div").prevAll(); // $("div").prevUntil() // 尋找所有的兄弟標籤 // $("#d1").siblings().css("color",‘red‘) // find ：找後代 children:找兒子 // console.log($(".outer").children().length) ;// 2 // $(".outer").children(".c3").css("color","red") // console.log($(".outer").find()); // // $(".outer").find(".c3").css("color","red") // 找父標籤// $("#d3").parent().parent();// $("#d3").parents();// $("#d3").parentsUntil(".outer")</script></body></html>3.6 表單屬性選取器
:enabled :disabled :checked :selected3.7 篩選器
過濾器 $("li").eq(2) $("li").first() $("ul li").hasclass("test")
尋找篩選器
尋找子標籤： $("div").children(".test") $("div").find(".test") 向下尋找兄弟標籤： $(".test").next() $(".test").nextAll()
$(".test").nextUntil() 向上尋找兄弟標籤： $("div").prev() $("div").prevAll()
$("div").prevUntil() 尋找所有兄弟標籤： $("div").siblings()
尋找父標籤： $(".test").parent() $(".test").parents()
$(".test").parentUntil()
中的代碼有執行個體。四、操作元素（熟悉，css，文檔處理） 4.1 事件
頁面載入
ready(fn) // 當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。
$(document).ready(
function
(){}) -----------> $(
function
(){}) 事件綁定
//文法: 標籤對象.事件(函數) eg: $("p").click(function(){})
事件委派
$("").on(eve,[selector],[data],fn) // 在選擇元素上綁定一個或多個事件的事件處理函數。
<script> window.onload=function () { var ele=document.getElementsByClassName("c1")[0]; alert(ele) } ; </script></head><body><div class="c1">DIV</div></body>
事件切換
hover事件：
一個模仿懸停事件（滑鼠移動到一個對象上面及移出這個對象）的方法。這是一個自訂的方法，它為頻繁使用的任務提供了一種“保持在其中”的狀態。
over:滑鼠移到元素上要觸發的函數
out:滑鼠移出元素要觸發的函數
4.2 屬性操作
--------------------------CSS類$("").addClass(class|fn)$("").removeClass([class|fn])--------------------------屬性$("").attr();$("").removeAttr();$("").prop();$("").removeProp();--------------------------HTML代碼/文本/值$("").html([val|fn])$("").text([val|fn])$("").val([val|fn|arr])---------------------------$("#c1").css({"color":"red","fontSize":"35px"})
attr方法使用。
<input id="chk1" type="checkbox" />是否可見<input id="chk2" type="checkbox" checked="checked" />是否可見<script>//對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。//對於HTML元素我們自己自訂的DOM屬性，在處理時，使用attr方法。//像checkbox，radio和select這樣的元素，選中屬性對應“checked”和“selected”，這些也屬於固有屬性，因此//需要使用prop方法去操作才能獲得正確的結果。// $("#chk1").attr("checked")// undefined// $("#chk1").prop("checked")// false// ---------手動選中的時候attr()獲得到沒有意義的undefined-----------// $("#chk1").attr("checked")// undefined// $("#chk1").prop("checked")// true console.log($("#chk1").prop("checked"));//false console.log($("#chk2").prop("checked"));//true console.log($("#chk1").attr("checked"));//undefined console.log($("#chk2").attr("checked"));//checked</script>
4.3 each 迴圈
jquery支援兩種迴圈方式：
方式一。
格式：$.each(obj,fn)li=[10,20,30,40];dic={name:"yuan",sex:"male"};$.each(li,function(i,x){ console.log(i,x)});
方式二。
格式：$("").each(fn)$("tr").each(function(){ console.log($(this).html())})
其中,$(this)代指當前迴圈標籤
4.4 文檔節點處理
//建立一個標籤對象 $("<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) ----->$("p").replaceWith("<b>Paragraph. </b>");//刪除 $("").empty() $("").remove([expr])//複製 $("").clone([Even[,deepEven]])
python--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
