Month: September 2016

What is the Jquery Event ? (Part 4)

Chandradev1 Comment

Event are visitor action created on web application. If you have worked with asp.net web-form then you might be familiar with event, But web-form event perform the full post-back of page. where as Jquery event will not perform the post-back of page. This is the main advantage of using Jquery event in web application.

Some example of event are

1. Mouse hover
2. Button click
3. Radio button Selection
4. Checkbox selection
5. double click
6. MouseEnter
7. MouseLeave
8. Keyup
9. Keydown
10. Keydown
11. Submit
12. Change
13. Focus
14. Blur
15. Load
16. Resize
17. Scroll
18. Unload

Click Event Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $("#Line1").hide();
            });
        });
    </script>
</head>
<body>
    <p id="Line1">This is the first line</p>
    <p>This is the Second line</p>
    <button>Click Here</button>
</body>
</html>

hover event example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").hover(function () {
                $("#Line1").hide();
            });
        });
    </script>
</head>
<body>
    <p id="Line1">This is the first line</p>
    <p>This is the Second line</p>
    <button>Click Here</button>
</body>
</html>

double click event example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").dblclick(function () {
                $("#Line1").hide();
            });
        });
    </script>
</head>
<body>
    <p id="Line1">This is the first line</p>
    <p>This is the Second line</p>
    <button>Click Here</button>
</body>
</html>

MouseEnter Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").mouseenter(function () {
                $("#Line1").hide();
            });
        });
    </script>
</head>
<body>
    <p id="Line1">This is the first line</p>
    <p>This is the Second line</p>
    <button>Click Here</button>
</body>
</html>

Focus Event Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("input").focus(function () {
                $(this).css("background-color", "green");
            });
        });
    </script>
</head>
<body>
    <div>
         FirstName: <input type="text" name="txtUserFirstName" value=" " /> <br />
          LastName : <input type="text" name="txtUserLastName" value=" " /> <br />
          EmailId : <input type="text" name="txtEmailId" value=" " /> <br />
        <button>Submit</button>
    </div>
</body>
</html>

Summary:

We have learnt some of the basic concept of event in Jquery Library

How to display alternate color in table using Jquery Selector

ChandradevLeave a comment

jqueryselector

While working with asp.net mvc project, we will get scenario to display the alternate color of tabular grid. We can do this task using Jquery selector in very easy way like this


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("tr:odd").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <fieldset>
        <legend><b>Alternate table row color using Jquery selector</b></legend>
    
    <table border="1">
        <tr>
            <th>EmpName</th>
            <th>City</th>
            <th>Contact Num</th>
        </tr>
        <tr>
            <td>Ram</td>
             <td>Bangalore</td>
            <td>1234567890</td>
        </tr>
         <tr>
            <td>Hari</td>
             <td>Bangalore</td>
            <td>1234567890</td>
        </tr>
         <tr>
            <td>Mohan</td>
             <td>Bangalore</td>
            <td>1234567890</td>
        </tr>
         <tr>
            <td>Rohan</td>
             <td>Bangalore</td>
            <td>1234567890</td>
        </tr>
    </table>
        </fieldset>
</body>
</html>

Note: in above example we have used $(“tr:odd”) as Selector

What is the Selector in Jquery ? (Part 3)

Chandradev1 Comment

Jquery Selectors are one of the important part of Jquery library. It is process of finding out the element in Document Object Model(DOM).

We can also say selector is used to select one or more element in DOM
All the selector in Jquery start with $() sign.

There are the following selector in Jquery

1. #Id selector
2. class Selector
3. Universal Selector
4. Multiple element selector
5 Name Selector.

Now we will see the examples of all selector
1. #Id Selector:

It uses the Id attribute of an html and find out the specific id in HTML DOM element. It is the fastest and best ways to find out the specific Id in DOM element.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $("#Line1").hide();
            });
        });
    </script>
</head>
<body>
    <p id="Line1">This is the first line</p>
    <p>This is the Second line</p>
    <button>Click Here</button>
</body>
</html>

Note: In the above example, we have used Id i.e “Line1” of Paragraph. which is used for hiding the specific paragraph .

2. Class Selector:

It is used to select the html element on basis of css class name.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $(".colorcss").hide();
            });
        });
    </script>
    <style>
        .colorcss {
            background-color:silver;
            font-size:20px;
        }
    </style>
</head>
<body>
    <p class="colorcss">This is the first line</p>
    <p class="colorcss">This is the Second line</p>
    <button>Click Here</button>
</body>
</html>

Note: In the above example we are hiding the both paragraph on basis of css class name.

3. Universal Selector:

It will select all the element of Dom Element.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $("*").hide();
            });
        });
    </script>
    <style>
        .colorcss {
            background-color:silver;
        }
    </style>
</head>
<body>
    <p class="colorcss">This is the first line</p>
    <p class="colorcss">This is the Second line</p>
    <label>EmpName:</label>
    <input type="text" name="txtEmpName" value=" " />
    <br /><br />
    <button>Click Here</button>
</body>
</html>

Note: In above example it will hide all the element of Html element.

4. Multiple Element Selector

It is used to select the element on basis of multiple element in DOM element.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $(".colorcss,#p2,#p3").hide();
            });
        });
    </script>
    <style>
        .colorcss {
            background-color:silver;
        }
    </style>
</head>
<body>
    <p class="colorcss">This is the first line</p>
    <p Id="p2">This is the Second line</p>
    <p Id="p3">This is the third line</p>
    <button>Click Here</button>
</body>
</html>

It will hide the element on basis of css class,Id Name in above example.

5. Name Selector:

Name selector is used to select the html Dom element on basic of html tag name.

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $("p,div").hide();
            });
        });
    </script>
</head>
<body>
    <p>This is the first line</p>
    <p>This is the Second line</p>
    <div id="Div1">
        <p>I am in Div1 </p>
    </div>
    <div id="Div2">
        <p>I am in Div2 </p>
    </div>
    <button>Click Here</button>
</body>
</html>

In the above example, if we have to hide all paragraph and div element then we can use name selector.

Summary

In the above examples, we have learnt the basic concept of selector in Jquery.

Different ways to write Jquery function (Part 2)

Chandradev1 Comment

So many time in interview, we will get this question. But maximum people give the answer of one or two approach of writing function in Jquery.

we can write the the function in Jquery 4 ways. I will include all the 4 ways in given below example.

jqueryfunction

Complete source code as given below


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery.min.js"></script>
    <script>
        //1 Standard ways
        jQuery(document).ready(function () {
            alert("Hello from Jquery");
        });
        
        //2 Standard ways using $ alias

        $(document).ready(function () {
            alert("Hello from Jquery using $");
        });

        //3 using shortcut 
        $(function () {
            alert("Hello from Jquery using shortcut");
        });

        //4 Shortcut with failsafe usage of $

        jQuery(function ($) {
            alert("Hello from Jquery with Failsafe");
        });
    </script>
</head>
<body>
</body>
</html>

What is the Jquery ? (Part1)

ChandradevLeave a comment

Jquery is the Javascript library which has been written using javascript. Which simplifies the Javascript pragramming.

Jquery Library contains the following features
1. HTML/DOM manipulation
2. CSS manupulation
3. HTML event methods
4. Effect and animations
5. Ajax
6. Utilities

Sample code for Jquery Example which is used for hiding the paragraph

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("p").click(function () {
                $(this).hide();
            });
        });
    </script>
</head>
<body>
    <p>This is the line1</p> <br />
     <p>This is the line2</p> <br />
    <p>This is the line3</p> <br />

</body>
</html>

Note: here $(this).hide() is used for hiding the current paragraph line