Tuesday, May 27, 2014

Hide all elements with an href attribute using jquery

1) <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("[href]").hide();
  });
});
</script>

2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><a href="http://www.w3schools.com/html/">HTML Tutorial</a></p>
<p><a href="http://www.w3schools.com/css/">CSS Tutorial</a></p>
<button>Click me</button>

Hide the first li element of every ul using jquery

1) <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first-child").hide();
  });
});
</script>

2) <p>List 1:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<button>Click me</button>

3) Selects the first <li> element of every <ul>

Hide first li element of the first ul using jquery

1) <script>
$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first").hide();
  });
});
</script>

2)
<p>List 1:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<button>Click me</button>

3) Selects the first <li> element of the first <ul>

Hide first element of tag using jquery

1) <script>
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").hide();
  });
});
</script>

2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>

3) Selects the first <p> element

hide all tags having same class name using jquery

1) <script>
$(document).ready(function(){
  $("button").click(function(){
    $("p.intro").hide();
  });
});
</script>

2) <h2 class="intro">This is a heading</h2>
<p class="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>

3) Selects all <p> elements with class="intro"

Hide current element using jquery

1) <script>
$(document).ready(function(){
  $("button").click(function(){
    $(this).hide();
  });
});
</script>

2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>

3) This will hide only button

Hide all elements using Jquery

1) <script>
$(document).ready(function(){
  $("button").click(function(){
    $("*").hide();
  });
});
</script>

2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>

3) It will hide all elements