原生js绑定事件
-
开关灯案例
<head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { 400px; height:400px; border-radius: 50%; } .bg_wheat { background-color: wheat; } .bg_black { background-color: black; } </style> </head> <body> <div class="c1 bg_wheat bg_black"></div> <button>开关</button> <script> let divEle = document.getElementsByClassName('c1')[0] let bntEle = document.getElementsByTagName('button')[0] bntEle.onclick = function () { // 绑定点击事件 divEle.classList.toggle('bg_black') // 动态的修改div标签的类属性 } </script> </body>.toggle('bg_black')有'bg_black'则删除该属性，显示原来的颜色，无则增加该属性，对原来的颜色进行覆盖，到达变色的效果。
-
input框获取/失去焦点案例
<body> <input type="text" id="d1" value="给我整点内容可好！"> <script> let inputEle = document.getElementById('d1') // 获取焦点事件 inputEle.onfocus= function () { inputEle.value='' // 点value就是获取,等号赋值就是设置 } // 失去焦点事件 inputEle.onblur= function () { inputEle.value='Hello world！' // 给input标签重写赋值 } </script>为便签设置默认值value='...',先查找到标签；给标签绑定获取焦点事件和失去焦点事件；鼠标点击input框，触发获取焦点事件，将文本清空；鼠标移开触发失去焦点事件，给value赋值一个文本，鼠标移开后显示该文本。
-
实时展示当前事件
<body> <input type="text" id="d1" style="display: block;height:50px;251px"> <button id="d2">开始</button> <button id="d3">结束</button> <script> // 定义一个存储计时器的全局变量 let t = null let inputEle = document.getElementById('d1') let startEle = document.getElementById('d2') let endEle = document.getElementById('d3') // 1 访问页面之后，将访问的时间展示到input框中 // 2 动态的展示当前时间 // 3 页面上加两个按钮 一个开始 一个结束 function showTime(){ let currentTime = new Date() inputEle.value=currentTime.toLocaleString(); } startEle.onclick = function(){ // 限制定时器只能开一个 if(!t){ t = setInterval(showTime,1000) // 如果不判断t是否为空就进行赋值的话，每点击一次就会开设一个定时器 而t只指代最后一个 } } endEle.onclick = function(){ clearInterval(t) // 如果开设很多个计时器，那么只能清除一个计时器 t=null // 还应该将t重置为空 } </script> </body>省市联动
<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 optEle = document.createElement('option') // 2 设置文本 optEle.innerText= key // 3 设置值value optEle.value=key // 4 将创建的option标签添加到第一个select标签内 proEle.append(optEle) } // 文本域变化事件，change事件 proEle.onchange = function(){ // 1 在每次选择省份后清空之前省份的市标签 cityEle.innerHTML='' // 2 添加一个默认选中且不能操作的提示标签 let sss = "<option disabled selected>请选择</option>" cityEle.innerHTML=sss // 3 获取当前选择的省份用一个变量接收 let currentPro = proEle.value // 4 获取当前省份的市列表 let currentCityList = data[currentPro] // 5 for循环所有的市，渲染到第二个select标签中 for (let i=0;i<currentCityList.length;i++){ // 5.1 创建市标签 let optEle = document.createElement('option') // 5.2 为市标签设置文本 optEle.innerText= currentCityList[i] // 5.3 为市标签设置值value optEle.value= currentCityList[i] // 5.4 将创建的市option标签添加到第二个select标签内 cityEle.append(optEle) } } </script> </body>
JQuery
1）jQuery是一个轻量级（几十kb）的、兼容多浏览器的JavaScript库。
2）jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
版本介绍
- 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
- 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
- 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
注意：jQuery在使用前一定要确认jQuery文件被导了。
jQuery导入问题
-
文件下载到本地，如何解决多个文件反复书写引入语句的代码
可以借助pycharm自动初始化代码功能帮我们在创建HTML文件是自动添加引入代码
步骤：
点击File、点击Flie下面的settings打开设置窗口，在点击Editor编辑、找到file and code template、 第一个就是HTML文件，将导入代码添加到自动初始化代码中
-
不想下载文件，可以直接引入jQuery提供的CDN服务（基于网络直接请求加载）
""" CDN:内容分发网络 CDN:有免费的也有收费的 前端免费的cdn网站: bootcdn""" # 导入代码 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> """不下载文件，用这样方式导入的前提是你的计算机必须要有网络""""""
jQuery内容
- 选择器
- 筛选器
- 样式操作
- 文本操作
- 属性操作
- 文档处理
- 事件
- 动画效果
- 插件
jQuery基本语法
jQuery(选择器).action()
# 简写，将jQuery用$符代替
$(选择器).action()
jQuery与js代码对比
用原生的js代码改变p标签的文本颜色和用jQuery修改看谁跟简洁明了
# 1 原生的js代码
let pEle = document.getElementById('d1') # 先要查找到标签
pEle.stye.color = 'red' # 再改样式，设置颜色
# 2 用jQuery
$('p').css('color','bule') # 查找和设置在一行就能完成
jQuery如何查找标签
1.基本选择器
基本选择器获得都是jQuery对象，本质也是数组
# 1 id选择器
$('#d1');
# w.fn.init [div#d1]
# 2 类选择器
$('.c1');
# w.fn.init [p.c1, prevObject: w.fn.init(1)]
# 3 标签选择器
$('span');
"""w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]0: span1: span2: spanlength: 3prevObject: w.fn.init [document]__proto__: Object(0)"""
# 4 通用选择器(基本不用)
$('*');
"""w.fn.init(15) [html, head, meta, title, meta, link, script, script, body, div#d1, span, p, span, p.c1, span, prevObject: w.fn.init(1)]"""
jQuery对象与便签对象互相转换
1）jQuery对象转标签对象
加上索引取值，取到的就是标签对象，跟js查找标签获得的结果相同
$('#d1')[0]
# <div id="d1">…</div>
document.getElementById('d1')
# <div id="d1">…</div>
- 标签对象转jQuery对象
参照python数据类型转换来记忆，int('111'),在标签对象外面套一层jQuery类：$(标签对象)
let divEle = document.getElementById('d1');
$(divEle);
# w.fn.init [div#d1]
注意：一定不要将两者弄混了， 一起jQuery对象的属性标签对象无法使用，同样标签对象的属性jQuery对象无法使用。
组合选择器/分组与嵌套
$('div') # 拿所有的div标签
# w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)]
$('div.c1') # 拿class类中有c1的div标签
"""w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)"""
$('div#d1') # 拿id为d1的div标签
w.fn.init [div#d1, 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') # 拿到所有的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') # 拿第一个li(长子)
"""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)') # 放索引，拿索引为2的li
"""w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)"""
$('ul li:even') # 拿索引为偶数的li，0包含在内：0,2,4...
"""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') # 拿奇数索引:1,3,5...
"""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)') # 拿大于索引值的li，>2: 3,4,5...
"""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)') # 拿小于索引值的li，<2: 0,1,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")') # 移除满足条件的标签，除了id为d1的li全拿到
"""w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]"""
$('div:has("p")') # 选取出包含一个或多个标签在内的标签,必须满足嵌套关系
# w.fn.init [div, prevObject: w.fn.init(1)]
除了拿所有的li，其他筛选的格式可归纳为：$('ul li:限制条件')；冒号后面跟不同的限制条件查询到不同的结果；
first：第一个、last：最后一个、eq(索引)：拿索引、even：拿偶数、odd：拿奇数、gt(2)：拿大于、lt(2)：拿小于、not()：除了这个都拿、has()：包含这个的都拿。
属性选择器
$('[username]') # 具有username属性的
# w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]
$('[username="jason"]') # 具有username属性并且等于jason的
# w.fn.init [input, prevObject: w.fn.init(1)]
$('p[username="egon"]') # p标签具有username属性并且等于jason 的
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"]')
$(':text') # 简写，会自动匹配到input[type=""],和上面的
"""w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)"""
$('input[type="password"]')
$(':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'为止，不包括'.c1'
# 标签的下方
$('.c1').prev() # 同级别上一个
$('.c1').prevAll() # 同级上面所有
$('.c1').prevUntil('#d2') # 同级别上面取到'#d2'为止，不包括'#d2''
# 父标签
$('#d3').parent() # 标签外第一层父标签,p标签
"""
w.fn.init [p, prevObject: w.fn.init(1)]0: plength: 1prevObject: w.fn.init [span#d3]__proto__: Object(0)
"""
$('#d3').parent().parent() # 标签外第二层父标签,div标签
# w.fn.init [div#d2, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent() # 标签外第三层父标签,body标签
# w.fn.init [body, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent() # 标签外第四层父标签,html
# w.fn.init [html, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent() # html外再取父标签没有语言，标签外第五层,document
# w.fn.init [document, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent().parent() # 第五层,prevObject
# w.fn.init [prevObject: w.fn.init(1)]
# 一步到位直接获取所有的父级及以上的所有标签
$('#d3').parents()
w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]
$('#d3').parentsUntil('body')
w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)]
$('#d2').children() # 儿子
$('#d2').siblings() # 同级别上下所有
$('div p')
$('div').find('p') # 两者等价，find从某个区域内筛选出想要的标签
$('div span:first')
$('div span').first() # 两者等价，从div中筛选出的第一个span
$('div span:last')
$('div span').last() # 两者等价，从div中筛选出的最后一个span
$('div span:not("#d3")')
$('div span').not('#d3') # 两者等价，从div中筛选出id不是d3的span
ps：引号使用规则，遵循外单内双或者外双内单。