js轮播及操作节点属性
反选:
<html> <head> <meta charset="utf-8" /> <title>title> <script> function abc(){ var aihao=document.getElementsByName("aihao"); for(var i=0;i<aihao.length;i++){ if(aihao[i].checked==true){ aihao[i].checked=false; }else if(aihao[i].checked==false){ aihao[i].checked=true; } } } script> head> <body> <input type="checkbox" name="aihao" /> <input type="checkbox" name="aihao" /> <input type="checkbox" name="aihao" /> <input type="checkbox" name="aihao" /> <a href="javascript:abc();">反选a> body> html> |
js最简单的轮播: setTimeout clearTimeout
<html> <head> <meta charset="UTF-8"> <title>title> <style> span{ width:40px; display:inline-block; background-color: yellow; position:relative; top:-50px; left:-200px; text-align: center; font-size:24px; } style> <script> var i=1; var t; function abc(){ var sp=document.getElementsByTagName("span"); sp[i-1].style.backgroundColor="yellow"; //思考：其它的span的颜色是白色的时候？ for(var j=0;j<sp.length;j++){ if(j!=(i-1)){ //节点的样式（css） sp[j].style.backgroundColor="lightyellow"; } } gg.src="img/"+i+".jpg"; i++; if(i>4){ i=1; } t=setTimeout("abc()",500); } function over(k){ i=k; //让当前轮插停下来 clearTimeout(t); var sp=document.getElementsByTagName("span"); sp[i-1].style.backgroundColor="yellow"; for(var j=0;j<sp.length;j++){ if(j!=(i-1)){ sp[j].style.backgroundColor="lightyellow"; } } gg.src="img/"+i+".jpg"; } function out(){ //重新调用 abc(); } script> head> <body onload="abc();"> <img id="gg" src="img/1.jpg" width="400px" height="300px"/> <span onmouseover="over(1);" onmouseout="out();">1span> <span onmouseover="over(2);" onmouseout="out();">2span> <span onmouseover="over(3);" onmouseout="out();">3span> <span onmouseover="over(4);" onmouseout="out();">4span> body> html> |
js操作dom节点
|-----节点信息
|----uu.firstChild.firstChild.nodeValue ：节点值有兼容性问题
|----nodeType:在不同的浏览器取不同节点的过程，判断出文本(text):3 判断具体节点 :1
|----nodeName:直接看到不同浏览器节点还是文本
---节点属性 实现购物车效果
<table align="center" border="1"> <tr> <th colspan="6">购物车清单th> tr> <tr> <td>编号td> <td>商品名称td> <td>商品价格td> <td>商品数量td> <td>商品总价格td> <td>操作td> tr> <tr> <td>1td> <td>汽车td> <td>2000td> <td> <a href="javascript:;">+a> <input type="text" size="5"/> <a href="javascript:;">-a> td> <td> <input type="text" size="7"/> td> <td> <a href="javascript:;">购买a> td> tr> <tr> <td>2td> <td>轮船td> <td>35td> <td> <a href="javascript:;">+a> <input type="text" size="5"/> <a href="javascript:;">-a> td> <td> <input type="text" size="7"/> td> <td> <a href="javascript:;">购买a> td> tr> table> |
隔行变色:
<script> function abc(){ //获取所有行 tr var tr=document.getElementsByTagName("tr"); for(var i=0;i<tr.length;i++){ if(i%2!=0){ tr[i].style.backgroundColor="yellow"; } } } script> |
操作table中的节点，多行的情况下，其它行是不受影响的？
th:table中的标题 tbody:table的正文（划定范围 ：父类节点）
function efg(){ var tbody=document.getElementById("tbody"); var tby=tbody.children;//获取tbody所有节点 for(var i=0;i<tby.length;i++){ //tby[i]:哪一行 children[2]指定行的哪一列 innerHTML：层 //alert(tby[i].children[2].innerHTML); //input:text 给定value //td tr span 给定innerHTML tby[i].children[4].children[0].value=tby[i].children[2].innerHTML*tby[i].children[3].children[1].value; } } |
加法or减法:
function aaa(){ efg(); //alert("1111"); //点击+? var add=document.getElementsByName("add"); for(var i=0;i<add.length;i++){ add[i].onclick=function(){//点击某个name属性，由for循环去跟踪 //alert("被点中！！！"); //this:当前的对象 var txt=this.parentNode.children[1].value; //alert(txt); var tt=parseInt(txt)+1; this.parentNode.children[1].value=tt; efg(); } } var jf=document.getElementsByName("jf"); for(var j=0;j<jf.length;j++){ jf[j].onclick=function(){ var txt=this.parentNode.children[1].value; var tt=txt-1; if(tt<=0){ tt=1; } this.parentNode.children[1].value=tt; efg();//方法的调用 } } } |
删除行:
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！