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,以及上网说的大部 ...
随机推荐
- 别让HR再质问我：我费劲招的人，你用缓存问废了，不能简单点？
概念 缓存穿透 在高并发下,查询一个不存在的值时,缓存不会被命中,导致大量请求直接落到数据库上,如活动系统里面查询一个不存在的活动. 缓存击穿 在高并发下,对一个特定的值进行查询,但是这个时候缓存正好 ...
- 一文说通Dotnet Core的后台任务
这是一文说通系列的第二篇,里面有些内容会用到第一篇中间件的部分概念.如果需要,可以参看第一篇:一文说通Dotnet Core的中间件 一.前言 后台任务在一些特殊的应用场合,有相当的需求. 比方, ...
- ODEINT 求解常微分方程（2）
import numpy as np from scipy.integrate import odeint import matplotlib.pyplot as plt # function tha ...
- 是时候拥抱.NET CORE了
微软和社区已经做了大量艰苦的工作,使.net core成为市场上具有竞争力的框架,帮助开发人员快速开发具有最佳性能和可扩展性的强大应用程序.做的最棒的事情使.net framework开发人员不需要任 ...
- 在Linux下制作Linux&windows启动盘
在Linux下制作Linux&windows启动盘 如何在Linux-mint环境下,制作其他Linux发行版的UEFI启动盘,以及Windows10的UEFI模式启动盘. 对于U盘的操作,可 ...
- android中getWidth()和getMeasuredWidth()之间的区别
先给出一个结论:getMeasuredWidth()获取的是view原始的大小,也就是这个view在XML文件中配置或者是代码中设置的大小.getWidth()获取的是这个view最终显示的大小,这个 ...
- Android学习笔记上下文菜单
布局文件main_activity.xml <?xml version="1.0" encoding="utf-8"?> <RelativeL ...
- SLS编写规范
SLS编写规范 规范要点说明 首先,状态的执行不可回滚,执行完了就是执行完了,并不会中断回滚,其次,状态的执行,可以反复执行,也就是说一个状态文件,可以多次来进行调用. 在编写状态文件过程中,有以下几 ...
- Kali中密码暴力破解工具hydra的使用
前言 hydra是著名黑客组织thc的一款开源的暴力破解密码工具,功能非常强大,kali下是默认安装的,几乎支持所有协议的在线破解.密码能否破解,在于字典是否强大.本文仅从安全角度去讲解工具的使用,请 ...
- Android Studio出现:Cause: unable to find valid certification path to requested target问题解决
Android Studio , Flutter , IDEA 工程报错 unable to find valid certification path to requested target 最新解 ...