Day 53 前端开发 jQuery
文章目录
1、JS操作扩展
1.1、JS获取用户输入
获取用户输入 选择
通过 标签 点 value
获取属性值
document.getElementById('d1').value
'1241414'
获取用户上传的文件数据
通过 标签 点 file
获取文件 数组 通过[0] 取值 获取文件对象
document.getElementById('d5').files[0]
File {name: '1825659-20191014121946473-388162006.jpg', lastModified: 1658977320884, lastModifiedDate: Thu Jul 28 2022 11:02:00 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 99607, …}
1.2、JS类属性操作
获取标签 所有class的属性值
classList
let div1Ele = document.getElementsByClassName('c1')[0] // 存储classname 含有c1的第一个标签
div1Ele.classList //获取该标签 所有类属性值 数组
添加 标签 class属性值
classList.add()
div1Ele.classList.add('c5')
判断 标签 class属性值是否存在
classList.contains()
div1Ele.classList.contains('c5') //返回值为布尔值
true
删除 标签 classs属性值
classList.remove()
div1Ele.classList.remove('c3')
当该属性值 不存在时 添加 该属性值 存在便删除该属性值
div1Ele.classList.toggle('c3') //存在即删除 并返回False
false
//不存在 尾部追加 返回True
1.3、 JS样式操作
通过 style关键字 来修改标签样式
style
改变 标签 背景颜色
pEle.style.backgroundColor = 'red'
2、事件
事件可以简单的理解为时给html 标签绑定了一些额外的功能(能够触发js代码的运行)
事件关键字 | 功能 | 应用场景 |
---|---|---|
onclick | 当用户点击某个对象时调用的事件句柄 | |
ondblclick | 当用户双击某个对象时调用的事件句柄 | |
onfocus | 元素获得焦点 | |
onblur | 元素失去焦点 | 用于表单验证,用户离开输入框时,代表 输入完了 我们可以对他进行验证 |
onchange | 域的内容被改变 | 通常用于表单元素 当元素内容被修改时触发 (select省市 联动) |
onkeydown | 某个键盘按键被按下 | 当用户在最后一个输入框按下回车键时 表单提交 |
onkeypress | 某个键盘按键被按下并松开 | |
onkeyup | 某个键盘按键被松开 | |
onload | 一张页面或一副图像完成加载 | |
onmousedown | 鼠标按钮被按下 | |
onmousemove | 鼠标被移动 | |
onmouseout | 鼠标从某元素移开 | |
conmouseover | 鼠标移动到某元素之上 | |
onselect | 在文本框中的文本被选中时触发 | |
onsubmit | 确认按钮被点击 使用对象是form |
2.1、绑定事件
绑定事件的两种方式
建议 使用方式二 可以批量绑定
// 方式一:通过添加属性绑 执行的函数
<input type="button" value="开关" onclick="func1()">
<script>
function func1(){
alert('bong!!')
}
</script>
//方式二:通过 标签.属性 绑定执行的函数 可以查找到多个标签 批量绑定
<button id="d1">
双击
</button>
<script>
let btnEle = document.getElementById('d1')
btnEle.ondblclick = function(this){
alert('peng!!')
}
</script>
事件中 关键字this
this
指代的是当前被操作的标签对象
let btnEle = document.getElementById('d1')
btnEle.onclick = function (this){
alert('peng!!')
console.log(this)
}
等待文档加载完毕之后再执行一些代码
windowd.onload
<script>
windowd.onload = function(){
页面 js代码
}
</script>
2.2、事件 实操
当用户点击某个对象时调用的事件句柄
ondblclick
判断 用户输入的账号密码 不能为空 做提示
<body>
<p>账号:
<input type="text" id="username">
<span class="errors" style="color: rgba(220,20,60,0.76)"></span>
</p>
<p>密码:
<input type="password" id="password">
<span class="errors" style="color:rgba(220,20,60,0.76) "></span>
</p>
<button id="btn">提交</button>
<script>
//存储按钮标签
let btnEle = document.getElementById('btn')
// 绑定事件
btnEle.onclick = function (){
let username = document.getElementById('username').value;
let password = document.getElementById('password').value;
//判断用户输入是否为空
if (username.length ===0){
//存储 输入框 提示标签
let span1Ele = document.getElementsByClassName('errors')[0]
//载入提示
span1Ele.innerText = '账号不能为空'
}
if (password.length ===0){
let span2Ele = document.getElementsByClassName('errors')[1]
span2Ele.innerText = '密码不能为空'
}
}
</script>
</body>
开关 控制 色块停止 或启动跳动
<input type="button" value="开关" onclick = func1()>
<script>
var key = null;
function func1(){
div1Ele = document.getElementsByClassName('c1')[0]
function func2() {
div1Ele.classList.toggle('c2')
}
if (!key) {
t1 =setInterval(func2, 1000)
key = true
}
else {
clearInterval(t1)
key = false
}
}
</script>
省市联动
onchange
<body>
省份:<select name="" id="province">
</select>
市区:<select name="" id="city">
</select>
<script>
let seEle1 = document.getElementById('province')
let seEle2 = document.getElementById('city')
let data = {
"上海": ["青浦区", "浦东新区"],
"浙江": ["杭州", "宁波"],
"河北省": ["廊坊", "邯郸"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"]
}
//循环 获取所有省信息
for (let pi in data){
//创建option标签
let opEle = document.createElement('option')
opEle.innerText = pi
opEle.setAttribute('value',pi)
seEle1.append(opEle)
}
//给省份 的下拉框绑定文本域变化事件
seEle1.onchange = function (){
let pname = this.value
seEle2.innerHTML=null
//根据省份获取对应的市区
let cityList = data[pname]
for (let ci=0;ci<cityList.length;ci++){
let opEle2 = document.createElement('option')
opEle2.innerText= cityList[ci]
opEle2.setAttribute('value',ci)
seEle2.append(opEle2)
}
}
</script>
</body>
3、jQuery 基本使用
jQuery() >>> $()
3.1、选择器
id选择器
$("#d1")
表爱你选择器
$("div")
class选择器:
$(".c1")
组合选择器
$("#d1,.c1,div")
层级选择器
x和y可以 为任意选择器
$("x y") //x所有的后代
$("x > y");// x所有的子代 儿子
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
3.2、jQUery与js查找到的标签区别
结果都是数组 但是功能有却别
-
如果使用索引取值 那么都是标签对象
标签对象是无法调用jQuery提供的方法的
-
标签对象如果想转换成jQuery对象 需要使用 $()
转换成jQuery对象的目的是为了使用jQuery对象需要使用 $()
$('div')
//结果都是数组 功能不同
jQuery.fn.init(3) [div#d1, div.c1, div#d2, prevObject: jQuery.fn.init
$('div')[0]
//拿到的是标签对象 不能使用jQuery方法
<div id="d1" value="1234" style="color: red;">哈哈哈</div>
//对象转为jQuery对象
$($('div')[0])
3.3、基本筛选器
$('div:first') //第一个
$('div:last') //最后一个
$('div:eq(index)') //通过索引 取值
$('div:even') //匹配所有索引值为偶数的元素 从0开始计数
$('div:odd') // 匹配所欲索引值为计数得元素,从0 开始
$('div:gt(index)') //匹配所有大于给定索引值得元素
$('div:lt(index)') //匹配所有小于给定索引值得元素
$('div:not(元素选择器)') //筛选掉所欲满足not条件得标签
$('div:has(元素选择器)') //选取所有包含一个或多个标签在其内得标签(指得是从后代元素找)
3.4、表单筛选器
可以看成是属性选择器优化而来
$(':checked')
$('input:checked')
$(':text')
$(':password')
$(':file')
$(':radio')
$(':checkbox')
$(':submit')
$(':reset')
$(':button')
$(':enabled')
$(':disabled')
$(':checked')
$(':selected')