<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" value="变色" id="btn" /> <ul id="uu"> <li>爆炒助教</li> <li>>Li</Fried class < Li > Steamed Sue </ Li > < Li > braised monitor </ Li > < Li > Pork </ Li > < Li > sweet and sour pork </ Li > < Li > cold okra </ Li > < Li > flavored carrots </ Li > </ UL > < Script the src = "common.js" > </ Script > <script type= "text / JavaScript" > // define a counter var COUNT = 0 ; // get all ul var ulObj = My $ ( " Uu " ); // Get ul child nodes var Nodes = ulObj.childNodes; // Add click event My $ ( " BTN " ) .onclick = function () { // traverse all the nodes for ( var I = 0 ; I < nodes.length; I++) { //判断所有的li节点 if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") { nodes[i].style.backgroundColor = count % 2 == 0 ? "red" : "yellow"; count++; } } }; </script> </body> </html>
effect:
