js获取用户输入值
- 1.对于普通数据
我们可以通过标签对象点value的形式拿到普通数据的值 标签对象.value - 2.对于文件数据
如果需要获取文件数据的内容，则不能通过value，value只会拿到一个地址，需要使用 标签对像.files 标签对象.files[0]
js类属性操作
针对于类属性的操作使用：
标签对象.classList
标签对象.classList.contains() //存在返回true，否则返回false
标签对象.classList.add() // 添加类
标签对象.classList.remove() // 删除指定类
标签对象.classList.toggle() // 存在删除，不存在添加
js样式操作
let pEle = document.getElementsByTagName('p')[0]
pEle.style.backgroundColor
标签对象.style.标签样式属性名
backgroundColor //颜色
backgroundImage //图片
js事件绑定
- 事件就是给html标签，绑定了一些额外的功能操作
* 以下事件简单了解
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
- 2.绑定事件的方式
- 第一种：直接在js内直接写好
<input type="botton" value="点我" onclick="func1() "> <button>点我</button> // 两种生成按键的方式 <script> function func1(){ alert(123) } </script> - 第二种：匿名函数绑定触发(先查找标签,然后批量绑定)
<button id="d1">点我</button> <script> let btnEle = document.getElementById('d1') btnEle.onclick = function (){ alert(123) } </script>
- 第一种：直接在js内直接写好
- 两种生成按键的方式
<input type="botton" >
<button>点我</button> // 两种生成按键的方式
- 事件中的关键字this
let btnEle = document.getElementById('d1') btnEle.onclick = function (){ alert(321) console.log(this) } // this指代的是当前被操作的标签对象(也就是按钮的标签) - 等待文档加载完毕再执行的一些代码
- 当页面上的元素绑定事件时，必须等到文档加载完毕，因为不存在的元素无法绑定事件
window.onload = function () { 页面js代码 } // window.onload在文件加载过程结束的时候触发,此时文档的所有对象都位于DOM，并且内容都已加载完成 // * onload()函数存在覆盖现象
js事件案例
校验用户输入
<body>
<p>
<input type="text" id="username">
<span class="errors" style="color: red"></span>
</p>
<p>
<input type="text" id="password">
<span class="errors" style="color: red"></span>
</p>
<button id="btn">提交</button>
<script>
// 1.查找按钮标签
let btnEle = document.getElementById('btn');
// 2.绑定单击事件
btnEle.onclick = function () {
// 3.获取用户输入的用户名和密码
let userNameVal = document.getElementById('username').value;
let passWordVal = document.getElementById('password').value;
// 4.判断用户名和密码是否合法
if(userNameVal === 'jason'){
// 4.1.查找获取用户名的input框下面的span标签
let span1Ele = document.getElementsByClassName('errors')[0];
// 4.2.给span标签添加内部文本
span1Ele.innerText = '用户名不能是Jason'
}
// 5.判断密码是否为空
if(passWordVal.length === 0){
// 5.1.查找获取用户名的input框下面的span标签
let span1Ele = document.getElementsByClassName('errors')[1];
// 5.2.给span标签添加内部文本
span1Ele.innerText = '密码不能为空!!!'
}
}
</script>
省市联动
<head>
<meta charset="UTF-8">
<title>省市联动</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- <script src="jQuery3.6.js"></script>-->
</head>
<body>
省份:<select name="" id="province">
</select>
市区:<select name="" id="city">
</select>
<script>
let data = {
"河北": ["廊坊", "邯郸"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"],
"安徽": ["芜湖", "合肥"],
"上海": ["浦东新区", "青浦区"],
"深圳": ["宝安", "龙华"]
};
// 提前找好select标签
let proEle = document.getElementById('province');
let cityEle = document.getElementById('city');
// 1.循环获取所有的省信息
for(let pro in data){
// 2.创建option标签
let opEle = document.createElement('option'); // <option></option>
// 3.添加内部文本
opEle.innerText = pro // <option>省份信息</option>
// 4.添加value属性
opEle.setAttribute('value',pro) // <option value='省份信息'>省份信息</option>
// 5.将上述的option标签添加到第一个select标签内
proEle.append(opEle)
}
// 给省份的下拉框绑定文本域变化事件
proEle.onchange = function () {
// 每次给市区下拉框添加市区信息之前 应该先清空上一次加载的数据
cityEle.innerHTML = '';
// 1.获取用户选择的省份信息
let currentPro = this.value;
// 2.根据省份获取对应的市区列表数据
let targetCityList = data[currentPro];
// 3.循环获取所有的市信息
for(let i=0;i<targetCityList.length;i++){
// 4.创建option标签
let opEle = document.createElement('option'); // <option></option>
// 5.添加内部文本
opEle.innerText = targetCityList[i]
// 6.添加value属性
opEle.setAttribute('value',targetCityList[i])
// 7.添加到第二个select标签内
cityEle.append(opEle)
}
}
</script>
jQuery
- jQuery是一个兼容多浏览器的JS库,它可以极大的简化JS编程
jQuery的宗旨是write less， do more 意思是:让我们写的代码更少，但是能处理的事情更多 - 使用jQuery需要先导入其js文件(本质就是js文件)
- 导入的方式
1. 本地导入 下载文件放入项目文件夹下 2. 网络CDN服务 通过联网访问服务就可以导入 (可以使用bootcdn网站去导入，可以提高加载速度)
jQuery类库
- 在jQuery语法中$就代表的jQuery
jQuery() >>> $() - jQuery与JS的语法对比
- jQuery
$(selector).action()
- jQuery
- jQuery选择器 | 选择器|jQuery | | --- | --- | | id选择器 | ("#id") | | **标签**选择器 | ("tarName") | | class选择器| ("#id, .className, tagName") | | 层级选择器 | | | (儿子选择器) | ("x y") | | (毗邻选择器) | ("x ~ y") ||
- jQuery选择器查找标签之后的结果与js的区别
-
- 如果使用索引取值，那么都是标签对象
标签对象是无法调用jQuery提供的方法的 -
- 标签对象想转换成jQuery提供的方法的要使用$()
转换成jQuery对象的目的是为了使用jQuery提供的更多方法 $('p')[0].css('color','red') // VM1235:1 Uncaught TypeError: $(...)[0].css is not a function // at <anonymous>:1:11 // (anonymous) @ VM1235:1 $('p')[0].style.color = 'red' // 'red' $('p').first().css('color','red') //jQuery.fn.init [p, prevObject: jQuery.fn.init(2)] $('p').first().style.color = 'green' // VM1626:1 Uncaught TypeError: Cannot set properties of undefined (setting 'color') // at <anonymous>:1:28 // (anonymous) @ VM1626:1 $($('p')[0]).css('color','orange') // jQuery.fn.init [p]
-
jQuery常见操作
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
- 例
// 示例 <input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']");// 取到checkbox类型的input标签 $("input[type!='text']");// 取到类型不是text的input标签
表单筛选器
```
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
```
* 例
```
$(":checkbox") // 找到所有的checkbox
```
-
表单对象属性
:enabled :disabled :checked :selected -
例
<form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签 -
找到被选中的option
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被选中的option
