jquery1

時間 2019-11-13

原文原文鏈接

文檔就緒事件css

$(document).ready(function(){
 
   // 開始寫 jQuery 代碼...
 
});

元素選擇器html

$("p")jquery

用戶點擊按鈕後，全部 <p> 元素都隱藏：瀏覽器

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2>this is a title</h2>
<p>this is a prams</p>
<p>this is a prams</p>
<button>click me</button>
<script src="../jquery-3.31.js"></script>
<script>
$(document).ready(function(){
    $('button').click(function(){
        $("p").hide();
    });
    $('button').dblclick(function(){
        $("p").show()
    });
})
</script>
</body>
</html>

View Code

#id 選擇器

$("#test")緩存

實例框架

當用戶點擊按鈕後，有 id="test" 屬性的元素將被隱藏：ide

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>這是一個標題</h2>
<p>這是一個段落</p>
<p id="test">這是另一個段落</p>
<button>點我</button>
</body>

</html>

View Code

.class 選擇器

jQuery 類選擇器能夠經過指定的 class 查找元素。函數

語法以下：this

$(".test")spa

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

$("*") 選取全部元素

$(this) 選取當前HTML 元素

$(document).ready(function(){
    $("button").click(function(){
        $(this).hide();   //button隱藏
    });
});

$("p.intro") 選取 class 爲 intro 的 <p> 元素

$("p:first") 選取第一個 <p> 元素

$("ul li:first") 選取第一個 <ul> 元素的第一個 <li> 元素

$("ul:first") 選取第一個 <ul> 元素

$(":button") 選取全部 type="button" 的 <input> 元素和 <button> 元素

jQuery 事件

什麼是事件？

頁面對不一樣訪問者的響應叫作事件。

事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。

　　在元素上移動鼠標

　　選取單選按鈕

　　點擊元素

在事件中常用術語"觸發"（或"激發"）例如： "當按下按鍵時觸發 keypress 事件"。

鼠標事件

當單擊元素時，發生 click 事件。

click() 方法觸發 click 事件，或規定當發生 click 事件時運行的函數。

$(document).ready(function(){
    $("p").click(function(){
        alert("parms was click")
    })
})

dblclick 當雙擊元素時，觸發 dblclick 事件。

dblclick() 方法觸發 dblclick 事件，或規定當發生 dblclick 事件時運行的函數。

提示：dblclick 事件也會產生 click 事件。若是這兩個事件都被應用於同一個元素，則會產生問題。

$(document).ready(function(){
    $("p").dblclick(function(){
        alert("parms was click")
    })
})

$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).fadeOut();
    });
});

mouseenter()

當鼠標指針穿過（進入）被選元素時，會發生 mouseenter 事件。

當鼠標指針進入 <p> 元素時，設置背景色爲黃色：

該事件一般與 mouseleave事件一塊兒使用。

$(document).ready(function(){
    $("#p2").mouseenter(function(){
        $("#p2").css("background-color","yellow");
    });
       $("#p2").mouseleave(function(){
        $("p").css("background-color","white");
    });
});

鍵盤事件

keypress()

i=0
$(document).ready(function(){
    $("input").keypress(function(){
        $("span").text(i+=1);
    });
});

與 keypress 事件相關的事件順序：

keydown - 鍵按下的過程
keypress - 鍵被按下
keyup - 鍵被鬆開

keypress() 方法觸發 keypress 事件，或規定當發生 keypress 事件時運行的函數。

keypress 事件與 keydown 事件相似。當按鈕被按下時發生該事件。

然而，keypress 事件不會觸發全部的鍵（好比 ALT、CTRL、SHIFT、ESC）。請使用 keydown() 方法來檢查這些鍵。

keydown 當鍵盤鍵被按下時發生 keydown 事件。

   $("input").keydown(function(){
        $("input").css("background","yellow");
    });
    $("input").keyup(function(){
        $("input").css("background","pink");
    });

hover

hover() 方法規定當鼠標指針懸停在被選元素上時要運行的兩個函數。

方法觸發 mouseenter和 mouseleave 事件。

    $("p").hover(function(){
        $("p").css("background","green");
    },function(){
        $("p").css("background","yellow");
    });

表單事件

當提交表單時，會發生 submit 事件。

該事件只適用於 <form> 元素。

submit() 方法觸發 submit 事件，或規定當發生 submit 事件時運行的函數。

<form action="">
    First name:
    <input type="text" name="firstname" value="jack"/><br>
    Last name:
    <input type="text" name="lastname" value="boob"/><br>
    <input type="submit" value="提交"/>
</form>

<script>
$(document).ready(function(){
    $("form").submit(function(){
        alert("提交");
    });
});
</script>

change

當元素的值改變時發生 change 事件（僅適用於表單字段）。

change() 方法觸發 change 事件，或規定當發生 change 事件時運行的函數。

注意：當用於 select 元素時，change 事件會在選擇某個選項時發生。當用於 text field 或 text area 時，change 事件會在元素失去焦點時發生。

<input type="text" class="field"/>
<p>
    汽車匹配：
    <select name="cars" id="cars" class="field">
        <option value="volvo">volvo</option>
        <option value="byd">byd</option>
        <option value="w">w</option>
    </select>
</p>、

$(document).ready(function(){
    $(".field").change(function(){
        $(this).css("background","#D6D6FF");
    });
});

文檔窗口事件

load

該事件適用於任何帶有 URL 的元素（好比圖像、腳本、框架、內聯框架）以及 window 對象。

根據不一樣的瀏覽器（Firefox 和 IE），若是圖像已被緩存，則也許不會觸發 load 事件。

$(document).ready(function(){
  $("img").load(function(){
    alert("圖片已載入");
  });
});

scroll() 方法

當用戶滾動指定的元素時，會發生 scroll 事件。

scroll 事件適用於全部可滾動的元素和 window 對象（瀏覽器窗口）。

scroll() 方法觸發 scroll 事件，或規定當發生 scroll 事件時運行的函數。

<p>嘗試滾動 div 中的滾動條</p>
<div class="school"style="border:1px solid black;width:200px;height:100px;overflow:scroll;">
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
<p>滾動了 <span class="span1">0</span>次 </p>

x=0;
$(document).ready(function(){
    $(".school").scroll(function(){
        $(".span1").text(x+=1);
    });
});

jquery 效果

顯示和隱藏

<p>點我隱藏1</p>
<p>點我隱藏2</p>
<p>點我隱藏3</p>
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});

jQuery toggle()

經過 jQuery，您能夠使用 toggle() 方法來切換 hide() 和 show() 方法。

顯示被隱藏的元素，並隱藏已顯示的元素：

<button>顯示/隱藏</button>
<p class="p3">sdf1</p>
<p class="p3">sdf2</p>
<p class="p3">sdf3</p>

$(document).ready(function(){
    $("button").click(function(){
        $(".p3").toggle(1000);
    });
});

相關標籤/搜索

jquery1

JQuery

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。