jQuery入門筆記

時間 2019-11-18

標籤 jquery 入門筆記欄目 JQuery 简体版

原文原文鏈接

一.jQuery下載安裝javascript

1.從 jquery.com 下載 jQuery 庫（學習推薦用這種方法，能夠在沒有網絡時使用）css

2.從 CDN 中載入 jQuery, 如從 Google 中加載 jQuery（這種方法須要網絡環境），能夠經過 CDN（內容分發網絡）引用它。Staticfile CDN、百度、又拍雲、新浪、谷歌和微軟的服務器都存有 jQuery 。若是你的站點用戶是國內的，建議使用百度、又拍雲、新浪等國內CDN地址。html

二.jQuery 語法java

經過 jQuery，您能夠選取（查詢，query） HTML 元素，並對它們執行"操做"（actions）jquery

jQuery 語法是經過選取 HTML 元素，並對選取的元素執行某些操做。服務器

基礎語法： $(selector).action()網絡

美圓符號定義 jQuery
選擇符（selector）"查詢"和"查找" HTML 元素
jQuery 的 action() 執行對元素的操做

實例:app

$(this).hide() - 隱藏當前元素ide
$("p").hide() - 隱藏全部 <p> 元素函數
$("p.test").hide() - 隱藏全部 class="test" 的 <p> 元素
$("#test").hide() - 隱藏全部 id="test" 的元素

例如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="js/jquery.js" type="text/javascript" charset="UTF-8">
  </script>
</head>
<body>
  <script type="text/javascript">
   $(document).ready(function(){
    $("button").click(function(){
     $("p").hide();    //隱藏p元素
    });
   });
  </script>
  <h2>這是一個標題</h2>
  <p>這是一個段落</p>
  <p>這是另外一個段落</p>
  <button>點我</button>
</body>
</html>

實例中的全部 jQuery 函數位於一個 document ready 函數中的緣由：

這是爲了防止文檔在徹底加載（就緒）以前運行 jQuery 代碼，即在 DOM 加載完成後才能夠對 DOM 進行操做。若是在文檔沒有徹底加載以前就運行函數，操做可能失敗。

在實際的操做中，這兩種方式的效果是相同的。

1.$(document).ready(function(){

// 開始寫 jQuery 代碼...

});

2.$(function(){

// 開始寫 jQuery 代碼...

});

三.介紹一下jQuery的 選擇器

jQuery 選擇器容許您對 HTML 元素組或單個元素進行操做。

jQuery 選擇器基於元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。它基於已經存在的 CSS 選擇器，除此以外，它還有一些自定義的選擇器。

jQuery 中全部選擇器都以美圓符號開頭：$()。

1.標籤選擇器（元素選擇器）注：jQuery 元素選擇器基於元素名選取元素

$(document).ready(function(){
    $("button").click(function(){
     $("p").hide(); //選中全部的p元素進行隱藏
    });
   });

2.ID選擇器

jQuery #id 選擇器經過 HTML 元素的 id 屬性選取指定的元素。

頁面中元素的 id 應該是惟一的，因此您要在頁面中選取惟一的元素須要經過 #id 選擇器。

經過 id 選取元素語法：$("#test")

實例：

3.類選擇器（.class選擇器）

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

語法：$(".test")

實例：

四，jQuery的事件

1.鼠標事件

click:鼠標點擊事件

$("p").click(function(){
alert("段落被點擊了。");
});

dblclick：鼠標雙擊事件

$("p").dblclick(function(){
alert("這個段落被雙擊。");
});

mouseenter：鼠標進入事件

$("p").mouseenter(function(){
$("p").css("background-color","yellow");
}); //當鼠標指針進入 <p> 元素時，設置背景色爲黃色

mouseover 事件在鼠標移動到選取的元素及其子元素上時觸發。

mouseenter 事件只在鼠標移動到選取的元素上時觸發。

實例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="UTF-8">

  </script>
<script>
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
    $(".over span").text(x+=1);
});
$("div.enter").mouseenter(function(){
    $(".enter span").text(y+=1);
});
});
</script>
</head>
<body>

<p>mouseover 事件在鼠標移動到選取的元素及其子元素上時觸發。</p>
<p>mouseenter 事件只在鼠標移動到選取的元素上時觸發。 </p>

<div class="over" style="padding:20px;width:250px;float:left">
<h3 style="">Mouseover 事件觸發: <span></span></h3>
</div>

<div class="enter" style="padding:20px;width:250px;float:right">
<h3 style="">Mouseenter 事件觸發: <span></span></h3>
</div>

</body>
</html>

mouseleave：鼠標離開事件

當鼠標指針離開 <p> 元素時，設置背景色爲灰色

$("p").mouseleave(function(){
$("p").css("background-color","gray");
});

2.鍵盤事件

keypress，keydown，keyup，hover 能夠參考菜鳥教程

3.表單事件

submit，change，focus，blur 能夠參考菜鳥教程

4.文檔/窗口事件

load，resize，scroll，unload 能夠參考菜鳥教程

五.jQuery - 獲取內容和屬性

三個簡單實用的用於 DOM 操做的 jQuery 方法：

text() - 設置或返回所選元素的文本內容

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="js/jquery.js" type="text/javascript" charset="UTF-8">

  </script>
  <script>
   $(document).ready(function() {
    $("#btn1").click(function() {
     alert("Text: " + $("#test").text());
    });
    $("#btn2").click(function() {
     alert("HTML: " + $("#test").html());
    });
   });
  </script>
</head>
<body>

  <p id="test">這是段落中的 <b>粗體</b> 文本。</p>
  <button id="btn1">顯示文本</button>
  <button id="btn2">顯示 HTML</button>

</body>
</html>

運行結果：

html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的值
獲取屬性 - attr()

六.jQuery 效果

jquery隱藏的方法：hide();
jquery顯示的方法：show();
jquery中切換隱藏與顯示的方法：toggle();
jquery向下滑的方法：slideDown();
jquery向上滑的方法：slideUp();
jquery中自主建立動畫的方法：animate();
jquery中切換向上或向下滑的方法：slidetoggle();
jquery中中止動畫的方法：stop();

jQuery 方法連接

注：當進行連接時，代碼行會變得很長。不過，jQuery 語法不是很嚴格；您能夠按照但願的格式來寫，包含換行和縮進。

實例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="js/jquery.js" type="text/javascript" charset="UTF-8">

  </script>
  <script>
   $(document).ready(function() {
    $("button").click(function() {
     $("#p1").css("color", "red").slideUp(2000).slideDown(2000);
    });
   });
  </script>
</head>
<body>
  <p id="p1">人之初</p>
  <button>點我</button>
</body>
</html>

隱藏和顯示

1.經過 jQuery，您可使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素

實例：$("#hide").click(function(){
$("p").hide();
});

$("#show").click(function(){
$("p").show();
});