JQUERY Basics: October 2018

JQUERY3_AJAX_Call_Using_JQUERYLib

https://www.w3schools.com/jquery/

https://www.w3schools.com/jquery/jquery_ref_ajax.asp

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="libs/jquery-3.3.1.min.js"> </script>

<script>

    $(document).ready( function()

    {

        console.log("DOM is ready......");

        $('#clickB').click(function(){

            $.ajax({

                    url:"http://pavanjavacrack.blogspot.com/",

                    success: function(data){

                        $('#details').text(data);

                    }

                });

        });

    }

    );

</script>

</head>

<body>

<button id="clickB">AJAX Call</button>

<p id="details"></p>

</body>

</html>

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>

JQUERY Basics

Tuesday, October 2, 2018

JQUERY3_AJAX_Call_Using_JQUERYLib

JQUERY3_AJAX_Call_Using_JQUERYLib

JQUERY2_Sample example

JQUERY2_Sample example

JQUERY1_Introduction

JQUERY1_Introduction