生活随笔
收集整理的這篇文章主要介紹了
day16前端(Dom+Jquery)
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
JavaScirpt
?? ?正則，字符串三個(gè)方法
(留后再講)
DOM
?? ?查找：
?? ??? ?直接查找
?? ??? ?間接查找
?? ??? ?--getElementById
?? ??? ?--getElementsByTagName
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><input id="i1" type="text" value="請(qǐng)輸入關(guān)鍵字" onfocus="Focus();" onblur="Blur();" /><input id="i2" type="text"/><script type="text/javascript">function Focus(){//console.log('Focus');//獲取標(biāo)簽，清空var tag = document.getElementById('i1');if(tag.value == "請(qǐng)輸入關(guān)鍵字"){tag.value = "";}}function Blur(){//console.log('blur');var tag = document.getElementById('i1');var val = tag.value;if(val.trim().length == 0){tag.value = "請(qǐng)輸入關(guān)鍵字";}}</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="點(diǎn)我" 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> 彈窗小練習(xí) ?
?? ?操作：
?? ??? ?值
?? ??? ??? ?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> 標(biāo)簽屬性定義 <!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>序號(hào)
</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> 全選取消與反選 ?
?? ??? ?標(biāo)簽：
?? ??? ??? ?創(chuàng)建標(biāo)簽：
?? ??? ??? ??? ?字符串
?? ??? ??? ??? ?對(duì)象
?? ??? ??? ?將標(biāo)簽添加到HTML中
?? ??? ??? ??? ?字符串形式的標(biāo)簽：
?? ??? ??? ??? ??? ?p1.insertAdjacentHTML('beforeEnd',tag);
?? ??? ??? ??? ?對(duì)象形式的標(biāo)簽：
?? ??? ??? ??? ??? ?p1.insertAdjacentElement('afterBegin',document.createElement('p'))
?? ??? ??? ??? ??? ?xxx.insertBefore(tag,xxx[1])
?? ??? ?點(diǎn)贊：
?? ??? ??? ?創(chuàng)建標(biāo)簽，定時(shí)器（大小，位置，透明度）
?? ??? ??? ?1、this，當(dāng)前觸發(fā)事件的標(biāo)簽
?? ??? ??? ?2、createElement
?? ??? ??? ?3、appendChild
?? ??? ??? ?4、setInterval創(chuàng)建定時(shí)器
?? ??? ??? ??? clearInterval刪除定時(shí)器
?? ??? ??? ?5、removeChild刪除子標(biāo)簽
?? ???
?? ??? ?定時(shí)器
?? ??? ??? ?setTimeOut,clearTimeout
?? ??? ??? ?setInterval,clearInter
?? ??? ?
?? ??? ?事件：
?? ??? ??? ?1、this，當(dāng)前觸發(fā)事件的標(biāo)簽
?? ??? ??? ?2、全局事件綁定?? window.onKeyDown = function(){}
?? ??? ??? ?3、event，包含事件相關(guān)內(nèi)容
?? ??? ??? ?4、默認(rèn)事件
?? ??? ??? ??? ??? ?自定義優(yōu)先：a,form
?? ??? ??? ??? ??? ?? 默認(rèn)優(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 => 當(dāng)前觸發(fā)事件的標(biāo)簽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> 點(diǎn)贊小練習(xí) <!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> 單次定時(shí)器 <!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> 鼠標(biāo)滾輪操作 <!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{// 不可提交，提示錯(cuò)誤
alert('用戶名輸入不能為空');return false;}}</script>
</body>
</html> 提交判斷 ?
jQuery
?? ?模塊，Dom和JavaScript，
?? ??? ?1.12..? --> ...
?? ??? ?2.x???? --> IE9
?? ?
?? ?查找：
?? ??? ?選擇器
?? ??? ??? ?id選擇器
?? ??? ??? ?標(biāo)簽選擇器
?? ??? ??? ?類選擇器
?? ??? ??? ?組合
?? ??? ??? ?層級(jí) #i1 .c1
?? ??? ??? ?
?? ??? ??? ?$('input:eq(1),#i1 .item')
?? ??? ??? ?
?? ??? ?篩選器
?? ??? ??? ?$('#i1').find('.item')
?? ??? ??? ?$('#i1').eq(1)
?? ??? ?
?? ?操作：
?? ??? ?CSS
?? ??? ?屬性
?? ??? ??? ?$('#i1').html() # 獲取html內(nèi)容
?? ??? ??? ?$('#i1').html("<span>123</span>") # 設(shè)置html內(nèi)容
?? ??? ??? ?
?? ??? ??? ?text()
?? ??? ??? ?
?? ??? ??? ?val()
?? ??? ??? ?
?? ??? ?文本操作
?? ?事件：
?? ??? ?- 優(yōu)化
?? ??? ?1、如何使用jQuery綁定
?? ??? ?2、當(dāng)文檔加載完畢后，自動(dòng)執(zhí)行
?? ??? ??? ?$(function(){
?? ??? ??? ??? ?...
?? ??? ??? ?});
?? ??? ?3、延遲綁定
?? ??? ?4、return false;
?? ?擴(kuò)展：
?? ??? ?JavaScirpt
?? ??? ??? ?正則，字符串三個(gè)方法
?? ??? ?$.login
?? ??? ?Form表單驗(yàn)證（）
?? ?Ajax：
?? ??? ?偷偷發(fā)請(qǐng)求
?? ??? ?
?? ?-- 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>內(nèi)容一
</p><p>內(nèi)容一
</p><p>內(nèi)容一
</p><p>內(nèi)容一
</p><p>內(nèi)容一
</p></div></div><div class="item"><div class="title" onclick="ShowMenu(this);">菜單二
</div><div class="body hide"><p>內(nèi)容二
</p><p>內(nèi)容二
</p><p>內(nèi)容二
</p><p>內(nèi)容二
</p><p>內(nèi)容二
</p><p>內(nèi)容二
</p></div></div><div class="item"><div class="title" onclick="ShowMenu(this);">菜單三
</div><div class="body hide"><p>內(nèi)容三
</p><p>內(nèi)容三
</p><p>內(nèi)容三
</p><p>內(nèi)容三
</p><p>內(nèi)容三
</p><p>內(nèi)容三
</p></div></div></div><script src="jquery-1.12.4.js"></script><script>function ShowMenu(ths){// console.log(ths); // Dom中的標(biāo)簽對(duì)象//$(ths) // Dom標(biāo)簽對(duì)象轉(zhuǎn)換成jQuery標(biāo)簽對(duì)象（便利）//$(ths)[0] // jQuery標(biāo)簽對(duì)象轉(zhuǎn)換成Dom標(biāo)簽對(duì)象
$(ths).next().removeClass('hide');$(ths).parent().siblings().find('.body').addClass('hide');}</script>
</body>
</html> 隱藏菜單欄小練習(xí) <!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 ?
?? ?
?? ?
?? ?
?? ?
?? ?
?? ?
?? ?
?? ?
?? ?
?? ?
?? ?
?? ?
?? ?
???
?
轉(zhuǎn)載于:https://www.cnblogs.com/aaron-shen/p/5798170.html
與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖
總結(jié)
以上是生活随笔為你收集整理的day16前端(Dom+Jquery)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
