Detailed explanation of jQuery object and DOM object conversion method_jquery

this article analyzes the conversion method between jquery objects and dom objects with examples. share it with everyone for your reference, the details are as follows:

convert jquery object to dom object

only jquery objects can call various functions of the jquery class library. similarly, some properties and methods of dom objects cannot be called on jquery, but basically the functions provided by the jquery class library include all dom operations. sometimes, especially when you are new to jquery and cannot remember all the functions of jquery, you will use jquery selectors and original dom functions for development for a long time. therefore, the conversion of the two objects is necessary.

the index of the jquery object saves the dom object, so the jquery object can be converted into a dom object through the index (actually, the dom object saved in the jquery object is obtained).

$("#myphoto")[0];

after returning the dom object through the index, you can use various methods and attributes of the dom object, such as getting the src attribute of the dom object:

alert($("#myphoto")[0].src);

if you want to iterate through each element in a jquery object, you usually use the each() function.

echo(callback);

callback() is a callback function, and this in this function also points to the dom element.

$("#myphoto").each(function(i){
     this,src="test"+i+".jpg";
});

a little tip for lazy people, if you don’t want to remember whether this is a jquery object or this object in different jquery functions, you can use the "this" method to convert both into jquery objects, because even an object is already a jquery object you can't go wrong either.

convert dom object to jquery object

if you have already obtained a dom object, you can use the "jquery(elements)" function to convert it into a jquery object:

var img=document.getelementbyid("myphoto");
jquery(img).css("border","solid 2px #ff0000");

in the above code, img is the dom object obtained using dom. after converting it into a jquery object, you can use the css() method of the jquery object to change its style.

you can use "$" instead of "jquery" because jquery has the following implementation inside:

jquery=window.jquery=window.$

the "$" character can be used as a variable name in javascript and can appear as a prefix. but some other libraries or programs may already use "$" as variable names.

jQuery(img).css("border","solid 2px #FF0000");
$(img). css("border","solid 2px #FF0000");

the above two statements are equivalent.

the elements parameter of the "jquery(elements)" function can also be a jquery object. although it does not make sense to convert a jquery object this time, this is so that when it is not sure whether the type of an object is a jquery object or a dom object, it can be converted again call this function for conversion, which ensures that this object must be a jquery object.

readers who are interested in more jquery-related content can check out the special topics on this site: "summary of jquery's methods of operating dom nodes" "jquery common operation skills summary", "jquery summary of common event usage and techniques", "jquery operation json data summary", "jquery xml operation skills summary" and "jquery extension skills summary 》

i hope this article will be helpful to everyone in jquery programming.