jQuery基礎知識總結

時間  2019-11-09
標籤 jquery 基礎 知識 總結 欄目 JQuery 简体版
原文   原文鏈接
jQuery語法：
jQuery 語法是爲 HTML 元素的選取編制的，能夠對元素執行某些操做。此是重點，初學必定要知道你學的東西的用途是作什麼。
基礎語法是：$(selector).action()。 全部的jQuery就是圍繞這個進行的，選取頁面的元素再對元素進行某些操做。
示例
$(this).hide() - 隱藏當前元素
文檔就緒函數：
是爲了防止文檔在徹底加載（就緒）以前運行 jQuery 代碼。由jQuery的約定，全部的JavaScript代碼最好都放在這裏面。 
$(document).ready(function(){
 
});
jQuery 元素選擇器和屬性選擇器：它們容許您經過標籤名、屬性名或內容對 HTML 元素進行選擇。 對應$(selector).action()的前半部分。
jQuery 元素選擇器：
$("p") 選取 <p> 元素。

$("p.intro") 選取全部 class="intro" 的 <p> 元素。javascript

$("p#demo") 選取全部 id="demo" 的 <p> 元素。
 
jQuery 屬性選擇器：

$("[href]") 選取全部帶有 href 屬性的元素。css

$("[href='#']") 選取全部帶有 href 值等於 "#" 的元素。html

$("[href!='#']") 選取全部帶有 href 值不等於 "#" 的元素。java

$("[href$='.jpg']") 選取全部 href 值以 ".jpg" 結尾的元素。
 
jQuery CSS 選擇器：
$("p").css("background-color","red");
如需完整的jquery選擇器的參考手冊： http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

jQuery 事件函數：對應$(selector).action()的後半部分。

事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。 
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>
Event 函數 綁定函數至
$(document).ready(function) 將函數綁定到文檔的就緒事件（當文檔完成加載時）
$(selector).click(function) 觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function) 觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function) 觸發或將函數綁定到被選元素的得到焦點事件
$(selector).mouseover(function) 觸發或將函數綁定到被選元素的鼠標懸停事件
約定：
  • 把全部 jQuery 代碼置於事件處理函數中
  • 把全部事件處理函數置於文檔就緒事件處理器中
  • 把 jQuery 代碼置於單獨的 .js 文件中
  • 若是存在名稱衝突，則重命名 jQuery 庫
jQuery 效果： 對應$(selector).action()的後半部分。
隱藏、顯示、切換，滑動，淡入淡出，以及動畫
經過 jQuery，您可使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素
$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可選的 speed 參數規定隱藏/顯示的速度，能夠取如下值："slow"、"fast" 或毫秒。jquery

可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button#yincang").click(function(){
  $("p#id").hide(1000,function(){alert('bye')});
  });
});
$(document).ready(function(){
  $("button#xian").click(function(){
  $("p#id").show(function(){1000,alert('hello')});
  });
});
</script>
</head>
<body>
<button type="button" id='xian'>顯示</button>
<button type="button" id='yincang'>隱藏</button>
<p id="id">這是一個段落。</p>
<p>這是另外一個段落。</p>
</body>
</html>
可使用 toggle() 方法來切換 hide() 和 show() 方法。
$(selector).toggle(speed,callback);
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
</script>
</head>
<body>
<button type="button">切換</button>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
</body>
</html>
jQuery 淡入淡出方法
經過 jQuery，您能夠實現元素的淡入淡出效果。

jQuery 擁有下面四種 fade 方法：瀏覽器

  • fadeIn()
  • fadeOut()
  • fadeToggle()       jQuery fadeToggle() 方法能夠在 fadeIn() 與 fadeOut() 方法之間進行切換。
  • fadeTo()           fadeTo() 方法容許漸變的最終結果爲給定的不透明度（值介於 0 與 1 之間，0爲透明，1爲不透明）。

jQuery 滑動方法

經過 jQuery，您能夠在元素上建立滑動效果。app

jQuery 擁有如下滑動方法：dom

  • slideDown()
  • slideUp()
  • slideToggle()

jQuery 動畫 - animate() 方法

jQuery animate() 方法用於建立自定義動畫。 
$(selector).animate({params},speed,callback);

必需的 params 參數定義造成動畫的 CSS 屬性。ide

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。函數

可選的 callback 參數是動畫完成後所執行的函數名稱。
如需對位置進行操做，要記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute！
能夠用 animate() 方法來操做全部 CSS 屬性， 須要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 標記法書寫全部的屬性名，好比，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
它把 <div> 元素移動到左邊，直到 left 屬性等於 250 像素爲止：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script>
</head>

<body>
<button>開始動畫</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>
jQuery 提供針對動畫的隊列功能， 這意味着若是您在彼此以後編寫多個 animate() 調用，jQuery 會建立包含這些方法調用的「內部」隊列。而後逐一運行這些 animate 調用。
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});
能夠用下面這種格式代替
div.animate({height:'300px',opacity:'0.4'},"slow").animate({width:'300px',opacity:'0.8'},"slow");
jQuery stop() 方法用於在動畫或效果完成前對它們進行中止。
$(selector).stop(stopAll,goToEnd);

可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅中止活動的動畫，容許任何排入隊列的動畫向後執行。

可選的 goToEnd 參數規定是否當即完成當前動畫。默認是 false。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.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>
Callback 函數在當前動畫 100% 完成以後執行。
$(selector).hide(speed,callback)
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
jQuery 擁有可操做 HTML 元素和屬性的強大方法。
jQuery DOM 操做：
DOM = Document Object Model（文檔對象模型）， 「W3C 文檔對象模型獨立於平臺和語言的界面，容許程序和腳本動態訪問和更新文檔的內容、結構以及樣式。」
獲取dom中的值：
三個簡單實用的用於 DOM 操做的 jQuery 方法：
  • text() - 設置或返回所選元素的文本內容
  • html() - 設置或返回所選元素的內容（包括 HTML 標記）
  • val() - 設置或返回表單字段的值
    $("#btn1").click(function(){
      alert("Text: " + $("#test").text());
    });
    $("#btn2").click(function(){
      alert("HTML: " + $("#test").html());
    });
    $("#btn1").click(function(){
      alert("Value: " + $("#test").val());
    });
    $("button").click(function(){
      alert($("#w3s").attr("href"));
    });
 
設置DOM值：
$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});
text()、html() 以及 val() 的回調函數， 回調函數由兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。而後以函數return 的返回內容做爲使用的新值。
$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});
$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});
向DOM中添加新的值：
  • append() - 在被選元素的結尾插入內容
  • prepend() - 在被選元素的開頭插入內容
  • after() - 在被選元素以後插入內容
  • before() - 在被選元素以前插入內容
$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
$("img").after("Some text after");

$("img").before("Some text before");
刪除DOM中的元素：

如需刪除元素和內容，通常可以使用如下兩個 jQuery 方法：

  • remove() - 刪除被選元素（及其子元素）
  • empty() - 從被選元素中刪除子元素
$("#div1").remove();
$("#div1").empty();

jQuery remove() 方法也可接受一個參數，容許您對被刪元素進行過濾。

該參數能夠是任何 jQuery 選擇器的語法。
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").remove(".italic");
  });
});
</script>
</head>

<body>

<p>This is a paragraph in the div.</p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<button>刪除 class="italic" 的全部 p 元素</button>

</body>
</html>

jQuery 操做 CSS

jQuery 擁有若干進行 CSS 操做的方法。咱們將學習下面這些：

  • addClass() - 向被選元素添加一個或多個類
  • removeClass() - 從被選元素刪除一個或多個類
  • toggleClass() - 對被選元素進行添加/刪除類的切換操做
  • css() - 設置或返回樣式屬性
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1>標題 1</h1>
<h2>標題 2</h2>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
<div>這是很是重要的文本！</div>
<br>
<button>向元素添加類</button>

</body>
</html>
您也能夠在 addClass() 方法中規定多個類：
$("button").click(function(){
  $("#div1").addClass("important blue");
});

jQuery css() 方法

css() 方法設置或返回被選元素的一個或多個樣式屬性。
如需返回指定的 CSS 屬性的值，請使用以下語法
$("p").css("background-color");
如需設置指定的 CSS 屬性，請使用以下語法：
$("p").css("background-color","yellow");
如需設置多個 CSS 屬性，請使用以下語法：
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery處理元素尺寸：
經過 jQuery，很容易處理元素和瀏覽器窗口的尺寸。
  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。

height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。
$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});

innerWidth() 方法返回元素的寬度（包括內邊距）。

innerHeight() 方法返回元素的高度（包括內邊距）。

outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。

outerHeight() 方法返回元素的高度（包括內邊距和邊框）。

outerWidth(true) 方法返回元素的寬度（包括內邊距、邊框和外邊距）。

outerHeight(true) 方法返回元素的高度（包括內邊距、邊框和外邊距）。
下面的例子設置指定的 <div> 元素的寬度和高度：
$("button").click(function(){ $("#div1").width(500).height(500); });
 
jQuery的移動：
jQuery 遍歷，意爲「移動」，用於根據其相對於其餘元素的關係來「查找」（或選取）HTML 元素。以某項選擇開始，並沿着這個選擇移動，直到抵達您指望的元素爲止。
在一個家族樹中經過 jQuery 遍歷，您可以從被選（當前的）元素開始，輕鬆地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動被稱爲對 DOM 進行遍歷。
jQuery 提供了多種遍歷 DOM 的方法。遍歷方法中最大的種類是樹遍歷（tree-traversal）。

向上遍歷 DOM 樹

這些 jQuery 方法頗有用，它們用於向上遍歷 DOM 樹：

  • parent()
  • parents()
  • parentsUntil()
parent() 方法返回被選元素的直接父元素。該方法只會向上一級對 DOM 樹進行遍歷。
$(document).ready(function(){
  $("span").parent();
});
parents() 方法返回被選元素的全部祖先元素，它一路向上直到文檔的根元素 (<html>)。

您也可使用可選參數來過濾對祖先元素的搜索。

下面的例子返回全部 <span> 元素的全部祖先，而且它是 <ul> 元素：
$(document).ready(function(){
  $("span").parents("ul");
});

parentsUntil() 方法返回介於兩個給定元素之間的全部祖先元素，不包括開始也不包括結尾。

下面的例子返回介於 <span> 與 <div> 元素之間的全部祖先元素：
$(document).ready(function(){
  $("span").parentsUntil("div");
});

向下遍歷 DOM 樹

下面是兩個用於向下遍歷 DOM 樹的 jQuery 方法：

  • children()
  • find()

jQuery children() 方法

children() 方法返回被選元素的全部直接子元素。該方法只會向下一級對 DOM 樹進行遍歷。
您也可使用可選參數來過濾對子元素的搜索。
$(document).ready(function(){
  $("div").children("p.1");     //class爲1的p元素
});
find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。
下面的例子返回屬於 <div> 後代的全部 <span> 元素：
$(document).ready(function(){
  $("div").find("span");
});
下面的例子返回 <div> 的全部後代：
$(document).ready(function(){
  $("div").find("*");
});

有許多有用的方法讓咱們在 DOM 樹進行水平遍歷：

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()
siblings() 方法返回被選元素的全部同胞元素。不包括自身。
您也可使用可選參數來過濾對同胞元素的搜索。
$(document).ready(function(){
  $("h2").siblings("p");
});
next() 方法返回被選元素的下一個同胞元素。該方法只返回一個元素。
$(document).ready(function(){
  $("h2").next();
});
nextAll() 方法返回被選元素的全部跟隨的同胞元素。返回後面的全部元素。
nextUntil() 方法返回介於兩個給定參數之間的全部跟隨的同胞元素。不包括兩端的元素。
prev(), prevAll() 以及 prevUntil() 方法的工做方式與上面的方法相似，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿着同胞元素向後遍歷，而不是向前）。
三個最基本的過濾方法是：first(), last() 和 eq()，它們容許您基於其在一組元素中的位置來選擇一個特定的元素。其餘過濾方法，好比 filter() 和 not() 容許您選取匹配或不匹配某項指定標準的元素。
first() 方法返回被選元素的首個元素。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("div p").first().css("background-color","yellow");
});
</script>
</head>
<body>

<h1>歡迎來到個人主頁</h1>
<div>
<p>這是 div 中的一個段落。</p>               <!--只有這個被選取-->
</div>

<div>
<p>這是 div 中的另外一個段落。</p>
</div>

<p>這也是段落。</p>

</body>
</html>
eq() 方法返回被選元素中帶有指定索引號的元素。索引號從 0 開始，所以首個元素的索引號是 0 而不是 1。下面的例子選取第二個 <p> 元素（索引號 1）：
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").eq(1).css("background-color","yellow");
});
</script>
</head>
<body>

<h1>歡迎來到個人主頁</h1>
<p>我是唐老鴨 (index 0)。</p>
<p>唐老鴨 (index 1)。</p>                       <!--這個被選中-->       
<p>我住在 Duckburg (index 2)。</p>
<p>我最好的朋友是米老鼠 (index 3)。</p>

</body>
</html>
filter() 方法容許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").filter(".intro").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>歡迎來到個人主頁</h1>
<p>我是唐老鴨。</p>
<p class="intro">我住在 Duckburg。</p>
<p class="intro">我愛 Duckburg。</p>
<p>我最好的朋友是 Mickey。</p>

</body>
</html>
not() 方法返回不匹配標準的全部元素。提示：not() 方法與 filter() 相反。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程