python web jQuery day16
内容概述：
DOM 查找：直接查找 间接查找（节点：包含元素和节点，元素：只包含元素） --getElementById --getElementsByTagName 操作： 值 innerText innerHtml value class: className classList.add classList.remove 样式： <input type='text' style='color:red;font-size:40px' /> tag = ... tag.style.color = 'red'; tag.style.fontSize = '40px'; 属性： <input id='i1' name='n1' alex='sb' type='text' style="color:red;font-size:40px;"/> setAttribute getAttribute removeAttribute ===> tabObj.checked = true ===>jQuery: 操作数据，prop(checked,true) 标签： 创建标签： 字符串 对象 将标签添加到HTML中 字符串形式的标签： p1.insertAdjacentHTML('beforeEnd',tag); 对象形式的标签： p1.insertAdjacentElement('afterBegin',document.createElement('p')) xxx.insertBefore(tag,xxx[1]) 点赞： 创建标签，定时器（大小，位置，透明度） 1、this，当前触发事件的标签 2、createElement 3、appendChild 4、setInterval创建定时器 clearInterval删除定时器 5、removeChild删除子标签 定时器 setTimeOut,clearTimeout setInterval,clearInter 事件： 1、this,当前出发事件的标签 2、全局事件绑定 window.onKeyDown = function(){} 3、event,包含事件相关内容 4、默认事件 自定义优先：a,form 默认优先：checkbox JQuery 模块，Dom和JavaScrip,推荐使用1.12，或1.x的版本，2.x不支持IE9 查找： 选择器 id 标签 类 组合(#i1,#i2,#i3) 层级#i1 .c1 (所有子孙里找) $('input:eq=(1),#i1 .item') 筛选器 $('#i1').find('.item') $('#i1').eq(1) 操作： CSS 属性 *****非常重要 $('#i1').html() # 获取html内容 $('#i1').html("<span>123</span>") # 设置html内容 text() val() 文本操作 事件： -优化 1、如何使用jQuery绑定 2、当文档加载完毕后，自动执行 $(function(){ ...... }) 3、延迟绑定 4、return false;
<!--http://www.cnblogs.com/wupeiqi/p/5643298.html-->
DOM
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
查找：直接查找
间接查找（节点：包含元素和节点，元素：只包含元素）
--getElementById
--getElementsByTagName
查找元素
直接查找
document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合
间接查找
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
操作
1、内容
innerText 文本 outerText innerHTML HTML内容 innerHTML value 值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" id="i1"/> <a id="i2" href="http://www.baidu.com">百<span>666</span>度</a> </body> </html> #console t = document.getElementById('i2') <a id="i2" href="http://www.baidu.com">…</a> t.innerText //只显示文本 "百666度" t.innerHTML //显示文本家标签 "百<span>666</span>度"
2、属性
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="p1"> <p>hhh</p> </div> <input type="button" value="全选" onclick="CheckAll()" /> <input type="button" value="取消" onclick="CancleAll()"/> <input type="button" value="反选" onclick="ReverseAll()"/> <table border="1"> <thead> <tr> <th>序号</th> <th>用户名</th> <th>密码</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function CheckAll(){ /* var tb = document.getElementById('tb'); var trs = tb.children; for(var i=0;i<trs.length;i++){ var current_tr = trs[i]; var ck = current_tr.firstElementChild.firstElementChild; ck.setAttribute('checked','checked'); } */ $('#tb input[type="checkbox"]').prop('checked',true); } function CancleAll(){ /* var tb = document.getElementById('tb'); var trs = tb.children; for(var i=0;i<trs.length;i++){ var current_tr = trs[i]; var ck = current_tr.firstElementChild.firstElementChild; ck.removeAttribute('checked'); } */ $('#tb input[type="checkbox"]').prop('checked',false); } function ReverseAll(){ /* var tb = document.getElementById('tb'); var trs = tb.children; for(var i=0;i<trs.length;i++){ var current_tr = trs[i]; var ck = current_tr.firstElementChild.firstElementChild; if(ck.checked){ ck.checked = false; ck.removeAttribute('checked'); }else{ ck.checked = true; ck.setAttribute('checked', 'checked'); } } */ $('#tb input[type="checkbox"]').each(function(i){ // this 当前标签 // $(this)当前标签的jQuery对象 if($(this).prop('checked')){ $(this).prop('checked', false); }else{ $(this).prop('checked', true); } }); } </script> </body> </html>
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none !important; } .shade{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; /*background-color: black;*/ /*opacity:0.6;*/ /*代替上面两个*/ background-color: rgba(0,0,0,.6); z-index: 1000; } .modal{ /*让这个div居中层次在最外面*/ height: 200px; width:400px; background-color: white; position: fixed; top: 50%; left: 50%; margin-left: -200px; margin-top: -100px; z-index: 1001; } </style> </head> <body> <div style="height: 2000px;background-color: #dddddd;"> <!--绑定点击事件 --> <input type="button" value="点我" onclick="ShowModal();"/> </div> <div id="shade" class="shade hide"></div> <div id="modal" class="modal hide"> <!--让a标签什么都不做设置成void--> <a href="javascript:void(0);" onclick="HideModal();">取消</a> </div> <script> function ShowModal() { var t1 = document.getElementById('shade'); var t2 = document.getElementById('modal'); t1.classList.remove('hide'); t2.classList.remove('hide'); } function HideModal() { var t1 = document.getElementById('shade'); 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> <style> .item{ padding: 50px; position: relative; } </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> <div class="item"> <a onclick="Favor(this);">赞4</a> </div> <script> function Favor(ths) { //ths形参相当于this,当前出发事件的标签 var top = 49; var left = 71; var op = 1; var fontSize = 18; var tag = document.createElement('span'); tag.innerText = '+1'; tag.style.position = 'absolute'; tag.style.top = top + 'px'; tag.style.left =left + "px"; tag.style.opacity = op; tag.style.fontSize = fontSize +"px"; ths.parentElement.appendChild(tag); var interval = setInterval(function () { top -= 10; left += 10; fontSize += 5; op -= 0.1; tag.style.top = top + "px"; tag.style.left = left + "px"; tag.style.opacity = op; tag.style.fontSize = fontSize + "px"; if(op <= 0.2){ clearInterval(interval); ths.parentElement.removeChild(tag); } }, 50); } </script> </body> </html>
3、class操作
className // 获取所有类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="status" style="color: red;"> </div> <input type="submit" onclick="DeleteStatus();" value="删除" /> <script> function DeleteStatus(){ var s = document.getElementById('status'); s.innerText = '删除成功'; setTimeout(function(){ s.innerText = ""; },5000); } </script> </body> </html>
4、标签操作
a.创建标签
// 方式一
var tag = document.createElement('a')
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"
b.操作标签
// 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])
5、样式操作
var obj = document.getElementById('i1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--绑定事件,onfocus是获取焦点，onblur是失去焦点，当鼠标点到input框时就会执行该函数--> <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();"/> <script type="text/javascript"> function Focus() { //console.log(123); //获取标签，清空 var tag = document.getElementById('i1'); if(tag.value == "请输入关键字"){ tag.value = ""; } } function Blur(){ //console.log('blur'); var tag = document.getElementById('i1'); var val = tag.value; if(val.trim().length == 0){ tag.value = "请输入关键字"; } } </script> </body> </html> 搜索框
6、位置操作
总文档高度
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代指文档根节点
*/
实例：
滚动高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .back{ color: red; position: fixed; bottom: 20px; right: 20px; } </style> </head> <body onscroll="BodyScroll();"> <div style="height: 2000px;background-color: #dddddd;"></div> <div id="back" class="back hide" onclick="BackTop();">返回顶部</div> <script> function BackTop() { document.body.scrollTop = 0; } function BodyScroll() { var s = document.body.scrollTop; var t = document.getElementById('back'); if(s >= 100){ t.classList.remove('hide'); }else{ t.classList.add('hide') } } </script> </body> </html>
7、提交表单
document.geElementById('form').submit()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form id="f1"> <input type="text"/> <!--第一种方式提交--> <input type="submit" value="提交"/> <a onclick="Submit();">提交</a> </form> <script> //第二种方式提交 function Submit() { var form = document.getElementById('f1'); form.submit(); } </script> </body> </html>
8、其他操作
console.log 输出框 alert 弹出框 confirm 确认框 // URL和刷新 location.href 获取URL location.href = "url" 重定向 location.reload() 重新加载 // 定时器 setInterval 多次定时器 clearInterval 清除多次定时器 setTimeout 单次定时器 clearTimeout 清除单次定时器 三、事件
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var ret = confirm('是否删除？'); console.log(ret); </script> </body> </html>
获取当前URL
location.href "http://localhost:63342/s13/day16/test.html"
重定向跳到其他页面
location.href = "http://www.baidu.com"
事件
对于事件需要注意的要点：
- this
- event
- 事件链以及跳出
this标签当前正在操作的标签，event封装了当前事件的内容。
默认事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.baidu.com" onclick="ClickB();">百度</a>
<form>
<!--自定义先执行，默认后执行-->
<input type="text"/>
<input type="submit" onclick="ClickB();"/>
</form>
<!--默认事件先执行，自定义再执行-->
<input type="checkbox" onclick="ClickB();"/>
<script>
function ClickB() {
alert(123)
}
</script>
</body>
</html>
jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单二</div> <div class="body hide"> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单三</div> <div class="body"> <p>内容三</p> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> function ShowMenu(ths) { /*console.log(ths);//Dom中的标签对象 //$(ths); //将Dom标签对象转换成jQuery对象*/ //$(ths)[0]; //jQuery转换Dom $(ths).next().removeClass('hide'); $(ths).parent().siblings().find('.body').addClass('hide'); } </script> </body> </html>
