DOM
查找:
直接查找
间接查找
--getElementById
--getElementsByTagName
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="w1" type="test" value="请输入关键字" onfocus="HH();" onblur="NN();"/> <script> function HH() { var tag=document.getElementById("w1"); if(tag.value=="请输入关键字"){ tag.value=""; } } function NN() { var tag=document.getElementById("w1"); var val=tag.value; if (val.trim().length == 0){ tag.value = "请输入关键字"; } } </script> </body> </html>
操作:
值
innerText
innerHtml
value
class:
className
classList.add
classList.remove
<!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{ height: 200px; 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="RR();"/> </div> <div id="shade" class="shade hide"></div> <div id="modal" class="modal hide"> <a href="javascript:void (0)" onclick="HH();">取消</a> </div> <script> function RR() { var t1=document.getElementById("shade"); var t2=document.getElementById("modal"); t1.classList.remove("hide"); t2.classList.remove("hide"); } function HH() { var t1=document.getElementById("shade"); var t2=document.getElementById("modal"); t1.classList.add("hide"); t2.classList.add("hide"); } </script> </body> </html>
样式:
<input type='text' style="color:red;font-size:40px;"/>
tag = .....
tag.style.color = 'red';
tag.style.fontSize = '40px';
属性:
<input id='i1' name='n1' wwwzzzccc='aa' type='text' style="color:red;font-size:40px;"/>
setAttribute
getAttribute
removeAttribute
===>
tabObj.checked = true
===>jQuery:操作数据,prop(checked,true)
<!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="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>1</td> <td>11</td> </tr> <tr> <td><input type="checkbox"/></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox"/></td> <td>3</td> <td>33</td> </tr> </tbody> </table> <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'); } } 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'); } } 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; }else{ ck.checked = true; } } } </script> </body> </html>
标签:
创建标签:
字符串
对象
将标签添加到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删除子标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .item{ padding: 50px; position: relative; } </style> </head> <body> <div class="item" style="background-color: #00AA88"> <a onclick="Cli(this)"> 赞1 </a> </div> <div class="item" style="background-color: #00b3ee"> <a onclick="Cli(this)"> 赞2 </a> </div> <div class="item" style="background-color: #00CCFF"> <a onclick="Cli(this)"> 赞3 </a> </div> <div class="item" style="background-color: #721c15"> <a onclick="Cli(this)"> 赞4 </a> </div> <script> function Cli(ths) { 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; op -=0.2; fontSize +=5 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>
定时器
setTimeOut,
clearTimeout
setInterval
clearInter
事件:
1、this,当前触发事件的标签
2、全局事件绑定 window.onKeyDown = function(){}
3、event,包含事件相关内容
4、默认事件
自定义优先:a,form
默认优先:checkbox
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back{ position: fixed; bottom: 20px; right: 20px; color: red; } .hide{ display: none; } </style> </head> <body onscroll="BTS();"> <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 BTS() { 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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://www.baidu.com"> <input typs="test" id="username"/> <input type="submit" value="提交" onclick="return BB();"/> </form> <script> function BB() { var user=document.getElementById('username'); if(user.value.length > 0){ return true; }else { alert("123"); return false; } } </script> </body> </html>
jQuery
模块
Dom和JavaScript
1.12.. --> ...
2.x --> IE9
查找:
选择器
id选择器
标签选择器
类选择器
组合
层级 #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;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ 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="jquery-1.12.4.js"></script> <script> function ShowMenu(ths) { $(ths).next().removeClass('hide'); $(ths).parent().siblings().find('.body').addClass('hide'); } </script> </body> </html>