生活随笔
收集整理的這篇文章主要介紹了
day16前端(Dom+Jquery)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
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> s1 <!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: 操作數(shù)據(jù)，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> 全選取消與反選 ?
?? ??? ?標簽：
?? ??? ??? ?創(chuàng)建標簽：
?? ??? ??? ??? ?字符串
?? ??? ??? ??? ?對象
?? ??? ??? ?將標簽添加到HTML中
?? ??? ??? ??? ?字符串形式的標簽：
?? ??? ??? ??? ??? ?p1.insertAdjacentHTML('beforeEnd',tag);
?? ??? ??? ??? ?對象形式的標簽：
?? ??? ??? ??? ??? ?p1.insertAdjacentElement('afterBegin',document.createElement('p'))
?? ??? ??? ??? ??? ?xxx.insertBefore(tag,xxx[1])
?? ??? ?點贊：
?? ??? ??? ?創(chuàng)建標簽，定時器（大小，位置，透明度）
?? ??? ??? ?1、this，當前觸發(fā)事件的標簽
?? ??? ??? ?2、createElement
?? ??? ??? ?3、appendChild
?? ??? ??? ?4、setInterval創(chuàng)建定時器
?? ??? ??? ??? clearInterval刪除定時器
?? ??? ??? ?5、removeChild刪除子標簽
?? ???
?? ??? ?定時器
?? ??? ??? ?setTimeOut,clearTimeout
?? ??? ??? ?setInterval,clearInter
?? ??? ?
?? ??? ?事件：
?? ??? ??? ?1、this，當前觸發(fā)事件的標簽
?? ??? ??? ?2、全局事件綁定?? window.onKeyDown = function(){}
?? ??? ??? ?3、event，包含事件相關內容
?? ??? ??? ?4、默認事件
?? ??? ??? ??? ??? ?自定義優(yōu)先：a,form
?? ??? ??? ??? ??? ?? 默認優(yōu)先：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 => 當前觸發(fā)事件的標簽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()
?? ??? ??? ?
?? ??? ?文本操作
?? ?事件：
?? ??? ?- 優(yōu)化
?? ??? ?1、如何使用jQuery綁定
?? ??? ?2、當文檔加載完畢后，自動執(zhí)行
?? ??? ??? ?$(function(){
?? ??? ??? ??? ?...
?? ??? ??? ?});
?? ??? ?3、延遲綁定
?? ??? ?4、return false;
?? ?擴展：
?? ??? ?JavaScirpt
?? ??? ??? ?正則，字符串三個方法
?? ??? ?$.login
?? ??? ?Form表單驗證（）
?? ?Ajax：
?? ??? ?偷偷發(fā)請求
?? ??? ?
?? ?-- jQuery循環(huán)
?? ??? ?
?? ?
<!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> delegate ?
?? ?
?? ?
?? ?
?? ?
?? ?
?? ?
?? ?
?? ?
?? ?
?? ?
?? ?
?? ?
?? ?
???
?
轉載于:https://www.cnblogs.com/aaron-shen/p/5798170.html
與50位技術專家面對面20年技術見證，附贈技術全景圖
總結
以上是生活随笔為你收集整理的day16前端(Dom+Jquery)的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
