前端 05
今日内容详细
一、JS获取用户输入
1.语法结构
①普通数据(输入、选择)
标签对象.value
②文件数据(上传)
标签对象.files
标签对象.files[0]
2.适用以下标签
- .input
- .select
- .textarea
3.JS操作
4.获取值操作
二、JS类属性操作
1.class的操作
标签对象.classList
- 标签对象.classList.remove() 删除指定类
- 标签对象.classList.add() 添加类
- 标签对象.classList.contains() 存在返回true，否则返回false
- 标签对象.classList.toggle() 存在就删除，否则添加
2.用法
三、JS样式操作
1.语法结构
标签对象.style.标签样式属性名
obj.style.backgroundColor="red"backgroundColor
backgroundImage2.代码实操
四、事件(最核心的部分)
1.定义
事件可以简单的理解为是给html标签绑定了一些额外的功能(能够触发js代码的运行)
2.功能
| onclick | 当用户点击某个对象时调用的事件句柄 |
| ondblclick | 当用户双击某个对象时调用的事件句柄 |
| onfcous | 元素获得焦点 // 练习：输入框 |
| onblur | 元素失去焦点 应用场景：用于表单验证，用户离开某个输入框时，代表已经输入完了，我们可以对它进行验证 |
| onchange | 域的内容被改变 应用场景：通常用于表单元素，当前元素内容被改变 |
| onkeydown | 某个键盘按键被按下 应用场景：当用户在最后一个输入框按下回车按键时，表单提交 |
| onkeypress |
某个键盘被按下并松开 |
| onkeyup | 某个键盘按键被松开 |
| onload | 一张页面或一幅图像完成加载 |
| onmousedown | 鼠标按钮被按下 |
|
onmousemove |
鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标移到某元素之上 |
| onselect | 在文本框中的文本被选中时发生 |
| onsubmit | 确认按钮被点击，使用的对象是from |
3.绑定事件的两种方式
<input type="button" value="点我" ondbclick=“func1()>
<button id="d1">点击有惊喜！</button>
<script>
//绑定事件的方式1：提前写好函数，标签内容指定
function func1(){
alter(123)
}
//绑定事件方式2：先查找标签，然后批量绑定
let btnEle = document.getElementById('d1')
btnEle.onclick = function(){
alter(321)
}
</script>4.事件中的关键字this
let btnEle = document.getElementById('d1')
btnEle.onclick = function (){
alter(222)
console.log(this)
}
# this指代的是当前被操作的标签对象5.将js执行代码放在head标签内
window.onload = function(){
页面的js代码
}
# 等待文档加载完毕之后再执行一些js代码五、JS事件案例
-
用户输入
点击事件 onclick先判断该方法带不带功能，带功能是否存在或者去掉。部分代码： <form action=""> <p>username: <input id="username" type="text" name="username" placeholder="请输入你的用户名" > </p> <div id="r1"><span class="errors" style="color: red"></span></div> <p>password: <input id="password" type="text" name="password" placeholder="请输入你的密码"> <div id="r2"><span class="errors" style="color: red"></span></div> </p> </form> <div class="c8"> <input id="btn" type="submit" value="用户登录"> <input type="reset" value="重置密码"> </div> <script> //1.查找用户提交的id let btn1Ele = document.getElementById('btn'); //2.绑定单击事件 btn1Ele.onclick = function (){ //3.获取用户输入的用户名和密码 let usernameVal = document.getElementById('username'); let passwordVal = document.getElementById('password').value; // alert(usernameVal.value) // alert(passwordVal) //4.判断用户名和密码是否合法 if(usernameVal.value === 'cg'){ //5.查找获取用户名的input框下面的span标签 let span1Ele = document.getElementsByClassName('errors')[0]; span1Ele.innerText = '用户名不能是cg！' } if(passwordVal.length === 0){ //5.查找获取密码的input框下面的span标签 let span2Ele = document.getElementsByClassName('errors')[1]; span2Ele.innerText = '密码不能为空！' } } </script> -
省市联动
文本域变化事件 onchange注意：for(){} 针对字典可以传一个参数也行，但是对于数组必须要三个参数。 部分代码： 省份：<select name="" id="province"></select> 市区：<select name="" id="city"></select> <script> let data = { "河北": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"], "安徽": ["芜湖", "合肥"], "上海": ["浦东新区", "青浦区"], "深圳": ["宝安", "龙华"] } //提前查找select标签 let proEle = document.getElementById('province'); let cityEle = document.getElementById('city'); //获取所有省份信息 for(let pro in data){ //创建option标签 let opEle = document.createElement('option'); opEle.innerText = pro //添加value属性 opEle.setAttribute('value', pro); //将上述的option标签添加到第一个select标签内 proEle.append(opEle); } //给省份下拉框绑定文本域的变化事件 proEle.onchange = function (){ cityEle.innerText = ''; // 获取用户选择的省份 let currentPro = this.value; //根据省份获取对应的市区列表信息 let citylist = data[currentPro]; //循环获取市信息 for(let i=0; i<citylist.length;i++){ //创建option标签 let opEle = document.createElement('option'); opEle.innerText = citylist[i] //添加value属性 opEle.setAttribute('value', citylist[i]); //将上述的option标签添加到第二个select标签内 cityEle.append(opEle); } } </script>
六、jQuery类库
-
兼容多浏览器的
JavaScript库极大简化
JavaScript编程。它的宗旨就是：Write less, do more -
优势
JQuery的选择器用起来很方便、链式表达式（将多行变为一行，简化代码）、支持事件，样式，动画、Ajax操作、插件扩展开发。
-
本地导入
使用
jQuery必须要先导入，这个本质就是js文件。提前下载该文件并导入。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> -
网络
CDN服务只要计算机能够联网就可以直接导入。
远距离的数据交互通过海底光缆略慢，可以用
CDN服务体验就近的服务器（就是将资源储存各地服务器中），快速访问资源。但是收费。免费
CND服务>>>Bootch。
七、jQuery基本使用
jQuery() >>> $() #简写1.JS与jQuery语法对比
eg：
$("#i1").html() 相当于js语法 document.getElementById("i1").innerHTML; #获取id值为i1的元素的html代码
1.js操作
>>let p1Ele = document.getElementsByTagName('p')[0]
undefined
>>p1Ele.style.color='red'
'red'
>>let p2Ele = document.getElementsByTagName('p')[1]
undefined
>>p2Ele.style.color='green'
'green'
2.jQuery操作
>>$('p').first().css('color', 'yellow')
jQuery.fn.init [p, prevObject: jQuery.fn.init(2)]
>>$('p').first().css('color', 'blue').next().css('color','yellow')
jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]2.jQuery选择器查找标签之后的结果与js有何区别
1.jQuery查找标签的结果是其产生对象的数组
>>$('p')
jQuery.fn.init(2) [p, p, prevObject: jQuery.fn.init(1)]
2.js查找标签只是单独的数组
>>document.getElementsByTagName('p')
HTMLCollection(2) [p, p]
3.两者可相互转换。
jQuery对象转标签对象用索引：
>>$('p')[0]
>>document.getElementsByTagName('p')[0]
标签转jQuery对象要使用 $()，目的是为了使用jQuery里的方法。
>>$(document.getElementsByTagName('p')[0])
jQuery.fn.init [p]
4.jQuery对象和Dom(标签)对象相互不能彼此使用里的方法。除了先做转换。
选择器
id选择器：
$("#id")
标签选择器：
$("tagName")
class选择器：
$(".className")
配合使用：
$("div.c1") // 找到有c1 class类的div标签
组合选择器：
$("#id, .className, tagName")
层级选择器：
x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y八、基本筛选器（了解）
:first // 相当于索引[0] 第一个数值
:last // 最后一个
:eq(index) // 索引等于index的那个元素
:even //匹配所有索引值为偶数的元素，从0开始计数
:odd //匹配所有索引为奇数的元素，从0开始计数
:gt(index) //匹配所有大于指定索引值的元素
:lt(index) //匹配所有小于指定索引值的元素
:not(元素选择器) //移除所有满足not条件的标签
:has(元素选择器) //选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)>>$('ul li')
jQuery.fn.init(5) [li, li#d1, li, li, li, prevObject: jQuery.fn.init(1)]
>>$('ul li:first') //找第一个li
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
>>$('ul li:last') //找最后一个li
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
>>$('ul li:eq(1)') //找索引值为1的li
>>$('ul:hash(".d1")') //找ul类标签名不是d1的ul九、表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
:enabled
:disabled #禁用
:checked
:selected
eg:
>>$('input'[type="text"])
jQuery.fn.init {}
>>$(':text')
jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]
>>$(':password')
jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]
#注意：
>>$(':checked')
jQuery.fn.init(4) [input.c, input.c, input.c, option, prevObject: jQuery.fn.init(1)]
>>$(':selected')
jQuery.fn.init [option, prevObject: jQuery.fn.init(1)]
''' checked 可以找到 option中有selected的，但是selected不能找到input里面的checked
'''但是可以用下面这种方式改变checked查找。
>>$('input:checked')
jQuery.fn.init(3) [input.c, input.c, input.c, prevObject: jQuery.fn.init(1)]
浙公网安备 33010602011771号