一、JavaScript实例
1、需求：做一个下拉框，分别是河大，百度，京东—点按钮就直接跳转
<body>
<select name="" id="ws">
<option value="http://baidu.com">百度</option>
<option value="http://hbu.cn">河大</option>
<option value="http://jd.com">京东</option>
</select>
<script>
//用的是window.open("http://hbu.cn")
var ws =document.getElementById("ws");
ws.onchange=function(){
//弹框alert(this.selectedIndex)
window.open(ws.options[this.selectedIndex].value)
//select.options[index]返回列表框，下拉菜单第index+1个选项
//selectedIndex返回下拉列表中选项的索引0-1-2
}
</script>
</body>
结果展示
2、对一个表格进行某行某列元素样式内容修改
<table id="ws">
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
</table>
更改第几行行 <input type="text" id="hang"><br>
更改第几列<input type="text" id="lie"><br>
输入内容 <input type="text" id="test">
<input type="button" value="更改" id="btn">
<script>
var table = document.getElementById("ws")
var hang = document.getElementById("hang")
var lie = document.getElementById("lie")
// console.log(lie)
var text = document.getElementById("text")
var btn = document.getElementById("btn")
// var ws = table.rows[hang].cells[lie]
// ws.style.color = "red";
// ws.innerHTML = text.value
btn.onclick = function() {
var row = hang.value
var cell = lie.value
var content = test.value
ws.rows[row - 1].cells[cell - 1].innerHTML = content
ws.rows[row - 1].cells[cell - 1].style.color = "red"
}
</script>
3、添加HTML元素+实例
第一步：创建或复制节点
第二步：添加节点
①、创建节点
→document.createElement(Tag):创建Tag标签对应的节点。
②、复制节点
→Node cloneNode(boolean deep):复制当前节点。当deep为true时，表示在复制当前节点的同时，复制该节点的全部后代节点;当deep为 false时，表示仅复制当前节点。
③、添加元素(通用方法)
→appendChild(Node newNode):将newNode添加成当前节点的最后一个子节点。
→insertBefore(Node newNode, Node reffNode):在refNode节点之前插入newNode节点。
→replaceChild(Node newChild, Node oldChild):将oldChild节点替换成newChild 节点。
在gs后面再加一个样式蓝，内容为”全场包邮“的内容
<div id="ws">
<a>
<h3>
gs
</h3>
</a>
</div>
<script>
//创建html元素
// var div = document.createElement("div");
//复制html
var ws = document.getElementById("ws")
var div = ws.cloneNode(false);
//处理html
div.innerHTML = "qcby";
div.style.color = "blue";
div.className = "ws"
console.log(div)
//添加html元素
document.getElementById("body").appendChild(div)
</script>
4、往下拉框中添加元素
<input type="text" id="ws"><br>
<input type="button" value="添加" id="btn">
<select name="" id="select">
<option value="">苹果</option>
</select>
<script>
var ws = document.getElementById("ws")
var btn = document.getElementById("btn")
var selecte = document.getElementById("select")
btn.onclick = function() {
//按钮点击函数
var option = document.createElement("option")
var btn1 = ws.value;
option.text = btn1
select.add(option, null)
ws.value = ""
}
</script>