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,以及上网说的大部 ...
随机推荐
- 1.react的基础
1.react:专注于UI得一个js库 2.选择使用框架得原因: 写起来简单方便了,但是从稳定性上考虑得话还是原生js要稳定,所以也有很多公司直接使用原生js,但是从开发周期上来说时间会长 之前再写页 ...
- TB6612FNG电机驱动模块
TB6612FNG电机驱动模块 模块原理图 模块的使用 TB6612是双驱动,也就是可以驱动两个电机 下面分别是控制两个电机的IO口 STBY口接单片机的IO口清零电机全部停止, 置1通过AIN1 A ...
- Python 中的类的继承
class parent(object): def override1(self): print("Parent") class child(parent): def overri ...
- 树莓派学习--安装GPIO Zero
GPIO ZERO 在Raspbian的映像内默认安装,对于其他系统 先更新存储库列表: sudo apt update 对于python3: sudo apt install python3-gpi ...
- Springboot 的单元测试
1 测试基础类 @RunWith(SpringRunner.class) @SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment. ...
- delphi 控件查询
//老古董,以前这些东西太多了,收藏的没过来,只好粘贴至此,当然不是本人整理的. delphi 控件查询:http://www.torry.net/ http://www.jrsoftware.org ...
- 2019-02-04 Linux的一些常用命令学习
今天在电脑里用装了个ubuntu的虚拟机,学习了一下基本操作 ls ls用于查看文件夹的文件 mkdir mkdir可以创建一个文件夹(directory) cd 目录切换 pwd print wor ...
- centos7搭建EFK
环境: system: CentOS Linux release 7.7.1908 elasticsearch: elasticsearch-7.5.1-1.x86_64 kibana: kibana ...
- python基础内容整理（一）
基本数据类型 字符串 String 字符串是不可变类型 字符串的分割: s.split(sep)以给定的sep为分隔符对s进行分割. In [4]: s = "hello world&quo ...
- windows下使用虚拟机安装linux操作系统
前言:虚拟机是开发者的好帮手,它可以帮助我们在同一台电脑上创建不同的环境,这样你就可以在不影响原有的环境下,使用另外一套新的环境去完成你的开发工作.相信不少在windows下开发的同学对此深有体会,本 ...