1. 程式人生 > >jquery-核心

jquery-核心

dom節點 tab clas 節點 break long false dom doc

一:jQuery 核心函數

  jQuery([selector,[context]])

  概述

  這個函數接收一個包含 CSS 選擇器的字符串,然後用這個字符串去匹配一組元素。

  jQuery 的核心功能都是通過這個函數實現的。

   jQuery中的一切都基於這個函數,或者說都是在以某種方式使用這個函數。  

  這個函數最基本的用法就是向它傳遞一個表達式(通常由 CSS 選擇器組成),

  然後根據這個表達式來查找所有匹配的元素。

  默認情況下, 如果沒有指定context參數,$()將在當前的 HTML document中查找 DOM 元素;

  如果指定了 context 參數,如一個 DOM 元素集或 jQuery 對象,那就會在這個 context 中查找。

  在jQuery 1.3.2以後,其返回的元素順序等同於在context中出現的先後順序。

二:jQuery 對象訪問

使用 說明 例子
  • each(callback)

以每一個匹配的元素作為上下文來執行一個函數。

意味著,每次執行傳遞進來的函數時,

函數中的this關鍵字都指向一個不同的DOM元素(每次都是一個不同的匹配元素)。

而且,在每次執行函數時,都會給函數傳遞一個表示作為執行環境的元素在匹配的元素集合中所處位置的數字值作為參數(從零開始的整型)。

返回 ‘false‘ 將停止循環 (就像在普通的循環中使用 ‘break‘)。

返回 ‘true‘ 跳至下一個循環(就像在普通的循環中使用‘continue‘)。

$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });
  • length

jQuery 對象中元素的個數。

這個函數的返回值與 jQuery 對象的size()屬性一致

$("img").length;
  • selector
返回傳給jQuery()的原始選擇器
$("ul")
  .append("<li>" + $("ul").selector + "</li>")

  • context
返回傳給jQuery()的原始的DOM節點內容
  • get([index])
取得其中一個匹配的元素。 num表示取得第幾個匹配的元素
$("img").get(0);
  • index([selector|element])
搜索匹配的元素,並返回相應元素的索引值,從0開始計數
查找元素的索引值
HTML 代碼:
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
jQuery 代碼:
$(‘li‘).index(document.getElementById(‘bar‘)); //1,傳遞一個DOM對象,返回這個對象在原先集合中的索引位置
$(‘li‘).index($(‘#bar‘)); //1,傳遞一個jQuery對象
$(‘li‘).index($(‘li:gt(0)‘)); //1,傳遞一組jQuery對象,返回這個對象中第一個元素在原先集合中的索引位置
$(‘#bar‘).index(‘li‘); //1,傳遞一個選擇器,返回#bar在所有li中的索引位置
$(‘#bar‘).index(); //1,不傳遞參數,返回這個元素在同輩中的索引位置。 

jquery-核心