javaScript 筆記(5) --- jQuery（上）

時間  2019-11-25
標籤 javascript 筆記 jquery 欄目 JavaScript 简体版
原文   原文鏈接

這節整理整理 iquery.js 相關的內容...php

目錄css

   --- jQuery 語法html

   --- 文檔就緒事件jquery

   --- jQuery 選擇器ide

   --- jQuery 事件函數

   --- jQuery 效果動畫

jQuery 語法：jQuery 語法是經過選取（查詢，query） HTML 元素，並對它們執行"操做"（actions）。this

  • jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。
  • 基礎語法：$(selector).action()
    • 美圓符號定義 jQuery
    • 選擇符（selector）"查詢"和"查找" HTML 元素
    • jQuery 的 action() 執行對元素的操做

實例：spa

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

文檔就緒事件：指針

您也許已經注意到在咱們的實例中的全部 jQuery 函數位於一個 document ready 函數中：

$(document).ready(function(){
   // 開始寫 jQuery 代碼...
});
// 這是爲了防止文檔在徹底加載（就緒）以前運行 jQuery 代碼。

    若是在文檔沒有徹底加載以前就運行函數，操做可能失敗。下面是兩個具體的例子：

  • 試圖隱藏一個不存在的元素
  • 得到未徹底加載的圖像的大小

提示：簡潔寫法（與以上寫法效果相同）:

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

     以上兩種方式你能夠選擇你喜歡的方式實現文檔就緒後執行 jQuery 方法。

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

  • jQuery 選擇器基於元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。 它基於已經存在的CSS 選擇器，除此以外，它還有一些自定義的選擇器。
  • jQuery 中全部選擇器都以美圓符號開頭：$()。 
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>這是一個標題</h2>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
<button>點我</button>
</body>
</html>
    實例1： 點擊按鈕隱藏全部 p 元素 
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<script src="http://cdn.static.runoob.com/libs/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>
    實例2： 按鈕隱藏所選#id & .class
    $("*") 選取全部元素  
    $(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> 元素

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

  • 事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。
  • 在事件中常用術語"觸發"（或"激發"）例如： "當您按下按鍵時觸發 keypress 事件"。常見 DOM 事件：
    鼠標事件 鍵盤事件 表單事件 文檔/窗口事件
    click keypress submit load
    dblclick keydown change resize
    mouseenter keyup focus scroll
    mouseleave blur unload
  • 在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法。實踐方法語法： 
    $("p").click(function(){
    // 動做觸發後執行的代碼!! eg：$(this).hide();
});

  • 經常使用的 jQuery 事件方法

    • $(document).ready() 方法容許咱們在文檔徹底加載完後執行函數。
    • click() 方法：是當按鈕點擊事件被觸發時會調用一個函數，該函數在用戶點擊 HTML 元素時執行:
    • dblclick() 方法: 雙擊元素時，觸發 dblclick 事件，或規定當發生 dblclick 事件時運行的函數: 
      $("p").dbclick(function(){
  $(this).hide();
});
    • mouseenter() 方法：當鼠標指針穿過元素時，觸發 mouseenter 事件，或規定當發生 mouseenter 事件時運行的函數： 
      $("#p1").mouseenter(function(){
    alert('您的鼠標移到了 id="p1" 的元素上!');
});
    • mouseleave() 方法: 當鼠標指針離開元素時，觸發 mouseleave 事件，或規定當發生 mouseleave 事件時運行的函數；
    • mousedown() 方法： 當鼠標指針移動到元素上方，並按下鼠標鍵是，觸發 mousedown 事件，或規定當發生 mousedown 事件時運行的函數；
    • mouseup() 方法：當在元素上鬆開鼠標按鈕時，觸發 mouseup 事件，或規定當發生 mouseup 事件時運行的函數；
    • hover()方法用於模擬光標懸停事件。當鼠標移動到元素上時，會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時，會觸發指定的第二個函數(mouseleave)。 
      $("#p1").hover(
    function(){
        alert("你進入了 p1!");
    },
    function(){
        alert("拜拜! 如今你離開了 p1!");
    }
);
    • focus() 方法：當元素得到焦點時，觸發 focus 事件，或規定當發生 focus 事件時運行的函數。當經過鼠標點擊選中元素或經過 tab 鍵定位到元素時，該元素就會得到焦點。 
      $("input").focus(function(){
  $(this).css("background-color","#cccccc");
});
      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>
</html>
      實例所有代碼
    • blur() 方法：當元素失去焦點時，觸發 blur 事件，或規定當發生 blur 事件時運行的函數： 
      $("input").blur(function(){
  $(this).css("background-color","#ffffff");
});  // 通常與 focus() 方法匹配使用

       

jQuery 效果：隱藏、顯示、切換，滑動，淡入淡出，以及動畫，...

  •  jQuery: hide() 和 show() 方法來隱藏和顯示 HTML 元素，語法： 
    $(selector).hide(speed,callback);
$(selector).show(speed,callback);
/*可選的 speed 參數規定隱藏/顯示的速度，能夠取如下值："slow"、"fast" 或毫秒。
  可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。  */
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
});
</script>
</head>
<body>
<button>隱藏</button>
<p>這是個段落，內容比較少。</p>
<p>這是另一個小段落</p>
</body>
</html>
    隱藏實例：自定義隱藏時間

jQuery：toggle()方法來切換 hide() 和 show() 方法，語法：

$(selector).toggle(speed,callback);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button>隱藏/顯示</button>
<p>這是一個文本段落。</p>
<p>這是另一個文本段落。</p>
</body>
</html>
toggle 實例所有代碼
  • jQuery Fading 方法：實現元素的淡入淡出效果。
    • fadeIn()： 用於淡入已隱藏的元素:
    • fadeOut()：用於淡出可見元素；
    • fadeToggle()：能夠在 fadeIn() 與 fadeOut() 方法之間進行切換； 
      前三者語法相同，類以下 fadeIn：$(selector).fadeIn(speed,callback);
/*可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。.
   可選的 callback 參數是 fading 完成後所執行的函數名稱。  */
      用法也相同，以下使用 fadeToggle 進行示例：
      $("button").click(function(){ 
      　　$("#div1").fadeToggle(); 
      　　$("#div2").fadeToggle("slow"); 
      　　$("#div3").fadeToggle(3000); 
      });
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeToggle();
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle(3000);
    });
});
</script>
</head>
<body>

<p>實例演示了 fadeToggle() 使用了不一樣的 speed(速度) 參數。</p>
<button>點擊淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>
示例 所有代碼
    • fadeTo()：容許漸變爲給定的不透明度（值介於 0 與 1 之間），語法： 
      $(selector).fadeTo(speed,opacity,callback);
/*必需的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。
   fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置爲給定的不透明度（值介於0 與 1之間）
   可選的 callback 參數是該函數完成後所執行的函數名稱。
*/

      實例：

      $("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});
      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});
</script>
</head>

<body>
<p>演示 fadeTo() 使用不一樣參數</p>
<button>點我讓顏色變淡</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>
      fadeTo 實例代碼 全
  • jQuery 滑動：您能夠在元素上建立滑動效果
  • $(selector).slideToggle(speed,callback);
    • slideDown()：用於向下滑動元素
    • slideUp()：用於向上滑動元素
    • slideToggle()：能夠在 slideDown() 與 slideUp() 方法之間進行切換： 
      $("#flip").click(function(){
  $("#panel").slideToggle();
});
      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>
 
<div id="flip">點我，顯示或隱藏面板。</div>
<div id="panel">Hello world!</div>

</body>
</html>
      實例代碼 所有
  • jQuery 動畫：animate() 方法容許您建立自定義的動畫，語法： 
    $(selector).animate({params},speed,callback);
/* 必需的 params 參數定義造成動畫的 CSS 屬性。
   可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast"、"normal" 或毫秒。
   可選的 callback 參數是動畫完成後所執行的函數名稱。  */
    默認狀況下，全部 HTML 元素都有一個靜態位置，且沒法移動。
如需對位置進行操做，要記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute！

    強調：（1）生成動畫的過程當中可同時使用多個屬性，以下：

    $("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});
</script> 
</head>
 
<body>
<button>開始動畫</button>
<p>默認狀況下，全部的 HTML 元素有一個靜態的位置，且是不可移動的。 
若是須要改變爲，咱們須要將元素的 position 屬性設置爲 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>
    實例代碼 全

    （2）animate()也能夠定義相對值（該值相對於元素的當前值）。須要在值的前面加上 += 或 -=：

    $("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script> 
</head>
 
<body>
<button>開始動畫</button>
<p>默認狀況下，全部的 HTML 元素有一個靜態的位置，且是不可移動的。 
若是須要改變爲，咱們須要將元素的 position 屬性設置爲 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>
    實例代碼 全

    （3）能夠把屬性的動畫值設置爲 "show"、"hide" 或 "toggle"，實例：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});
</script> 
</head>
 
<body>
<button>開始動畫</button>
<p>默認狀況下，全部的 HTML 元素有一個靜態的位置，且是不可移動的。 
若是須要改變爲，咱們須要將元素的 position 屬性設置爲 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>
    實例代碼 全

    （4）animate() 隊列功能：這意味着若是您在彼此以後編寫多個 animate() 調用，jQuery 會建立包含這些方法調用的"內部"隊列。而後逐一運行這些 animate 調用。

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });
});
</script> 
</head>
 
<body>
<button>開始動畫</button>
<p>默認狀況下，全部的 HTML 元素有一個靜態的位置，且是不可移動的。 
若是須要改變爲，咱們須要將元素的 position 屬性設置爲 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>
</html>
    實例代碼 全

    （5）可以使用 animate() 來操做全部 CSS 屬性，但 須要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 標記法書寫全部的屬性名，好比，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

  • jQuery 中止動畫：stop() 方法，用於在動畫或效果完成前對它們進行中止，它適用於全部 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。語法： 
    $(selector).stop(stopAll,goToEnd);
/*可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅中止活動的動畫，容許任何排入隊列的動畫向後執行。
  可選的 goToEnd 參數規定是否當即完成當前動畫。默認是 false。
  所以，默認地，stop() 會清除在被選元素上指定的當前動畫   */

    實例：

    $("#stop").click(function(){
  $("#panel").stop();
});
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>
 
<button id="stop">中止滑動</button>
<div id="flip">點我向下滑動面板</div>
<div id="panel">Hello world!</div>

</body>
</html>
    實例代碼 全

     

  • jQuery Callback：Callback 函數在當前動畫 100% 完成以後執行。許多 jQuery 函數涉及動畫，這些函數也許會將 speed 或 duration 做爲可選參數，speed 或 duration 參數能夠設置許多不一樣的值，好比 "slow", "fast", "normal" 或毫秒。 
    //如下實例在隱藏效果徹底實現後回調函數
$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落如今被隱藏了");
  });
});

// 如下實例沒有回調函數，警告框會在隱藏效果完成前彈出
$("button").click(function(){
  $("p").hide(1000);
  alert("段落如今被隱藏了");
});
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
    alert("如今段落被隱藏了");
  });
});
</script>
</head>
<body>
<button>隱藏</button>
<p>這是一個段落，內容不多</p>
</body>
</html>
    實例代碼 全

     

  • jQuery 鏈：Chaining 容許咱們在一條語句中運行多個 jQuery 方法（在相同的元素上），能夠把動做/方法連接在一塊兒。實例：下面的例子把 css()、slideUp() 和 slideDown() 連接在一塊兒。"p1" 元素首先會變爲紅色，而後向上滑動，再而後向下滑動： 
    $("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</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>
    實例代碼 全
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程