infopediya
jquery-by-infopediya.com

JQuery Selectors Syntax and CDN | Getting Started

A simple and short description of JQuery syntax and JQuery Selectors.

Getting Started With JQuery.

Simple description to learn JQuery Selectors , Syntax and CDN.

JQuery needs CDN to work in any web page. You can download and include a copy of library in your projects locally or you can use online link to include it.

Without CDN the syntax of JQuery will not work.

What is CDN?

CDN stands for “content delivery network”. It is a geographically distributed high available servers. Which provide faster data. The goal is high availability and high performance.

In simple words the copy of jQuery is available via these servers. And you can use it in your projects using link attribute to provide best performance to end users. It will load faster according to their location.

JQuery CDN: Go to JQuery CDN Page. Or use the given below.

CDN From JQuery Official Site.

<script src="https://code.jquery.com/jquery-3.4.1.js" ></script>

Google.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Microsoft.

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

Tip: It is best practice to download the CDN if you are working on localhost. It will work even if you aren’t online.

JQuery Syntax.

JQuery Syntax is suitable to select HTML elements and perform action on them.

The syntax of JQuery Code is : $(selector).action()

  • $ :  shorthand for jQuery(). It is sign and used to accass the JQuery.
  • (selector) : used to find (traverse) HTML elements. Selectors are HTML tags, #id or .class here.
  • .action() : used to perform any action.

For example : $("p").hide() This will hides all the <p> (paragraph) elements.

The Document Ready Event – Code Example

It is good practice to load the document (content) in a web page and makes it ready for working with. This event prevent JQuery to run before the document loading.

$(document).ready(function(){

// write jQuery code here...

})

The JQuery Selectors.

The selectors in JQuery starts with dollar sign $() or jQuery().

They are very useful to select any element and manipulate or handle it.

we can select any element by element name, #id or .class.

The Element Selector

The element selector in jQuery selects HTML element by element name.

For example select all <p> elements , write $('p')

By adding an action, it then will looks like this.

$(document).ready(function(){ //wait until document fully load.

$("button").click(function(){ // Button click event

$("p").hide(); // action (hide) on <p> element

});

});

The #id Selector

The #id selector is used when we need to access single element. because the id is unique in a web-pages.

You should assign unique id to HTML tags while creating web pages.

To find unique /single element by id selector use hash character followed by id of HTML tag.

For example $("#nav-menu")

similarly use any jQuery action method to manipulate it.

The .class Selector

The class selector is used to find all the HTML elements with the specified class name.

The class selector should start with a dot ( . ) followed by the name of class. The browser will find and select all tags containing that class name.

For example: $(".class_name") .

When user click on a button then the elements with class = "infopediya" will hide.

$(document).ready(function(){

$("button").click(function(){

$(".infopediya").hide();

}); });

Add comment

Highlight option

Turn on the "highlight" option for any widget, to get an alternative styling like this. You can change the colors for highlighted widgets in the theme options. See more examples below.

Your Header Sidebar area is currently empty. Hurry up and add some widgets.