Tag Archives: jquery training course

JavaScript get current url


JavaScript get current url- Working with JavaScript we sometimes need to get current url of the address. There are several ways to get the current url of the web page. It can be useful when you are working with javascript and need to redirect on current url or want to perform some other action with url. Here in this tutorial we are going to explain the ways how we can get the current url with several example which might be helpful for us. Let us go with very basic examples which will make the things clear to understand.


JavaScript get current url

You can get the current url simply in javascript as –

JavaScript get current url :

  

The above example will give you the full url with query strings.

More About Current Url In JavaScript

Let us have more information about the current url in javascript-

JavaScript get current url parameters

Some times we only need the url parameters in javascript.

JavaScript get current url parameters:

  

In the above example we have created a function which accepts parameter name from query string and will give you its value if it is found.

Javascript Current url protocal name

If you want to get the protocal you can use the below method to get the protocal from url in javascript.

JavaScript get query strings from url:

  

location.protocal gives the protocal name from the current url example - http::, https::.The above example will give the protocal name from url.

Javascript Current url hostname

If you want to get the hostname only you can use the below method to get the hostname from url in javascript.

JavaScript get query strings from url:

  

The above example will give the hostname from url. location.hostname is used to get the hostname from the current url in javascript.

JavaScript get current url without parameters

Some times we only need the url without parameters in javascript. Here is simple example to get the current url without parameters-

JavaScript get current url without parameters:

  

In the above example will give you the current url without parameters.

JavaScript get query strings from url

If you want to get the query strings only you can get as below -

JavaScript get query strings from url:

  

The above example will give the query string from url. location.pathname will give you the query string from the current url in javascript.

JavaScript get current url

jQuery get selected option value


jQuery get selected option value: You can get selected option value of html select box as below.


Syntax : jQuery get selected option value

Syntax to get selected option value of dropdown menu can be as :
Suppose we have following drop down list




You can get selected value in jquery as :


$("#demo").change(function () {
$("#demo :selected").attr('value');

});

Try it »

jQuery outerHeight Method


jQuery outerHeight Method : is used to get the height of selected element including the padding and border. OuterHeight method returns total height of the container. Here is syntax and example with complete demo of
jQuery OuterHeight() method.


jQuery outerHeight Method Syntax

Here is syntax for outer Height-

$(selector).outerHeight();

jQuery outerHeight Method Example

Below is example which is showing outerHeight with Example and demo –

  

Try it »

The above example will produce the following result –

jQuery outerHeight Method

jQuery css Method


jQuery css Method : is used to add the css styles to the selected elements.


Syntax 1

$(selector).css(propertyName);

propertyName(String): Css Style to be added.

jQuery css() Method Example 1

  

Try it »

Syntax 2 for jQuery css Method

$(selector).css(propertyNames);

propertyNames (Array): List of styles in form of array.
Example : {‘background’:’yellow’,’font-size’:’24px’,’border’:’2px solid red’}

jQuery css() Method Example 2

  

Try it »

jQuery replaceAll Method


jQuery replaceAll Method : is used to replace the selected element with another element. It replaces in all matching selector element with the given content.
We are going to explain this method with example and demo.


jQuery replaceAll Method Syntax

Syntax for replaceAll method –

$(content).replaceAll(selector);

jQuery replaceAll Method Example

Here is an example of replaceAll method Click on Try it button to see the output-

jQuery replaceAll() Method – Example

  

Try it »

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

jQuery replaceAll Method Example

jQuery wrap Method


jQuery wrap method : is used to cover the selected element with another element.


Syntax

$(selector).wrap(element);

jQuery wrap Method Example

jQuery wrap() Method – Example

  

Try it »

jQuery insertAfter Method


jQuery insertAfter method : This is used to insert new html element(content) After the specified element. If You want to add some content after a specified element use the jQuery insertAfter Method. The $(content).insertAfter(selector) is used to select and insert content.


Syntax for jQuery insertAfter

Here is syntax to add content(insertAfter) after selected element using jQuery-

$(content).insertAfter(selector);

jQuery insertAfter Method

jQuery insertAfter() Method – Example –

  

Try it »

The above code will produce following result-

Note : This is screenshot of the output. To run this demo click on the above “Try it” button.

jQuery insertAfter Method

jQuery text method


jQuery text method : is used to read or write the text in the html.


Syntax of jQuery text() method

Get Text

$(selector).text();

Note : It does not accepts any argument.

jQuery text Method with syntax

jQuery text() Method – Example 1 – Get The Text

  

Try it »

Set Text

$(selector).text(text);

text: String,Number or Boolean to be set as content.

jQuery text Method with syntax

jQuery text() Method – Example 2 – Set The Text

  

Try it »

jQuery has Method Example


jQuery “has() Method ” is used to select all elements which have descendants that matches the selector element.


Syntax : jQuery has() method

$(selector).has(element);

element : Required , is used to match the elements against.

jQuery has Method Example

jQuery has() Method Example with syntax

  

Try it »