jQuery check element visible Hidden – Basically Visibility of any element is controlled by css styles. You can also control the visibility of elements using JavaScript or jQuey. Here in this tutorial we are going to explain how you can check that element is visible or not. You can try this with our online editor which will run the example in real time.

jQuery check element visible Hidden Example : Check Visibility

It is very simple to check the visibility of an element. You can check that element is visible or hidden using the jQuery Below-

Check Element is Visible

Here is an example to check the visibility of element as below –

If you run the above example it will produce output something like this –

Check Element is Hidden

Here is an example to check if the element is hidden as below –

If you run the above example it will produce output something like this –

jQuery Detect Click Outside of Element – You can detect the outside click of element using pure JavaScript or JQuery. There are many ways to detect the click outside of an element. Here in this tutorial we are going to explain how you can detect the outside click using jQuery. We will explain this functionality with example and demo so that we can understand it easily.

jQuery Detect Click Outside of Element Example

Here we have created an example will detect the click outside of a div(element).

Using jQuery

You can detect the outside click using the jquery as below –

 	


Click OutSide
 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

If you run the above example it will produce output something like this –

Check Radio Button Using jQuery – There are many ways to check a radio button. Here in this tutorial we are going to explain how you can check radio button in jQuery. We Will Explain this with example and demo.

Check Radio Button Using jQuery Example

Checking radio button in jQuery is very simple. You can check radio button simply as below –

 	

    
        
        
         


Check Radio  

                                                                                                                                                      

The above example will select the radio button radio2 and set the property as checked. If you run the above example it will produce output something like this –

Change Button text in jQuery : You Can use jQuery .attr() method to change button text. You can change the button text label at run time using this method. Here in this tutorial we are going to explain how you can change the button text in jQuery. We will explain this with various examples and online demo.

Change Button text in jQuery

You can change the button text as below –

Example 1

Example 2

If you are using button tag in this style –

Add

If you run above example it will produce output something like this –

Animate background color in jQuery: There are many ways to animate the background color. You can also use css to animate the background color. Here in this tutorial we are going to explain how you can animate the background color using jQuery. We will create demo to explain the background color animation in jQuery.

Animate background color in jQuery

Steps to animate background color in jQUery –

Include jQuery Color Library :

You can include it in two ways –

• 1 . Download from: https://code.jquery.com/color/
• 2 . Use CDN Version from :

Now you can use the color animation as below –

If you run the above example it will first change the body background color to the olive color and then it will change to the yellow background with slow speed. The above example will produce the output something like this –

jQuery Get Set Textarea text value : We can use $(selector).val() method to get and set the textarea value. Here in this tutorial we are going to explain both set and get the textarea text using jquery val method. We will also create demo for both set and get methods.

jQuery Get Set Textarea text value

You can get and set textarea value as below –

Get Textarea text

If you want to get the text of the textarea you can use the below method –

If you run the above example it will give you the content of the textarea.

Set Textarea text

If you want to set the text of the textarea you can set text value as following –

If you run the above example it will set the given content in the textarea. The output of the above example will be something like this-

jQuery Change Image Source Url : Sometimes we need to change the image source url dynamically using jQuery or javascript. You can use jquery attribute method ie. .attr() to replace the image source url. Here in this tutorial we are going to explain how you can change the image source url using the jQuery.

jQuery Change Image Source Url

You can replace the image source url simply using the jQuery –

Syntax

$(selector).attr("src", newUrl);

You can use the above method to change image source url in jQuery. Add the image selector and provide the newUrl you want to change.

Example

Here is an example to change the image source url. You can replace the source url with new image source as below –

Change Image Url

In the above example we have created a function which contains the script to change the image source. changeImageUrl() function is called on button click which will change the image source of image with id selector id=”myImage”.

Scroll to the top of page using jQuery JavaScript – There are many ways to scroll top of the screen. You can use javascript or jquery to scroll top of the page. Here in this tutorial we are going to explain how you can scroll to the top of page using javascript and jquery both. We will explain this example and demo.

Scroll to the top of page using jQuery JavaScript

You can scroll to the top using jquery or javascript both. Let us go one by one.

Using JavaScript :

Using JavaScript you can scroll top simply as –

If you run the above example it will produce the following output-

Using jQuery:

You can also scroll top using jQuery also –

If you run the above example it will produce the following output –

Access Iframe Content in jQuery JavaScript : We can access iframe content using jQuery, javascript. There are many ways to access iframe content. Here in this example we will explain how you can access the iframe content using jQuery or JavaScript. We will explain this with example and demo.

Access Iframe Content in jQuery JavaScript

You can access iframe content simply using the following javascript-

Iframe From Same Domain

If iframe is from same domain you can access content as below –

var iframeContent = document.getElementById('myIframe').contentWindow.document.body.innerHTML;

If you run the above example it will produce the following output-