Tuesday, December 2, 2014

Calling Class, Id ,Element from jQuery

We can Select any Elements(Headers like h1,h2, paragraphs like p) by using JQuery
jQuery function can be written as

$(function)
{
});
or
$(document).ready(function()
{});

1. So in this example we can hide the header h2 in the html file when the button is clicked.

$(document).ready(function()
{
   $("button").click(function()
    {
                   $("h2").hide();
    });
});

if there is more than one element,say h2 headers are more than one time used in the html it will hide all the h2.


2. Call the html element with their id by using "#" $("#btnName")

< !DOCTYPE html>
< html>
< head>
< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">< /script>
< script>
$(document).ready(function(){
  $("#btnName").click(function(){
    $("#test").hide();
  });
});
< /script>
< /head>
< body>

< h2>This is a heading
< p>This is a paragraph.
< p id="test">This is another paragraph.
< button id="btnName">Click me

< /body>
< /html>
3. Call the html element's class by using "."

$(document).ready(function(){
  $("button").click(function(){
    $(".h2Css").hide();
  });
});

< h2 class="h2Css">This is a heading

All these examples are at  w3Schools.com.Please visit the website.



2 comments:

  1. If page is adding any element dynamically then use below code to set onclick event using JQuery

    If parent element is ORDER which exists on page and after certain logic page added a button with class name REMOVE then code will look like this

    var $orders = $('#Order');
    $orders.delegate(‘.remove’,’click’, function()
    {
    DO WHATEVER
    });

    ReplyDelete