从小白到小黑 python学习之旅 日常总结 56（事件2 jQuery）
事件案例
开关灯案例
# 点击按钮圆圈变色 <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .c1 { height: 400px; width: 400px; border-radius: 50%; } .bg_green { background-color: greenyellow; } .bg_red { background-color: red; } </style> </head> <body> <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> </body>
input框获取焦点失去焦点案例
<head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <input type="text" value="老板 去吗?" id="d1"> <script> let iEle = document.getElementById('d1'); // 获取焦点事件 iEle.onfocus = function () { // 将input框内部值去除 (.value就是获取 等号赋值就是设置) iEle.value = '' }; // 失去焦点事件 iEle.onblur = function () { // 给input标签重写赋值 iEle.value = '没钱 不去!' } </script> </body>
实时展示当前时间
<head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <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 动态展示当前时间 // 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> </body>
省市联动
<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; // <option value="省">省</option> // 4 将创建好的option标签添加到第一个select中 proEle.appendChild(opEle) } // 文本域变化事件 change事件 proEle.onchange = function () { // 先获取到用户选择的省 let currentPro = proEle.value; // 获取对应的市信息 let currentCityList = data[currentPro]; // 清空市select中所有的option cityEle.innerHTML = ''; // 自己加一个请选择 let ss = "<option disabled selected>请选择</option>"; cityEle.innerHTML = ss; // for循环所有的市 渲染到第二个select中 注意一下for取 数组 值的过程与 自定义对象 不同 for (let i=0;i<currentCityList.length;i++){ let currentCity = currentCityList[i]; // 1 创建option标签 let opEle = document.createElement('option'); // 2 设置文本 opEle.innerText = currentCity; // 3 设置value opEle.value = currentCity; // 4 将创建好的option标签添加到第二个select中 cityEle.appendChild(opEle) } } </script> </body>
jQuery内部封装了原生的js代码 (还额外添加了很多的功能)
能够让你通过书写更少的代码 完成js操作
类似于python里面的模块 在前端模块不叫模块 叫 “类库”
兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题
jQuery的宗旨
write less do more
让你用更少的代码完成更多的事情
jQuery在使用的时候也需要导入 但是它的文件非常的小(几十KB) 基本不影响网络速度
下载链接：jQuery官网
中文文档：jQuery AP中文文档
1 选择器
2 筛选器
3 样式操作
4 文本操作
5 属性操作
6 文档处理
7 事件
8 动画效果
9 插件
10 each、data、Ajax
# 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() === $()
jQuery与js代码对比
//将p标签内部的文本颜色改为红色 // 原生js代码操作标签 let pEle = document.getElementById('p1') pEle.style.color = 'red' // jQuery操作标签 $('p').css('color','red')
// 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对象 // jQuery对象如何变成标签对象 $('#d1')[0] <div id="d1">…</div> // 标签对象如何转jQuery对象 $(document.getElementById('d1')) w.fn.init [div#d1]
$('div.c1') //有类是c1的div
$('div#d1') //id是d1的div
$('*') // 全局 全部
$('#d1,.c1,p') // 并列+混用
$('div span') // 后代
$('div>span') // 儿子
$('div+span') // 毗邻
$('div~span') // 弟弟
$('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")') // ul下 没有id是d1属性的 全部li（移除满足条件的标签）
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")') // 选取出包含p标签的div标签（选取出包含一个或多个标签在内的标签）
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)]
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...
表单对象属性
:enabled
:disabled
:checked
:selected
$('input[type="text"]')
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$(':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)]
$(':password') // 等价于上面
w.fn.init [input, prevObject: w.fn.init(1)]
"""特殊情况"""
$(':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)
$('input:checked') // 如果只想拿checked自己加一个限制条件
w.fn.init [input, prevObject: w.fn.init(1)]
$(':selected') // 它不会 只拿selected
w.fn.init [option, prevObject: w.fn.init(1)]
$('#d1').next() // 同级别下一个
$('#d1').nextAll() // 同级别下面所有
$('#d1').nextUntil('.c1') // 同级别下面到'.c1' 不包括'.c1'
$('.c1').prev() // 同级别上一个
$('.c1').prevAll() // 同级别上面所有
$('.c1').prevUntil('#d2') // 同级别上面到'#d2' 不包括'#d2'
$('#d3').parent() // 第一级父标签
$('#d3').parent().parent() // 爷爷标
$('#d3').parents() // 父标上 所有
$('#d3').parentsUntil('body') // 父标上 所有到'body' 不包括'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')
浙公网安备 33010602011771号