1.创建表格
<input type="button" value="创建表格" id="btn">
<div id="dv"></div>
<script src="./common.js"></script>
<script>
var arr = [
{name: "百度", href: "https://www.baidu.com"},
{name: "谷歌", href: "https://www.goole.com"},
{name: "优酷", href: "https://www.youku.com"},
{name: "土豆", href: "https://www.tudou.com"},
{name: "爱奇艺", href: "https://www.aiqiyi.com"}
];
my$("btn").onclick = function() {
var tableObj = document.createElement("table");
tableObj.border = "1";
tableObj.cellPadding = "0";
tableObj.cellSpacing = "0";
my$("dv").appendChild(tableObj);
for(var i = 0; i < arr.length; i++) {
var dt = arr[i];
var trObj = document.createElement("tr");
tableObj.appendChild(trObj);
var td1 = document.createElement("td");
td1.innerText = dt.name;
trObj.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML = "<a href=\"" + dt.href + "\">" + dt.name + "</a>";
trObj.appendChild(td2);
}
}
</script>
2.焦点实现表单功能
<p>
昵称：
<input type="text" id="username" value="请输入昵称">
<span id="spanId"></span>
</p>
<script src="./common.js"></script>
<script>
var spans = document.getElementById("spanId");
my$("username").onfocus = function() {
if(this.value == "请输入昵称") {
this.value = "";
}
}
my$("username").onblur = function() {
if(this.value == "") {
this.value = "请输入昵称";
} else {
if(this.value.length < 2 || this.value.length > 6) {
spans.innerText = "输入格式有误，请重新输入";
spans.style.color = "red";
username.onfocus = function() {
this.value = "";
spans.innerText = "";
}
} else {
spans.innerText = "√";
spans.style.color = "green";
return this.value;
}
}
}
</script>
3.元素相关案例
<button id="btn1">显示效果</button>
<button id="btn2">干掉第一个子元素</button>
<button id="btn3">干掉所有子元素</button>
<button id="btn4">复制最后一个子元素</button>
<div id="box"></div>
<script src="./common.js"></script>
<script>
var i = 0;
my$("btn1").onclick = function() {
i++;
var obj = document.createElement("input");
obj.type = "button";
obj.value = "按钮" + i;
my$("box").insertBefore(obj, my$("box").firstElementChild);
}
my$("btn2").onclick = function() {
my$("box").removeChild(my$("box").firstElementChild);
}
my$("btn3").onclick = function() {
while(my$("box").firstElementChild) {
my$("box").removeChild(my$("box").firstElementChild);
}
}
my$("btn4").onclick = function() {
var last = my$("box").lastElementChild.cloneNode();
my$("box").appendChild(last);
}
</script>
4.动态创建列表
<a href="https://www.baidu.com"></a>
<button id="btn">点击</button>
<div id="box"></div>
<script src="./common.js"></script>
<script>
var arr = [
{
names: "百度",
href: "https://www.baidu.com",
content: "百度一下，你就知道"
},
{
names: "淘宝",
href: "https://www.taobao.com",
content: "淘宝网 - 淘！我喜欢"
},
{
names: "京东",
href: "https://www.jd.com",
content: "京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！"
},
{
names: "新浪",
href: "https://www.sina.com.cn",
content: "新浪首页"
}
];
my$("btn").onclick = function() {
if(my$("tableId")) {
return false;
}
var tableObj = document.createElement("table");
tableObj.id = "tableId";
tableObj.border = "1";
tableObj.cellSpacing = "0";
my$("box").appendChild(tableObj);
for(var i = 0; i < arr.length; i++) {
var arrList = arr[i];
var trObj = document.createElement("tr");
tableObj.appendChild(trObj);
for(var key in arrList) {
var tdObj = document.createElement("td");
tdObj.innerHTML = arrList[key];
trObj.appendChild(tdObj);
}
}
}
</script>
5.第一种绑定事件&解绑
<input type="button" value="绑定事件" id="btn1">
<input type="button" value="解绑事件" id="btn2">
<script src="./common.js"></script>
<script>
my$("btn1").onclick = function() {
console.log("绑定了");
}
my$("btn2").onclick = function() {
my$("btn1").onclick = null;
}
</script>
6.第二种绑定事件&解绑
<input type="button" value="绑定事件" id="btn1">
<input type="button" value="解绑事件" id="btn2">
<script src="./common.js"></script>
<script>
function f1() {
console.log("我是1");
}
function f2() {
console.log("我是2");
}
my$("btn1").addEventListener("click", f1, false);
my$("btn1").addEventListener("click", f2, false);
my$("btn2").onclick = function() {
my$("btn1").removeEventListener("click", f1, false);
my$("btn1").removeEventListener("click", f2, false);
}
</script>
7.第三种绑定事件&解绑 只支持IE8以下版本
<input type="button" value="绑定事件" id="btn1">
<input type="button" value="解绑事件" id="btn2">
<script src="./common.js"></script>
<script>
function f1() {
console.log("第一");
}
function f2() {
console.log("第二");
}
my$("btn1").attachEvent("onclick", f1);
my$("btn1").attachEvent("onclick", f2);
my$("btn2").onclick = function() {
my$("btn1").detachEvent("onclick", f1);
}
</script>
8.事件冒泡的应用target
<ul id="ul">
<li>西施</li>
<li>貂蝉</li>
<li>昭君</li>
<li>凤姐</li>
<li>芙蓉姐姐</li>
</ul>
<script src="./common.js"></script>
<script>
my$("ul").onclick = function(event) {
var target = event.target;
target.style.backgroundColor = "yellow";
}
</script>
9.同一元素绑定多个事件
<div id="box"></div>
<script src="./common.js"></script>
<script>
my$("box").onclick = f1;
my$("box").onmouseover = f1;
my$("box").onmouseout = f1;
function f1(event) {
switch(event.type) {
case "click":
console.log("我被点击了");
break;
case "mouseover":
console.log("我进来了");
break;
case "mouseout":
console.log("我又出去了");
break;
}
}
</script>
10.模拟搜索框
<div class="search">
<input type="text" id="txt">
<button>白渡一下</button>
</div>
<div id="box"></div>
<script src="./common.js"></script>
<script>
my$("txt").onfocus = function() {
this.style.border = "2px solid #4e6ef2";
}
my$("txt").onblur = function() {
this.style.border = "2px solid #c4c7ce";
}
var keyWords = ["吃火锅", "吃串串", "吃火龙果", "喝水", "喝岩浆", "喝奶茶", "我好喜欢你"];
my$("txt").onkeyup = function() {
if(my$("dv")) {
my$("box").removeChild(my$("dv"));
}
var text = this.value;
var arr = [];
for(var i = 0; i < keyWords.length; i++) {
if(keyWords[i].indexOf(text) == 0) {
arr.push(keyWords[i]);
}
}
if(text.length == 0 || arr.length == 0) {
if(my$("dv")) {
my$("box").removeChild(my$("dv"));
}
return false;
}
var box = document.createElement("div");
box.id = "dv";
my$("box").appendChild(box);
box.style.border = "2px solid #4e6ef2";
box.style.fontSize = "38px";
box.style.width = "654px";
box.style.margin = "auto";
box.style.cursor = "pointer";
for(var i = 0; i < arr.length; i++) {
var pObj = document.createElement("P");
box.appendChild(pObj);
pObj.innerHTML = arr[i];
pObj.onmouseover = function() {
this.style.backgroundColor = "pink";
}
pObj.onmouseout = function() {
this.style.backgroundColor = "";
}
pObj.onclick = function() {
my$("txt").value = this.innerText;
my$("box").removeChild(my$("dv"));
}
}
}