Please note, this is a STATIC archive of website www.tutorialspoint.com from 11 May 2019, cach3.com does not collect or store any user information, there is no "phishing" involved.
Tutorialspoint
Home
Q/A
Tools
Coding Ground
Current Affairs
UPSC Notes
Online Tutors
Code Examples
Whiteboard
Net Meeting
Articles
Library
Videos
eBooks

Online jQuery Editor

jquery 

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("em").addClass("selected");
   $("#myid").addClass("highlight");
   $("div").addClass("selected");
   $("#mybtn").addClass("push");
   $("#mybtn").click(function(){
      alert("clicked push button");
   });
   $("div").removeClass("selected");
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
.push{
    margin-top:20px;
    background:gray;
    font-size:12px;
    color:black;
}
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
<div>This is third</div>
<button id="mybtn">push</button>
</body>
</html>

Call a jQuery Library Function

jquery 

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(myFunction() {
            $("div").click(myFunction() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Online jQuery Editor

jquery 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Holiday Destinations</title>
    <style>
        #wrapper { margin: auto; width: 50%; border: 2px solid rgb(138, 43, 226);
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            background-color: rgb(247, 247, 247); color: rgb(138, 43, 226); }        
        #input, #summaryBox { margin: auto; width: 90%; }        
        .custom-select, .button {font-family: Verdana, Geneva, Tahoma, sans-serif;}        
        .button { cursor: pointer; background-color: white; }        
        .summary { width: 40px; }        
        .inputData { width: 70px; }        
        h1, h3 { text-align: center; }        
        table { margin: 0 auto; width: 75%; }        
        table, th, td { border: 1px solid rgb(138, 43, 226); }        
        input, .custom-select, .button { border: 1px solid rgb(138, 43, 226);
            color: rgb(138, 43, 226); padding: 5px 15px; }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    
</head>
<body>
    <div id="wrapper">
        <h1>Holiday Destinations</h1>
        <div id="input">
            <label>City:</label> <input class="inputData" type="text">
            <label>Country:</label> <input class="inputData" type="text">
            <label>Season:</label>
            <select id="seasons" class="custom-select">
                    <option value="summer">Summer</option>
                    <option value="autumn">Autumn</option>
                    <option value="winter">Winter</option>
                    <option value="spring">Spring</option>
            </select>
            <button class="button" onclick="addDestination()">Add Destination</button>
        </div> <br>        
        <table id="destinations">
            <thead>
                <tr>
                    <th>Destination</th>
                    <th>Season</th>
                </tr>
            </thead>
            <tbody id="destinationsList"></tbody>
        </table>
        <br>
        <h3>Destinations for 2018:</h3>
        <div id="summaryBox">
            <label>Summer:</label><input class="summary" id="summer" type="number"         value="0" readonly>
            <label>Autumn:</label><input class="summary" id="autumn" type="number"      value="0" readonly>
            <label>Winter:</label><input class="summary" id="winter" type="number"    value="0" readonly>
            <label>Spring:</label><input class="summary" id="spring" type="number"   value="0" readonly>
        </div>
        <br>
    </div>
    <script>
    addDestination(){
        let cityC = $(".inputData").val();
        $('#destinationsList').append("<tr><td>text</td><td>more data</td></tr>");
        
       
        let season = $('#seasons option:selected').text();
        
    }
    </script>
</body>
</html>

Online jQuery Editor

jquery 

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("em").addClass("selected");
   $("#myid").addClass("highlight");
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
<p>1231</p>
</body>
</html>

ttest

jquery 

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("em").addClass("selected");
   $("#myid").addClass("highlight");
   var $isSending = false;
   $('#dummy-form-submit').on('click', function(e) {
       e.preventDefault();
       
       if (!$isSending) {
           $('#dummy-form').submit();
           $isSending = true;
       } else {
           return false;
       }
   });
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
<form action="https://google.com" id="dummy-form" method="post">
    <button type="submit" id="dummy-form-submit">OK</button>
</form>
</body>
</html>

Online jQuery Editor

jquery 

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello Jaydip</h1>
   </body>
</html>

aaaa

jquery 

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $(":input[type='number']").bind('keyup mouseup', function () {
            
            val = $(this).val()
            if (val = ''){
                alert(val);
            }
    });
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>

<input step="0.1" data-id="134" data-type="1" name="1541445979-1-1[8][value]" value="123" validationvalue="1" class="medium" type="number"><br><br>
<input step="0.1" data-id="134" data-type="1" name="1541445978-1-1[8][value]" value="123" validationvalue="1" class="medium" type="number"><br><br>
<input step="0.1" data-id="134" data-type="1" name="1541445977-1-1[8][value]" value="123" validationvalue="1" class="medium" type="number"><br><br>




</body>
</html>

mouseout, mouseenter, mouseover, mouseleave

jquery 

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    /*
    mouseover & mouseout
        This works for first Name
    $("#imgFrst").mouseover(function(){
        $("#divFrst").fadeIn(500);
    }).mouseout(function(){
        $("#divFrst").fadeOut(500);
    });
    
    */
    
    /*
    //for all - even we can use mouseenter & mouseleave
    $("img[src='index.jpg']").mouseover(function(){
        $("#" + getDv(this)).fadeIn(500);
    }).mouseout(function(){
        
        $("#" + getDv(this)).fadeOut(500);
    });
    
    */
    //hover() which has 2 parameters
    $("img[src='index.jpg']").hover(function(){
        $("#" + getDv(this)).fadeIn(500);
    }, function(){
        $("#" + getDv(this)).fadeOut(500);
    });
    
    function getDv(helpIcon)
    {
        var helpIconId = $(helpIcon).attr('id');
        return helpIconId.replace("img","div");
    }
});

</script>

</head>
<body>
    <table>
        <tr>
            <td>First Name : <input type="text"/></td>
            <td><img src="index.jpg" id="imgFrst" title="img"/></td>
            <td><div id="divFrst" style="display:none;">Add First Name </div></td>
        </tr>   
        <tr>
            <td>Last Name : <input type="text"/></td>
            <td><img src="index.jpg" id="imgLast" title="img"/></td>
            <td><div id="divLast" style="display:none;">Add Last Name </div></td>
        </tr>
        <tr>
            <td>City : <input type="text"/></td>
            <td><img src="index.jpg" id="imgCity" title="img"/></td>
            <td><div id="divCity" style="display:none;">Add City </div></td>
        </tr>
        <tr>    
            <td>Address : <input type="text"/></td>
            <td><img src="index.jpg" id="imgAddr" title="img"/></td>
            <td><div id="divAddr" style="display:none;">Add Address</div></td>
        </tr>    
    </table>
</body>
</html>

Diff btw $.each() & $.map()

jquery 

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    //Diff btw $.each & $.map
    var intArr = [1,2,3,4,5];
    var result1 = "", result2 = "";
    
    function functionA(index,element)
    {
        return element * 5;
    }
    
    function functionB(element,index)
    {
        return element * 5;
    }
    
    result1 = $.each(intArr, functionA);//1.returns Original array
    result2 = $.map(intArr, functionB);//1.returns new array
    
    document.write("each Result :"+result1);
    document.write("<br>");
    document.write("map Result :"+result2);
    document.write("<br>");
    document.write("$.each - ");
    $.each(intArr, function(index, element){ 
        //2.parameter of each index, element
        if( element == 3 )
            return false;//3.return false terminates the loop in each
            
        document.write(element + ",");
    });
    
    document.write("<br>");
    document.write("$.map - ");
    
    $.map(intArr, function(element,index){
         //2.parameter of map element,index
        if( element == 3 )
            return false;//3.return false won't terminate the loop in map
            
        document.write(element + ",");
    });
});

</script>
</head>
<body>
    
</body>
</html>

wrap, unwrap, wrapInner, wrapAll

jquery 

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("div").wrap('<div class="ContainerDiv"></div>');
    $("p").wrapInner('<div class="ContainerDiv"></div>');
    //$("div").unwrap('<div class="ContainerDiv"></div>');
    $("p").wrapAll('<div class="ContainerDiv"></div>');
});

</script>
<style>
.ContainerDiv { 
    color:red; 
    background:yellow; 
    font-weight:bold;
    margin:3px;
}
</style>
</head>
<body>
    <h2>Demo - Wrap</h2>
    <div>
        Div 1
    </div>
    <div>
        Div 2
    </div>
    <div>
        Div 3
    </div>
    <h2>Demo - WrapAll</h2>
    <p>Para 1</p>
    <p>Para 2</p>
    <p>Para 3</p>
</body>
</html>

Previous 1 ... 10 11 12 13 14 15 16 ... 120 Next
Advertisements
Loading...
img img img img img img

Follow

© Copyright 2019. All Rights Reserved.

Newsletter

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.