Arquivos de sites

jQuery – Selectors usando atributos

No capítulo anterior, nós vimos como podemos encontrar elementos em uma página a partir de suas classes e IDs. Essas duas propriedades estão relacionadas por que o fato de que você pode usar elas para estilizar os elementos com CSS, mas com jQuery, você pode na realidade encontrar elementos baseado em qualquer tipo de atributo. Ele vem com um monte de tipo de selector de atributo e neste artigo, nós veremos cara um deles.

Encontre elementos com um atributo específico

A tarefa mais básica quando selecionando elementos baseados em atributos é encontrar todos os elementos que tem um atributo específico. Esteja ciente que o próximo exemplo não necessita o atributo ter um valor específico, de fato, ele nem mesmo precisa ter um valor. A sintaxe para esse selector é um conjunto de colchetes com o nome do atributo desejado dentro dele, por exemplo [name] ou [href]. Aqui vai um exemplo:

<span title="Title 1">Test 1</span><br />
<span>Test 2</span><br />
<span title="Title 3">Test 3</span><br />

<script type="text/javascript">
$(function()
{
        $("[title]").css("text-decoration", "underline");
});
</script>

Nós usamos o selector de atributo para encontrar todos os elementos na página que tem um atributo title e depois um underline. Como mencionado, isso irá combinar elementos com um elemento title sem importar qual é o valor dele, mas as vezes você vai querer encontrar elementos com uma tributo específico com um valor específico.

Encontra elementos com um valor específico para um atributo específico

Aqui está um exemplo onde nós encontramos elementos com um valor específico

<a href="http://www.google.com" target="_blank">Link 1</a><br />
<a href="http://www.google.com" target="_self">Link 2</a><br />
<a href="http://www.google.com" target="_blank">Link 3</a><br />
<script type="text/javascript">
$(function()
{
        $("a[target='_blank']").append(" [new window]");
});
</script>

O selector simplesmente diz ao jQuery para encontrar links (os elemenetos <a>) que tem um atributo alvo que é igual o valor “_blank” e então acrescenta o texto “[new window]” a ele. Mas e se você está procurando por todos os elementos que não tem o valor? Inverter o selector é muito fácil:

$("a[target!='_blank']").append(" [same window]");

A diferença é o != em vez de =, um jeito comum de negativar um operador dentro de muitas linguagens de programação.

E aqui está ainda mais possibilidades:

Encontre elementos com um valor que começa com uma string específica usando o operador ^=:

$("input[name^='txt']").css("color", "blue");

Encontre elementos com um valor que termina com uma string específica usando o operador $=:

$("input[name$='letter']").css("color", "red");

Encontre elementos com um valor o qual contenha uma palavra específica:

$("input[name*='txt']").css("color", "blue");

Fonte: jquery-tutorial.net

jQuery – Introdução ao selectors (seletores) e Usando elementos, IDs e classes

Uma tarefa muito comum quando se está usando JavaScript, é ler e modificar o conteúdo da página. Para fazer isso, você precisa encontrar o(s) elemento(s) que você deseja modificar, e ai é onde o selector no jQuery ajudará você. Com o JavaScript normal, encontrar elementos pode ser extremamente pesado, ao menos que você precise encontrar um único elemento que tem um valor especificado no atributo ID. O jQuery pode ajudar você a encontrar elementos baseado em seus IDs, classes, tipos, atributos, valores de atributos e muito, muito mais. Ele é baseado no selectors do CSS e como você verá através desse tutorial, ele é extremamente poderoso. Quando usamos esse tipo de programa para fazer mudanças em seu site, é importante que você tenha autenticação de dois fatores (two factor authentication (em Inglês)) de modo que o seu site e computador não são compromissados.

Pela razão dessa ser uma tarefa tão comum, o construtor do jQuery vem em várias formas que recebem uma selector query como argumento (parâmetro), permitindo você localizar elementos com uma quantidade bastante limitada de código para uma eficiência ótima. Você pode instanciar o objeto jQuery simplesmente escrevendo jQuery() ou até mais curto usando o nome de atalho do jQuery: $().

Portanto, selecionar um conjunto de elementos é simples assim:

$(<query aqui>)

Com o objeto jQuery retornado, você pode então começar a usar e alterar os elementos que você encontrou.

Fonte

Usando elementos , IDs e classes

O selector #id

Um tipo de selector muito comum é o baseado em ID, que nós vimos no exemplo “Hello, world”. Ele usa o atributo ID de uma tag HTML para localizar o elemento desejado. Um ID deve ser único,então você deve apenas usar esse selectior quando você deseja localizar um único elemento. Para localizar um elemento com um ID específico, escreva um caractere hash (#), seguido pelo ID do elemento que você deseja localizar, assim:

$("#divTest")

Um exemplo disso em uso:

<div id="divTest"></div>
<script type="text/javascript">
$(function()
{
        $("#divTest").text("Test");
});
</script>

Agora, enquanto tiver apenas um único elemento que combina com a nossa query acima, você deve estar ciente que o resultado é uma lista, significando que isso pode conter mais de um elemento, se a query combina com mais de um. Um exemplo disso é combinar todos os elementos quais usam uma ou varias classes CSS.

O selector .class

Elementos com uma classe específica podem ser localizados escrevendo um caractere ponto (.) seguido pelo nome da classe. Aqui vai um exemplo:

<ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
</ul>
<script type="text/javascript">
$(function()
{
        $(".bold").css("font-weight", "bold");
});
</script>

O selector element

Você também pode combinar baseado em elementos nos nomes das tags.

You can also match elements based on their tag names. Por exemplo, você pode combiner todos os links emu ma página assim:

$(“a”)

Ou todas as tags div assim:

$(“div”)

Se você usar um selector de multi-elemento (multi-element), como o selector de classe que nós usamos no exemplo anterior, e nó sabemos que nós estamos procurando por emento de um tipo específico, é uma boa prática especificar o tipo do elemento antes do selector. Não é apenas mais preciso, mas também é mais rápido para o jQuery processar, resultando em sites mais responsivos. Aqui vai uma versão reescrita do exemplo anterior, onde nós usamos esse método:

$("span.bold").css("font-weight", "bold");

Isso combinará todos os elementos span com “bold” como classe. Claro, isso pode ser usado com IDs e praticamente com todos os outros selector também.

Fonte: jquery-tutorial.net / jquery-tutorial.net

Parte 7 (Final) – Tutorial de Ajax no Struts 2 com Exemplo

Bem vindo a ultima parte de uma série de 7 artigos de tutoriais do Framework Struts2, no artigo anterior nós vimos como implementar a funcionalidade de carga de arquivo (File Upload) no Struts2. Neste artigo nós vamos ver como nós podemos implementar o suporte Ajax em uma aplicação web usando o framework struts2.

Suporte AJAX no Struts 2

O Struts 2 fornece  suporte embutido a Ajax usando a biblioteca Dojo Toolkit. Se você é novo em Dojo, talvez você queira passar pela Introdução ao DOJO Toolkit (Em Inglês).

O Struts 2 vem com um poderoso conjunto de APIs de Dojo AJAX que você pode usar para adicionar suporte Ajax. A fim de adicionar suporte Ajax, você precisa adicionar o seguinte arquivo JAR no seu classpath:
struts2-dojo-plugin.jar

Uma vez que nós adicionamos esse arquivo JAR, nós precisamos adicionar o seguinte fragmento de código em qualquer arquivo JSP que nós precisamos adicionar o suporte Ajax.

<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>

Primeiro defina a taglib sx que nós usaremos para adicionar as tags disponíveis de AJAX.

<sx:head/>

Adicione essa tag head no seu JSP entre as tags <head> … </head>. Essa tag sx:head incluirá os arquivos javascript e css necessários pra implementar o Ajax.

Exemplo AJAX: Ajax Drop Down (Combobox)  do Struts2

Vamos adicionar um simples suporte AJAX a nossa aplicação web StrutsHelloWorld. Nós usaremos o código base que nós usamos nos artigos anteriores e adicionar o Ajax no topo dele.

Nós criaremos um drop down (combobox) qual irá autocompletar e sugerir a entrada. Para isso nós iremos adicionar o suporte Dojo a nossa app web.

Passo 1: Adicionar o arquivo JAR

Como discutido anteriormente nós adicionaremos o struts2-dojo-plugin.jar no classpath (WEB-INF/lib). Assim, a seguinte é a lista dos arquivos JAR necessários. Observe que estes jars são necessários para rodar toda a aplicação, incluindo todos os exemplos das partes anteriores desta série de tutoriais.
struts2-ajax-jar-files

Passo 2: Criar a classe action do AJAX

Nós vamos criar uma classe action a qual irá ser chamada pelo nosso exemplo Ajax. Crie um arquivo AjaxAutocomplete.java no pacote net.viralpatel.struts2 e copie o seguinte conteúdo dentro dele.

AjaxAutocomplete.java

package net.viralpatel.struts2;

 

import java.util.ArrayList;

import java.util.List;

import java.util.StringTokenizer;

 

import com.opensymphony.xwork2.ActionSupport;

 

public class AjaxAutocomplete extends ActionSupport {

    private String data = "Afghanistan, Zimbabwe, India, United States, Germany, China, Israel";

    private List<String> countries;

    private String country;

    

    public String execute() {

        countries = new ArrayList<String>();

        StringTokenizer st = new StringTokenizer(data, ",");

 

        while (st.hasMoreTokens()) {

            countries.add(st.nextToken().trim());

        }

        return SUCCESS;

    }

    public String getCountry() {

        return this.country;

    }

 

    public List<String> getCountries() {

        return countries;

    }

 

    public void setCountries(List<String> countries) {

        this.countries = countries;

    }

    public void setCountry(String country) {

        this.country = country;

    }

}

No código acima nós criamos uma simples classe action com os atributos String country e List countries. A lista de países será populada com nomes de países quando o método execute() é chamado. Aqui por exemplo, nós carregamos dados estáticos. Você pode se sentir livre para mudar isso e adicionar dados do banco de dados.

Passo 3: Crie o JSP

Crie o arquivo JSP para exibir o Textbox com Autocomplete para nossa action Ajax. Crie AjaxDemo.jsp no diretório WebContent.

AjaxDemo.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>

<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>

<html>

<head>

    <title>Welcome</title>

    <sx:head />

</head>

<body>

    <h2>Struts 2 Autocomplete (Drop down) Example!</h2>

    

    Country:

    <sx:autocompleter size="1" list="countries" name="country"></sx:autocompleter>

    </action>

</body>

</html>

No arquivo JSP acima nós usamos a tag sx:autocompleter para renderizar um drop down com autocomplete o qual utiliza a classe Ajax para buscar dados internamente. Veja que nós mapeamos o atributo list com List countries.

Passo 4: Criando a entrada no Struts.xml

Adicione a seguinte entrada de action no arquivo Struts.xml:

<action name="ajaxdemo" class="net.viralpatel.struts2.AjaxAutocomplete">

    <interceptor-ref name="loggingStack"></interceptor-ref>

    <result name="success" type="tiles">/ajaxdemo.tiles</result>

    <result type="tiles">/ajaxdemo.tiles</result>

</action>

Observe que nós estamos utilizando Tiles aqui neste exemplo. Você pode querer usar o AjaxDemo.jsp ao invés do /ajaxdemo.tiles para renderizar a saída diretamente em JSP.

Isso é tudo pessoal

Compile e rode a aplicação no eclipse
struts2-ajax-drop-down

Download do código fonte

Clicque aqui para fazer o download do código fonte sem os JARs (24KB)

Conclusão

O framework Struts2 fornece uma ampla variedade de recursos para criar uma rica aplicação web. Nessa série de Struts2 nós vimos diferentes aspectos do Struts2 como introdução ao struts2, aplicação hello world, framework de validação, plugin tiles, interceptadores do struts2, carga de arquivo e suporte a Ajax.

Fonte: viralpatel.net – Viral Patel