5 Useful Basic jQuery Syntax

1) Hide/Show

This is used to hide or show html elements with no effects. Use this if you want to quickly hide or show some html elements.

Syntax: hide(), show()

EXAMPLE :


$(document).ready(function(){
	$(".btn1").click(function(){
		$("p").hide();
	});
	$(".btn2").click(function(){
		$("p").show();
	});
});

LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_show_hide

2) Fade in/Fade out

This involves of hiding and showing html elements using nice fading effects. It is well used when you want to show or hide a div and its content in a nice way.

Syntax: fadeIn(), fadeout()

EXAMPLE:


$(document).ready(function(){
	$(".btn1").click(function(){
		$("p").fadeOut()
	});
	$(".btn2").click(function(){
		$("p").fadeIn();
	});
});

LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein

3) Stop

If you want to stop currently running animations just use this.

Syntax: stop()

EXAMPLE:


$(document).ready(function(){
	$("#start").click(function(){
		$("div").animate({height:300},3000);
	});
	$("#stop").click(function(){
		$("div").stop();
	});
});

LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_stop

4) Animate

A nice syntax that makes changes to an element from one state to another with CSS styles. It just gradually changes the CSS property value, which will result to animation effects.

Syntax: animate()

EXAMPLE:


$(document).ready(function()
{
	$("#btn1").click(function(){
		$("#box").animate({height:"300px"});
	});
	$("#btn2").click(function(){
		$("#box").animate({height:"100px"});
	});
});

LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate

5) Slide Toggle

This syntax is greatly used in various websites that uses jQuery. Ideally it is just to hide and show an html element, but in a very nice sliding effect just like the left side bar menu in administrator area of a typical WordPress website.

Syntax: slideToggle()

EXAMPLE:


$(document).ready(function(){
	$("button").click(function(){
		$("p").slideToggle();
	});
});

LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_slidetoggle

Frequently Asked Questions (FAQs) about jQuery Syntax

What is the basic syntax of jQuery?

The basic syntax of jQuery is designed to select HTML elements and perform some action on the element(s). It is written as $(selector).action(). Here, the dollar sign ($) defines or accesses jQuery, the (selector) finds HTML elements, and the .action() is then performed on the element(s). For example, $(“p”).hide() – hides all paragraph elements.

How does the document ready event work in jQuery?

The document ready event is a crucial part of working with jQuery. It ensures that the JavaScript code doesn’t run until the document is fully loaded. This is important because if your jQuery code runs before the document is fully loaded, it may not work properly. The syntax for this is $(document).ready(function(){ // jQuery methods go here… });

What is the purpose of the $ sign in jQuery?

The $ sign is an alias for jQuery. It’s used to define or access jQuery. If you’re using another JavaScript library that uses the $ sign, you can use jQuery.noConflict() to avoid conflicts.

How do you select elements in jQuery?

jQuery provides a powerful way to select elements using the same syntax as CSS. You can select elements by tag name, class name, id, attributes, or their relative position in the HTML. For example, to select all paragraph elements, you would use $(“p”).

How do you perform actions on selected elements in jQuery?

Once you’ve selected elements, you can perform actions on them using jQuery methods. For example, you can use the .hide() method to hide selected elements, or the .show() method to display them. These methods are called on the selected elements, like so: $(“p”).hide().

Can you chain actions in jQuery?

Yes, one of the powerful features of jQuery is the ability to chain actions together. This means you can perform multiple actions on the same set of elements, all within a single statement. For example, $(“p”).css(“color”, “red”).slideUp(2000).

What are jQuery events and how are they used?

jQuery events are actions that can be detected by your application. These include user actions like clicks or key presses, or things like the document loading. You can respond to these events with functions, allowing you to create dynamic, interactive web applications.

How do you write comments in jQuery?

Comments in jQuery are written the same way as in JavaScript. You can use // for a single line comment, or /* */ for a multi-line comment. Comments are ignored by the browser and can be used to make notes or explain your code.

How do you include the jQuery library in your HTML?

To include the jQuery library in your HTML, you need to add a script tag pointing to the jQuery source file. This can be a local copy, or you can link to a version hosted on a CDN. The script tag should be placed in the head of your HTML, or right before the closing body tag.

What is the difference between jQuery and JavaScript?

jQuery is a library built with JavaScript. It provides a simpler, more user-friendly API for working with HTML documents, handling events, creating animations, and much more. While you can do all these things with plain JavaScript, jQuery makes it easier and works across a multitude of browsers.