I believe that most people come here to learn JavaScript mainly to use this combination of DOM elements in the page to make some practical and useful interactive effects. So I will only teach you the most practical and useful javascript applications here. But the premise is that you should have some basic programming foundations for JavaScript or jquery. I won't say much nonsense.
Today's first article will teach you how to use javascript to obtain the dom elements in the page. This is very important. I'll compare JQuery.
If the element in the page is an ID attribute
<div ></div>
JQ method: $("#dom"),
Native js method: var a = ("dom"); This a is equivalent to $("#dom");
If I want to get an element under the parent element
<div >
<span></span>
</div>
JQ method: $("#dom span"),
Native js method: var b = ("dom").getElementsByTagName("span")[0]; This b is equivalent to $("#dom span")
In fact, there is another simple method var b = ("dom").childNodes[0] But there will be problems under FF, we will discuss this later
Get a set of elements in the page
<div id = "dom">
<ul>
<li></li>
<li></li>
<li></li>
<ul>
</div>
JQ method: $("#dom ul li") or $("#dom li") or $("#dom > li"),
Native JS method: var c = ("dom").getElementsByTagName("li"); but this c is not the same as above, because it cannot be used directly like the above JQ. It requires a for loop to be used together. If you use a single use, for example, I only use the first li, just var c = ("dom").getElementsByTagName("li")[0], and the second one is var c = ("dom").getElementsByTagName("li")[1], and so on. Because DOM elements are stored in JS as arrays.
All the above are quite easy to understand. What I want to talk about now is something that everyone often uses. However, the most troublesome attribute to obtain in native JS is the class attribute.
<div class = "dom'>
</div>
JQ method: very simple $(".dom");
Native JS method: This is a bit troublesome, you need to write a function. Because native JS does not provide a method to directly obtain class. So we need this. I'll write the function first
function $class(domclass){
var odiv = ("*");
var a;
for(var i = 0;i<;i++){
if( ==domclass){
a = odiv
}
return a;
}
}
It is very simple to obtain using this function. Just var d = $class("dom");
Let me tell you what this function means.
var odiv = ("*");
This sentence means to get all DOM elements in the page
for(var i = 0;i<;i++){
if( ==domclass){
a = odiv
}
This is to iterate through all elements in the page and compare them with their class. If the parameter domclass we passed in is the same as the one we passed in, give this element to a;
return a; return a;
So using var d = $class("dom"); is equivalent to var d = a;
(By the way, className is a property of this JS, which is to get the class named by the DOM element)
OK, I'll post so much today. I think what I wrote is more general. Everyone must have many things they don’t understand, and ask directly if they don’t understand. I will explain one by one. You can also tell me what interaction effect you want to learn, and I will try my best to satisfy everyone
Today's first article will teach you how to use javascript to obtain the dom elements in the page. This is very important. I'll compare JQuery.
If the element in the page is an ID attribute
<div ></div>
JQ method: $("#dom"),
Native js method: var a = ("dom"); This a is equivalent to $("#dom");
If I want to get an element under the parent element
Copy the codeThe code is as follows:
<div >
<span></span>
</div>
JQ method: $("#dom span"),
Native js method: var b = ("dom").getElementsByTagName("span")[0]; This b is equivalent to $("#dom span")
In fact, there is another simple method var b = ("dom").childNodes[0] But there will be problems under FF, we will discuss this later
Get a set of elements in the page
Copy the codeThe code is as follows:
<div id = "dom">
<ul>
<li></li>
<li></li>
<li></li>
<ul>
</div>
JQ method: $("#dom ul li") or $("#dom li") or $("#dom > li"),
Native JS method: var c = ("dom").getElementsByTagName("li"); but this c is not the same as above, because it cannot be used directly like the above JQ. It requires a for loop to be used together. If you use a single use, for example, I only use the first li, just var c = ("dom").getElementsByTagName("li")[0], and the second one is var c = ("dom").getElementsByTagName("li")[1], and so on. Because DOM elements are stored in JS as arrays.
All the above are quite easy to understand. What I want to talk about now is something that everyone often uses. However, the most troublesome attribute to obtain in native JS is the class attribute.
<div class = "dom'>
</div>
JQ method: very simple $(".dom");
Native JS method: This is a bit troublesome, you need to write a function. Because native JS does not provide a method to directly obtain class. So we need this. I'll write the function first
Copy the codeThe code is as follows:
function $class(domclass){
var odiv = ("*");
var a;
for(var i = 0;i<;i++){
if( ==domclass){
a = odiv
}
return a;
}
}
It is very simple to obtain using this function. Just var d = $class("dom");
Let me tell you what this function means.
var odiv = ("*");
This sentence means to get all DOM elements in the page
Copy the codeThe code is as follows:
for(var i = 0;i<;i++){
if( ==domclass){
a = odiv
}
This is to iterate through all elements in the page and compare them with their class. If the parameter domclass we passed in is the same as the one we passed in, give this element to a;
return a; return a;
So using var d = $class("dom"); is equivalent to var d = a;
(By the way, className is a property of this JS, which is to get the class named by the DOM element)
OK, I'll post so much today. I think what I wrote is more general. Everyone must have many things they don’t understand, and ask directly if they don’t understand. I will explain one by one. You can also tell me what interaction effect you want to learn, and I will try my best to satisfy everyone