jQuery 一次定时器_年薪百万之路--第五十一天 jQuery(上)
生活随笔
收集整理的這篇文章主要介紹了
jQuery 一次定时器_年薪百万之路--第五十一天 jQuery(上)
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
原生js事件綁定
開(kāi)關(guān)燈案例
<div id="d1" class="c1 bg_red bg_green"></div><button id="d2">變色</button><script>let btnEle = document.getElementById('d2')let divEle = document.getElementById('d1')btnEle.onclick = function () { // 綁定點(diǎn)擊事件// 動(dòng)態(tài)的修改div標(biāo)簽的類(lèi)屬性divEle.classList.toggle('bg_red')}</script>input框獲取焦點(diǎn)失去焦點(diǎn)案例
<input type="text" value="老板 去嗎?" id="d1"><script>let iEle = document.getElementById('d1')// 獲取焦點(diǎn)事件iEle.onfocus = function () {// 將input框內(nèi)部值去除iEle.value = ''// 點(diǎn)value就是獲取 等號(hào)賦值就是設(shè)置}// 失去焦點(diǎn)事件iEle.onblur = function () {// 給input標(biāo)簽重寫(xiě)賦值iEle.value = '沒(méi)錢(qián) 不去!'}</script>實(shí)時(shí)展示當(dāng)前時(shí)間
<input type="text" id="d1" style="display: block;height: 50px;width: 200px"><button id="d2">開(kāi)始</button><button id="d3">結(jié)束</button><script>// 先定義一個(gè)全局存儲(chǔ)定時(shí)器的變量let t = nulllet inputEle = document.getElementById('d1')let startBtnEle = document.getElementById('d2')let endBtnEle = document.getElementById('d3')// 1 訪問(wèn)頁(yè)面之后 將訪問(wèn)的時(shí)間展示到input框中// 2 動(dòng)態(tài)展示當(dāng)前時(shí)間// 3 頁(yè)面上加兩個(gè)按鈕 一個(gè)開(kāi)始 一個(gè)結(jié)束function showTime() {let currentTime = new Date();inputEle.value = currentTime.toLocaleString()}startBtnEle.onclick = function () {// 限制定時(shí)器只能開(kāi)一個(gè)if(!t){t = setInterval(showTime,1000) // 每點(diǎn)擊一次就會(huì)開(kāi)設(shè)一個(gè)定時(shí)器 而t只指代最后一個(gè)}}endBtnEle.onclick = function () {clearInterval(t)// 還應(yīng)該將t重置為空t = null}</script>省市聯(lián)動(dòng)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><select name="" id="d1"><option value="" selected disabled>--請(qǐng)選擇--</option></select><select name="" id="d2"></select><script>let proEle = document.getElementById('d1')let cityEle = document.getElementById('d2')// 先模擬省市數(shù)據(jù)data = {"河北": ["廊坊", "邯鄲",'唐山'],"北京": ["朝陽(yáng)區(qū)", "海淀區(qū)",'昌平區(qū)'],"山東": ["威海市", "煙臺(tái)市",'臨沂市'],'上海':['浦東新區(qū)','靜安區(qū)','黃浦區(qū)'],'深圳':['南山區(qū)','寶安區(qū)','福田區(qū)']};// 選for循環(huán)獲取省for(let key in data){// 將省信息做成一個(gè)個(gè)option標(biāo)簽 添加到第一個(gè)select框中// 1 創(chuàng)建option標(biāo)簽let opEle = document.createElement('option')// 2 設(shè)置文本opEle.innerText = key// 3 設(shè)置valueopEle.value = key // <option value="省">省</option>// 4 將創(chuàng)建好的option標(biāo)簽添加到第一個(gè)select中proEle.appendChild(opEle)}// 文本域變化事件 change事件proEle.onchange = function () {// 先獲取到用戶選擇的省let currentPro = proEle.value// 獲取對(duì)應(yīng)的市信息let currentCityList = data[currentPro]// 清空市select中所有的optioncityEle.innerHTML = ''// 自己加一個(gè)請(qǐng)選擇let ss = "<option disabled selected>請(qǐng)選擇</option>"// let oppEle = document.createElement('option')// oppEle.innerText = '請(qǐng)選擇'// oppEle.setAttribute('selected','selected')cityEle.innerHTML = ss// for循環(huán)所有的市 渲染到第二個(gè)select中for (let i=0;i<currentCityList.length;i++){let currentCity = currentCityList[i]// 1 創(chuàng)建option標(biāo)簽let opEle = document.createElement('option')// 2 設(shè)置文本opEle.innerText = currentCity// 3 設(shè)置valueopEle.value = currentCity // <option value="省">省</option>// 4 將創(chuàng)建好的option標(biāo)簽添加到第一個(gè)select中cityEle.appendChild(opEle)}}</script></body></html>jQuery
Query內(nèi)部封裝了原生的js代碼(還額外添加了很多的功能)
能夠讓你通過(guò)書(shū)寫(xiě)更少的代碼 完成js操作
類(lèi)似于python里面的模塊 在前端模塊不叫模塊 叫 “類(lèi)庫(kù)”
兼容多個(gè)瀏覽器的 你在使用jQuery的時(shí)候就不需要考慮瀏覽器兼容問(wèn)題
jQuery的宗旨
write less do more
讓你用更少的代碼完成更多的事情
針對(duì)導(dǎo)入問(wèn)題 # 1 文件下載到了本地 如何解決多個(gè)文件反復(fù)書(shū)寫(xiě)引入語(yǔ)句的代碼可以借助于pycharm自動(dòng)初始化代碼功能完成自動(dòng)添加配置編輯file and code template"""我不想下載jQuery文件 能不能使用呢？"""# 2 直接引入jQuery提供的CDN服務(wù)(基于網(wǎng)絡(luò)直接請(qǐng)求加載)CDN:內(nèi)容分發(fā)網(wǎng)絡(luò)CDN有免費(fèi)的也有收費(fèi)的前端免費(fèi)的cdn網(wǎng)站:bootcdn<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>"""你的計(jì)算機(jī)必須要有網(wǎng)絡(luò)"""jQuery基本語(yǔ)法
jQuery(選擇器).action()
秉持著jQuery的宗旨 jQuery簡(jiǎn)寫(xiě) $
jQuery() === $()
如何查找標(biāo)簽
基本選擇器
id選擇器 $('#d1') w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0) // class選擇器 $('.c1') w.fn.init [p.c1, prevObject: w.fn.init(1)]0: p.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0) // 標(biāo)簽選擇器 $('span') w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)] --------------- jQuery對(duì)象如何變成標(biāo)簽對(duì)象 $('#d1')[0] <div id=?"d1">?…?</div>? document.getElementById('d1') <div id=?"d1">?…?</div>? // 標(biāo)簽對(duì)象如何轉(zhuǎn)jQuery對(duì)象 undefined $(document.getElementById('d1')) w.fn.init [div#d1]組合選擇器/分組與嵌套
$('div') w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)] $('div.c1') w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0) $('div#d1'$('ul li') w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)] $('ul li:first') # 大兒子 w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0) $('ul li:last') # 小兒子 w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0) $('ul li:eq(2)') # 放索引 w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0) $('ul li:even') # 偶數(shù)索引 0包含在內(nèi) w.fn.init(5) [li, li, li, li.c1, li#d1, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li#d1length: 5prevObject: w.fn.init [document]__proto__: Object(0) $('ul li:odd') # 奇數(shù)索引 w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength: 5prevObject: w.fn.init [document]__proto__: Object(0) $('ul li:gt(2)') # 大于索引 w.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li5: li#d16: lilength: 7prevObject: w.fn.init [document]__proto__: Object(0) $('ul li:lt(2)') # 小于索引 w.fn.init(2) [li, li, prevObject: w.fn.init(1)]0: li1: lilength: 2prevObject: w.fn.init [document]__proto__: Object(0) $('ul li:not("#d1")') # 移除滿足條件的標(biāo)簽 w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)] $('div') w.fn.init(2) [div, div, prevObject: w.fn.init(1)] $('div:has("p")') # 選取出包含一個(gè)或多個(gè)標(biāo)簽在內(nèi)的標(biāo)簽 w.fn.init [div, prevObject: w.fn.init(1) w.fn.init [div#d1, prevObject: w.fn.init(1)] $('*') w.fn.init(19) [html, head, meta, title, meta, link, script, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: w.fn.init(1)]$('#d1,.c1,p') # 并列+混用 w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]$('div span') # 后代 w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)] $('div>span') # 兒子 w.fn.init(2) [span, span, prevObject: w.fn.init(1)] $('div+span') # 毗鄰 w.fn.init [span, prevObject: w.fn.init(1)] $('div~span') # 弟弟 w.fn.init(2) [span, span, prevObject: w.fn.init(1)]基本篩選器
$('ul li') w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]$('ul li:first') # 大兒子 w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)$('ul li:last') # 小兒子 w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)$('ul li:eq(2)') # 放索引 w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)$('ul li:even') # 偶數(shù)索引 0包含在內(nèi) w.fn.init(5) [li, li, li, li.c1, li#d1, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li#d1length: 5prevObject: w.fn.init [document]__proto__: Object(0)$('ul li:odd') # 奇數(shù)索引 w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength: 5prevObject: w.fn.init [document]__proto__: Object(0)$('ul li:gt(2)') # 大于索引 w.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li5: li#d16: lilength: 7prevObject: w.fn.init [document]__proto__: Object(0)$('ul li:lt(2)') # 小于索引 w.fn.init(2) [li, li, prevObject: w.fn.init(1)]0: li1: lilength: 2prevObject: w.fn.init [document]__proto__: Object(0)$('ul li:not("#d1")') # 移除滿足條件的標(biāo)簽 w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]$('div') w.fn.init(2) [div, div, prevObject: w.fn.init(1)] $('div:has("p")') # 選取出包含一個(gè)或多個(gè)標(biāo)簽在內(nèi)的標(biāo)簽 w.fn.init [div, prevObject: w.fn.init(1屬性選擇器
$('[username]') w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)] $('[username="jason"]') w.fn.init [input, prevObject: w.fn.init(1)] $('p[username="egon"]') w.fn.init [p, prevObject: w.fn.init(1)]$('[type]') w.fn.init(2) [input, input, prevObject: w.fn.init(1)] $('[type="text"]') w.fn.init(2) [input, input, prevObject: w.fn.init(1)]表單篩選器
$('input[type="text"]') w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0) $('input[type="password"]') w.fn.init [input, prevObject: w.fn.init(1)]$(':text') # 等價(jià)于上面第一個(gè) w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0) $(':password') # 等價(jià)于上面第二個(gè) w.fn.init [input, prevObject: w.fn.init(1)]:text :password :file :radio :checkbox :submit :reset :button表單對(duì)象屬性 :enabled :disabled :checked :selected """特殊情況""" $(':checked') # 它會(huì)將checked和selected都拿到 w.fn.init(2) [input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0) $(':selected') # 它不會(huì) 只拿selected w.fn.init [option, prevObject: w.fn.init(1)] $('input:checked') # 自己加一個(gè)限制條件 w.fn.init [input, prevObject: w.fn.init(1)]篩選器方法
$('#d1').next() # 同級(jí)別下一個(gè) $('#d1').nextAll() $('#d1').nextUntil('.c1') # 不包括最后一個(gè)$('.c1').prev() # 上一個(gè) $('.c1').prevAll() $('.c1').prevUntil('#d2')$('#d3').parent() # 第一級(jí)父標(biāo)簽 $('#d3').parent().parent() $('#d3').parents() $('#d3').parentsUntil('body') $('#d2').children() # 兒子$('#d2').siblings() # 同級(jí)別上下所有 $('div p') # 等價(jià) $('div').find('p') # find從某個(gè)區(qū)域內(nèi)篩選出想要的標(biāo)簽 《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的jQuery 一次定时器_年薪百万之路--第五十一天 jQuery(上)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： IKV 91坦克歼击车&#47;
- 下一篇： android accessibilit