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