021年05月23日15:00寫

console中的$符號是有作用的，這篇，我們就來學習一下。

第一個：>第一個：$0<

在Chrome的Elements面板中。

>$0代表當前我們<>選中的html節點的引用。就是我們上一次選擇的節點的引用，按這個邏輯還有，，。

光這樣說，可能還有點不理解，下面我演示一下

我接著做了一個DOM的操作，觀察DOM結構的變化。如下圖

第二個：$_

它代表著上一次執行的結果。

比如，在控制臺輸入：

Math.random()

// 0.5

接著輸入：$_ + 1

// 1.5

第三個：$i

$i其實也算得上是一個好用的技能。 它的使用需要借助一個Chrome插件：Console Importer。可以快速在console中引入一些npm庫。

直接運行：$i('lodash')/ $i('moment')

等待幾秒之后，就可以獲取到lodash / momentjs

然后，在控制臺就可以使用其提供的所有方法。

Chrome調用工具還有好多有用的用法，往后再介紹，介紹那些真真能用得著的。

Query中this與$(this)的區別

$("#textbox").hover(
    function() {
        this.title="Test";
    },
    fucntion() {
        this.title="OK";
    }
);

這里的this其實是一個HTML元素(#textbox), 元素(#textbox)有title屬性, 所以這樣寫是完全沒有什么問題的。

但是如果將this換成$(this)就不是那回事了, Error--報了。this與$(this)的區別在此。

$("#textbox").hover(
    function() {
        $(this).title ＝ "Test";
    },
    function() {
        $(this).title="OK";
    }
);

這里的$(this)是一個jQuery對象, 而jQuery對象沒有title 屬性, 因此這樣寫是錯誤的。

JQuery擁有attr()方法可以get/set DOM對象的屬性，所以正確的寫法應該是這樣：

正確的代碼：

$("#textbox").hover(
    function() {
        $(this).attr('title', 'Test');
    },
    function() {
        $(this).attr('title', 'OK');
    }
);

使用jQuery的好處是它包裝了各種瀏覽器版本對DOM對象的操作，因此統一使用$(this)而不再用this應該是比較不錯的選擇。

.jQuery的三種$

1)$可以是$(expresion)，即css選擇器、Xpath或html元素，也就是通過上述表達式來匹配目標元素。

比如：$("a")構造的這個對象，是用CSS選擇器構建了一個jQuery對象--它選擇了所有的<a/>這個標簽。

eg:$("a").click(function{...}) :就是在點擊頁面上的任何一個鏈接時的觸發事件。

alert($("div>p").html):表示彈出div下的一級節點標簽為p的內容

$("<div><p>Hello</p></div>").appendTo("body")：表示$中的是一個字符串，用這樣一段字串構建了jQuery對象，然后向<body/>中添加這一字串。

2）$可以是$(element)，即一個特定的DOM元素。如常用的DOM對象有document、location、form等。

eg:$(document).find("div>p").html):表示$中的document是一個DOM元素，即在全文尋找帶<p>的<div>元素，并顯示<p>中的內容。

3）$可以是$(function)，即一個函數，它是$(document).ready的一個速記方式。

eg:

$(document).ready(function{

alert("Hello world!");

}) //意思是當文檔載入完畢就執行

可簡化為：

$(function{

alert("Hello world!");

});

2.對于選擇HTML文檔中的elements，jQuery有兩種方法：

1）如$("div>ul a")，它的意思是div標簽中的ul標簽中的a標簽

不過，$('div>ul')和$('div ul')是有區別的，

$('div>ul')是<div>的直接后代里找<ul>； 而$('div ul')是在<div>的所有后代里找<ul>。

2）用jQuery對象的幾個方法（如方法find()、each()等） $("#orderedlist).find("li") 就像 $("#orderedlist li"). each一樣迭代了所有的li，而表達式中的“#”表示HTML中的ID，如上例中的“#orderedlist”就表示“ID為orderedlist所在的標簽”。

3.標簽選擇器$('p')、類選擇器$('.myClass')、id選擇器$('#myId')

4.$('#sId li:not(.horizontal)')，就是指類名"sId"里面的所有li的子孫中沒有horizontal類的所有元素。

5.XPath選擇器

eg：選擇所有帶有title 屬性的鏈接，我們會這樣寫：$('a[@title]') ，下面是解析：

里帶@，說明里的是元素的屬性；是個屬性選擇器

里沒@，說明里的是元素的子孫

1）$('ul li')和$('ul[li]')雖然返回的都是一個jQuery數組，但兩者的含義正好相反。前者是要找<ul>下所有<li>子孫，而后者卻是在找所有子孫為<li>的<ul>數組。

2）在XPath中，要找一個“以...開頭”的屬性，用^=，如找一個name屬性是以mail開頭的input元素，就用 $('input[@name^="mail"]')

要找一個“以...結尾”的屬性，要用$=

要找一個“不頭不尾”的屬性，用*=

6.不屬于上述的CSS和XPath的選擇器，就是自定義的選擇器了，用“:”表示，這里要用的就是:first，:last，:parent ，:hidden，:visible，:odd，:even，:not('xxx')， ":eq(0)"（始于0)，:nth(n），:gt(0)，:lt(0)，:contains("xxx") 如：$('tr:not([th]):even')意為<tr>元素的子孫中不含<th>的所有子孫的偶數項

7.其他的如下：

$('th').parent—— th標簽的父節點

$('td:contains("Henry")').prev——內容包含有"Henry"的<td>的上一個節點

$('td:contains("Henry")').next——內容包含有"Henry"的<td>的下一個節點

$('td:contains("Henry")').siblings——內容包含有"Henry"的<td>的所有兄弟節點

還有一個，就是end，這個方法肯定是用在某個DOM節點執行了某一動作之后，還想在與其相關的節點上執行類似動作，這里就要用到end。用過end方法之后，所返回的是執行動作的那個節點的父節點上。舉個例子

$(...).parent.find(...).addClass.end 這里執行動作的節點是find(...)，是一個數組對象，它所做的動作是“addClass”，之后，用了個end，這時所返回的東東就是指向了parent所指向的節點，也就是執行“addClass”動作的那個數組對象的父節點。

8.要直接訪問DOM元素，可用get(0)的方法，如 $('#myelement').get(0)，也可縮寫成$('#myelement')[0]