Блог по программированию

Селекторы в Jquery Урок 12

Написано

admin

в

, 
<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>

 

Больше записей