我們直接寫幾個案例，看懂即可
開關燈案例
<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 () { // 綁定點擊事件 // 動態(tài)的修改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 = null let inputEle = document.getElementById('d1') let startBtnEle = document.getElementById('d2') let endBtnEle = document.getElementById('d3') // 1 訪問頁面之后 將訪問的時間展示到input框中 // 2 動態(tài)展示當前時間 // 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>省市聯(lián)動
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>測試</title></head><body><select name="" id="d1">--請選擇--</select><select name="" id="d2"></select><script> let proEle = document.getElementById('d1') //根據(jù)id值獲取d1標簽，后面才能修改它 let cityEle = document.getElementById('d2') //根據(jù)id值獲取d2標簽，后面才能修改它 data = { // 加載數(shù)據(jù)，沒啥好說的 "河北": ["廊坊", "邯鄲",'唐山'], "北京": ["朝陽區(qū)", "海淀區(qū)",'昌平區(qū)'], "山東": ["威海市", "煙臺市",'臨沂市'], '上海':['浦東新區(qū)','靜安區(qū)','黃浦區(qū)'], '深圳':['南山區(qū)','寶安區(qū)','福田區(qū)'] }; ss1 = '<option disabled selected>--請選擇--</option>' //設置一個默認不能修改的提示語 proEle.innerHTML=ss1 //寫進內容里 for(let key in data){ //固定語法 for（條件）{執(zhí)行語句} （data中的key就是省份名稱，循環(huán)獲得） let opEle = document.createElement('option') //創(chuàng)建option標簽方法叫opEle opEle.innerText=key //給opEle寫上內容 opEle.value=key //經(jīng)opEle寫上值 proEle.appendChild(opEle) //添加到省份的兒子里 就能顯示了（第一個select標簽） } proEle.onchange=function () { //固定用法，獲取select修改了后，就執(zhí)行內容{} let currentPro=proEle.value //設定變量currentPro，就是得到你選擇的省份名稱，就一個 // console.log(currentPro) 調用顯示語句測試能否獲取，和獲取的內容是什么 let currentCityList = data[currentPro] //根據(jù)省份名字拿到對應的，市區(qū)名稱列表 // console.log(currentCityList) 調用顯示語句測試能否獲取，和獲取的內容是什么 cityEle.innerHTML='' //清空之前選擇過的省市名稱 ss = '<option disabled selected>--請選擇--</option>' //設置一個默認不能修改的提示語 cityEle.innerHTML= ss //寫進內容里 for(let i =0;i<currentCityList.length;i ){ //循環(huán)這個市區(qū)列表，根據(jù)它的長度，一個一個來調用 let currentCity = currentCityList[i] //分別獲得市區(qū)名稱，一次得到一個市區(qū)名稱 let opEle = document.createElement('option') //創(chuàng)建option方法opEle opEle.innerText=currentCity //給opEle寫上內容 opEle.value=currentCity //給opEle寫上值 cityEle.appendChild(opEle) //調用cityEle添加兒子方法 ，也就是把所有市區(qū)名稱添加到第二個select列表中 } }</script></body></html>"""jQuery內部封裝了原生的js代碼(還額外添加了很多的功能)能夠讓你通過書寫更少的代碼 完成js操作 類似于python里面的模塊 在前端模塊不叫模塊 叫 “類庫”兼容多個瀏覽器的 你在使用jQuery的時候就不需要考慮瀏覽器兼容問題jQuery的宗旨 write less do more 讓你用更少的代碼完成更多的事情復習 python導入模塊發(fā)生了哪些事？ 導入模塊其實需要消耗資源 jQuery在使用的時候也需要導入 但是它的文件非常的小(幾十KB) 基本不影響網(wǎng)絡速度選擇器篩選器樣式操作文本操作屬性操作文檔處理事件動畫效果插件each、data、Ajax(重點 django部分學)版本介紹jQuery文件下載 壓縮 容量更小 未壓縮"""# jQuery在使用之前 一定要確保已經(jīng)導入了
# 1 文件下載到了本地 如何解決多個文件反復書寫引入語句的代碼 可以借助于pycharm自動初始化代碼功能完成自動添加 配置 編輯 file and code template """我不想下載jQuery文件 能不能使用呢？""" # 2 直接引入jQuery提供的CDN服務(基于網(wǎng)絡直接請求加載) CDN:內容分發(fā)網(wǎng)絡 CDN有免費的也有收費的 前端免費的cdn網(wǎng)站: bootcdn <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> """你的計算機必須要有網(wǎng)絡""" # jQuery基本語法 jQuery(選擇器).action() 秉持著jQuery的宗旨 jQuery簡寫 $ jQuery() === $()# jQuery與js代碼對比 eg:將p標簽內部的文本顏色改為紅色 // 原生js代碼操作標簽 let pEle = document.getElementById('d1') pEle.style.color = 'red' // jQuery操作標簽 $('p').css('color','blue')// 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)]"""一定要區(qū)分開(重點)"""http:// jQuery對象如何變成標簽對象undefined$('#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')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包含在內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")') # 移除滿足條件的標簽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') # 它不會 只拿selectedw.fn.init?[option, prevObject: w.fn.init(1)]$('input:checked') # 自己加一個限制條件w.fn.init?[input, prevObject: w.fn.init(1)]$('#d1').next() # 同級別下一個w.fn.init?[span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init?[span#d1]__proto__: Object(0)$('#d1').nextAll()w.fn.init(5)?[span, div#d2, span, span, span.c1, prevObject: w.fn.init(1)]0: span1: div#d22: span3: span4: span.c1length: 5prevObject: w.fn.init?[span#d1]__proto__: Object(0)$('#d1').nextUntil('.c1') # 不包括最后一個w.fn.init(4)?[span, div#d2, span, span, prevObject: w.fn.init(1)]0: span1: div#d22: span3: spanlength: 4prevObject: w.fn.init?[span#d1]__proto__: Object(0) $('.c1').prev() # 上一個w.fn.init?[span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init?[span.c1, prevObject: w.fn.init(1)]__proto__: Object(0)$('.c1').prevAll()w.fn.init(5)?[span, span, div#d2, span, span#d1, prevObject: w.fn.init(1)]$('.c1').prevUntil('#d2')w.fn.init(2)?[span, span, prevObject: w.fn.init(1)] $('#d3').parent() # 第一級父標簽w.fn.init?[p, prevObject: w.fn.init(1)]0: plength: 1prevObject: w.fn.init?[span#d3]__proto__: Object(0)$('#d3').parent().parent()w.fn.init?[div#d2, prevObject: w.fn.init(1)]$('#d3').parent().parent().parent()w.fn.init?[body, prevObject: w.fn.init(1)]$('#d3').parent().parent().parent().parent()w.fn.init?[html, prevObject: w.fn.init(1)]$('#d3').parent().parent().parent().parent().parent()w.fn.init?[document, prevObject: w.fn.init(1)]$('#d3').parent().parent().parent().parent().parent().parent()w.fn.init?[prevObject: w.fn.init(1)]$('#d3').parents()w.fn.init(4)?[p, div#d2, body, html, prevObject: w.fn.init(1)]$('#d3').parentsUntil('body')w.fn.init(2)?[p, div#d2, prevObject: w.fn.init(1)] $('#d2').children() # 兒子 $('#d2').siblings() # 同級別上下所有 $('div p')# 等價 $('div').find('p') # find從某個區(qū)域內篩選出想要的標簽 """下述兩兩等價"""$('div span:first')w.fn.init?[span, prevObject: w.fn.init(1)]$('div span').first()w.fn.init?[span, prevObject: w.fn.init(3)]0: spanlength: 1prevObject: w.fn.init(3)?[span, span#d3, span, prevObject: w.fn.init(1)]__proto__: Object(0) $('div span:last')w.fn.init?[span, prevObject: w.fn.init(1)]$('div span').last() w.fn.init?[span, prevObject: w.fn.init(3)]$('div span:not("#d3")')w.fn.init(2)?[span, span, prevObject: w.fn.init(1)]$('div span').not('#d3')w.fn.init(2)?[span, span, prevObject: w.fn.init(3)]?
來源：https://www.icode9.com/content-4-696551.html聯(lián)系客服
