前端5JQ
- js获取用户输入
- JS类属性操作
- JS样式操作
- 事件
- JS事件案例
- JQuery类库
- JQuery基本使用
- 基本筛选器（了解）
- 表单筛选器
Js获取用户输入
普通数据(输入，选择)
标签对象.value
获取文件数据的时候：
标签对象.value只能获取到文件路径，而标签对象.files结果是一个数组，可以通过索引获取具体文件对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" name="" id="d1">
<input type="radio" name="gender" value="female" id="d2">女
<input type="radio" name="gender" value="male" id="d3">男
<select name = "" id = "d4">
<option value="111">1</option>
<option value="222">2</option>
<option value="333">3</option>
</select>
<input type = "file" name="file" id="d5">
</body>
</html>
Js类属性操作
标签对象.classList 查看所有的类属性
标签对象.classList.contains() 存在返回True,不存在返回False
标签对象.classList.add(cls) 添加类
标签对象.classList.remove(cls) 删除指定类
标签对象.classList.toggle() 存在即删除，不存在就添加
JS样式操作[简单了解]
简单了解，css样式修改，应该由css来操作。
语法：标签对象.style.属性名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>我困我就要睡，今天不rap</p>
</body>
</html>
事件
事件就是给html标签绑定了一些额外的功能（能够触发js代码的运行），
就是用户点击某个html元素，会起动一段Js。
onclick 当用户点击某个对象调用的事件句柄
ondbclick 当用户双击某个对象时调用的事件句柄
onfocus 元素获得焦点 //练习输入框
onblur 元素失去焦点 //应用场景：通常用于表单元素，当元素内容被改变时触发.(select 联动)
onchange 域的内容被改变 应用场景：通常用于表单元素，当元素内容被改变时触发(select 联动)
onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开
onkeypress 某个键盘按键按下并松开
onmousedown 鼠标按钮被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标移到某元素之上
onselect 在文本框中的文本被选中时发生
onsubmit 在确认按钮被点击，使用的对象是form
模拟练习
绑定事件的两种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id ="d1" onclick="func1()">按我</button>
<!--#绑定方式1 写一个功能函数，在标签属性里添加onclick
-->
<script>
function func1(){
alert('你按到我了，八嘎雅鹿')
}
</script>
<!--绑定方式2 #:在特定的标签属性上创建功能函数
-->
<input id ="d2" type="button" value="点我" >
<script>
let buttonEle = document.getElementById('d2')
buttonEle.onclick = function (){
alert('你点我干嘛')
}
</script>
</body>
</html>
JS事件案例
JS事件案例
1.校验用户输入，点击onclick,提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p><input type="text" id="username">
<span class="errors" style="color: chartreuse"></span>
</p>
<p><input type="password" id ="password">
<span class="errors" style="color:red"> </span>
</p>
<button id = "btn">提交</button>
<script>
let btnEle = document.getElementById('btn');
btnEle.onclick = function(){
let usernameVal = document.getElementById('username').value;
let passwordVal = document.getElementById('password').value;
//4.判断用户名喝密码是否合法
if(usernameVal==='lzl'){
let span1Ele =document.getElementsByClassName('errors')[0];
span1Ele.innerText= '用户名不能是lzl'
}
if(passwordVal.length === 0){
let span2Ele = document.getElementsByClassName('errors')[1];
span2Ele.innerText = '用户名密码不为空'
}}
</script>
</body>
</html>
JQuery类库
什么是JQuery
JQuery是一个高效，精简并且功能丰富的javaScript工具库
JQuery极大的简化了JavaScripts编程
JQuery的优势
开源，免费
便捷的选择器，
方便DOM操作。
方便的动画特效
易用的ajax操作
丰富的插件扩展
解决浏览器兼容性效果
JQuery选择器
通过选择器，可以获取到页面元素，可以获取到页面元素，JQuery具有强大的选择器，跟css3选择器类似
1.基本选择器
id 根据给定的id匹配一个元素
element 根据给定的元素标签名匹配所有元素
.class 根据给定的css类名匹配元素
* 匹配所有元素
prev-sbilings 匹配prev 元素之后的所有 siblings 元素
2.层级选择器
1.ancestor descendant 在给定的祖先元素下匹配所有的后代元素
2.parent>child 在给定的父元素下匹配所有的子元素
3.prev+next 匹配所有紧接在prev 元素后的next 元素
4.prev-siblings 匹配prev元素之后的所有siblings元素
----------------------------------------------------
层级选择器：
x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
3.过滤选择器【了解】
:first 获取第一个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数元素，从0开始计数
:odd 匹配所有索引值为奇数的元素，从0的开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lang 选择指定语言的所有元素，1.9+
:last 获取最后个元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如h1,h2,h3之类的标题元素
:animated 匹配当前获取焦点的元素
:focus 匹配当前获取焦点的元素
:root 选择该文档的根元素 1.9+
:target 选择由文档URI的格式化识别码表示的目标元素
4.可见性选择器
:hidden 匹配所有不可见元素或者type为hidden的元素
:visible 匹配所有的可见元素
5.属性选择器
[attribute] 匹配包含给定属性的元素
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含指定的属性，或者属性不等于特定值的元素
[attribute^=value] 匹配给定的属性是某些值开始的元素
[attribute$=value] 匹配给定的属性是某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件使用
6.子元素选择器
:first-child 匹配所有选择器:(之前的选择器)的第一个子元素
:firest-of-type 结构化伪类，匹配E的父元素的第一个E类型的孩子
:last-child 匹配最后一个子元素
:last-of-type 结构化伪类，匹配E的父元素的最后一个E类型的孩子
:nth-child() 匹配其父元素下的第N个子或者奇元素或者偶元素
:nth-last-child() 选择所有他们父元素的第N个子元素，计数从最后一个元素开始到第一个 1.9+
nth-last-of-type() 选择的所有他们的父级元素的第N个子元素，计数从最后一个元素到第一个
:nth-of-type() 选择同属于一个父元素之下，并且标签签名相同的子元素的第N个
:only-child 如果某个元素是父类元素中唯一的子元素，那么将会被匹配
:only-of-type 选择所有没有兄弟元素，且具有相同元素名称的元素
7.表单选择器
可以看成是属性选择器优化而来
注意:$(':checked')
$('input:checked')
:input 匹配所有的input ,textrarea,select和button元素
:text 匹配所有的单行文本框
:password 匹配所有的密码框
:radio 匹配所有的单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮，匹配type="submit"的input或者button
:image 匹配所有图像域
:reset 匹配所有重置按钮
:button 匹配所有按钮
：file 匹配所有的文件域
8.表单对象选择器
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框，单选框等，select 中option)
