jQuery Show-Hide Text (JSHT)


JSHT:   SOLD       




1. Adding jQuery to Your Web Page

There are several ways to start using jQuery on your website, including:

  • Download the jQuery library from jQuery.com
  • Include jQuery from a CDN, like Google


JQuery- Show and Hidden Text

2. Downloading jQuery

There are two versions of jQuery available for download:

  • Production version - this is used for live sites, as it has been slimmed down and compressed.
  • Development version - this is used for development and testing purposes (uncompressed and readable code)
  • You can download both versions above at  jQuery.com .

The jQuery library is a single JavaScript file, and you can reference it with the HTML5 <script> tag (note that the <script> tag must be inside the <head> element).

<head>
<script src="jquery-1.11.3.min.js"></script>
</head>

Tip: Place the downloaded jQuery file into the same directory as the page where you want to use it.

3. jQuery CDN

If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).

For jQuery from Google or Microsoft, please use the following options:

Google CDN:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

Microsoft CDN:

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
</head>

One of the big advantages of using either Google or Microsoft's jQuery host is:

Many users already download Google or Microsoft's jQuery when they visit other sites. As a result, jQuery will automatically be loaded through the cache when they visit your site, resulting in faster loading times. In addition, most CDNs will ensure that once a user requests the file, it will be served from the server closest to them, resulting in faster loading times as well.

Project Example

<html>
<!-- bundet.com -->
 <head>
  <title>Belajar JQuery</title>
  <script type="text/javascript" src="jquery-1.3.min.js"></script>
  <script type="text/javascript">
  $(document).ready (function() {
   $('a.show').click (function() {
    $('p.jquery').show("fast");
   });
   $('a.hide').click (function() {
    $('p.jquery').hide("fast");
   });
  });
  $(document).ready (function() {
   $(".tombol1").click (function() {
    $("#callback").show (1000,tampilkanAlert);
   });
  });
   function tampilkanAlert () {
   alert ("Sekarang Paragraph Telah Muncul");
  }
 </script>
 </head>
 <body>
  <h1>Hello JQuery</h1>
  <p><a href="#" class="show">show</a>
  <a href="#" class="hide">hide</a></p>
  <p class="jquery" style="display:none">Semboyan JQuery adalah "Write Less Do More"
  dengan kata lain, kesederhanaan penulisan code, tetapi menghasilkan tampilan lebih.
  </p>
  <p id="callback" style="display:none">Ini adalah paragraph tersembunyi.</p>
  <button class="tombol1">show</button>
 </body>
</html>

The result:

https://youtu.be/9EWDKw4I2vg


Post a Comment

Previous Next

نموذج الاتصال