<head>
<meta charset='utf-8'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
.red{
background:red;
}
.green{
background:green;
}
*{border:1px solid black;}
.blue{
background:blue;
}
.main
{
color:white;
float:left;
padding:20px;
}
</style>
</head>
<body>
<div class='red main'>div Red</div>
<div class='green main'>div Green</div>
<div class='blue main'>div Blue</div>
<p class='red main'>pRed</p>
<p class='green main'>pGreen</p>
<p class='blue main'>pBlue</p>
<!--
$("*") - Выбрать все элементы
-->
<nav>
<div>
<div class='red main'>div Red</div>
<div class='green main'>div Green</div>
<div class='blue main'>div Blue</div>
<p class='red main'>pRed</p>
<p class='green main'>pGreen</p>
<p class='blue main'>pBlue</p>
</div>
</nav>
<a href='index.html'>jhmjk</a>
<script>
//$(".class div ul li").clik();
//$("#id").clik();
//$("tag").clik();
//$("[type]").show();
//$("[href="index.html"]").clik();
//$('селектор').функция(функцию что делать или переменная)
$(document).ready(function(){
$('[type="submit"]').hide();
//по клику по тегу див скрыть все элементы за секунду
$("div").click(function(){//селектор с именем тега выбирает все теги
$("*").css("border","10px solid black");
$("*").hide(1000);//селектор со * выбирает все элементы
});
$("div.green").mouseenter(function(){
$("div.green").css("background","lime");});
$("div.green").mouseleave(function(){
$("div.green").css("background","green");});
$(".blue").mouseenter(function(){
$(".blue").css("background","lightblue");});
$(".blue").mouseleave(function(){
$(".blue").css("background","blue");});
$("div div.red").mouseenter(function(){
$("div div.red").html("div div enter");});
$("div div.red").mouseleave(function(){
$("div div.red").html("DIV DIV leave");});
//focus
$("#search").focus(
function(){
$('[type="submit"]').show(200);
}
);
$("#search").blur(
function(){
$('[type="submit"]').hide(200);
}
);
//blur
});
</script>
<hr>
<input id='search'><input type='submit'>
</body>