CodeMenu

Simple sample: jQuery PlugIn

<html>
<head>
<title></title>
<script type="text/javascript" src="../Scripts/jquery-3.2.1.min.js"></script>

<script type="text/javascript">

(function( $ ) {

  $.fn.showLinkDesigntime = function() 
  {
	return this.filter( "a" ).each( 
	  function() 
	  {
	    $( this ).append( " (" + $( this ).attr( "href" ) + ")" );

	  });
  };

}( jQuery ));

</script>

Above is a jQuery Plugin which is called for example as follows: $( "a" ).showLinkDesigntime();

Replace A Html Element

<html>
<head>
<title></title>
<script type="text/javascript" src="../Scripts/jquery-3.2.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

   $("div").click(function () {
      $(this).html("<h1>jQuery Is Powerful</h1>");
          //.replaceWith("<h1>jQuery Is Powerful</h1>");
    $(this).draggable();
  });

});

</script>

<style>
#division { margin:10px; padding:12px; border:2px solid #666; width:60px; }
</style>
</head>

<body>
<p>Click on the square below:</p>
  <div id="division" style="background-color:blue;">This is Blue Square!!
  </div>
</body>
</html>

selector.replaceWith( content )
Example: Replace any clicked 'div' element with "<h1>jQuery Is Powerful</h1>"

Remove A Html Element

<html>
<head>
<title></title>
<script type="text/javascript" src="../Scripts/jquery-3.2.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

  $("div").click(function () {
    $(this).remove( );
  });

});
</script>

<style>
.adiv{ margin:10px;padding:12px;border:2px solid #666;width:60px;}
</style>
</head>

<body>
  <p>Click on any square below:</p>
  <div class="adiv" style="background-color:blue;" ></div>
  <div class="adiv" style="background-color:green;"></div>
  <div class="adiv" style="background-color:red;"  ></div>
</body>
</html>

selector.remove( [ expr ])
or selector.empty( )
You can pass optional paramter expr to filter the set of elements to be removed.

Insert A Html Element

<html>
<head>
<title></title>
<script type="text/javascript" src="../Scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
  $("div").click(function () {
    $(this).before('<div class="xdiv"></div>' );
  });
});

</script>

<style>
.xdiv{ margin:10px;padding:12px;border:2px solid #666;width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<div class="xdiv" style="background-color:blue;" ></div>
<div class="xdiv" style="background-color:green;"></div>
<div class="xdiv" style="background-color:red;"  ></div>
</body>
</html>

selector.after( content )
or selector.before( content )
Here content is what you want to insert. This could be HTML or simple text.
example where <div> elements are being inserted just before the clicked element:

jQuery Validation

jQuery Selectors

jQuery Selectors

$("p").hide() Demonstrates the jQuery hide() method, hiding all <p> elements.

$("#test").hide() Demonstrates the jQuery hide() method, hiding the element with id="test".

$(".test").hide() Demonstrates the jQuery hide() method, hiding all elements with class="test".

$(this).hide() Demonstrates the jQuery hide() method, hiding the current HTML element.
<script>
    $(document).ready(function () {
        $("button").click(function () {
            $("p").toggle();
        });
    });
</script>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>

jQuery Events

jQuery click() event.

jQuery dblclick() event.

jQuery mouseenter() event.

jQuery mousedown() event.

jQuery mouseup() event.

jQuery focus() and blur() events.

jQuery mouseleave() event.

<script>
    $(document).ready(function () {
        $("#p1").mouseleave(function () {
            alert("Bye! You now leave p1!");
        });
    });
</script>
<body>
<p id="p1">This is a paragraph.</p>
</body>

jQuery hover() event.

<script>
    $(document).ready(function () {
        $("#p1").hover(function () {
            alert("You entered p1!");
        },
    function () {
        alert("Bye! You now leave p1!");
    });
    });
</script>
<body>
<p id="p2">This is a paragraph.</p>
</body>

jQuery Animations

jQuery Fade

jQuery fadeIn()

jQuery fadeOut()

jQuery fadeToggle()

jQuery fadeTo()

jQuery Slide

jQuery slideDown()

jQuery slideUp()

jQuery slideToggle()

jQuery Animate

jQuery animate()

jQuery animate() - manipulate multiple CSS properties

jQuery animate() - using relative values

jQuery animate() - using pre-defined values

jQuery Stop Animations

jQuery stop() sliding

jQuery stop() animation (with parameters)

jQuery Content and Elements

jQuery HTML Get Content and Attributes

jQuery text() and html() - Get content Get content with the jQuery text() and html() methods.

jQuery val() - Get content Get the value of a form field with the jQuery val() method.

jQuery attr() - Get attribute value Get the value of an attribute with the jQuery attr() method.

jQuery HTML Set Content and Attributes

jQuery text(), html(), and val() - Set content Set content with the jQuery text(), html() and val() methods.

jQuery text() and html() - Set content with a callback function Set content + using a callback function inside text() and html().

jQuery attr() - Set attribute value Set attribute value with the jQuery attr() method.

jQuery attr() - Set multiple attribute values Set multiple attribute values with the jQuery attr() method.

jQuery attr() - Set attribute value with a callback function Set attribute value + using a callback function inside attr().

jQuery HTML Add Elements/Content

jQuery append() Insert content at the end of the selected HTML elements.

jQuery prepend() Insert content at the beginning of the selected HTML elements.

jQuery append() - Insert several new elements Create new elements with text/HTML, jQuery, and JavaScript/DOM. Then append the new elements to the text.

jQuery after() and before() Insert content after and before the selected HTML elements.

jQuery after() - Insert several new elements Create new elements with text/HTML, jQuery, and JavaScript/DOM. Then insert the new elements after the selected element.

jQuery HTML Remove Elements/Content jQuery remove() Remove the selected element(s). jQuery empty() Remove all child elements of the selected element(s). jQuery remove() - with a parameter Filter the elements to be removed

jQuery Classes CSS and Dimensions

jQuery Get and Set CSS Classes jQuery addClass() Add class attributes to different elements. jQuery addClass() - Multiple classes Specify multiple classes within the addClass() method. jQuery removeClass() Remove a specific class attribute from different elements. jQuery toggleClass() Toggle between adding/removing classes from the selected elements.

jQuery css() Method jQuery css() - return CSS property Return the value of a specified CSS property from the FIRST matched element. jQuery css() - set CSS property Set a specified CSS property for ALL matched elements. jQuery css() - set CSS properties Set multiple CSS properties for ALL matched elements.

jQuery Dimensions jQuery - return width() and height() Return the width and height of a specified element. jQuery - return innerWidth() and innerHeight() Return the inner-width/height of a specified element. jQuery - return outerWidth() and outerHeight() Return the outer-width/height of a specified element. jQuery - return outerWidth(true) and outerHeight(true) Return the outer-width/height (including margins) of a specified element. jQuery - return width() and height() of document and window Return the width and height of the document (the HTML document) and window (the browser viewport). jQuery - set width() and height() Sets the width and height of a specified element.

jQuery AJAX

<script>
    $(document).ready(function () {
        $("button").click(function () {
            $("#div1").load("demo_test.txt", 
                            function (responseTxt, statusTxt, xhr) {
                if (statusTxt == "success") 
                    alert("External content loaded successfully!");
                if (statusTxt == "error")   
                    alert("Error: " + xhr.status + ": " + xhr.statusText);
            });
        });
    });
</script>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
jQuery AJAX load() Method

jQuery load() Load the content of a file into a <div> element.

jQuery load() Load the content of a specific element inside a file, into a <div> element.

jQuery load() - with callback Use of the jQuery load() method with a callback function.

<script>
    $(document).ready(function () {
        $("button").click(function () {
            $.post("demo_test_post.asp",
    {
        name: "Donald Duck",
        city: "Duckburg"
    },
    function (data, status) {
        alert("Data: " + data + "\nStatus: " + status);
    });
        });
    });
</script>
<body>
<button>Send an HTTP POST request to a page and get the result back</button>
</body>
jQuery AJAX get() and post() Methods

jQuery get() Use the $.get() method to retrieve data from a file on the server.

jQuery post() Use the $.post() method to send some data along with the request.

jQuery HTML Get Content and Attributes
jQuery text() and html() - Get content	Get content with the jQuery text() and html() methods.
jQuery val() - Get content	Get the value of a form field with the jQuery val() method.
jQuery attr() - Get attribute value	Get the value of an attribute with the jQuery attr() method.
jQuery HTML Set Content and Attributes
jQuery text(), html(), and val() - Set content	Set content with the jQuery text(), html() and val() methods.
jQuery text() and html() - Set content with a callback function	Set content + using a callback function inside text() and html().
jQuery attr() - Set attribute value	Set attribute value with the jQuery attr() method.
jQuery attr() - Set multiple attribute values	Set multiple attribute values with the jQuery attr() method.
jQuery attr() - Set attribute value with a callback function	Set attribute value + using a callback function inside attr().