一、js获取用户输入
# 在css中获取用户输入可以是form表单的input、option、textarea
js中获取用户输入数据
普通数据(输入、选择):
标签对象.value
文件数据(上传)
标签对象.file # 这种只能获取到文件的路径地址
标签对象.files[0] # 获取到文件的对象
二、js类属性操作
标签对象.classList
# 获取所有的标签对象所有的类属性
标签对象.classList.contains()
# 判断标签是否有指定的属性
标签对象.classList.add()
# 添加属性
标签对象.classList.remove()
# 删除属性
标签对象.classList.toggle()
# 标签中有该属性就删除 没有就添加
三、样式操作
# 样式操作应该是由css编写 不应该有js编写 所以尽量不要用js去操作标签的样式
当我们查找标签后 在得到一个标签对象之后 我们就可以操作了
标签对象.style.标签样式属性名
eg:
divEle.style.backgroudColor = 'red' # 该标签的背景色就被修改了
四、事件
'''
事件:
事件就像是当标签达到某个条件的时候 自动触发js代码运行
eg:当用户点击一个按钮 自动弹出警示框
'''
绑定事件的两种方式:
# 方式1:提前写好函数 在标签内直接绑定
<input type="button" value="点我" onclick="func1()">
<script>
function func1(){
alert('是男人')
}
</script>
# 方式2:先查找标签 然后可以批量绑定
<button id="d1">点击</button>
<script>
let btnEle = document.getElementById('d1')
btnEle.onclick = function () {
alert('弹出框')
}
</script>
# 事件中的关键字this
<button id="d1">点击</button>
<script>
let btnEle = document.getElementById('d1')
btnEle.onclick = function () {
alert('321')
console.log(this)
}
</script>
# this指代的是当前被操作的标签对象
1.事件的补充
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
五、事件案列
<!--1.数据校验
获取用户名和密码 校验是否符合 并展示相应提示
给普通按钮绑定一个点击事件 触发校验动作 -->
<p>
username:<input type="text" id="username">
<span style="color:red" id="d1"></span>
</p>
<p>
username:<input type="text" id="password">
<span style="color:red" id="d2"></span>
</p>
<input type="button" id="btn" value="提交">
<script>
// 给按钮绑定一个点击事件
// 1.先查找按钮标签
let btnEle = document.getElementById('btn')
// 2.绑定点击事件
btnEle.onclick = function () {
// 3.获取用户名和密码
let userNameVal = document.getElementById('username').value;
let passWordVal = document.getElementById('password').value;
// 判断用户名是否为jsaon
if (userNameVal === 'jason'){
// 4.查找span标签
let span1Ele = document.getElementById('d1')
// 给span标签添加文本内容
span1Ele.innerText = '用户名不能为jason'
}
// 判断密码是否为空
if (passWordVal.length === 0){
let span2Ele = document.getElementById('d2')
// 给span标签添加文本内容
span2Ele.innerText = '密码不能为空'
}
}
</script>
<!--是要点击提交按钮 就判断用户的输入是否符合-->
省份:<select name="" id="province">
</select>
市区: <select name="" id="city">
</select>
<script>
let data = {
"河北": ["廊坊", "邯郸"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"],
"安徽": ["芜湖", "合肥"],
"上海": ["浦东新区", "青浦区"],
"深圳": ["宝安", "龙华"]
};
// 查找省份标签
let proEle = document.getElementById('province')
let cityEle = document.getElementById('city')
// 循环提取省份
for (pro in data){
// 创建option标签
let opEle = document.createElement('option')
// 在option添加省份
opEle.innerText = pro
// 将option标签创建value属性
opEle.setAttribute('value', pro)
// 将option标签添加到第一个select标签中
proEle.append(opEle)
}
// 给省份标签添加事件
proEle.onchange = function () {
// 每次给下拉框添加市区信息前 应该把之前的数据清空
cityEle.innerText = ''
// 获取用户选择的省份信息
let proVal = this.value;
// 获取省份对应的市区信息
let cityVal = data[proVal]
// 循环获取市区信息
for (let i = 0; i < cityVal.length; i++) {
// 创建option标签
let opEle = document.createElement('option')
// 添加市区信息
opEle.innerText = cityVal[i]
// 创建option标签value属性
opEle.setAttribute('value', cityVal[i])
// 添加到第二个select标签
cityEle.append(opEle)
}
}
<!--用户选择省份的时候市区先显示对应的市区名称-->
六、jQuery简介
'''基本简绍'''
1.兼容多浏览器
IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作
2.封装了js代码
核心代码也就几十KB 加载速度块 极大的提升编写效率
3.宗旨
'''
Write less, do more
写的更少,做的更多
'''
'''版本区别'''
1.x 兼容IE678
2.x 不兼容IE678
3.x 不兼容IE678
'''下载使用'''
下载地址:https://jquery.com/
中文文档:http://jquery.cuishifeng.cn/
jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘)
jQuery本身就是一个js文件 里面写了一些js代码而已
'''导入方式'''
1.本地jQuery文件
不会受到网络影响
2.CDN加速服务
需要确保互联网
min.js 压缩之后的文件 容量更小
.js 没有压缩之后的文件 容量稍大
'''基本使用'''
将页面上的两个p标签文本内容一个而变成红色 一个变成蓝色
原生js代码
let p1Ele = document.getElementsByTagName('p')[0]
let p2Ele = document.getElementsByTagName('p')[1]
undefined
p1Ele.style.color = 'red'
'red'
p2Ele.style.color = 'blue'
'blue'
# 原生js代码要先查找页面上的标签 然后才能通过改标签点style改变样式
jQuery代码
$('#d1').css('color', 'red').next().css('color','bule')
# jQuery可以一行代码搞定
七、jQuery基本使用
'''
本来使用jQuery应该是在括号前面加上 jQuery()但是觉得太麻烦就变成了$符
jQuery() >>>: $()
'''
'''基本选择器'''
$('#d1') # id选择器
$('.c1') # 类选择器
$('p') # 标签选择器
# 配合使用
$('div.c1') # 找到有c1 class类的div标签
# 组合选择器
$('#d1,.c1,p')
# 层级选择器：
x和y可以为任意选择器
$("x y"); # x的所有后代y（子子孙孙）
$("x > y"); # x的所有儿子y（儿子）
$("x + y") # 找到所有紧挨在x后面的y
$("x ~ y") # x之后所有的兄弟y
1.jQuery查找标签与js的区别
# jQuery和js查找标签的结果:
结果集都是数组但是功能有区别
1.如果使用索引取值 那么都是标签对象
标签对象是无法调用jQuery提供的方法的
2.标签对象如果想转换成jQuery对象需要使用 $()
转换成jQuery对象的目的是为了使用jQuery提供的更多方法
eg:
$('p')[0] # 现在已经是标签对象了 不能调用jQuery的方法
$('p')[0].css('color','red') # 因为.css是jQuery的方法所以会报错
$('p')[0].style.color = 'red' # 因为.style是原生js方法所以可以调用
red
$('p').first() # 这个还是jQuery对象
$('p').first().css('color','red') # 因为.css是jQuery的方法所以不会报错
jQuery.fn.init [p, prevObject: jQuery.fn.init(2)] # 标签对象
$('p').first().style.color = 'green' # 因为.style是原生js方法所以会报错
$($('p')[0]).css('color','orange') # 因为最外面一层还是jQuery对象所以不会报错
jQuery.fn.init [p]
'''
所以标签对象只能调用原生js方法
jQuery对象只能调用jQuery方法
不能乱窜
'''
2.基本筛选器
$('ul li:first') # 第一个
$('ul li:last') # 最后一个
$('ul li:eq(index)') # 索引等于index的那个元素
$('ul li:odd') # 匹配所有索引值为奇数的元素，从 0 开始计数
$('ul li:even') # 匹配所有索引值为偶数的元素，从 0 开始计数
$('ul li:gt(index)') # 匹配所有大于给定索引值的元素
$('ul li:lt(index)') # 匹配所有小于给定索引值的元素
$('ul li:not(li)') # 移除所有满足not条件的标签
$('ul:has(#d1)') # 查看内部含有id是d1的ul标签 id是从ul的后代是否存在 存在才会找ul
3.表单选择器
# form表单下的标签有许多的属性 快速查找可以用属性查找 但是这个只能是form表单下查找
可以看成是属性选择器优化而来
注意:$(':checked')
# 这个可以把默认属性都找出来 但是也会把option的默认属性找出来
$('input:checked')
# 所以想要精确查找可以在前面加上input标签
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
:enabled
:disabled # 隐藏属性
:checked
:selected
八、作业
1.定时
<!-- 有一个input框 两个按钮 一个开始 一个结束
1.点击开始按钮 input内展示当前时间并按秒数刷新
2.点击结束按钮 input内展示停止-->
<p><input type="text" id="time"></p>
<input type="button" value="开始" id="start">
<input type="button" value="停止" id="stop">
<script>
// 先查找三个标签
let timeEle = document.getElementById('time')
let startEle = document.getElementById('start')
let stopEle = document.getElementById('stop')
// 把时间放到input框展示
function time() {
// 获取时间
let timeVal = new Date()
// 将获取到的时间添加到input框中
timeEle.value = timeVal.toLocaleString()
}
// 定义一个时间对象
let timeObj = null
// 给开始按钮绑定事件
startEle.onclick = function () {
if (!timeObj) { // 要执行循环展示时间之前应该定义一个时间对象 在判断时间对象有没有值 没有值才可以循环 要不然一直点击开始按钮 就停止不下来了
// 循环展示时间
timeObj = setInterval(time, 1000)
}
}
// 给停止按钮绑定事件
stopEle.onclick = function (){
// 取消循环任务
clearInterval(timeObj)
// 取消完之后要给时间对象变为false
timeObj = ''
}
</script>
2.搜索框
<!--input内有默认的文本值 用户一旦选择该input想做内容修改
就提前把内容清空-->
<input type="text" id="d1" value="jason">
<script>
let inpEle = document.getElementById('d1')
// 给输入框绑定事件
inpEle.onfocus = function (){
// 让内容清空
this.value = ''
}
</script>
