因目前開發,經常用到jquery的內容,感覺這方面的知識確實欠缺,開發效率欠高,所以決定系統的學習下jquery,而w3cschool是個好的學習的教程,下面所有內容題材幾乎都取自w3cschool,此為自己的學習文章,非教學文章,后面每天會更新內容,直到學完整個jqury. 如需查看題材來源:http://www.w3cschool.cn/jquery/
一 jQuery 教程(1) jQuery 選擇器語法 描述 $("*") 選取所有元素 $(this) 選取當前 HTML 元素 $("p.intro") 選取 class 為 intro 的 <p> 元素 $("p:first") 選取第一個 <p> 元素 $("ul li:first") 選取第一個 <ul> 元素的第一個 <li> 元素 $("ul li:first-child") 選取每個 <ul> 元素的第一個 <li> 元素 $("[href]") 選取帶有 href 屬性的元素 $("a[target='_blank']") 選取所有 target 屬性值等于 "_blank" 的 <a> 元素 $("a[target!='_blank']") 選取所有 target 屬性值不等于 "_blank" 的 <a> 元素 $(":button") 選取所有 type="button" 的 <input> 元素 和 <button> 元素 $("tr:even") 選取偶數位置的 <tr> 元素 $("tr:odd") 選取奇數位置的 <tr> 元素(2) jQuery 事件<body> <h2>這是一個標題</h2> <p>這是一個段落。</p> <p>這是另一個段落。</p> <button>點我</button></body>$("p").click(function(){ //點擊事件 $(this).hide();});$("p").dblclick(function(){ //雙擊事件 $(this).hide();});$(document).ready(function(){$("button").mouseenter(function(){ //當鼠標指針穿過元素時,會發生 mouseenter 事件 $("p").hide();}); $("button").mouseleave(function(){ //當鼠標指針離開元素時,會發生 mouseleave 事件。 $("p").show();});$("button").mousedown(function(){ //當鼠標指針移動到元素上方,并按下鼠標按鍵時,會發生 mousedown 事件。 $("p").hide();});$("button").mouseup(function(){ //當在元素上松開鼠標按鈕時,會發生 mouseup 事件。 $("p").show();});$("button").hover(function(){ //用于模擬光標懸停事件。 當鼠標移動到元素上時,會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時,會觸發指定的第二個函數(mouseleave)。 alert('aa'); }, function(){ alert('bb');});<body> Name: <input type="text" name="fullname"></body>$("input").focus(function(){ //當元素獲得焦點時,發生 focus 事件 當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時,該元素就會獲得焦點。 $(this).CSS("background-color","#cccccc");});$("input").blur(function(){ //當元素失去焦點時,發生 blur 事件。blur() 方法觸發 blur 事件,或規定當發生 blur 事件時運行的函數 $(this).css("background-color","#ffffff");});新聞熱點
疑難解答