day16前端(Dom+Jquery)
JavaScirpt
正则，字符串三个方法
(留后再讲)
DOM
查找：
直接查找
间接查找
--getElementById
--getElementsByTagName
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();" /> <input id="i2" type="text"/> <script type="text/javascript"> function Focus(){ //console.log('Focus'); //获取标签，清空 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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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; 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 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'); } window.onkeydown = function(event){ //console.log(event); if(event.keyCode == 27){ HideModal(); } } </script> </body> </html>
操作：
值
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)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input id='i1' name='n1' alex='123' type='text' style="color:red;font-size:40px;"/> <input type="checkbox" id="i2" /> </body> </html>
<!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" id="test1" /></td> <td>1</td> <td>11</td> </tr> <tr> <td><input type="checkbox" id="test2" /></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" id="test3"/></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; ck.removeAttribute('checked'); }else{ ck.checked=true; ck.setAttribute('checked', 'checked'); } } } </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删除子标签
定时器
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> <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>
<!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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .back{ 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="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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="http://www.baidu.com"> <input type="text" id="username" /> <input type="submit" value="提交" onclick="return SubmitForm();" /> </form> <script> function SubmitForm(){ var user = document.getElementById('username'); if(user.value.length > 0 ){ // 可以提交 return true; }else{ // 不可提交，提示错误 alert('用户名输入不能为空'); 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;
扩展：
JavaScirpt
正则，字符串三个方法
$.login
Form表单验证（）
Ajax：
偷偷发请求
-- 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> <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){ // 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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <p> <a onclick="Add(this);"> + </a> <input type="text" /> </p> </div> <script src="jquery-1.12.4.js"></script> <script> function Add(ths){ var p = $(ths).parent().clone(); p.find('a').text(' - '); p.find('a').attr('onclick', 'Remove(this);'); $(ths).parent().parent().append(p); } function Remove(ths){ $(ths).parent().remove(); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" onclick="Add();" /> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(function(){ /* $('li').click(function () { alert($(this).text()); }); */ $("ul").delegate("li","click",function(){ alert($(this).text()); }); }); function Add(){ var tag = document.createElement('li'); tag.innerText = '666'; $('ul').append(tag); } </script> </body> </html>
