today学习了del列表框内容和一次性清空列表框
千万记住 document.getElementById(); 先获取元素 逐步找对象
<title>查找表单控件</title> function create1(){ //创建select元素 var sel=document.createElement("select"); //给select标签设置属性 sel.id="city"; sel.size="5"; //获取body元素 var bo=document.getElementById("test"); //创建10个option元素 for(var i=0;i<10;i++){ for op=new Option("选项"+i;i); //列表框或下拉菜单对象.option[i]=创建好的option对象
sel.options[i]=op;
}
//将select元素添加到body标签中
bo.appendChild(sel);
}
function del(){
var sel=document.getElementById("city");
/* // 获取select 元素
// 1. 直接使用列表框或下拉菜单对象.remove(index)方法删除指定选项
sel.remove(sel.length-1); /* */
}
function del(){
// 获取select元素
var sel=document.getElementById("city");
// select元素对象,options[index]=null
sel.options[sel.length-1]=null;
}
function clear2(){
var sel=document.getElementById("city");
// 让options数组长度为0
if(sel.options.length>0){
sel.options.length=0;
}
}
/* function qk(){
var q=document.getElementById("city")
q.remove(x.selectedIndex)
} */
</script>
</head>
<body id="test">
<input type="button" value="创建一个城市列表框" onClick="create1()">
<input type="button" value="一条条删除列表框的内容" onClick="del()">
<input type="button" value="一次性清空列表框内容" onClick="clear2()">
</body>
<title>对表格元素进行增删改操作</title> <script type="text/javascript"> function create1(){ // 创建table元素 var tab=document.createElement("table"); // 给table标签设置属性 tab.border="1px"; tab.id="mytable"; // 给表格插入五行四列 for(var i=0;i<5;i++){ tab.insertRow(i); for (var j=0;j<4;j++){ tab.rows[i].insertCell(j); tab.rows[i].cells[j].innerHTML="表格"+i+j; } } // 获取body元素 var bo=document.getElementById("test"); // 将table添加到body元素中 bo.appendChild(tab); } function del(){ // 获取table元素 var mytable=document.getElementById("mytable"); // 删除最后一行 mytable.deleteRow(mytable.rows.length-1); } function del2(){ // 获取table元素 var mytable=document.getElementById("mytable"); // 获取最后一行 var lastRow=mytable.rows[mytable.rows.length-1]; lastRow.deleteCell(lastRow.cells.length-1); } </script> </head> <body id="test"> <input type="button" value="创建一个5行4列的表格" onClick="create1()"> <input type="button" value="删除最后一行" onClick="del()"> <input type="button" value="删除最后一个单元格"onClick="del2()"> </body>
轮播图的 onClick="change(this)"是固定的 跟css的俩选择器有相似之处
<script type="text/javascript"> // 先在括号外面定义 在赋值(提前占坑) var arr=null; var tp=null; // 当页面加载完成后执行 window.onload=function(){ // 定义一个数组装有图片地址 arr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"]; // 获取img元素 tp=document.getElementById("tp");} function change(obj){ // 获取用户点的是哪个按钮 var val=obj.value; tp.src=arr[val-1]; } </script> </head> <body> <img src="img/1.jpg" id="tp" > <input type="button" value="上一页" onClick="change(this)"> <input type="button" value="2" onClick="change(this)"> <input type="button" value="3" onClick="change(this)"> <input type="button" value="4" onClick="change(this)"> <input type="button" value="下一页" onClick="change(this)"> </body>