jQuery - Básico

jQuery é uma estrutura construída usando recursos JavaScript. Portanto, você pode usar todas as funções e outros recursos disponíveis em JavaScript. Este capítulo explicaria a maioria dos conceitos básicos, mas freqüentemente usados ​​em jQuery.

Corda

Uma string em JavaScript é um objeto imutável que não contém nenhum, um ou vários caracteres. A seguir estão os exemplos válidos de uma string JavaScript -

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

Números

Os números em JavaScript são valores IEEE 754 no formato de 64 bits de dupla precisão. Eles são imutáveis, assim como cordas. A seguir estão os exemplos válidos de números JavaScript -

5350
120.27
0.26

boleano

Um booleano em JavaScript pode ser true ou false. Se um número for zero, o padrão é falso. Se uma string vazia for padronizada como false.

A seguir estão os exemplos válidos de um Booleano JavaScript -

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true

Objetos

JavaScript suporta muito bem o conceito de objeto. Você pode criar um objeto usando o literal de objeto da seguinte maneira -

var emp = {
   name: "Zara",
   age: 10
};

Você pode escrever e ler as propriedades de um objeto usando a notação de ponto da seguinte maneira -

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

Arrays

Você pode definir matrizes usando o literal de matriz da seguinte maneira -

var x = [];
var y = [1, 2, 3, 4, 5];

Uma matriz tem um length propriedade que é útil para iteração -

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

Funções

Uma função em JavaScript pode ser nomeada ou anônima. Uma função nomeada pode ser definida usando a palavra-chave de função da seguinte forma -

function named(){
   // do some stuff here
}

Uma função anônima pode ser definida de maneira semelhante a uma função normal, mas não teria nenhum nome.

Uma função anônima pode ser atribuída a uma variável ou passada para um método conforme mostrado abaixo.

var handler = function (){
   // do some stuff here
}

JQuery faz uso de funções anônimas com muita frequência, como segue -

$(document).ready(function(){
   // do some stuff here
});

Argumentos

Os argumentos de variáveis ​​JavaScript são um tipo de array que possui a propriedade length . O exemplo a seguir explica muito bem -

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

O objeto de argumentos também tem uma propriedade callee , que se refere à função da qual você está. Por exemplo -

function func() {
   return arguments.callee; 
}

func();                // ==> func

Contexto

JavaScript famosa palavra-chave thissempre se refere ao contexto atual. Dentro de uma funçãothis o contexto pode mudar, dependendo de como a função é chamada -

$(document).ready(function() {
   // this refers to window.document
});

$("div").click(function() {
   // this refers to a div DOM element
});

Você pode especificar o contexto para uma chamada de função usando os métodos integrados à função call() e apply() métodos.

A diferença entre eles é como passam argumentos. Call passa todos os argumentos como argumentos para a função, enquanto apply aceita uma matriz como argumentos.

function scope() {
   console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

Escopo

O escopo de uma variável é a região de seu programa na qual ela é definida. A variável JavaScript terá apenas dois escopos.

  • Global Variables - Uma variável global tem escopo global, o que significa que é definida em qualquer lugar em seu código JavaScript.

  • Local Variables- Uma variável local será visível apenas dentro de uma função onde for definida. Os parâmetros da função são sempre locais para essa função.

Dentro do corpo de uma função, uma variável local tem precedência sobre uma variável global com o mesmo nome -

var myVar = "global";     // ==> Declare a global variable

function ( ) {
   var myVar = "local";   // ==> Declare a local variable
   document.write(myVar); // ==> local
}

Ligue de volta

Um retorno de chamada é uma função JavaScript simples passada para algum método como um argumento ou opção. Alguns retornos de chamada são apenas eventos, chamados para dar ao usuário a chance de reagir quando um determinado estado é acionado.

O sistema de eventos da jQuery usa callbacks em todos os lugares, por exemplo -

$("body").click(function(event) {
   console.log("clicked: " + event.target);
});

A maioria dos retornos de chamada fornece argumentos e um contexto. No exemplo do manipulador de eventos, o retorno de chamada é chamado com um argumento, um Evento.

Alguns retornos de chamada são necessários para retornar algo, outros tornam esse valor de retorno opcional. Para evitar o envio de um formulário, um manipulador de eventos de envio pode retornar falso da seguinte forma -

$("#myform").submit(function() {
   return false;
});

Fechamentos

Os fechamentos são criados sempre que uma variável definida fora do escopo atual é acessada de dentro de algum escopo interno.

O exemplo a seguir mostra como a variável counter é visível nas funções de criação, incremento e impressão, mas não fora delas -

function create() {
   var counter = 0;
	
   return {
      increment: function() {
         counter++;
      },
	   print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     // ==> 1

Este padrão permite criar objetos com métodos que operam em dados que não são visíveis para o mundo exterior. Deve-se notar quedata hiding é a base da programação orientada a objetos.

Padrão Proxy

Um proxy é um objeto que pode ser usado para controlar o acesso a outro objeto. Ele implementa a mesma interface que este outro objeto e transmite qualquer invocação de método para ele. Este outro objeto é freqüentemente chamado de sujeito real.

Um proxy pode ser instanciado no lugar desse sujeito real e permitir que ele seja acessado remotamente. Podemos salvar o método setArray do jQuery em um encerramento e sobrescrevê-lo da seguinte maneira -

(function() {
   // log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };
	
})();

O código acima envolve seu código em uma função para ocultar a variável com proxy . O proxy então registra todas as chamadas para o método e delega a chamada para o método original. O uso de apply (this, arguments) garante que o chamador não será capaz de notar a diferença entre o método original e o proxy.

Funções integradas

JavaScript vem com um conjunto útil de funções integradas. Esses métodos podem ser usados ​​para manipular Strings, Números e Datas.

A seguir estão funções importantes do JavaScript -

Sr. Não. Método e Descrição
1

charAt()

Retorna o caractere no índice especificado.
2

concat()

Combina o texto de duas strings e retorna uma nova string.
3

forEach()

Chama uma função para cada elemento da matriz.
4

indexOf()

Retorna o índice dentro do objeto String de chamada da primeira ocorrência do valor especificado, ou -1 se não for encontrado.
5

length()

Retorna o comprimento da string.
6

pop()

Remove o último elemento de uma matriz e retorna esse elemento.
7

push()

Adiciona um ou mais elementos ao final de uma matriz e retorna o novo comprimento da matriz.
8

reverse()

Inverte a ordem dos elementos de uma matriz - o primeiro se torna o último e o último se torna o primeiro.
9

sort()

Classifica os elementos de uma matriz.
10

substr()

Retorna os caracteres em uma string começando no local especificado até o número especificado de caracteres.
11

toLowerCase()

Retorna o valor da string de chamada convertido em minúsculas.
12

toString()

Retorna a representação de string do valor do número.
13

toUpperCase()

Retorna o valor da string de chamada convertido em maiúsculas.

O modelo de objeto de documento

O Document Object Model é uma estrutura em árvore de vários elementos de HTML da seguinte forma -

<html>
   <head>
      <title>The jQuery Example</title>
   </head>
	
   <body>
      <div>
         <p>This is a paragraph.</p>
         <p>This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

A seguir estão os pontos importantes sobre a estrutura de árvore acima -

  • O <html> é o ancestral de todos os outros elementos; em outras palavras, todos os outros elementos são descendentes de <html>.

  • Os elementos <head> e <body> não são apenas descendentes, mas filhos de <html> também.

  • Da mesma forma, além de ser o ancestral de <head> e <body>, <html> também é seu pai.

  • Os elementos <p> são filhos (e descendentes) de <div>, descendentes de <body> e <html> e irmãos uns dos outros elementos <p>.

Ao aprender os conceitos do jQuery, será útil entender o DOM. Se você não conhece o DOM, sugiro que consulte nosso tutorial simples sobre o Tutorial do DOM .