JQuery Plugin basic 2

From CoderLearner
Jump to: navigation, search

Description

Write a simple jQuery plugin to display the title to the page.

Syntax

      jQuery.fn.showtitle = function() {
                    return this.each(function() {
                        $(this).append(" -" + $(this).attr("title"));
                    });
                };

Example 1

<!DOCTYPE html>
<html>
    <head>
        <title>jquery plugin 1</title>
        <script 
            type="text/javascript" 
            src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
        <script>


            $().ready(function() {
                jQuery.fn.showtitle = function() {
                    return this.each(function() {
                        $(this).append(" -" + $(this).attr("title"));
                    });
                };


                $("a").showtitle();
                $("div").showtitle();
            });
        </script>
    </head>
    <body>
        <a href="google.com" title="visit search google page">Google</a> <br/>
        <a href="bing.com" title="visit search bing page">Bing</a>

        <div title="Page 1">
            This is page one
        </div>
        <div title="Page 2">
            This is page two
        </div>

    </body>
</html>

Result

  • Before
Google 
Bing
This is page one
This is page two
  • After
Google -visit search google page 
Bing -visit search bing page
This is page one -Page 1
This is page two -Page 2