Trigger click event of a button using jquery

We can fire click event of a button in jquery as below:

Senario:  I am changing dropdown value and on change of dropdown value, click event of a button will be automatically fired displaying selected value of dropdown.

Example:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>   

    <script>

        $(document).ready(function () {

            //test();

        });

        function changeOption() {           

           $("#btnSubmit").trigger("click");

        }

        function getName() {

            alert("automatic button has been clicked...." + $("#cars").val());

        }

</script>

</head>

<body>

    <div>

       <%--on click of drop down auto click of button will be done--%>

        <select name="cars" id="cars" onchange="changeOption();">

            <option value="volvo">Volvo</option>

            <option value="saab">Saab</option>

            <option value="fiat">Fiat</option>

            <option value="audi">Audi</option>

        </select>

        <input type="button" id="btnSubmit" value="Submit" onclick="getName();" />

    </div>

</body>

</html>

Remove CSS Class using Jquery

We can remove css class in jquery like this-

Suppose we a “div” control like this :

<div id="divGrid" class="gridtable">

This is Test      

</div>

Here how we remove class from div-

$("#divGrid").removeClass("gridtable");

How to remove style using Jquery

We can remove style of an element in Jquery in the following ways-

Suppose we have a “div” control like this :

<div id="divGrid"style="max-height: 400px; overflow: auto; width: 100%;">

This is Test

</div>

      1.       Remove style attribute of the “div”

$("#divGrid").attr("style", "");//for remove style of div

    2.       Change width of the “div”

$("#divGrid").css("width", "1200px");// width of the div will be changed to 1200px

getting css property value in jquery and applying css to an element in jquery

In jquery we can get the css value in following ways:

“.css” function is used to get css property of any element in jquery.

Example :

    <p style="font-size:20px" id="para1">

        Put content here.

    </p>

    <input type="submit" name="btnSubmit" value="Submit" onclick="return getBackColor();"        id="btnSubmit" />

function getBackColor() {

var color=$("p").css("font-size");

       alert(color);      

}  

We can set css to an element as following:

1.       Applying Single CSS

     $("p").css("font-size","30px");

2.       Applying Multiple CSS

     $("p").css({ "font-size": "30px", "color": "red" });

Note: We can use ID of the element also for applying css or getting value of css like $("#para1").css

Redirect to another page using jquery

We can redirect to another page following way

var url = "about.aspx" //url for redirect

$(location).attr("href", url);

Redirect to another page using javascript

We can redirect to another page using javascript in following ways:

1.  window.location.href = "default.html";//url of the page
2.  window.location.replace("default.html");//url of the page

Redirect to the parent page:

1.  window.parent.location.replace("default.html");//url of the page
2.  window.parent.location.href="default.html"; //url of the page