Home > Developer > JavaScript
In jQuery, on a page, select the set returned by the element as the jQuery object rather than the original DOM object. therefore, you can only run the jQuery method. to run DOM methods and attributes on the selection set, the set must be converted to a DOM object.
For example, you cannot use it like this:
$ ('Div '). innerHTML = "hello world ";
Because innerHTML is a DOM attribute rather than a jQuery object attribute. If you really want to do so, you need to convert the jQuery object to a DOM object. There are two methods.
① JQuery provides a core method of get (), so the above method can be written as $ ('div '). get (). innerHTML = "hello world ";
Of course, there is only one div in the page. If there are multiple Divs.
In this case, you need to modify the code and select it by passing it to the index value such as get (index.
$ ("Div"). get (0). innerHTML = "hello world ";
Of course, you can use the $. each loop that comes with jQuery to perform all the value assignment operations.
$ Div1 = $ ("div"). get ();
Copy codeThe Code is as follows:
<Span style = "font-size: 18px;"> $. each ($ div1, function (index, val ){
Val. innerHTML = 'lc '+ index;
}); </Span>
② We can use [] to obtain the content in the form of arrays.
For example, $ ('div ') [0]. innerHTML = "hello world ";
Let's take a complete example.
Copy codeThe Code is as follows:
<Span style = "font-size: 18px;"> <Head>
<Title> </title>
</Head>
<Body>
<H3> Books <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>
The following describes how to convert a DOM object to a jQuery object.
Here I use this example.
Copy codeThe Code is as follows:
<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 the process of converting our DOM object to jQuery object.
Note: in fact, it refers to our a link object. it is a common DOM object. we pass this in The onclick event.
Then we encapsulate the DOM object with $ () before using the addClass function.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
