Создание набора функций в JQuery

Question

Итак, я пытаюсь лучше понять JQuery и его использование для веб-контента и веб-приложений, поэтому просто выслушайте меня здесь. Цель этой тестовой страницы - использовать кнопки для изменения, создания и удаления контента. Другая цель - проверить функциональность использования клавиши «Ввод», чтобы щелкнуть одну из кнопок из текстового поля (имитируя пользователя клавишей ввода, чтобы нажать кнопку отправки). Это код, который я разработал, и я немного смущен тем, как исправить ошибку «destroyContent» не определен. Очевидно, что мой синтаксис выключен, но я не уверен, как его исправить. Может ли кто-нибудь помочь и, возможно, указать мне на какой-то полезный справочный материал?

JQuery:

$(document).ready(function() { 
    $('#Scan').keypress(keyHandler); 
}); 
$.keyHandler = function (e) { 
    if (e.which == 13) { 
     $(this).blur(); 
     $('#destroy').focus().click() 
    } 
} 
$.changeHeading1 = function() { 
    x = document.getElementById("Heading1") 
    x.innerHTML = "It has changed"; 
} 
$.createContent = function() { 
    var para = document.createElement("p"); 
    var node = document.createTextNode("This is new"); 
    para.appendChild(node); 

    var element = document.getElementById("div1"); 
    element.appendChild(para); 
} 
$.destroyContent = function() { 
    var child = document.getElementById("p1"); 
    child.parentNode.removeChild(child); 
} 

(Я обещаю, что это выглядит намного лучше, на мой фактический код, я просто иметь трудное время форматирования здесь)

Для HTML:

<h1 id="Heading1" /> 
<p id="p1" /> 
<button type="text" id="Scan" /> 
<button type="button" onclick="changeHeading1()" /> 
<button type="button" onclick="createContent()" /> 
<button type="button" id="destroy" onclick="destroyContent()" /> 

Answer 1

Первое, что может помочь в $ это просто переменная в глобальном пространстве имен - который в данном случае является window. Если вы перейдете на консоль хром, вы увидите это, набрав window.$. В этом нет ничего особенного. Существует также window.jQuery, что совпадает с window.$.

Поэтому, когда вы обращаетесь к функции, она попытается получить переменную в текущей области. Так что, когда вы делаете:

<button type="button" id="destroy" onclick="destroyContent()" /> 

Это так же, как делает window.destroyContent(). Если вы хотите получить доступ к своей версии, которая является свойством переменной $. Таким образом, вы можете изменить его либо из них:

onclick="$.destroyContent()" 
onclick="window.$.destroyContent()" 

Но так как вы хотите, чтобы лучше понять JQuery Я хотел бы избежать добавления обработчиков (как большинство людей предположит) к разметке. Вместо того, чтобы создать обработчик с помощью JQuery, например:

$('#destroy').click(function() { 
    var child = document.getElementById("p1"); 
    child.parentNode.removeChild(child); 
}); 

Читая о событиях API JQuery поможет лучше понять, как это сделать. У них отличные примеры :)

Answer 2

Вы создаете destroyContent в качестве члена $, но не называете его таким образом:

$.destroyContent = function() { против onclick="destroyContent()"

Вы должны либо определить destroyContent за пределами $ или вызвать его с $. Один из них:

function destroyContent() { 
    var child = document.getElementById("p1"); 
    child.parentNode.removeChild(child); 
} 

или

<button type="button" id="destroy" onclick="$.destroyContent()">