JQuery : Basics

This post covers some basic JQuery. JQuery is a Javascript library which is actually a large single.js file that has many prebuilt methods and objects that can simplify your workflow, specifically interaction with DOM and making HTTP requests (AJAX). We can understand this with a simple example as shown below..

Let us make a Javascript and equivalent JQuery call to select all div’s in a web page.

// Javascript
var divs = document.querySelectorAll('div');

var divs = $('div')

Now let edit style in both in an element el.

$(el).css('border-width', '20px')

el.style.borderWidth = '20px'



newCss = {'color' : 'blue', 'background' : 'green', 'border' : '2px solid red'}

listItems = $("li")
listItems.css('color', 'blue')
listItems.eq(1).css('color', 'red')

Now let us change text and html using JQuery

"This is to learn Jquery in console."
$("h2").text("New Text from JQuery")

"New Text from JQuery"
$("h2").html("<em>New Text from JQ html </em>")

Now let us change some attributes using JQuery.




Events in JQuery

    $(this).text("Changed h1")

    $(this).text("First Li clicked !")

$('h2').on('click', function(){

Coding is fun enjoy…