Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>Ukázka selektorů v jQuery</title>  
  <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
​
  <h1 class="nadpis">Ukázky použití selektorů v jQuery</h1>
  
  <h2 class="nadpis">CSS selektory</h2>
    <div class="ukazka ukazka-1">
      <input type="button" id="ukazka1a" value="Změnit barvu nadpisů">   
      <input type="button" id="ukazka1b" value="Změnit barvu H1">
      <input type="button" id="ukazka1c" value="Změnit barvu H2">
      <input type="button" id="ukazka1d" value="Přepnout první tlačítko">
    </div>
  
  <h2 class="nadpis">Atributové selektory</h2>
    <div class="ukazka ukazka-2">
      <input type="text" name="ukazka-jedna" placeholder="Text 1">
      <input type="text" name="ukazka-dva" placeholder="Text 2">
      <input type="button" id="ukazka2a" value="Přepnout políčka">
      <input type="button" id="ukazka2b" value="Přepnout Text 2">
      <input type="button" id="ukazka2c" value="Nadpisy o selektorech">
    </div>  
  
  <h2 class="nadpis">Pořaďové selektory</h2>
    <div class="ukazka ukazka-3">
      <input type="button" id="ukazka3a" value="Obarvit 3. a další H2">
      <input type="button" id="ukazka3b" value="Obarvit první dva nadpisy">
    </div>
  
  <h2 class="nadpis">Použití each() a $(this)</h2>
    <div class="ukazka ukazka-4">
      <input type="button" id="ukazka4" value="Vylepšit tlačítka">   
    </div>
  
  <h2 class="nadpis">Operátory u selektorů</h2>
    <div class="ukazka ukazka-5">
      <input type="button" id="ukazka5a" value="Operátor začíná">      
      <input type="button" id="ukazka5b" value="Operátor obsahuje">      
    </div>
​
  </body>
</html>
 
.cervene{ color: red; }
.modre{ color: blue; }
.zelene{ color: green; }
.zlute{ color: yellow; }
 
$(document).ready(function(){
  // CSS selektory
  $('#ukazka1a').click(function(){ 
    $('.nadpis').toggleClass('cervene'); 
  });
  $('#ukazka1b').click(function(){ 
    $('h1').toggleClass('modre'); 
  });
  $('#ukazka1c').click(function(){ 
    $('h2.nadpis').toggleClass('zelene'); 
  });
  $('#ukazka1d').click(function(){ 
    $('#ukazka1a').toggle(); 
  });
  
  // atributové selektory
  $('#ukazka2a').click(function(){ 
    $('input[type="text"]').toggle();
  });  
  $('#ukazka2b').click(function(){ 
    $('input[name="ukazka-dva"]').toggle();    
  }); 
  $('#ukazka2c').click(function(){ 
    $('.nadpis:contains("selektor")').toggleClass('cervene');    
  });   
  
  // pořaďové selektory
  $('#ukazka3a').click(function(){ 
    $('h2:gt(1)').toggleClass('zlute');    
  });  
  $('#ukazka3b').click(function(){ 
    $('.nadpis:lt(2)').toggleClass('zlute');    
  });    
  
  // each() a $(this)
  $('#ukazka4').click(function(){ 
    $('input').each(function(){
      if ($(this).attr('type') == 'button'){
        $(this).addClass('pure-button');
      }
    });    
  });
  
  // operátory u selektorů
  $('#ukazka5a').click(function(){ 
    $('input[id^="ukazka1"]').toggleClass('pure-button-primary');    
  });     
  $('#ukazka5b').click(function(){ 
    $('input[id*="2a"]').toggleClass('pure-button-primary');
  });   
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
maxiorelpro
0viewers