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

Example of jQuery Syntax

1)

Basic syntax is: $(selector).action()

• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)

2) Examples:

• $(this).hide() - hides the current element.
• $("p").hide() - hides all <p> elements.
• $(".test").hide() - hides all elements with class="test".
• $("#test").hide() - hides the element with id="test".

2) use of $(document).ready(function(){});

This is to prevent any jQuery code from running before the document is finished loading (is ready).