Get element (

input[type=text]

,

select

) value jQuery

let value = $("#element_id").val();

JS

let value = document.getElementById('element_id').value;'

Set value

5

to the specified element (

input[type=text]

,

select

) value jQuery

$("#element_id").val(5);

JS

let value = document.getElementById('element_id').value = 5;'

Check if the specified checkbox is checked jQuery

let is_checked = $("#element_id").is(":checked");

JS

let is_checked = document.getElementById('element_id').checked

Get HTML content of the specified element by element id jQuery

let content = $("#element_id").html();

JS

let content = 
 document.getElementById('element_id').innerHTML

Set HTML content to the specified element by element id jQuery

$("#element_id").html('some html');

JS

document.getElementById('element_id').innerHTML = 'some html'

Get attribute

placeholder

value of the element jQuery

$('#element_id').attr('placeholder');

JS

document.getElementById('element_id').getAttribute('placeholder');

Set attribute

placeholder

value to the specified element jQuery

$('#element_id').attr('placeholder', 'new placeholder');

JS

document.getElementById('element_id').placeholder = 'new placeholder';

Toggle class for an element jQuery

$("#element_id").toggle();

JS

document.getElementById('element_id').classList.toggle("hide");

CSS class

.hide {
	display: none !important;
}

Get selected

radio

value jQuery

let result = jQuery('input:radio[name=vote]:checked').val();

JS

let result = document.querySelector('input[name=vote]:checked').value;

Find

i

element inside another element with id

element_id

jQuery

let icon = $("#element_id").find('i');

JS

document.getElementById('element_id').querySelector('i');

Get

data-value

attribute of

datalist

element using selected text (datalist option's

value

attribute) jQuery

$('#datalist_id [value="selected text"]').data('value');

JS

document.querySelector('#datalist_id option[value="selected text"]').getAttribute('data-value')

Toggle two class for an element jQuery

let el = $('#element')
if(el.hasClass('arrow-down')) {
    el.removeClass('arrow-down');
    el.addClass('arrow-up');
} else {
    el.addClass('arrow-down');
    el.removeClass('arrow-up');
}

JS

let el = document.getElementById('element')
if (el.classList.contains('arrow-up')) {
    el.classList.remove('arrow-up');
    el.classList.add('arrow-down');
} else {
    el.classList.add('arrow-up');
    el.classList.remove('arrow-down');
}

Ajax request jQuery

$.ajax({
    url:'demo_get.asp',
    success:function(sms){
        $('#demo').html(sms);                        
    }
});

JS

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML = this.responseText;
    }
};
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

MouseOver event jQuery

$('#element').on('mouseover', function(){
    console.log('mouse over');
});

JS

document.getElementById('element').addEventListener('mouseover', function(){
    console.log('mouse over');
});

Scroll animation down to the specified element's position in 500 ms jQuery

$('html, body').animate({scrollTop:($('#element').position().top)}, 400);

JS

function scrollDownToElement(el) {

    // Milliseconds per move 
    let pm = 50;

    // Padding from top
    let mft = 150;

    // Total animation milliseconds
    let scroll_ms = 500;

    // Calculates target element top position
    let bd_pos = document.body.getBoundingClientRect();
    let el_pos = document.getElementById(el).getBoundingClientRect();
    let height = el_pos.top-bd_pos.top-mft;

    // Calculates per move px
    let spm = height / (scroll_ms / pm);

    // The animation counter to stop
    let spmc = 1;
    let scroll_timer = setInterval(function() {

        // Moves down by {spm} px
        window.scrollBy(0, spm);
        spmc++;

        // Stops the animation after enough iterations
        if (spmc > (scroll_ms / pm)) {
            clearInterval(scroll_timer);
        }
    }, pm);
}
scrollDownToElement('element');