jquery_essentials.md

jQuery Essentials

Este é meu guia de estudos sobre jQuery, aqui estão meus resumos e referências de codigo

Formas de Inícialização do jQuery

Forma padrão de inícia o jQuery

$(document).ready(function () {
	$('.jquery_essentials').html('jQuery Inicializado');
})

Forma simplificada de inícia o jQuery

$(function () {
	$('.jquery_essentials').html('jQuery Inicializado com gatilho');
});

jQuery antes de outra lib, com escopo fechado

jQuery(function ($) {
	$('.jquery_essentials').html('jQuery Inicializado antes de outra lib');
});

jQuery depois de outra lib, sem comflito

var $j = jQuery.noConflict();
$j(document).ready(function () {
	$j('.jquery_essentials').html('jQuery Inicializado depois de outra lib');
});

Debug do codigo

Debug

$(function () {
	console.group('Menssagens Gerais')
	console.log('jQuery Essentials')
	console.info('O jQuery foi carregado com sucesso!')
	console.warn('Um alerta')
	console.error('Um error')
	console.groupEnd()

	var cadastro = false

	console.group('Cadastro de usuários')
	console.info('Cadastro iniciado!')
	console.assert(cadastro === true, 'Cadastro Realizado')
	console.groupEnd()
});

Seletores do jQuery

Seletores

$(function () {
	$('b').text('Jquery Essemtials')
	$('.jquery').css('color', 'red')
	$('#jquery').text('id = jquery')
	$('div ').css('border', '1px solid #333')
	$('.jquery, b').css({
		padding: '10px'
	})
	$('#jquery').add('b').css('font-size', '50px')
})

Seletores Hierarquicos

$(function () {
	$('article').css('color', 'green')
	$('article p').css('color', 'red')
	$('article > *').css('color', 'orange') // Todos filhos direto do article
	$('article > p').css('color', 'blue') // Todos os p que são filhos direto de article 
	$('p + a').css('background-color', 'red') // Todos os a que estejam após um p 
	$('div + p').css('background-color', 'yellow') 
	// Seleciona todos os elementos <p> que são irmãos e aparecem após o elemento <div>
	$('div ~ p').css('background-color', 'orange') 
})

Filtros

$(function () {
    $('p:not(.p)').css('font-weight', 'bold'); // Seleciona todos os elementos exeto os que tem a class .p
    $('p:first').css('color', 'red'); // Seleciona o primeiro elemento
    $('p:last').css('color', 'red'); // Seleciona o ultima elemento
    
    $('p:even').css('background', '#eee'); // Seleciona os item pares da list de elementos
    $('p:odd').css('background', '#ccc'); // Seleciona os item impares da list de elementos
    
    $('p:eq(4)').text('jQuery Essentials'); // Seleciona o elemento com indice 4 
    $('p:gt(4)').text('GT'); // Seleciona os elementos com indice maior que 4
    $('p:gt(-3)').text('GT negativo');
    $('p:lt(4)').text('LT'); // Seleciona os elementos com indice menor que 4

    $('.list :header').css('color', 'blue') // Selecionar os elemento <H> dentro de .list
});