Python_way day16
1、Dom (找到html中的标签)
2、Javascirpt(正则)
3、jQuery(1.10,1.12-兼容性好，2.0。以后放弃了ie9以下)
- 封装了Dom & JavaScript
一、DOM
1、查找元素
- 直接查找
document.getElementById 根据ID获取一个标签 --->这里是获取一个标签中间没有s document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合/ 兼容性不太好 ----> 这些都是获取多个标签中间有s document.getElementsByTagName 根据标签名获取标签集合
- 间接查找
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点#以上的nodes既包含标签，也包含文本内容 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素只包含标签
直接查找：
Nodes包含了所有子节点。
2、操作
a、获取和修改
- 对于有值的标签使用value获取或者设置
t = document.getElementById("i2")
<div id=?"i2">?…?</div>?
t.children
[<input type=?"text">?]
text = t.children[0]
<input type=?"text">?
text.value
""
text.value //获取当前input框中输入的值
"123"
text.value = 345 //设置input框中的值
345
- 对于没有值的但是有文本内容的比如a标签
使用innetText或者innerHTML这两个标签
innetText
t = document.getElementById("i3")
<a id=?"i3" href=?"http:?/?/?www.baidu.com">?百度?</a>?
t.innerText //获取a标签中的内容
"百度"
t.innerText = "是百度" //设置a标签中的内容，让其在页面上变化
"是百度"
innerHTML
<a id="i3" href="http://www.baidu.com">百<span>666</span>度</a>
t = document.getElementById("i3")
<a id=?"i3" href=?"http:?/?/?www.baidu.com">?…?</a>?
t.innerText
"百666度"
t.innerHTML
"百<span>666</span>度" HTML会将文本中的所有标签都拿到
实例一：搜索框中的文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框文字消失</title>
</head>
<body>
<input id="i1" type="text" value="请输入搜索内容" onfocus="Focus();" onblur="Blur()"/> //onfocus:获取鼠标点击时的动作， onblur:获取鼠标移除时的动作
<script type="text/javascript">
function Focus() {
var tag = document.getElementById("i1"); //获取id=i1的标签
if(tag.value=="请输入搜索内容"){ //如果这个表亲的内容是请输入请输入搜索内容，一点就清空，否则就不管
tag.value = "";
}
}
function Blur() {
var tag = document.getElementById("i1");
var tag_value = tag.value;
if (tag_value.trim().length==0){ //如果搜索框去空格后的长度是0，就证明用户没有输入，那么就将内容恢复
tag.value = "请输入搜索内容";
}
}
</script>
</body>
</html>
b、class操作
className // 获取所有类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
实例二:摸态对话框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>莫泰对话框</title> <style> .hide{ display: none !important; /*定义一个display = none的标签，让后面使用*/ }
.b{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.6); z-index: 9; }
.modal{ height: 200px; width: 400px; background-color: lightskyblue; position: fixed; z-index: 10; left: 50%; top: 50%; margin-left: -200px; margin-top: -100px;
}
.out_input{ margin-left: 98px; height: 100px; margin-top: 10px;}
.d_input{ display: inline-block; width: 173px; height: 21px; margin-top: 10px;}
.login_back{ height: 50px; width: 204px; background-color: dodgerblue; margin: 0 auto; text-align: center; line-height:50px; border: 1px darkblue solid;}
input{ width: 200px; height: 30px;}
.login_icon{ top: 16px; left: 68px; float: inherit;}
.modal_in{ height: 30px; width: 100px; float:right;} </style></head><body> <input class="reg" type="button" value="登陆" onclick="ShowModal();"> <!--一旦点击这个button按钮，onclick，就触发showmodal这个js函数--> <div id ="black" class="b hide"></div> <!--让背景这个样式使用两个类属性，一个是颜色，布局，一个就是隐藏，现不显示出来--> <div id ="mod" class="modal hide"> <!--让中间整个的这个模块使用两个类属性，一个是颜色，布局，一个就是隐藏，现不显示出来--> <div class="login_back"> <span class="login_icon"> 账户登陆 </span> </div> <div class="out_input"> <input type="text"/> <span class="input_imp"></span> <span class="d_input"> <input type="text" class="input_d"/> <span class="input_imp"></span> </span> </div>
<button class="modal_in" onclick="HideModal();">返回</button> <!--一旦点击这个button按钮，onclick，就触发HideModal这个js函数--> </div> <script> function ShowModal() { var t1 = document.getElementById("black"); var t2 = document.getElementById("mod"); //<div id="black" class="b"></div> //<div id="mod" class="modal"></div> t1.classList.remove("hide"); //移除tag1这个list中的class：hide t2.classList.remove("hide"); //移除tag2这个list中的class: hide } function HideModal() { var t1 = document.getElementById("black"); var t2 = document.getElementById("mod"); //<div id="black" class="b hide"></div> //<div id="mod" class="modal hide"></div> t1.classList.add("hide"); //移除tag1这个list中的class：hide t2.classList.add("hide"); //移除tag2这个list中的class: hide } </script></body></html>
小知识点：
<a href="javascript:void (0)">取消</a> //表示这个a标签什么都不做
时间： 2024-08-07 21:18:01