day56 js收尾，jQuery前戏
一、原生js事件绑定
1 开关灯案例
<script>
let divEle = document.getElementById('d1')
let butEle = document.getElementById('d2')
butEle.onclick = function () {
divEle.classList.toggle('back_yellow')
}
</script>
2 input框获取焦点，失去焦点案例
<script>
let inpEle = document.getElementById('d1')
// 获取input框焦点时
inpEle.onfocus = function () {
inpEle.value = ''
}
// 点其他地方失去input焦点时
inpEle.onblur = function () {
inpEle.value = '请吃屎'
}
</script>
3 实现展示当前时间，定时功能
<script>
let inpEle = document.getElementById('d1')
let butEle_start = document.getElementById('start')
let butEle_end = document.getElementById('end')
let t = null
function showTime() {
let nowTime = new Date();
inpEle.value = nowTime.toLocaleString()
}
butEle_start.onclick = function () {
if (!t){
// 设置定时器
t = setInterval(showTime,1000)
}
}
butEle_end.onclick = function () {
// 清除定时器
clearInterval(t)
t = null
}
</script>
4 省市联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</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(let key in data){
let opEle = document.createElement('option')
opEle.innerText = key
opEle.value = key
proEle.appendChild(opEle)
}
proEle.onchange = function () {
let currentPro = proEle.value
let currentCityList = data[currentPro]
let sa = "<option disabled selected>请选择</option>"
cityEle.innerHTML = sa
cityEle.innerText = ''
for(let i=0;i<currentCityList.length;i++){
let citys = currentCityList[i]
let currcityEle = document.createElement('option')
currcityEle.value = citys
currcityEle.innerText = citys
cityEle.appendChild(currcityEle)
}
}
</script>
</body>
</html>
二、jQuery入门
介绍：jQuery内部封装了原生的js代码，能让我们通过写更少的代码去完成更多的功能。
jQuery和js的关系就像python中的模块和python的关系相同，但在前端模块称为‘类库’
1 jQuery的两种导入方式
1.1 直接下载本地
如果觉得每个页面都要添加链接jQuery很麻烦，可以在pycharm自动初始化代码处修改
1.2 直接引入jQuery提供的CDN服务（基于网络直接请求加载）
国内免费的CDN：https://www.bootcdn.cn/
// 在有网的情况下
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
1.3 jQuery基本语法
jQuery(选择器).action()
// jQuery === $
// jQuery与js代码对比
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
// jQuery操作标签
$('p').css('color','blue')
2、查找标签
// id选择器
$('#d1')
S.fn.init [div#d1]
// 类选择器
$('.c1')
S.fn.init [p.c1, prevObject: S.fn.init(1)]
// 标签选择器
$('span')
S.fn.init(3) [div, div#d1, div, prevObject: S.fn.init(1)]
// jQuery选择到的是一个jQuery对象，可以直接使用也可以转化成标签对象再使用
// jQuery对象如何转化成标签对象
$('#d1')[0]
// 标签对象转化成jQuery对象
$(document.getElementById('d1')）
2 组合选择器/分组选择器
$('div') # 找到所有的div标签
$('div.c1') # 找到所有div中继承了c1类的div标签
$('div#d1') # 找到id=d1的div标签
$('#d1,.c1,span') # 并列，找到id=d1的标签，继承了c1类的标签，所有span标签
$('div span') # 后代
$('div>span') # 儿子
$('div+span') # 毗邻
$('div~span') # 弟弟
3 基本筛选器
$('ul li')
$('ul li:first') # 取第一个子标签
# 注意所有选择器内部：后面的方法都可以拿出来写
$('ul li').first() == $('ul li:first')
$('ul li:last') # 最后一个子标签
$('ul li:eq(2)') # 取索引为2的标签（第三个！）
$('ul li:even') # 所有偶数索引标签 包括0
$('ul li:odd') # 所有奇数索引标签
$('ul li:lt(2)') # 索引小于索引为2的标签 不包括2
$('ul li:gt(2)') # 索引大于索引为2的标签 不包括2
$("ul li:not('#d1')") # 移除满足条件的标签
$('div:has("p")') #选择包含p标签的div标签
4 属性选择器
$('[username]') # 选择所有有username属性的标签
$('[username = "jason"]') # 选择所有username = jason 属性的标签
$('p[name = "hz"]') # 选择所有有name = hz的p标签
5 表单筛选器
# 表单选择器可以简写
$('input[type = "text"]') == $(':text')
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...
# 以上都可以简写
"""特殊情况"""
$(':checked') # 它会将含有checked的input标签，和selected的option标签都拿到
$(':selected') # 它不会 只拿selected
$('input:checked') # 自己加一个限制条件
6 筛选器方法
$('#d1').next() # id=d1标签的下一个
$('#d1').nextAll() # 下面全部
$('#d1').nextUntil('.c1') # 下面直到继承类c1的标签
$('.c1').prev() # 上面一个
$('.c1').prevAll() # 上面全部
$('.c1').prevUntil('#d2') #上面直到
$('#d3').parent() # 父标签
$('#d3').parent().parent() # 爷标签
$('#d3').parents() # 所有父标签
$('#d3').parentsUntil('body') # 取所有父标签直到body
$('#d2').children() # 所有的第一层子标签
$('#d2').siblings() # 所有同级别标签
day56 js收尾，jQuery前戏的更多相关文章
- 【前端性能】必须要掌握的原生JS实现JQuery
很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...
- 移动端用js与jquery实时监听输入框值的改动
背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...
- label用js，jquery取值赋值，以及怎么在后台取值
label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 可以这样: JS: var label=document.getElementByIdx_x("id&qu ...
- JS与Jquery区别
很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下: 加载区别: var myfunction(){}; JS:1.window.onload=function(){} 2.<body ...
- js和jquery如何获取图片真实的宽度和高度
按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度 1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...
- JS和JQuery的总结
JS部分 一, 词法结构 区分大小 注意://单行 /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...
- js和jquery获取当前对象的子元素
开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...
- js+html+jquery 个人笔记
js+html+jquery 笔记 1.获取HTML对象 var obj = document.getElementById(elementId) 对象的值: obj.value() 2.获取jQue ...
- prototype.js 和 jQuery.js中 ajax 的使用
这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...
随机推荐
- sublime配置C++编译环境
配置C++编译命令 { "file_regex": "^(..[^:]*):([0-9]+):?([0-9]+)?:? (.*)$", "workin ...
- Java 技术网站总结（不停更新）
Spring Spring 中文手册 Spring 教程 Spring For All Spring 学习笔记 Spring Boot Break易站 Spring Cloud 中文文档 Spring ...
- Right turn【模拟+标记】
Right turn 题目链接(点击) frog is trapped in a maze. The maze is infinitely large and divided into grids. ...
- 设计模式系列之工厂模式三兄弟(Factory Pattern)
说明:设计模式系列文章是读刘伟所著<设计模式的艺术之道(软件开发人员内功修炼之道)>一书的阅读笔记.个人感觉这本书讲的不错,有兴趣推荐读一读.详细内容也可以看看此书作者的博客https:/ ...
- VS Code项目中通过npm包的方式共享代码片段的方案实现
VS Code项目中通过npm包的方式共享代码片段的方案实现 上周在 "VS Code项目中共享自定义的代码片段方案" 的文章中提到过一个共享代码片段的方案,上周经过调研后并没有发 ...
- 小师妹学JVM之:JDK14中JVM的性能优化
目录 简介 String压缩 分层编译(Tiered Compilation) Code Cache分层 新的JIT编译器Graal 前置编译 压缩对象指针 Zero-Based 压缩指针 Escap ...
- Vue中hash模式和history模式的区别
vue-router 中hash模式和history模式. 在vue的路由配置中有mode选项,最直观的区别就是在hash模式下的地址栏里的URL夹杂着‘#’号 ,而history模式下没有.vue默 ...
- Mac 安装fiddler
1, 安装mono 2,下载fiddler for mac https://www.telerik.com/download/fiddler 3. 解压fiddler-mac.zip 4, cd fi ...
- c#openCV图片传递-尝试读取或写入受保护的内存。这通常指示其他内存已损坏。解决方法
未处理AccessViolationException 这通常指示其他内存已损坏,这里内存损坏并非物理的内存条损坏.猜想是执行到此步骤后,内存空间被清理了,没有找到内存地址的感觉. public st ...
- WeChair项目Beta冲刺(9/10)
团队项目进行情况 1.昨日进展 Beta冲刺第九天 昨日进展: 项目开始扫尾 2.今日安排 前端:前端工作已经完成 后端:扫码占座后端测试,实现对超时预约座位下座的功能 数据库:和后端组织协商扫 ...