Websites – Manipulation – JQuery – Linux

Publicado: 5 de novembro de 2014 em JavaScript, JQuery
0

O JQuery possui métodos para que você possa manipular elementos e seus atributos de varias maneiras diferentes, permitindo que você adicione, copie ou remova atributos dos elementos.

  • addClass() – Adiciona classes especificadas nos elementos designados.
  • removeClass() – Remove classes especificadas nos elementos designados.

Você pode saber mais sobre outros métodos de manipulação de atributos no seguinte link:

Manipulation: http://api.jquery.com/category/manipulation/

JQuery - Manipulação

JQuery – Manipulação

Exemplo:

Neste exemplo utilizamos o recurso de manipulação para inserir e remover uma classe CSS nos atributos da imagem.

JQuery

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="utf-8" />
        <title>Desenvolvimento Aberto</title>
        <style type="text/css">
         .imagem {
                border-style: dashed;
                border-width: 10px;
            }
        </style>

        <!-- Está é uma instalação do JQuery, você apenas precisa apontar
             para o respectivo script da versão que você deseja utilizar -->

       <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

       <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
            Todo o script roda no evento equivalent ao OnLoad da pagina html-->    

       <script>

       // Declara eventos de clique
       $( document ).ready(function() {

           // Manipulação de atributos

           $( "#bnt01" ).click(function() {
               $("img").addClass("imagem");
               });

           $( "#bnt02" ).click(function() {
               $("img").removeClass("imagem");
               });           

        });       

       </script>
    </head>

    <body>

    <h1>Desenvolvimento Aberto - Manipulação de Atributos</h1>

    <img src="Imagem/tecnologia.jpg" alt="tecnologia">
    <p>
        Escolha uma opção:
        </p>
    <button id="bnt01">Adicionar Classe CSS</button>
    <button id="bnt02">Remover Classe CSS</button>

    </body>
    </html>

Deixe um comentário