Tuesday, October 2, 2018

JQUERY2_Sample example

JQUERY2_Sample example





<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="libs/jquery-3.3.1.min.js"> </script>
<script>
//https://jquery.com/
    $(document).ready( function()
    {
        
        console.log("DOM is ready......");

className = $('#divId').attr('class'); //get property value

console.log("className : "+className);

$('#p-id').attr('title', 'Tooltip data...'); //add property

$('#clickB').click(function(){
$('#p-id').html("<div> New DOM Content...</div>"); //replace complete html conent of this component.
//$('#divId').addClass('important');
$('#divId').toggleClass('important');
});

listData = ['Python', 'Javascript', 'Android']; //this content can be pulled from REST
for(i=0; i< listData.length; i++){
$('ol').append('<li> '+listData[i]+'</li>')
}
    }
    
    );
    
        
</script>

<style>
    .normal {
        background-color: red;
    }
    
    .important{
        color: yellow;
        font-size: 30px;
        background-color: blue;
    }
</style>
</head>

<body>

<div id='divId' class="divClass">Oracle JET Training</div>

<p id="p-id"> Sample Data</p>

<button id="clickB">Add Div Tag</button>

<ol></ol>

</body>
</html>










No comments:

Post a Comment