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.
{
$("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")
< 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.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 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.
If page is adding any element dynamically then use below code to set onclick event using JQuery
ReplyDeleteIf 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
});
Thanks for your Input Manmeet !!
Delete