碼上快樂

相關內容    簡體    繁體

jQuery基礎知識總結

本文轉載自   查看原文   2015-11-12 11:17   3590    JavaScript
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> 元素。

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

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

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

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

$("[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" 或毫秒。

可選的 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，您可以在元素上創建滑動效果。

jQuery 擁有以下滑動方法：

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

jQuery 動畫 - animate() 方法

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

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

可選的 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() 相反。
 
 
 
 
 
 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 jQuery基礎知識總結 Java基礎知識總結(一) JavaWeb基礎知識總結 Java基礎知識總結 Python基礎知識總結 索引基礎知識總結 MYSQL基礎知識總結 HTML基礎知識總結 linux基礎知識總結 python基礎知識總結
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM