Variável Javascript usando jquery para encontrar variáveis ​​- javascript, jquery, html, css, variáveis

eu fiz um violino com botões. Agora, no javascript, estou tentando aprender jquery e, ao fazer isso, estou convertendo violinos antigos em jquery de javascript, mas sei como.

Meu problema é que na minha função chamada init, não consigo descobrir como converter a maneira javascript de obter um elemento html com um id armazenado em uma variável.

Código antigo em javascript:

var but = document.getElementById("but");

Novo código em jQuery:

var but = $("#but");

Acho que o problema é que começo com uma instrução javascript, mas uso o jQuery. Não sei o que fazer em termos de variáveis ​​no jQuery.

Respostas:

1 para resposta № 1

Você precisa adicionar [0] ao seu código jquery para obter o elemento de documento, mas isso é bastante inútil com o método jquery de adicionar ouvintes de evento. Eu sugeriria também $("#but").mouseout(etc) ou $("#but").on("mouseout", etc).

Eu atualizei seu jsfiddle para trabalhe como esperado, embora eu tente dar uma breve resposta aqui:

Existem dois métodos de adição de ouvintes de evento com os quais você deve se familiarizar de acordo com a documentação do jquery; a .on() método e .(event)() método. Este último você pode adicionar ao jquery ojects em vez de object.(eventName)() como exemplo, adicionando o manipulador de clique a um objeto: object.click(function() { console.log("executed"); });

Este método, entretanto, não é "ativo", ele não se atualizará se os elementos forem adicionados dinamicamente, e os eventos só serão anexados quando o documento estiver pronto ($(document).ready(function() { do stuff });) Para anexar eventos a elementos adicionados dinamicamente, precisamos do .on() método.

Tome por exemplo o seguinte html:

<div class="wrapper">
<span class="dynamically_added">stuff</span>
</div>

Para anexar um ouvinte de evento ao intervalo adicionado dinamicamente, em seu jquery, adicione o seguinte:

$(".wrapper").on("click", ".dynamically_added", function() {
console.log("executed");
});

O primeiro parâmetro de .on() é (são) o (s) evento (s). Você pode anexar vários eventos, delimitando-os com espaços: .on("click hover"). O segundo parâmetro é a função paraexecute ou o elemento de destino. No caso do exemplo acima, é o intervalo. O último parâmetro é, obviamente, a função a ser executada. Pelo que eu sei, você precisa ter uma função anônima para se referir à função a ser executada, em vez de simplesmente escrevê-la lá.

Espero que isso tenha ajudado.

---

1 para resposta № 2

$("#but") retorna um objeto jQuery, não um objeto DOM.Você pode chamar métodos jQuery nele ou pode obter o objeto DOM dele, mas não pode usar métodos DOM diretamente nele. Se quiser o objeto DOM dele, você pode obtê-lo com:

$("#but")[0]

E, seu método seria este:

function init() {
var but = $("#but")[0];
but.addEventListener("mouseover", butResult, false);
but.addEventListener("mouseout", reverse, false);
var button = $("#button")[0];
button.addEventListener("mouseover", buttonResult, false);
button.addEventListener("mouseout", reverse, false);
}

Ou, em vez de usar métodos DOM nativos, você pode usar métodos jQuery no objeto jQuery.

function init() {
$("#but").on("mouseover", butResult).on("mouseout", reverse);
$("#button").on("mouseover", buttonResult).on("mouseout", reverse);
}

---

0 para resposta № 3

Não tem certeza se entendi você? completamente, mas é isso que você está procurando:

var b1 = document.getElementById("button");
var b2 = $(b1);
b2.click( function(){
alert("hi");
})

---