QUIZGUM

Coding Class

Quizgum : empty and value

empty()

empty() provides the ability to completely empty the contents of an element.

HTML

  1. <div class="hello">hello world</div>

empty() will remove the hello world from the html source above

jQuery

  1. $('.hello').empty();

If you execute the above function, the hello world of class hello will disappear.

Example

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>quizgum :: jQuery Course</title>
  6. <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
  7. <script type="text/javascript">
  8. $(function(){
  9.     $('.hello').empty();
  10. });
  11. </script>
  12. <style>
  13. </style>
  14. </head>
  15. <body>
  16. <div class="hello">hello world</div>
  17. </body>
  18. </html>

remove()

The above empty() provided only the function of emptying. In other words, the div tag remains and the content disappears?

Remove() removes the div tag from the html source above.

  1. <div class="hello">hello world</div>

Remove() removes the div tag from the html source above.

CSS

  1. .hello{border:3px solid yellow}

I apply css to show that the tag itself is gone.

jQuery

  1. $('.hello').remove();

Example

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>quizgum :: jQuery Course</title>
  6. <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
  7. <script type="text/javascript">
  8. $(function(){
  9.     $('.hello').remove();
  10. });
  11. </script>
  12. <style>
  13. .hello{border:3px solid yellow}
  14. </style>
  15. </head>
  16. <body>
  17. <div class="hello">hello world</div>
  18. </body>
  19. </html>

val()

val() provides the ability to change the field value of text.

Input your name in the text box above can be changed with val().

HTML

  1. <input type="text" class="text1" value="quizgum" />

jQuery

  1. $('.text1').val('tomodevel');

If you apply jQuery above, value is changed as below.

Check out the examples and practice.

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>quizgum :: jQuery Course</title>
  6. <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
  7. <script type="text/javascript">
  8. $(function(){
  9.     $('.text1').val('tomodevel');
  10. });
  11. </script>
  12. <style>
  13. </style>
  14. </head>
  15. <body>
  16. <input type="text" class="text1" value="quizgum" />
  17. </body>
  18. </html>

After finishing this course, we will learn about focus() and blur().