jQuery 一次定时器_年薪百万之路--第五十一天 jQuery(上)
![](/assets/blank.gif)
原生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从某个区域内筛选出想要的标签
jQuery 一次定时器_年薪百万之路--第五十一天 jQuery(上)相关推荐
- create 执行存储过程报错出现符号_年薪百万之路--第四十天 存储引擎
存储引擎 日常生活中文件格式有很多中,并且针对不同的文件格式会有对应不同存储方式和处理机制(txt,pdf,word,mp4...) 针对不同的数据应该有对应的不同的处理机制来存储 存储引擎就是不同的 ...
- dict下如何取值_年薪百万之路--第十七天 装饰器(下)和迭代器
一 有参装饰器 >带有参数的函数装饰器 为被装饰对象添加认证功能的装饰器,实现的基本形式如下 def deco(func):def wrapper(*args,**kwargs):编写基于文件的 ...
- session保存密码_年薪百万之路--第六十四天 Cookie操作与session操作
forms组件源码 切入点:form_obj.is_valid() """ def is_valid(self):"""Returns Tr ...
- python年薪百万_年薪百万之路--第二天:Python入门
一.编程语言介绍 分类:机器语言(二进制) 执行效率高 计算机易理解 开发效率低 汇编语言 高级语言(编译型,解释型) 编译型----->Gcc编译器-------->机器语言 解释型-- ...
- jQuery 一次定时器_学习RTOS(18)软件定时器
l 软件定时器的基本概念 定时器,是指从指定的时刻开始,经过一个指定时间,然后触发一个超时事件,用户可以自定义定时器的周期与频率.类似生活中的闹钟,我们可以设置闹钟每天什么时候响,还能设置响的次数,是 ...
- 同样的工作年限,为什么有人年薪百万,有人月薪五千?
最近用脉脉查看人脉的时候,发现当年一起毕业的同学们,现状的差距不是一般的大.抛开家里有矿的那些不谈,就拿单纯靠自己奋斗的来说.混的好的在 BAT 里身居要职,年薪百万,有些不太如意的还在一些不知名的小 ...
- jQuery 一次定时器_史上最全的js、jQuery面试题
js.jQuery面试题整理 1.数据类型 基本类型:除Object.String.Number.boolean.null.undefined. 引用类型:object.里面包含的 function. ...
- jQuery 一次定时器_为什么JVM每隔一小时执行一次Full GC?
随着接口自动化监控的完善,线上大多数的接口都被自动化监控系统接入,因此开发.测试人员可以及时的了解API的健康情况,监控内容包括检查API的状态码是否正常.返回的内容断言是否成功等,异常的接口会对外发 ...
- jQuery 一次定时器_用 jQuery 手写一个小游戏
作者:王圣松 转发链接:https://juejin.im/post/6844903687307919373 前言 今天给大家带来一个小游戏. 要求:熟悉 JavaScript 继承的概念. 游戏预览 ...
最新文章
- 设置VSCode隐藏菜单栏快捷键Alt+T(头部)、隐藏状态栏快捷键Alt+B(底部),为单屏开发者腾出更多编码空间
- SSAS系列——【07】多维数据(查询Cube)
- linux系统中tar命令的使用,linux 系统的tar命令使用方法详解
- “如果产品经理躺平接受需求,那程序员免不了想打一架”
- 《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 1.4 内容安排
- Note - Shader - 2
- Linux设备驱动模型-Kset
- 青岛理工大学QUT期末考试《电子商务概论》思维导图
- 电信光猫改桥接还在苦苦破解超级密码吗?
- 在Chrome谷歌浏览器中使用H5地理位置API
- CSP 202112-3 登机牌条码
- 云计算实训总结_云计算·实训报告书
- SAP中设置参数缺省值小技巧
- Aspnet Mvc 前后端分离项目手记(三)关于restful 风格Url设计
- 【深度学习6】对比学习(Contrastive Learning)入门
- 用c语言求五位回文数,C语言求回文数(详解版)
- 一个喜欢搜罗软件的哥们
- 沈航数值-17-18年A-有答案
- AVX指令集是什么?(Advanced Vector Extensions 高级向量扩展)
- 使用 HuggingFace Transformers创建自己的搜索引擎