Oston Code Cypher - jquery Dom

jQuery Tutorial (for Beginners)

Hello everyone welcome to an Introduction to Jquery.This video is intended for anyone who's interested in learning about web design and front end web development.Perhaps you're already familiar with HTML and CSS but it feels like there's something missing from your pages and applications.You're absolutely correct,What's missing is Javascript(Jquery).

jQuery contains powerful methods for changing and manipulating HTML elements and attributes.

In this video we are going to learn the role the Javascript it plays in front end web development and will also take a look at how to write our own code using jquery to add Javascript functionality to our pages so let's dive right in.

Create a folder and add 3 files inside.Namely;

index.html
style.css
custom.js

Download jquery and add it inside the previous folder you created. Now your new directory structure should look like this;

index.html
style.css
custom.js
jquery-3.3.1.min.js(Versions keep on changing)

Step one:

Set up the markup of the page in the index.html file, link the external files that is to say style.css, jquery-3.3.1.min.js and custom.js in the head section and right before the closing body tag respectively as u see in the code snipet below.

copy

        
<!DOCTYPE html>
   <html>
      <head>
  <title>JQuery Tutorial</title>
  
  <!-- linked css file -->
  <link rel="stylesheet" href="style.css">
      </head>
    <body>
    <div class="container">
  
    <div class="msg-box">
         <p>Oston Code Cypher a web developers site. </p>
   </div>

    <div class="msg-box">
        <p>Learn - HTML.</p>
    </div>

    <div class="msg-box">
        <p>Learn - CSS.</p>
    </div>

     <div class="msg-box">
         <p>Learn - JavaScript.</p>
     </div>
    
    </div>
    <!--link js files -->
    <script src="jquery-3.3.1.min.js"></script>
    <script src="custom.js"></script>
   </body>
   </html>

Step two:

Add the following code in the style.css file

copy

              
       .container{
          width:60%;
          margin:0 auto;
          
        }
        
        .msg-box{
          background-color:#333;
          padding:10px;
          color:#fff;
          position: relative;
          margin:3px;
        }
        
        .delete{
          background-color: #f00;
          padding:5px;
          position: absolute;
          bottom:0;
          right:0;
        }
        
        .delete:hover{
          cursor: pointer;
        }

Step three:

Add the following code in the custom.js file

copy

            
    $(document).ready(function(){
         //DOM Manipulation
        $(".msg-box").append(' <span class="delete">x </span>');
              
            //Event Handling
         $(".delete").click(function(){
              
            //DOM Traversal
            $(this).parents(".msg-box").fadeOut();
              
          });
            
     });

To download the complete source code: Click here

Search it,Get it