【Python之路Day16】前端知识篇之Dom、JQuery
Dom
文档对象模型（Document Object Model，缩写DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 将 HTML 文档表达为树结构。
我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
1. HTML DOM 树
2.查找元素
1、直接查找
<script> document.getElementById('id'); //根据ID获取一个标签,在文档中改值必须唯一 document.getElementsByName('name'); //根据name属性获取标签集合,类似于id,name是给元素分配名字,但区别于ID,不是必须唯一. document.getElementsByClassName('classname'); //根据class属性获取标签集合 document.getElementsByTagName('div'); //根据标签名获取标签集合元素 #nav; //id=nav的元素 通过CSS选择器选取元素 div; //所有<div>元素 通过CSS选择器选取元素 .warning; //所有在class属性之中包含了warnning的元素 通过CSS选择器选取元素 //也可以使用属性选择器: p[lang='en']; //所有使用英文的段落 如<p lang='en'> *[name='tom'] //所有包含name=tom的属性的元素 //组合使用: div, #log //所有<div>元素,以及id=log的元素 //文档中的所有的元素, document.all() document.all[0] //文档中的第一个元素 document.all["navbar"] //id或name未navbar的元素 </script>
2. 间接查找
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
3. 节点和元素的区别
- Node: 既包含元素又包含内容
- Element： 只包含元素
PS：换行也是元素
4. 操作
1) 值
innerText //文本 outerText //
outerHTML // innerHTML //HTML内容value // 值
<body>
<div id="hehe">
<p>1</p>;
<p>2</p>
<p>3</p>
</div>
<script>
var tag = document.getElementById('hehe');
console.log(tag.innerText);
</script>
</body>
//代码执行结果：
1
2
3
<body>
<div id="hehe">
<p>1</p>;
<p>2</p>
<p>3</p>
</div>
<script>
var tag = document.getElementById('hehe');
console.log(tag.innerHTML);
</script>
</body>
//执行结果;
<p>1</p>
<p>2</p>
<p>3</p>
<body>
<div id="hehe">
<p>1</p>;
<p>2</p>
<p>3</p>
</div>
<script>
var tag = document.getElementById('hehe');
console.log(tag.value);
</script>
</body>
//结果：
undefined
<body>
<div id="hehe">
<p>1</p>;
<p>2</p>
<p>3</p>
</div>
<script>
var tag = document.getElementById('hehe');
console.log(tag.outerHTML);
</script>
</body>
//结果：
<div id="hehe">
<p>1</p>;
<p>2</p>
<p>3</p>
</div>
2) Class操作
className //获取所有类名 classList.add //添加类 classList.remove //删除类
<body id="body" class="Iambody">
<div class="hehe">
<p>1</p>;
<p>2</p>
<p>3</p>
</div>
<div class="haha">
<a>4</a>
<a>5</a>
</div>
<script>
var tag = document.getElementById('body');
var a = tag.className;
console.log(a);
</script>
</body>
//结果：
Iambody
<body id="body" class="Iambody">
<div class="hehe">
<p>1</p>;
<p>2</p>
<p>3</p>
</div>
<div class="haha">
<a>4</a>
<a>5</a>
</div>
<script>
var tag = document.getElementById('body');
var a = tag.className;
tag.classList.add('NewClass');
console.log(tag);
</script>
</body>
//结果：
<body id="body" class="Iambody NewClass">
<div class="hehe">
<p>1</p>;
<p>2</p>
<p>3</p>
</div>
<div class="haha">
<a>4</a>
<a>5</a>
</div>
<script>
var tag = document.getElementById('body');
var a = tag.className;
tag.classList.add('NewClass');
console.log(tag);
</script>
</body>
<body id="body" class="Iambody">
<div class="hehe">
<p>1</p>;
<p>2</p>
<p>3</p>
</div>
<div class="haha">
<a>4</a>
<a>5</a>
</div>
<script>
var tag = document.getElementById('body');
var a = tag.className;
tag.classList.add('NewClass');
tag.classList.remove('Iambody');
console.log(tag);
</script>
</body>
//执行结果：
<body id="body" class="NewClass">
<div class="hehe">
<p>1</p>;
<p>2</p>
<p>3</p>
</div>
<div class="haha">
<a>4</a>
<a>5</a>
</div>
<script>
var tag = document.getElementById('body');
var a = tag.className;
tag.classList.add('NewClass');
tag.classList.remove('Iambody');
console.log(tag);
</script>
</body>
3）属性
//获取属性： getAttribute(属性名) //设置属性： setAttribute(属性名) //移除属性： removeAttribute(属性名) //全选，反选，取消的时候用： tb.checked = true || flase; PS: 不要和上述的几个属性混搭，否则会出bug；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll();"/>
<input type="button" value="取消" onclick="Cancel();"/>
<input type="button" value="反选" onclick="Reverse();"/>
<table border="1px">
<thead>
<tr>
<th>序号</th>
<th>巴拉</th>
<th>PIUPIU</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"/></td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>22</td>
<td>33</td>
</tr>
</tbody>
<script>
function CheckAll(){
//先找到表格内容
var tb = document.getElementById('tb');
var tr = tb.children;
console.log(tr);
//而后循环
for(i=0;i<tr.length;i++){
//console.log(tr[i].firstElementChild.firstElementChild);
ck = tr[i].firstElementChild.firstElementChild;
//ck.setAttribute('checked','checked');
//也可以使用
ck.checked = true;
}
}
function Cancel(){
//先找到表格内容
var tb = document.getElementById('tb');
var tr = tb.children;
console.log(tr);
//而后循环
for(i=0;i<tr.length;i++){
//console.log(tr[i].firstElementChild.firstElementChild);
ck = tr[i].firstElementChild.firstElementChild;
//ck.removeAttribute('checked');
//也可以使用
ck.checked = false;
}
}
function Reverse(){
//先找到表格内容
var tb = document.getElementById('tb');
var tr = tb.children;
console.log(tr);
//而后循环
for(i=0;i<tr.length;i++){
//console.log(tr[i].firstElementChild.firstElementChild);
ck = tr[i].firstElementChild.firstElementChild;
//console.log(ck.checked);
if(ck.checked){
ck.checked=false;
}else{
ck.checked=true;
}
//也可以使用ck.checked = true;
}
}
</script>
</table>
</body>
</html>
4）实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1" value="请输入关键字" onfocus="Focus();" onblur="Blur();" />
<input id="i2" type="text" value="提交"/>
<script type="text/javascript">
//捕捉焦点
function Focus(){
var tag = document.getElementById("i1");
if(tag.value == '请输入关键字'){
tag.value = '';
console.log('focus');
}
}
//失去焦点时的函数操作
function Blur(){
var tag = document.getElementById("i1");
var va = tag.value.trim();
if(va.length == 0){
tag.value = '请输入关键字';
console.log('blur');
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
position: relative;
padding: 30px;
}
/*.item span{*/
/*position: absolute;*/
/*top: 30px;*/
/*left: 52px;*/
/*opacity: 1;*/
/*}*/
</style>
</head>
<body>
<div class="item">
<a onclick="Favor(this);">赞1</a>
</div>
<div class="item">
<a onclick="Favor(this);">赞2</a>
</div>
<div class="item">
<a onclick="Favor(this);">赞3</a>
</div>
<script>
function Favor(ths){
//ths==> 形参this, ==> 谁触发事件就是谁
console.log(ths);
//添加span标签
var position = 'absolute';
var top = 30;
var left = 52;
var opacity= 1;
var fontSize = 10;
var tag = document.createElement('span');
//+1内容
tag.innerText = '+1';
tag.top = top + "px";
tag.left = left + "px";
tag.opacity = opacity;
tag.fontSize = fontSize + "px";
tag.position = position;
//获取父标签,追加tag
ths.parentElement.appendChild(tag);
//创建定时器
var interval = setInterval(function () {
top -= 10;
left += 10;
opacity -= 0.1;
fontSize += 5;
//重新赋值
tag.style.top = top + "px";
tag.style.left = left + "px";
tag.style.opacity = opacity;
tag.style.fontSize = fontSize + "px";
tag.style.position = position;
if(opacity == 0){
//移除定时器
clearInterval(interval);
//移除+1标签
ths.parentElement.removeChild(tag);
}
},50);
}
</script>
</body>
</html>
计时器： setInterval(funcation(){ },50) clearInterval() 定时器： setTimeout() clearTimeout() 创建标签， 定时器(大小，位置，透明度) 1. this ， 特殊的形参--》 触发事件的标签 2. createElement 3. appendChild 4. setInterval创建定时器 clearInterval删除定时器 5. removeChild
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none !important;
}
.shadow{
position: fixed;
top:0;
bottom: 0;
left:0;
right: 0;
background-color: rgba(0,0,0,.6);
z-index:100;
}
.modal{
background-color: aliceblue;
height: 200px;
width: 400px;
position: fixed;
left:50%;
top:50%;
margin-left: -200px;
margin-top: -100px;
z-index: 101;
}
</style>
</head>
<body>
<div style="height: 2000px; background-color: #dddddd; margin: 0">
<input type="button" value="点我呀,点我呀!" onclick="ShowModal();"/>
</div>
<div id="shadow" class="shadow hide"></div>
<div id="modal" class="modal hide">
<!--如果a标签什么都不做的话,就是用下面的语法javascript:void(0);来做占位符,类似于Python中的pass;-->
<a href="javascript:void(0);" onclick="HideModal();">取消</a>
</div>
<script>
function ShowModal(){
var t1 = document.getElementById('shadow');
var t2 = document.getElementById('modal');
t1.classList.remove('hide')
t2.classList.remove('hide')
}
function HideModal(){
var t1 = document.getElementById('shadow');
var t2 = document.getElementById('modal');
t1.classList.add('hide')
t2.classList.add('hide')
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.backtop{
position: fixed;
right: 20px;
bottom:20px;
color:red;
}
.hide{
display: none;
}
</style>
</head>
<!--返回顶部实例-->
<body onscroll="BodyScroll();">
<div style="height: 2000px;background-color: #dddddd"></div>
<div id="back" class="backtop hide" onclick="BackTop();">返回顶部</div>
<script>
function BackTop(){
document.body.scrollTop = 0; //直接返回顶部
}
function BodyScroll(){
console.log('heihei');
var tag = document.getElementById('back');
var s = document.body.scrollTop;
if(s >= 100){ //距离顶部大于100像素的时候显示, 显示时只要移除hide样式即可
tag.classList.remove('hide');
}else{
tag.classList.add('hide');
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="status" style="color:red;"></div>
<input type="button" onclick="DeleteEmail();" value="删除所选邮件"/>
<script>
function DeleteEmail(){
var tag = document.getElementById('status');
tag.innerText="删除成功";
setTimeout(function(){
tag.innerText = '';
},5000)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--检验用户输入是否合法-->
<body>
<form action="http://www.baidu.com/">
<input type="text" id="username">
<input type="submit" value="提交" onclick="return SubmitForm();"/>
<!--onclick中的return意义在于, 如果执行函数返回值是true的话,继续执行,如果为False的话,会中断执行,不再往后继续-->
</form>
<script>
function SubmitForm(){
var user = document.getElementById('username');
if(user.value.length > 0){
//可以提交
return true;
}else{
//输入为空,不能提交
alert('用户输入用户名不能为空!');
return false;
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
width: 200px;
height: 600px;
border: 1px solid #dddddd;
overflow: auto;
}
.menu .item .title{
height: 40px;
line-height: 40px;
background-color: #2459a2;
color: white;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="title" onclick="ShowMenu(this);">菜单一</div>
<div class="body">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<div class="item">
<div class="title" onclick="ShowMenu(this);">菜单二</div>
<div class="body hide">
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
</div>
</div>
<div class="item">
<div class="title" onclick="ShowMenu(this);">菜单三</div>
<div class="body hide">
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
</div>
</div>
</div>
<script src="plugin/jquery-1.12.4.js"></script>
<script>
function ShowMenu(ths){
//将Dom转换为JQuery --> $(ths)
//先找到下一个标签,移除hide
$(ths).next().removeClass('hide');
//找到父标签,再找到父标签的兄弟标签,而后找所有父标签中的子子孙孙中查找body,添加hide
$(ths).parent().siblings().find('.body').addClass('hide');
}
</script>
</body>
</html>
5）标签操作
创建标签
// 方式一, 对象方式创建,也是推荐的方式 var tag = document.createElement('a'); tag.innerText = "Tom"; tag.className = "c1"; tag.href = "http://www.cnblogs.com/dbq"; // 方式二 var tag = "<a class='c1' href='http://www.cnblogs.com/dbq'>Tom</a>";
操作标签
<div id ='pa'>piupiupiu</div>
<script>
var p = document.getElementById('pa');
var obj = "<input type='text' />";
p.insertAdjacentHTML('beforeEnd',obj);
p.insertAdjacentElement('afterBegin',document.createElement('p'));
</script>
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
//执行结果：
<div id="pa"><p></p>piupiupiu<input type="text"></div>
//方式二：
<div id ='pa'>piupiupiu</div>
<script>
var p = document.getElementById('pa');
var tag = document.createElement('a');
p.appendChild(tag);
p.insertBefore(tag,p[1]);
</script>
//执行结果
<div id="pa">piupiupiu<a></a></div>
6） 样式操作
<div id="hehe">hehehe</div>
<script>
var tag = document.getElementById('hehe');
tag.style.fontSize = '30px';
tag.style.color = 'green';
</script>
7) 位置操作
总文档高度 document.documentElement.offsetHeight 当前文档占屏幕高度 document.documentElement.clientHeight 自身高度 tag.offsetHeight 距离上级定位高度 tag.offsetTop 父定位标签 tag.offsetParent 滚动高度 tag.scrollTop /* clientHeight -> 可见区域：height + padding clientTop -> border高度 offsetHeight -> 可见区域：height + padding + border offsetTop -> 上级定位标签的高度 scrollHeight -> 全文高：height + padding scrollTop -> 滚动高度 特别的： document.documentElement代指文档根节点 */
8) 提交表单
<input id='form' type="text" />
<script>
document.getElementById('form').submit();
</script>
9) 其他操作
console.log 输出框 alert 弹出框 confirm 确认框 // URL和刷新 location.href 获取URL location.href = "url" 重定向 location.reload() 重新加载 // 定时器 setInterval 多次定时器 clearInterval 清除多次定时器 setTimeout 单次定时器 clearTimeout 清除单次定时器
10) 事件，非常重要
| 属性 | 当以下情况发生时，出现此事件 | FF | N | IE |
|---|---|---|---|---|
| onabort | 图像加载被中断 | 1 | 3 | 4 |
| onblur | 元素失去焦点 | 1 | 2 | 3 |
| onchange | 用户改变域的内容 | 1 | 2 | 3 |
| onclick | 鼠标点击某个对象 | 1 | 2 | 3 |
| ondblclick | 鼠标双击某个对象 | 1 | 4 | 4 |
| onerror | 当加载文档或图像时发生某个错误 | 1 | 3 | 4 |
| onfocus | 元素获得焦点 | 1 | 2 | 3 |
| onkeydown | 某个键盘的键被按下 | 1 | 4 | 3 |
| onkeypress | 某个键盘的键被按下或按住 | 1 | 4 | 3 |
| onkeyup | 某个键盘的键被松开 | 1 | 4 | 3 |
| onload | 某个页面或图像被完成加载 | 1 | 2 | 3 |
| onmousedown | 某个鼠标按键被按下 | 1 | 4 | 4 |
| onmousemove | 鼠标被移动 | 1 | 6 | 3 |
| onmouseout | 鼠标从某元素移开 | 1 | 4 | 4 |
| onmouseover | 鼠标被移到某元素之上 | 1 | 2 | 3 |
| onmouseup | 某个鼠标按键被松开 | 1 | 4 | 4 |
| onreset | 重置按钮被点击 | 1 | 3 | 4 |
| onresize | 窗口或框架被调整尺寸 | 1 | 4 | 4 |
| onselect | 文本被选定 | 1 | 2 | 3 |
| onsubmit | 提交按钮被点击 | 1 | 2 | 3 |
| onunload | 用户退出页面 | 1 | 2 | 3 |
对于事件需要注意的要点：
- this
- event
- 事件链以及跳出
this标签当前正在操作的标签，event封装了当前事件的内容。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' >
<title>拥有时不知珍惜，失去时方觉可惜。——请珍惜每一滴水。 </title>
<script type='text/javascript'>
function Go(){
var content = document.title;
var firstChar = content.charAt(0)
var sub = content.substring(1,content.length)
document.title = sub + firstChar;
}
setInterval('Go()',1000);
</script>
</head>
<body>
</body>
</html>
onfocus, 获取焦点， 等于一个函数，就是捕捉 onblur, 离开焦点 onclick, 点击 1. this, 当前触发事件的标签 2. 全局事件绑定， windows.onKeyDown = funcation(); 3. event, 特殊参数，包含了事件的相关的内容 4. 默认事件 比如a标签默认动作，跳转 比如submit默认动作，提交 优先级： 自定义优先级比默认优先级高，如：a、submit标签 checkbox的是默认事件先执行，自定义事件后执行 <input type="submit" value="提交" onclick="return SubmitForm();"/> <!--onclick中的return意义在于, 如果执行函数返回值是true的话,继续执行,如果为False的话,会中断执行,不再往后继续-->
PS: 如果a标签什么都不做的话,就是用下面的语法javascript:void(0);来做占位符,类似于Python中的pass;
jQuery
jQuery是一个类库(Python中的叫做模块)，jQuery能帮助我们在文档中找到关心的元素，并且对这些元素进行操作：添加内容、编辑HTML属性和CSS属性、定义事件处理程序，以及执行动画。还拥有Ajax工具来动态发起HTTP请求，以及一些通用的工具函数来操作对象和数组。
jQuery基础：
jQuery蒂尼了一个全局函数：jQuery()，在类库的使用中，还有一个快捷别名： $ ,这是唯一的两个变量。
var divs = $("div") //返回0个或多个DOM元素，这就是jQuery对象。
版本：
- 1.12.. --> ..
- 2.x --- IE9已不再支持，so，建议使用1.12
查找
选择器
- 基本选择器
- #id id选择器
- element 标签选择器
- .class 类选择器
- * 所有
- #i1,#i2,#i3 组合选择器
层级选择器：
- 中间有空格， 层级选择器 #i1 .c1就是从 #i1中的的子子孙孙中找
- > 从儿子中找
- +next 下一个
- ~sibilant 兄弟中找
操作：
CSS
属性的操作
- html()
- text()
- val()
文本的操作
事件
底层一样，但是在此基础上JQuery还做了优化
1. 如何使用JQuery绑定
2. 当文档加载完毕后，自动执行！ ###重要！
$(function(){ ... })
3. 延迟绑定：
$("ul").delegate("l1","click",funcation(){
...
})
现增加，现绑定
PS: 一定要先找到父标签，ul，相当于选择器
4. return false; 后面也就不提交了，和Dom里一样；
扩展：
- $.xxx来执行， 如 $.login
- form表单验证
Ajax：
AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出
大白话：偷偷发请求
执行JQuery：
- JQuery.xxx
- $.xxx
JQuery的循环
.each()
参考：
http://www.cnblogs.com/wupeiqi/articles/5643298.html
浙公网安备 33010602011771号