今日内容概要
-
原生JS事件
-
jQuery(封装了js的全段框架(模块))
易于DOM操作混淆
原生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.classsList.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;wideh:200px"> <button id="d2">开始</button> <button id="d3">结束</button> <script> //先定义一个全局存储定时器的变量 let t=null let inputEle=document.getElemetnById('d1') let startBtnEle=document.getElementById('d2') let endBynEle=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)} } } 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. 设置value opEle.value=key //<opion value="省">省</option> // 4. 将创建好的option标签添加到第一个select中 proEle.appendChild(opEle) } // 文本域变化事件 charge事件 proEle.onchange=function(){ // 先获取到用户选择的省 let currentPro=proEle.value // 获取对应的是信息 let currentCityList=data[currentPro] // 清空select中所有的option cityEle.innerHTML='' // 自己加一个选择器 // for 循环所有的市 渲染到第二个select中 for (let i=0;i<currentCityList.lentth;i++){ let currentCity=curentCityList[i] // 1 创建option标签 let opEle=document.createElement('option') // 2 设置文本 opEle.innerText=currentCity // 3 设置value opEle.value=currentCity // <option value="省">省</option> // 4 将创建好的option标签添加到第一个select中 cityEle.appendChild(opEle) } } </script> </body> </html>jQuery
""" jQuery内部封装了原生的js代码 能够让你通过书写更少的代码 完后js操作 类似于python里面的模块 在前段模块不叫模块 叫"类库" 兼容多个浏览器 使用jQuery的时候就不需要考虑浏览器兼容的问题 jQuery的宗旨 write less do more 用更少的代码完成更多的事情 """针对导入问题
# 1 文件下载到本地 如何解决多个文件反复书写引入语句的代码 可以借助于pycharm自动初始化代码功能完成自动添加 配置 编辑 file and code template # 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)] // jQuery对象如何变成标签对象 underfined $('#d1')[0] <div id="d1"></div> document.getElementById('d1') <div id="d1"></div> // 标签对象如何转jQuery对象 undefined $(dovument.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#d') 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.inte(10)[li,li,li,li,li,li,li,li#d1,li,prevObject: w.fn.intt(1)] $('ul li:first') # 大儿子 w.fn.init[li,prevObject: w.fn.init(1)]1: lilength: 1prevObject: w.fn.init[document]__proto__: Object(0) $('ul li:last') # 小儿子 $('ul li:eq(2)') # 放索引 $('ul li:even') # 偶数索引 0包含在内 $('ul li:odd') # 奇数索引 $('ul li:gt(2)') # 大于索引 $('ul li:lt(2)') # 小于索引 $('ul li:not("#d1")') # 移除满足条件的标签 $('div') $('div:has("p")') # 选取出包含一个或者多个标签在内的标签属性选择器
$('[username]') $('[username="wxx"]') $('p[username='lxx']') $('[type]') $('[type="text"]')表单筛选器
$('input[type="text"]') $('input[type="password"]') $(':text') #等价于上面第一个 $(':passwrod') # 等价于上面第二个 $(':checked') # 它会将checked和selected都拿到 $(':selected') # 它不会 只拿selected $('input:checked') # 自己加一个限制条件筛选方法
$('#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从某个区域内筛选出想要的标签 $('div span:first') 等价于 $('div span').first() $('div span:last') 等价于 $('div span').last() $('div span:not("#d3")') $('div span').not('#d3')