一. DOM
1. 查找标签
1)直接查找
全局查找
document.getElementById("idname")
document.getElementsByTagName("tagname")
document.getElementsByName("name")
document.getElementsByClassName("name")
局部查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
ele = document.getElementById("idname")
ele.getElementsByClassName("c1")
</script>
</head>
<body>
<div id="idname">
...
</div>
</body>
</html>
2)导航查找
document.parentElement
document.children
document.firstElementChild
document.lastElementChild
document.nextSibling
document.previousSibling
2. 操作标签
1)操作文本
取值操作:
dom.innerHTML:<a>123</a>
dom.innerText:123
赋值文本
dom.innerHTML="<a>123</a>"
dom.innerText="123"
2)操作value
针对input,select,textare
3)操作属性
dom.setAttribute(name,value)
dom.getAttribute(属性名)
dom.removeAttribute("属性名")
4)class属性操作
dom.classList.add("c4")
dom.classList.remove("c4")
5)css的样式操作
dom.style.color = "red"
6)节点的增删改查
//创建节点
document.createElement("p")
//添加节点
添加节点的父节点.appendChild("p")
//删除节点
删除节点父节点.removeChild("p")
//替换节点
替换节点的父节点.replaceChild(新节点,旧节点)
3. 事件绑定
dom.οnclick=function () {
}
二. 二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="province">
<option value="">请选择省份</option>
<option value="henan">河南省</option>
<option value="hubei">湖北省</option>
<option value="hunan">湖南省</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<script>
var province = document.getElementById("province");
var city = document.getElementById("city");
province.onchange = function () {
var data = {"henan":["郑州","开封","洛阳"],"hunan":["长沙","岳阳","衡阳"],"hubei":["武汉","宜昌","襄阳"]};
var choose_pro = this.value;
var cities = data[choose_pro];
//清空操作
city.options.length=1
for (var i=0;i<cities.length;i++){
//创建节点
var option = document.createElement("option")
option.innerHTML = cities[i];
//添加节点
city.appendChild(option)
}
}
</script>
</body>
</html>
三.Jquery
Jquery类==$类
Jquery对象==$()
1. 查找标签
<script src="jquery.js"></script>
<script>
document.getElementsByClassName("c1")
$(".c1")
</script>
集合类型:
1. 元素一定是DOM对象
2. 提供了更多的方法
dom对象和query对象的对象
$()[0]
$("c1") ----------------------→ DOM对象
-------------------------
$(DOM)
选择器
//层级选择器
$(".c1 .c2 span")
导航查找
//查找兄弟标签
// [dom1,dom2,dom3,dom4,dom5] --- [dom2] --- [dom3]
$(".c2 .c3").eq(1).next().css("color","red");
//查找父亲
$(".end").parent()
//查找后代
$(".c1").children(".c2").css("color","red");
2.操作标签
1)文本操作
$().html()
$().text()
2) value操作
$().val()
3) 属性操作
$().attr(属性名,属性值)
4)class操作
$().addclass()
$().removeclass()
5)css样式操作
$().css("color","red")
6)节点操作
//创建节点
var $ele=$("<img>")
//添加节点
$("父节点").append($ele);
$("父节点").append("<img src=''>");