6

jQuery and JavaScript Code Examples

 2 years ago
source link: https://www.laravelcode.com/post/jquery-and-javascript-code-examples
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

jQuery and JavaScript Code Examples

  358 views

  8 months ago

Javascript

In the previous article, we have discussed on what is Javascript and JQuery. We have also discussed on main differences between them. In this article we will go through code comparision between Javascript and JQuery with example.

JavaScript and jQuery code examples

Here is the bellow examples, so let's check bellow examples:

Writing Javascript and JQuery code in HTML document

Javascript is directly written between <script> tags. Javascript external file can also be included in HTML document.

<script src="path/to/external/javascript-file.js"></script>
<script>
    document.getElementById("myid").innerHTML = "Hello World";
</script>

JQuery code is dependant on JQuery library. So you have to include JQuery library file or CDN file before JQuery code in HTML document.

<head>
    <script src="jquery-3.5.0.min.js"></script>
</head>

HTML tag selection and manipulation

To select HTML tag in Javascript, use document.querySelector() method or other methods as per tag.

document.querySelector('#id');
document.getElementById('idname');

or select by class

document.getElementsByClassName('classname');

or select by element

document.getElementsByTagName('p');

In JQuery $ sign used with selector in bracket.

$(selector)
$('#idname')
$('.classname')
$('p')

Event handling

To handle event in Javascript, write addEventListener() method with event name.

document.getElementById('idname').addEventListener('click', function() {
    alert('Hello World');
});

In JQuery all event has defined method to handle.

$('.classname').click(function() {
   // here comes acion
});

or submit form

$('#idname').submit(function() {
   // here comes acion
});

or to use multiple event with on() method

$('#input').on ('click change', function() {
   // here comes acion
});

Change CSS property

To change the style of an HTML element in Javascript, use:

document.getElementById('idname').style.color = '#f2f2f2';

in JQuery, change CSS with css() method:

$('#idname').css('color', '#f2f2f2');

Changing or adding value of an Attribute

To change the value of HTML element attribute in Javascript, use:

document.getElementById('idname').href = "/new-url";

To change value in JQuery, use attr() method:

$('#idname').attr('href', '/new-url');

Create Ajax request

Creating Ajax request in Javascript with new XMLHttpRequest object and send request to server. There is open('methodType', 'URL', async) method with parameters and send() method with data creates Ajax request.

Create get method request:

var xhttp = new XMLHttpRequest();
xhttp.open('GET', 'request-url', true);
xhttp.send();

Or create post method request:

var xhttp = new XMLHttpRequest();
xhttp.open('POST', 'request-url', true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send('id=5&name=javascript');

To create Ajax request, there are many syntax in JQuery. Bellow are main methods which are widely used:

$.ajax({
    type: "post",
    url: 'request-url',
    data: data,
    success: function(response) {
        // what to do after ajax complete
    }
});

Or shorthand method:

$.get('request-url', function(response) {
    $('#result').html(response);
});

or more simply:

$('#result').load('request-url');

Create animation

Creating animation is also difficult and requires many lines of code. JavaScript use the setInterval(), clearInterval(), setTimeout() and clearTimeout() methods and CSS transform, translate or animate properties to create animation.

Here is the simple animation in Javascript:

setInterval(myAnimation, 5);
    function myAnimation(){
    document.getElementById ("#idname").style.transform=‘translate(100px, 100px)’;
    document.getElementById ("#idname").style.transform=‘rotate(30deg)’;
}

In JQuery there are several direct methods which are used to create fast and easy animation:

Css animation

$('#idname').animate({height: '100px'});

Hide/Show animation

$('.hide-class').hide();
$('show-class').show();

or toggle() to hide/show respectively.

$('show-class').toggle();

Create fade effect with fadeIn() or fadeOut() method:

$('#idname').fadeIn();
$('#idname').fadeOut();

There are many functions in JQuery to create animations. But it is also noted that Javascript can also work in graphic animations like on <canvas> tag while JQuery only works in HTML dom elements:

Which one you liked?

Javascipt is difficult compared to JQuery, so most of us use JQuery for most of work. While Javascript is language and has widly use with other technologies while Jquery is Javascript library for HTML dom manipulation. So it mostly used in web development.

In the conclusion, both have its own usage in software development. I hope you will like this article.

Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK