IT. Expert System.

JQUERY

Examples


Examples

The following example demonstrate various jQuery methods.

Syntax

Example 1:

Demonstrates the jQuery hide() function, hiding the current HTML element.

<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(this).hide();
  });
});
</script>
</head>

<body>
  <button>Click Me</button>
</body>
</html>

Example 2:

Demonstrates the jQuery hide() function, hiding all <p> elements.

<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
  <h2>Heading 2</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <button>Click Me</button>
</body>
</html>

Example 3:

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

<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>

<body>
  <h2 class="test">Heading 2</h2>
  <p class="test">Paragraph 1</p>
  <p>Paragraph 2</p>
  <button>Click Me</button>
</body>
</html>

Example 4:

Demonstrates the jQuery hide() function, hiding the element, with id="test".

<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
  <h2>Heading 2</h2>
  <p>Paragraph 1</p>
  <p id="test">Paragraph 2</p>
  <button>Click Me</button>
</body>
</html>

Hiding - Sliding - Fading

Example 1:

Demonstrates a simple jQuery fadeout() function.

<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $("#test").click(function(){
    $(this).fadeOut();
});
});
</script>
</head>

<body>
  <div id="test"
    style="background:yellow;
    width:200px">CLICK ME
  </div>
  <p>Click the Box</p>
</body>
</html>

Example 2:

Demonstrates a simple jQuery hide() function.

<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>

<body>
  <p>Click Me</p>
  <p>Click Me</p>
  <p>Click Me</p>
</body>
</html>

Example 3:

Demonstrates how to hide parts of text.

 
<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $(".ex .hide").
    click(function(){
    $(this).parents(".ex")
      .hide("slow");
  });
});
</script>
<style type="text/css"> 
div.ex
{
  background-color:#e5eecc;
  padding:7px;
  border:solid 1px #c3c3c3;
}
</style>
</head>

<body>
<h3>Island Trading</h3>
<div class="ex">
  <button class="hide">
    Hide me
  </button>
  <p>Contact:<br />
    John Q. Public<br /> 
    Anytown USA
  </p>
</div>
</body>
</html>

Example 4:

Demonstrates a simple Slide Panel effect.

<html>
<head>
<script src="jquery.js">
</script>
<script> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel")
      .slideToggle("slow");
  });
});
</script>
  
<style type="text/css"> 
div.panel,p.flip
{
  margin:0px;
  padding:5px;
  text-align:center;
  background:#e5eecc;
  border:solid 1px #c3c3c3;
}
div.panel
{
  height:120px;
  display:none;
}
</style>
</head>
  
<body>
  <div class="panel">
    <p>Line 1</p>
    <p>Line 2</p>
  </div>
  
  <p class="flip">
    Show/Hide Panel
  </p>
</body>
</html>

Example 5:

Demonstrates a simple jQuery animate() method.

<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({height:300}, "slow");
    $("div").animate({width:300}, "slow");
    $("div").animate({height:100}, "slow");
    $("div").animate({width:100}, "slow");
  });
});
</script>
</head>

<body>
  <button>GO!</button>
  <br />
  <br />
  <div style="background:#2198bf;height:100px;width:100px;position:relative">
  </div>
</body>
</html>

HTML Manipulation

Example 1:

Change the content of an HTML element.

<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").html("jQuery");
  });
});
</script>
</head>

<body>
  <h2>Heading 1</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <button>Click Me</button>
</body>
</html>

Example 2:

Append content to HTML elements.

<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").append("jQuery");
  });
});
</script>
</head>

<body>
  <h2>Heading 1</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <button>Click Me</button>
</body>
</html>

Example 3:

Append content after HTML elements.

<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").after("jQuery");
  });
});
</script>
</head>

<body>
  <h2>Heading 1</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <button>Click Me</button>
</body>
</html>

CSS Manipulation

Example 1:

Change a CSS property of HTML elements.

<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color", "yellow");
  });
});
</script>
</head>

<body>
  <h2>Heading 1</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <button>Click Me</button>
</body>
</html>

Example 2:

Change multiple CSS properties.

<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({
      "background-color":"yellow","font-size":"200%"});
  });
});
</script>
</head>

<body>
  <h2>Heading 1</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <button>Click Me</button>
</body>
</html>

Example 3:

Get a CSS property from an element.

<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $("div").click(function(){
    $("p").html($(this)
      .css("background-color"));
  });
});
</script>
</head>
<body>
  <div style="width:100px;height:100px;background:#ff0000">
  </div>
  <p>Click The Box</p>
</body>
</html>

Ajax

Example 1:

Change HTML content using $(selector).load(url).

<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").load('test1.txt');
  });
});
</script>
</head>

<body>
<div>
<h2>Ajax changes this text</h2>
</div>
<button>GO!</button>
</body>
</html>

Example 2:

Change HTML content using $.ajax(options).

<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    htmlobj=$.ajax({url:"test1.txt",async:false});
    $("div").html(htmlobj.responseText);
  });
});
</script>
</head>

<body>
<div>
  <h2>Ajax changes this text</h2>
</div>
<button>GO!</button>
</body>
</html>


Content

Android Reference

Java basics

Java Enterprise Edition (EE)

Java Standard Edition (SE)

SQL

HTML

PHP

CSS

Java Script

MYSQL

JQUERY

VBS

REGEX

C

C++

C#

Design patterns

RFC (standard status)

RFC (proposed standard status)

RFC (draft standard status)

RFC (informational status)

RFC (experimental status)

RFC (best current practice status)

RFC (historic status)

RFC (unknown status)

IT dictionary

License.
All information of this service is derived from the free sources and is provided solely in the form of quotations. This service provides information and interfaces solely for the familiarization (not ownership) and under the "as is" condition.
Copyright 2016 © ELTASK.COM. All rights reserved.
Site is optimized for mobile devices.
Downloads: 1849 / . Delta: 0.02074 с