Home > Developer > JavaScript
Explain function applications and extensions with a simple JavaScript picture library case.
This is a small picture library page, by clicking 1, 2, 3, 4 to transform the picture and description on the original page.
Here is the HTML tag:
1<body>23<ul>4<li><a href= "images/1.jpg" onclick= "showpic (this); return false; "title=" one ">1</a></li>5 //href= "images/1.jpg" onclick= "showpic (this); return false;" title= "one"6 //these are the tag properties to be called through JavaScript.7<li><a href= "images/2.jpg" onclick= "showpic (this); return false; "title=" ">2</a></li>8<li><a href= "images/3.jpg" onclick= "showpic (this); return false; "title=" three ">3</a></li>9<li><a href= "images/4.jpg" onclick= "showpic (this); return false; "title=" Four ">4</a></li>Ten One</ul> A<p id= "description" >choose an image.</p> -</body>
Image transformation steps: 1. Get the A object and get the href parameter, 2. Gets the IMG object, 3. Assigns the href parameter to the SRC attribute of the IMG.
1 //Getelementsbytag (a); You can get the object of a, but what is the limitation, but which a tag is obtained? Because the tag returns an array. 2 //Here we can encapsulate a method function () Call this function with the Tag property onclick3 //When this function is called, passing parameters with the This keyword can simply pass the object A in the past.4 //onclick= "Showpic (this); return false;" Why, back to false. No, it jumps to the HREF specified page and returns false to invalidate the link. 5 6 showpic (whichpic)7 functionShowpic (whichpic) {8 //Whichpic is the relative Getelementsbytag passed over (a);9 varSource = Whichpic.getattribute ("href");Ten varplaceholder = document.getElementById ("placeholder"); OnePlaceholder.setattribute ("src", source); A } -This way, you can change the picture.
The text transformation is similar to the previous step, but before you know the node
1.childNodes Properties
On a node tree, the ChildNodes property can be used to get all the child elements of any one element, which is an array containing all the child elements of this element:
Element.childnodes
1 function Counbodychildren () {2 var body_element = document.getElementsByTagName ("body") [0]; 3 alert (body_element.childNodes.length); 4 }// This small function can show the total number of child elements of your BODY element. Or you want to know more about childnodes specifically which node to query, you can try the code:
1<! DOCTYPE html>23<body> <p id= "Demo" > click the button to get information about the child node of the BODY element. </p>4 5<button onclick= "myFunction ()" > Try </button>6 7<script>8 functionmyFunction ()9 {Ten varTxt= ""; One varC=Document.body.childNodes; A for(i=0; i<c.length; i++) - { -Txt=txt + c[i].nodename + "<br>"; the }; - varX=document.getelementbyid ("Demo"); -X.innerhtml=txt; - } +</script> - +<p><b> note spaces in the:</b> element are treated as text, and the text is treated as a node. </p> A at</body> -The results are as follows:
Describe when you continue to refine picture library changes (Showpic (whichpic)) After you understand the nodes:
1 functionShowpic (whichpic) {2 varSource = Whichpic.getattribute ("href");3 varplaceholder = document.getElementById ("placeholder");4Placeholder.setattribute ("src", source);5 //We've already passed the A=whichpic tag object.6 //then use the getattribute to get the Title property value of the A object, and then get the P object to pass in text. 7 varText = Whichpic.getattribute ("title");8 varDescription = document.getElementById ("description");9Description.firstChild.nodeValue =text;Ten } One //add: ChildNodes now does not include attribute nodes. 1 functionShowpic (whichpic) {2 varSource = Whichpic.getattribute ("href");3 varplaceholder = document.getElementById ("placeholder");4Placeholder.setattribute ("src", source);5 //We've already passed the A=whichpic tag object.6 //then use the getattribute to get the Title property value of the A object, and then get the P object to pass in text. 7 varText = Whichpic.getattribute ("title");8 varDescription = document.getElementById ("description");9Description.firstChild.nodeValue =text;Ten } One //node.firstchild equivalent to node.childnodes[0] A //node.lastchild equivalent to node.childnodes[node.childnodes.length-1] - //add: ChildNodes now does not include attribute nodes. JavaScript node of picture library
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
