本文已参与[新人创作礼]活动，一起开启掘金创作之路。
哈喽，大家好！我是Why，一名在读学生，目前刚刚开始进入自己的编程学习生涯。虽然学习起步较晚，但我坚信做了才有0或1的可能。学了一段时间以后也是选择在掘金上分享自己的日常笔记，也希望能够在众多道友的大家庭中打成一片。 本文主要讲解JQuery，如果大家读后觉得有用的话，还请大家多多支持博主：欢迎 ❤️点赞👍、收藏⭐、留言💬 ✨✨✨个人主页：JinHuan
JQuery篇
什么是JQuery
jQuery是一个快速，小巧，功能丰富的JavaScript库。 它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。 通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
JQuery的优点
主要优点：
兼容市面上的主流浏览器，IE、FireFox和Google浏览器处理AJAX，创建异步对象是不同的，而JQuery能够使用一种方式在不同的浏览器创建AJAX异步对象
其他优点：
1、能少写代码多做事
2、免费开源，轻量级的JS库
3、能够处理html/jsp/xml、css、dom、事件、实现动画效果，也能提供异步AJax功能
DOM对象
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。
通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节
点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。
JavaScript对象和JQuery对象
用 JavaScript 语法创建的对象叫做 JavaScript 对象, JavaScript 对象只能调用 JavaScript 对象的API。
用 JQuery 语法创建的对象叫做 JQuery 对象, jQuery 对象只能调用 jQuery 对象的 API。 jQuery 对象是一个数组。在数组中存放本次定位的DOM 对象。
JQuery 对象与JavaScript 对象是可以互相转化的，一般地，由于Jquery 用起来更加方便，我们都是将JavaScript 对象转化成Jquery 对象
栗子--JS对象和JQuery对象转换
<!--Js转JQuery对象-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS转Jquery对象</title>
</head>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function fun1() {
var domobj = document.getElementById("one");
var $jqobj = $(domobj);
$jqobj.val("变身成功");
};
</script>
<body>
<center>
<input type="button" id="one" value="俺要称为一个JQuery对象" onclick="fun1()">
</center>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery转换为JS对象</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
//1、使用JQuery方法获取该button对象
function fun1() {
var domobj = $("#one")[0];
domobj.value = "变身JS对象成功";
}
</script>
<center>
<input type="button" id="one" value="俺要称为一个JS对象" onclick="fun1()">
</center>
</body>
</html>
选择器
选择器就是定位条件：来通知JQuery函数定位满足条件的DOM对象
基本选择器
根据ID、class、标签类型名定位HTML元素，转换为JQuery对象
1、id选择器
$("#id")
2、class选择器
$(".class名称")
3、标签选择器
$("标签名")
4、所有选择器-->选择界面中所有的DOM对象
$("*")
5、组合选择器
$("id,class,标签名")
栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器的使用</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<style type="text/css">
div{
background: gray;
width: 200px;
height: 200px;
}
.two{
background: yellow;
size: 200px;
}
</style>
<script type="text/javascript">
function fun1() {
//id选择器
$("#one").css("background","blue")
}
function fun2() {
//class选择器
$(".two").css("background","green")
}
function fun3() {
//标签选择器
//此时改变的是所有的Div标签的样式
$("div").css("background","red")
}
function fun4() {
//所有选择器
$("*").css("font-size","20px")
}
function fun5() {
//组合选择器
$("#one,.two").css("background","blue")
}
</script>
</head>
<body>
<center>
<p>开始测试基础选择器</p>
<div id="one">
俺是第一个div
</div><br>
<div class="two" >
俺是第二个Div
</div>
<br>
<div>俺是第三个Div</div>
<input type="button" value="改变第一个Div" onclick="fun1()"><br>
<input type="button" value="改变第二个Div" onclick="fun2()"><br>
<input type="button" value="改变第三个Div" onclick="fun3()"><br>
<input type="button" value="改变所有的字体" onclick="fun4()"><br>
<input type="button" value="改变div1和2的背景颜色" onclick="fun5()"><br>
</center>
</body>
</html>
表单选择器
表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。
该方法无论是否存在表单<form>，均可做出相应选择。
表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">
注意：只能用input标签的，tr不可以用
语法：$(":type 属性值")
例如：
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮
栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
</head>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function fun1() {
$(":text").val("俺已经被修改了")
}
function fun2() {
var $obj = $(":checkbox")
for (var i = 0; i < $obj.length; i++) {
//Jquery用法
alert($($obj[i]).val())
//DOM用法
// var dom = $obj[i]
// alert(dom.value)
}
}
function fun3() {
$(":button").css("font-size","30px")
}
</script>
<body>
<center>
文本框<input type="text" value="我是一个文本框"><br>
爱好<br>
<input type="checkbox" value="smoke">抽烟<br>
<input type="checkbox" value="drink">喝酒<br>
<input type="checkbox" value="hotHead">烫头<br>
按钮<br>
<input type="button" value="我是第一个按钮"><br>
<input type="button" value="我是第二个按钮"><br>
<input type="button" value="我是第三个按钮"><br>
<br>
<br>
<br>
<input type="button" value="文本框选择器" onclick="fun1()"><br>
<input type="button" value="爱好选择器" onclick="fun2()"><br>
<input type="button" value="按钮选择器" onclick="fun3()"><br>
</center>
</body>
</html>
过滤器
过滤器就是过滤条件，
对已经定位到数组中 DOM 对象进行过滤筛选，
过滤条件不能独立出现在jquery 函数，
如果使用只能出现在'选择器后方'
基本过滤器
1.选择第一个first, 保留数组中第一个DOM 对象
语法：$("选择器:first")
2.选择最后个last, 保留数组中最后DOM 对象
语法：$("选择器:last")
3.选择数组中指定对象
语法：$("选择器:eq(数组索引)"")
4.选择数组中小于指定索引的所有 DOM 对象
语法：$("选择器:lt(数组索引)"")
5.选择数组中大于指定索引的所有 DOM 对象
语法：$("选择器:gt(数组索引)"")
栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Filter_基本过滤器</title>
</head>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function fun1() {
//改变第一个button样式
$(":button:first").css("font-size","20px")
}
function fun2() {
//改变最后一个button样式
$(":button:last").css("font-size","20px")
}
function fun3() {
//改变第二个button样式
$(":button:eq(1)").css("font-size","20px")
}
function fun4() {
//改变小于3的button样式
$(":button:lt(3)").css("font-size","20px")
}
function fun5() {
//改变大于3的button样式
$(":button:gt(2)").css("font-size","20px")
}
</script>
<body>
<center>
<input type="button" value="俺是第一个button"><br>
<input type="button" value="俺是第二个button"><br>
<input type="button" value="俺是第三个button"><br>
<input type="button" value="俺是第四个button"><br>
<input type="button" value="俺是第五个button"><br>
<br>
<br>
<br>
<input type="button" value="俺要改变第一个button" onclick="fun1()"><br>
<input type="button" value="俺要改变最后一个button" onclick="fun2()"><br>
<input type="button" value="俺要改变第二个button" onclick="fun3()"><br>
<input type="button" value="俺要改变前三个button" onclick="fun4()"><br>
<input type="button" value="俺要改变大于三的所有button" onclick="fun5()"><br>
</center>
</body>
</html>
表单对象属性过滤器
1、选择可用的文本框
$(":text:enabled")
2、选择不可用的文本框
$(":text:disabled")
3、选择复选框中选中的元素
$(":checkbox:checked")
4、选择下拉列表被选中的元素
$("选择器 > option:selected")
栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Filter_表单选择器</title>
</head>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
// 需要先将页面加载完毕后在执行。相当于onload
$(function () {
$("#btn1").click(function () {
$(":text:enabled").val("hello")
$(":text:disabled").val("Nohello")
})
$("#btn2").click(function () {
$obj = $(":checkbox:checked")
for (var i = 0; i < $obj.length; i++) {
alert($($obj[i]).val())
}
})
$("#btn3").click(function () {
// var $obj = $("select > option:selected")
var $obj = $("#mySelect > option:selected")
//语法：选择器 > option；selected
alert($obj.val() +"-->" + $obj.text())
})
})
</script>
<body>
<center>
<p>文本框</p>
<input type="text" value="text1"><br>
<input type="text" value="text2" disabled><br>
<input type="text" value="text3"><br>
<p>复选框_爱好</p>
<input type="checkbox" value="somke" checked>抽烟<br>
<input type="checkbox" value="drink">喝酒<br>
<input type="checkbox" value="hotHire">烫头<br>
<p>下拉列表_学习</p>
<select id="mySelect">
<option value="java" selected>java</option><!--默认被选中-->
<option value="Ajax">Ajax</option>
<option value="jQuery">jQuery</option>
</select>
<p>功能按钮</p>
<input id="btn1" type="button" value="改变Text的值"><br>
<input id="btn2" type="button" value="获取被选中的复选框的值"><br>
<input id="btn3" type="button" value="获取被下拉列表选择的值"><br>
</center>
</body>
</html>
