Prop vs attr in Javascript
Questo blog indicherà le differenze tra i metodi prop () e attr () in javascript.
Differenze fondamentali tra prop () e attr () in JavaScript
Di seguito sono riportate le differenze tra i metodi prop () e attr () in JavaScript:
| puntello() | attr () |
|---|---|
| Il metodo prop () può modificare il valore dell'elemento. | Il metodo ATRT (), d'altra parte, non influisce sul valore dell'elemento. |
| Mostra il valore corrente del codice HTML. | Mostra il valore impostato predefinito. |
| Questo metodo viene utilizzato come sintassi delle proprietà per modificare il valore. | Questo metodo viene utilizzato per l'attributo. |
Dai un'occhiata all'esempio dato per ottenere praticamente conoscere le differenze di prop () e attr ().
Esempio: prop () e attr () sul campo di testo di input
In questo esempio, applicheremo il "attr ()" E "puntello()"Metodi sui campi di testo di input separatamente.
Vediamo come funzionano entrambi i metodi:
Il metodo attr () non cambierà il valore del campo di testo
Il metodo prop () cambierà il valore del campo di testo
Nelle righe di codice HTML sopra:
- Includere l'elemento "" ed eseguire lo stile dichiarato.
- Inoltre, includi una voce.
- Il "" aggiunto è un elemento HTML che prende un valore dall'utente e "tipo" corrisponde all'attributo che si riferisce ai dati di input dovrebbe essere testo.
- IL "id"L'attributo è specificato per accedere al campo di testo. Inoltre, impostare il valore predefinito indicato con "valore"Attributo.
- Inoltre, includi il pulsante per attivare le funzionalità.
- Dopodiché, includi il ""Tag per accumulare il risultato corrispondente al"attr ()" metodo.
- Allo stesso modo, replicare le funzionalità incluse per visualizzare il risultato del "puntello()Metodo "tramite il"testo di input" campo.
Ora, passiamo al codice JavaScript:
>
$ ('##btnone').Click (function ()
$ ("#attr").testo ($ ('#inputText').attr ('valore') + " - valore predefinito");
);
);
$ (documento).ready (function ()
$ ('##btntwo').Click (function ()
$ ("#prop").Testo ($ ('#textInput').prop ('value') + " - valore corrente");
);
);
Nel blocco di codice sopra, applicare i seguenti passaggi:
- Includere la libreria jQuery all'interno del ""Tag per applicare i suoi metodi tramite"src"Attributo.
- Dopodiché, applica il "pronto()"Metodo, che eseguirà la funzione dichiarata non appena è stato caricato il modello di oggetto document (DOM).
- Ora, accedi al pulsante creato in modo tale che la funzione dichiarata esegua il pulsante Fare clic tramite "clic()" metodo.
- Nella definizione della funzione, accedi al campo di testo di input per il suo "id"E restituisci il suo contenuto di testo tramite"testo()" metodo.
- Inoltre, applica il "attr ()Metodo "per accedere al"valore"Attributo del campo di testo di input recuperato.
- In questo caso, il valore rimarrà lo stesso indipendentemente dal testo definito dall'utente.
- Allo stesso modo, ripeti la procedura discussa per "puntello()Metodo ", come applicato al"attr ()" metodo.
- In questo caso, il testo definito dall'utente nel campo di testo verrà aggiornato con il valore impostato e aggiunto al recupero ""Elemento dal suo ID.
Produzione
L'output mostra che il "attr ()"Il metodo non cambia lo stato originale, mentre il"puntello()"Il metodo visualizza il valore aggiornato.
Conclusione
IL "attr ()"Il metodo non modifica l'attributo del valore dell'elemento. D'altra parte, il "puntello()"Il metodo lo aggiorna. Entrambi i metodi hanno i loro pro e contro in base ai requisiti dell'utente. Questo blog ha dichiarato le differenze tra i metodi ATR () e Prop () con l'aiuto di un esempio.