https://www.schoolofnet.com/curso-iniciando-com-jquery-3/
- Introdução
- Hello Word
- Seletores
- CSS
- Eventos
- Show, Hide, Toggle
- Animações
- Document Ready x Windows Load
- Ajax
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id=""></div>
<script src="js/jquery-3.3.1.js"></script>
<script src="main.js"></script>
</body>
</html>$('div').html('<h1>José Malcher</h1>'); <div id="jquery"></div>
<div class="jquery-version-3"></div>
<div class="jquery"></div>
<div></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>$('ul').css({'padding':0,'margin':0, 'list-style':'none'});
$('li').text('Item impar').css('padding','10px');
$('li:even').text('Inpar').css('background','#ccc');
$('li:odd').text('Par').css({'background': '#aaa', 'color':'#fff'});Refatorando/organizando
.ul{
padding: 0;
margin: 0;
list-style: none;
}
.li-even{
padding: 10px;
background: #ccc;
}
.li-odd{
padding: 10px;
background: #aaa;
color: #fff;
}}); */
$('ul').addClass('ul');
$('li:even').text('Inpar').addClass('li-even');
$('li:odd').text('Par').addClass('li-odd'); .li-hover{
background: #fff;
color: #000;
border: 1px solid #000;
}
</style>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>/* $('ul').css({
'padding': 0,
'margin': 0,
'list-style': 'none'
});
$('li').text('Item impar').css('padding', '10px');
$('li:even').text('Inpar').css('background', '#ccc');
$('li:odd').text('Par').css({
'background': '#aaa',
'color': '#fff'
}); */
let liHover = function(){
$(this).addClass('li-hover');
}
let liHoverOut = function(){
$(this).removeClass('li-hover');
}
$('ul').addClass('ul');
/*
$('li').hover(liHover,liHoverOut).click(function(){
alert($(this).text());
});
*/
$('li').on('click', function(){
alert($(this).text());
})
/* $('body').on('click', 'li', function(){
alert($(this).text());
} ) */
$('li:even').text('Inpar').addClass('li-even');
$('li:odd').text('Par').addClass('li-odd');
$('ul').addClass('ul').append('<li>Adicionado Dinamicamente</li>');let liHover = function(){
//$(this).addClass('li-hover');
//$(this).hide('slow');
//$(this).hide();
//$(this).hide(1000);
$(this).toggle('slow');
//$(this).show();
}
let liHoverOut = function(){
$(this).removeClass('li-hover');
}
let liClick = function () {
alert($(this).text());
}
$('ul').addClass('ul');
$('li').hover(liHover, liHoverOut).click(liClick);
$('li:even').text('Inpar').addClass('li-even');
$('li:odd').text('Par').addClass('li-odd');
$('ul').addClass('ul').append('<li>Adicionado Dinamicamente</li>');let liHover = function(){
$(this).animate({'padding':'15px'}, 'slow');
//$(this).slideUp();
$(this).slideToggle();
}
let liHoverOut = function(){
$(this).animate({ 'padding': '10px' }, 'slow');
//$(this).slideDown();
$(this).slideToggle();
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
</style>
<script src="js/jquery-3.3.1.js"></script>
<script src="ajax.js"></script>
<body>
<ul id="menu">
<li>
<a href="pages/home.html">Home</a>
</li>
<li>
<a href="pages/sobre.html">Sobre Nós</a>
</ul>
</li>
<div id="conteudo"></div>
</body>
</html>$(document).ready(function(){
$('#menu a').click(function(){
return false;
})
})$(document).ready(function(){
//Primeira forma
$('#conteudo').load('pages/home.html');
//segunda forma
$('#menu a').click(function(){
let url = $(this).attr('href');
$.ajax({
url:url,
methods: 'get',
})
.done(function(response){
$('#conteudo').html(response);
});
return false;
})
})