How does jQuery transform the selected object into the original DOM object
- 2020-03-30 03:19:44
- OfStack
In jQuery, the collection returned by selecting an element on a page is a jQuery object, not the original DOM object
For example, you may not use:
$(' div '). InnerHTML = "hello world";
Because innerHTML is an attribute of the DOM and not of the jQuery object, if you really want to do this, you need to convert the jQuery object to a DOM object.
(1) jQuery provides a core method to get(), so the above can be written as $('div'). Get (). InnerHTML = "hello world";
Of course, this corresponds to only one div in the page, if there are more than one div.
So that's not a good way to do it, so you have to change your code to select by passing in an index value like get(index).
$(" div "). The get (0). The innerHTML = "hello world";
Of course, you can use jQuery's built-in $.each loop for all the assignments.
$div1 = $(" div "). The get ();
We can use [] to get the content in the form of an array.
$('div')[0]. InnerHTML = "hello world";
Let's look at a complete example.
Next, I'll add the process of converting a DOM object into a jQuery object.
I'm using this example here.
Here is how our DOM object is converted into a jQuery object.
Note: it actually refers to our "a" link object.
We then wrapped the DOM object with $() before we could use the addClass function.
For example, you may not use:
$(' div '). InnerHTML = "hello world";
Because innerHTML is an attribute of the DOM and not of the jQuery object, if you really want to do this, you need to convert the jQuery object to a DOM object.
(1) jQuery provides a core method to get(), so the above can be written as $('div'). Get (). InnerHTML = "hello world";
Of course, this corresponds to only one div in the page, if there are more than one div.
So that's not a good way to do it, so you have to change your code to select by passing in an index value like get(index).
$(" div "). The get (0). The innerHTML = "hello world";
Of course, you can use jQuery's built-in $.each loop for all the assignments.
$div1 = $(" div "). The get ();
<span style="font-size:18px;">$.each($div1, function(index, val) {
val.innerHTML = 'lc '+ index;
});</span>
We can use [] to get the content in the form of an array.
$('div')[0]. InnerHTML = "hello world";
Let's look at a complete example.
<span style="font-size:18px;"><html>
<head>
<title></title>
</head>
<body>
<h3>Books</h3>
<ol>
<li>Head First jQuery</li>
<li>Data Structrue and Algorithm with Javascript</li>
<li>Nodejs up and running</li>
<li>Node js with PHP expert</li>
<li>Sharp jQuery</li>
<li>Professional Javascript</li>
</ol>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var lis = $('ol li').get().reverse();
$ol = $('ol');
$ol1 = $ol.clone(false, false);
$ol1.empty();
$.each(lis, function(index, val) {
$ol1.append('<li>'+val.innerHTML+'</li>');
});
$ol1.appendTo('body');
});
</script>
</body>
</html>
</span>
Next, I'll add the process of converting a DOM object into a jQuery object.
I'm using this example here.
<html>
<head>
<title></title>
<style type="text/css">
.clicked{
width:100px;
height: 40px;
border: 1px solid #cba;
border-radius: 3px;
}
</style>
</head>
<body>
<a href="#" id="cli" onclick="click(this)">Click Me</a>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function click(it){
$(it).addClass('clicked');
console.log('yes');
}
</script>
</body>
</html>
Here is how our DOM object is converted into a jQuery object.
Note: it actually refers to our "a" link object.
We then wrapped the DOM object with $() before we could use the addClass function.