JavaScript使用$表示法和關鍵字「this」的用法

我正在處理別人的javascript代碼，並且運行了一些我以前沒見過的東西。如果有人能爲我提供一些啓示，我會非常感激。我已經在過去使用JavaScript，但我不是專家。

1）一些控件可以使用美元符號（$）符號從JavaScript內部訪問，就像JQuery一樣。我有些困惑，因爲腳本語言明確指定爲javascript，而不是JQuery，並且項目中沒有JQuery庫。我不知道這是否是一種常見做法？

<script type="text/javascript"> 
function select1_onchange() 
{ 
    $('Button1').style.display = (this.value == "No" ? 'block' : 'none'); 
    $('OptionsBox').style.display = (this.value == "Yes" ? 'block' : 'none'); 
} 
</script>

2）第2的事情是，在上面的代碼中，關鍵字this似乎是指調用腳本對象，同時在當前上下文中的JavaScript解釋this和window對象。這使這個代碼無效。我應該替換this.value與$('Button1').value或document.getElementById('Button1')（或document.getElementsByName（'Button1'）[0]在這種特殊情況下，因爲開發人員使用name屬性而不是id）？哪一個會更有效率？或者另一種選擇 - 我應該將關鍵字this傳遞給函數，然後用輸入變量替換this？

<script type="text/javascript"> 
function select1_onchange(mySelect) 
{ 
    $('Button1').style.display = (mySelect.value == "No" ? 'block' : 'none'); 
    $('OptionsBox').style.display = (mySelect.value == "Yes" ? 'block' : 'none'); 
} 
</script>

，並稱呼其爲：

<select name="select1" onchange="select1_onchange(this)"> 
<option selected value="">Select</option> 
<option value="Yes">Yes</option> 
<option value="No">No</option> 
</select>

什麼會選擇這兩種方法的優點和缺點？

來源

2016-03-02 ElenaDBA

你必須找出'$'是什麼。 jQuery是JavaScript，'type =「text/javascript」'是不需要的。 – elclanrs

jQuery **是** Javascript。每當你看到jQuery，那就是Javascript代碼。他們只是使用jQuery庫。這就像說「那裏有燻肉，所以它不能成爲漢堡。」它仍然是一個漢堡，你只是增加了培根。 –

從它的外觀他定義$作爲getElementById的快捷方式，是'Button1'和'OptionsBox' ID？ –

有人可能創建自己的小功能，像

var $ = function(id) { 
    return document.getElementById(id); 
} 

$('Button1').style.display = 'none';

jQuery的寫入有些同樣的方式，在普通的JavaScript，因爲它只是一個方便的「輔助功能」庫。
要檢查是否jQuery的存在，一個可以做typeof jQuery，應返回"function"

當您安裝內嵌事件處理程序，你可以傳遞參數

<select name="select1" onchange="select1_onchange('hello kitty')"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
</select> 
 

 
<script> 
 
    function select1_onchange(something) { 
 
     alert(something); // "hello kitty" 
 
    } 
 
</script>

傳遞this代替一個字符串，給出了一個元素的引用，在大多數情況下，它將是window，所以它通常不是真正的東西

<select name="select1" onchange="select1_onchange(this)"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
</select> 
 

 
<script> 
 
    function select1_onchange(something) { 
 
     alert(this); // [object Window] 
 
    } 
 
</script>

這些天，addEventListener應該使用，其自動設置回調綁定元素內的this值。

<select name="select1" id="select1"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
</select> 
 

 
<script> 
 
    
 
    document.getElementById('select1').addEventListener('change', function() { 
 
    alert(this.id); // "select1" 
 
    }, false); 
 
</script>

來源

2016-03-02 18:15:48 adeneo

同意。在JavaScript中'$'是一個有效的變量名稱。 jQuery庫使用名爲'$'的變量作爲jQuery對象的別名，但是存在名爲'$'的變量並不意味着存在jQuery庫。您通常可以通過查找名爲'jQuery'的變量來檢查jQuery庫的存在。 –

這不是一個完全的答案，因爲$不是他們寫的函數。它絕對是瀏覽器devtools現在正在做的事情，作爲document.querySelector的別名。 http://thewebivore.com/exactly-wth-is-up-with-in-devtools/ 此外，「this」是指調用該函數的元素，因爲它是內聯處理程序 – NodeNodeNode

@NodeNodeNode - 如果已運行控制檯，這是真的，大多數瀏覽器都有自己的''''功能。但是，這是用腳本標記寫在.html文件中的代碼，而開發工具中的'$'在該範圍內不可用。至於'this'是指什麼，附有一個片段，你可以自由嘗試。 – adeneo

1）jQuery是隻是一個JavaScript庫：它仍然是JavaScript的。jQuery的API通過具有「$」變量作爲別名的「jQuery」對象公開。

2）javascript中的關鍵字「this」指的是父範圍，所以在上面提供的示例的情況下函數的範圍。

來源

2016-03-02 18:15:59 glcheetham

JavaScript使用$表示法和關鍵字「this」的用法

回答

相關問題