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,以及上网说的大部 ...
随机推荐
- 关于cronExpression表达式
spring 定时任务设置,关于cronExpression表达式: 字段 允许值 允许的特殊字符 秒 0-59 , - * / 分 0-59 , - * / 小时 0-23 , - * / 日期 1 ...
- sed中使用shell变量
假设希望在 file_to_modified 文件最后新增一行以下信息:传入 shell 脚本文件的第一个参数,以及当前时间(YYYY-MM-DD HH:MMS) date "+%Y-%m- ...
- c常用函数-atoi 和 itoa
atoi 和 itoa atoi的功能是把一个字符串转为整数 Action(){ int j; char *s=""; j = atoi(s); lr_output_message ...
- Jmeter基础003----Jmeter组件之测试计划和线程组
一.测试计划 1.界面展示 测试计划是测试脚本的容器,主要是对测试脚本做总体设置.它定义了测试要执行什么,怎么执行(执行的).其界面如下图所示: 2.设置用户定义变量 在测试计划中定义的变量是在整 ...
- 命令中"|"的意义
管道命令,是指 | 的左边运行结果是|右边的输入条件或者范围.如:history | grep date指从history这条命令运行的结果中显示包含有 “date” 的命令 下面举一个例子: 这是运 ...
- Android笔记布局资源文件
在项目的res--layout目录下的文件叫布局资源文件,用于控制页面的布局显示 在Java代码中引用布局资源我们已经很熟悉了. setContentView(R.layout.activity_ma ...
- MySQL数据库几种常用的索引类型使用介绍
一.简介 MySQL目前主要有以下几种索引类型: 1.普通索引 2.唯一索引 3.主键索引 4.组合索引 5.全文索引 二.语句 1 2 CREATE TABLE table_name[col_nam ...
- JAVA设计模式 1 设计模式介绍、单例模式的理解与使用
数据结构我们已经学了一部分了.是该了解了解设计模式了.习惯了CRUD的你,也该了解了解这一门神器.我为啥要说是神器呢? 因为在大厂的面试环节.以及很多的比如 Springboot Mybatis 等开 ...
- linux最小化安装命令补全
bash-completion 需要安装bash-completion才能补全,安装后,重新打开一个窗口就能生效.
- 505. The Maze II
原题链接:https://leetcode.com/articles/the-maze-ii/ 我的思路 在做完了第一道迷宫问题 http://www.cnblogs.com/optor/p/8533 ...