Miscellaneous jQuery functions

Here are a few more jQuery functions.

noConflict()

Different scripts cannot work at the same time. Hence, in order to remove the conflicts, we use the noConflict() function.

Its syntax is as follows:

$.noConflict()

Parameters

An optional parameter for this method is removeAll. This parameter is used to release the control over all jQuery variables. It's a Boolean value. If present, it indicates that the control over all values must be released.

Returns

This method does not return anything.

Description

The $ symbol is used by various JavaScript libraries, which if used alongside jQuery may cause issues. The noConflict() function returns the control of the $ symbol to the other library.

The following code shows how one event has to wait when the other event is in process:

$.noConflict();
jQuery(document).ready(function() {
  jQuery("button").click(function() {
    jQuery("p").text("jQuery is still working!");
  });
});

param()

The param() method is used to create a serialized representation of an object.

Its syntax is as follows:

$.param(object)

Parameters

Object and trad are the parameters used in this function. Trad is an optional parameter and is used when a traditional param serialization is needed. This parameter is optional.

Returns

This returns a serialized representation of the object.

Description

The param() method is used to generate a serialized representation of an object or an array. This is mostly used where a query string is to be generated. The following example creates a query string for the student object:

$(document).ready(function() {
  StudentObj = new Object();
  StudentObj.name = "Kate";
  StudentObj.age = 21;
  StudentObj.class = "Micro-Processors";
  $("button").click(function() {
    $("div").text($.param(StudentObj));
  });
});

index()

The index() method is used to find out the position of an element.

Its syntax is as follows:

$(selector).index()

Parameters

The element whose position is to be found is taken as a parameter.

Returns

This method returns the index position of the first occurrence of the specified element, which is relative to the selector or specified element.

Description

The index() method is used to get the position of the element that is passed as a parameter. The first occurrence of that element is searched for and its position is returned. If the particular element is not found, then -1 is returned. The position numbering begins at 0.

The following example finds the position of the div element and returns its index in an alert box:

$(document).ready(myfunction() {
  $("div").click(myfunction() {
    alert($(this).index());
  });
});

each()

The each() function is used to run a specific function for every element that matches the criteria.

Its syntax is as follows:

$(selector).each(function(index,element))

Parameters

The only parameter this takes is the function(index, element). Here the position of the selector can be specified at index and the element can be specified in element.

Returns

This method does not return anything.

Description

The each() function runs the specified function for each and every element that matches the criteria. In the following example, an alert is created every time the <div> tag is encountered:

$(document).ready(function() {
  $("button").click(function() {
    $("div").each(function() {
      alert($(this).text())
    });
  });
});

data()

The data() method is used to obtain data from the selected element. It is also used to submit data to the selected element.

Its syntax is as follows: $(selector).data(name)

Parameters

$(selector).data(name,value);

To attach data to element, parameters passed are name and value. that name is then used to retrieve the data value.

Returns

This returns data from the selected element.

Description

The data() function is used to attach data to or from an element. In the following example, we first attach the data to the <div> element:

$(document).ready(function() {
  $("#btnAttach").click(function() {
    $("div").data("greetingmsg", "Welcome To Alpha Zoo");
  });
  $("#btnGetAttached").click(function() {
    alert($("div").data("greetingmsg"));
  });
});

removeData()

The removeData() method is used to remove data that was previously attached to the element with the data() method.

Its syntax is $(selector).removeData(name).

Parameters

The name of the data that is to be removed is taken as a parameter.

Returns

This does not return anything.

Description

As the name suggests, the removeData() method is used to remove data that was already set. The following example removes data that was set on the <div> tag:

$("#btnRemoveData").click(function() {
  $("div").removeData("greetingmsg");
  alert("Message from the site" + $("div").data("greetingmsg"));
});
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.16.212.217