一、JQuery3.3.1
1、概述
?简介：jquery是一个优秀的javascript的轻量级框架，兼容css3和各大浏览器，提供了dom、events、animate、ajax等简易的操作。并且 jquery的插件非常丰富，大多数功能都有相应的插件解决方案。
Jquery就是1个js文件，只不过它对JS进行了简化。
Jquery由美国人John Resig在2006年创建。
官网：http://jquery.com/
分为1.X、2.X、3.X三个大版本，提供的方法基本一致，只不过2.X 3.X不再兼容IE 6、7、8之类的低版本浏览器。
宗旨：Write less, do more.?? ?写得少，做得多。
特性：jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
引入：
<script src="jquery-3.3.1.min.js></script>?? ??? ?该标签如果用来引包，里面不允许写任何js语句！
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? alert("hello world.");
</script>
注：使用jQuery要先引入包、jquery-3.3.1.min.js去注释、缩短了变量等长度、比较小、所以引用这个min.js包
?
2、入口函数
$()或jQuery() 称之为jq选择器环境，在里面加上引号填写相关选择器即可，就可以获取匹配的元素。
?
js：window.οnlοad=function(...){}
jq：$(document).ready(function(){...});
$(function(){...});
1.?? ?两者功能都一致，都可以让获取元素的行为发生在渲染元素之后；
2.?? ?JS入口只允许存在一个，书写多个的话，后面的会覆盖前面的；
3.?? ?JQ入口允许存在多个，且并行存在，都会生效；
4.?? ?JS入口需要等待页面上所有资源加载完毕，而JQ入口只需要等待页面上标签渲染完毕即可，JQ入口速度更快。
3、事件
js：js对象.onclick = function(){...}
jq：jquery对象.click(function(){...})
注意：jq中的事件类型统一不要加on
演示：
js代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? // 注意 : JS 的代码都是写在 = 后面. ? jquery 的代码基本上都是写在 () 里面.
? ? // jquery 入口函数 :
? ? $(function () {
?
? ? ? ? // JS 代码 :
? ? ? ? var btn = document.getElementById("btn");
? ? ? ? btn.onclick = function () {
? ? ? ? ? ? alert("按钮被点击了...");
? ? ? ? }
? ? });
</script>
jQuery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? // 注意 : JS 的代码都是写在 = 后面. ? jquery 的代码基本上都是写在 () 里面.
? ? // jquery 入口函数 :
? ? jQuery(function () {
?
? ? ? ? // jquery 代码 :
? ? ? ? $("#btn").click(function () {
? ? ? ? ? ? alert("按钮被点击了...");
? ? ? ? });
? ? });
</script>
? <input type="button" value="按钮" id = "btn"/>
4、整体操作
1、在jq里面，通过$()返回的数组，允许开发者整体操纵
2、选择数组中的其中一个元素：js对象[下标] ? ? ? ? ? jq对象.eq(下标)?
html代码：
<body>
<input type="button" value="按钮1111" />
<input type="button" value="按钮2222" />
</body>
js代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? // jquery 入口函数 :
? ? $(function () {
?
? ? ? ? // JS 代码为两个按钮绑定事件 (JS代码不可以进行整体绑定)
? ? ? ? // JS 中 document.getElementsByTagName 该方法返回的是一个数组, 只能取出对应的元素才可以绑定.
? ? ? ? var inputs = document.getElementsByTagName("input");
? ? ? ? inputs[0].onclick = function () {
? ? ? ? ? ? alert("按钮1111被点击了...");
? ? ? ? }
?
? ? ? ? inputs[1].onclick = function () {
? ? ? ? ? ? alert("按钮2222被点击了...");
? ? ? ? }
? ? });
</script>
jQuery代码：
A、JQuery整体操作绑定
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? // jquery 入口函数 :
? ? $(function () {
?
? ? ? ? // jquery 书写 :
? ? ? ? $("input").click(function () {
? ? ? ? ? ? alert("按钮被点击了...");
? ? ? ? });
? ? });
</script>
B、单个标签实现事件绑定
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? // jquery 入口函数 :
? ? $(function () {
?
? ? ? ? // jquery 书写 :
? ? ? ? $("input").eq(0).click(function () {
? ? ? ? ? ? alert("按钮1111被点击了...");
? ? ? ? });
?
? ? ? ? $("input").eq(1).click(function () {
? ? ? ? ? ? alert("按钮2222被点击了...");
? ? ? ? });
? ? });
</script>
5、对象互转
说明：
jquery本质上虽然也是js，但是使用jquery的属性和方法必须保证对象是通过jquery的方式获取的，使用js获取的对象是js对象，使用jquery方式获取的对象是jquery对象。如果想交替使用，那么必须对象互转。
格式：
js对象转换成jq对象：$(js对象)
jq对象转换成js对象：jq对象[索引] 或 jq对象.get(索引)
演示：
html代码：
<body>
? ? <input type="button" value="按钮" id="btn" />
</body>
js转jQuery对象
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? // jquery 入口函数 :
? ? $(function () {
?
? ? ? ? // JS 对象转 jquery 对象
? ? ? ? var btn = document.getElementById("btn");
? ? ? ? // JS 对象调用 jquery 的方法. (行不通)
? ? ? ? /*btn.click(function () {
? ? ? ? ? ? alert("按钮被点击了...");
? ? ? ? });*/
?
? ? ? ? // 需求 : 将 JS 对象转成 jquery 对象. 给点钱就行了.
? ? ? ? $(btn).click(function () {
? ? ? ? ? ? alert("按钮被点击了...");
? ? ? ? });
? ? });
</script>
jQuery转js对象
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? // jquery 入口函数 :
? ? $(function () {
?
? ? ? ? // jquery 对象 转 JS 对象
? ? ? ? /*$("#btn").onclick = function () {
? ? ? ? ? ? alert("按钮被点击了...");
? ? ? ? }*/
：jq对象[索引] 或 jq对象.get(索引)
? ? ? ? // 方式一 : [下标]
? ? ? ? /*$("#btn")[0].onclick = function () {
? ? ? ? ? ? alert("按钮被点击了...");
? ? ? ? }*/
?
? ? ? ? // 方式二 : get(下标)
? ? ? ? $("#btn").get(0).onclick = function () {
? ? ? ? ? ? alert("按钮被点击了...");
? ? ? ? }
? ? });
</script>
6、控制css
6.1、单属性访问：
jq对象.css('width');
6.2、单属性修改：
jq对象.css('width','100px');
6.3、多属性修改：
jq对象.css({'width':'100px','height':'100px'});?? ?
可一次修改多个css属性
演示：
html代码：
<body>
? ? <div id="box"></div>
</body>
js代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? $(function () {
?
? ? ? ? // JS 控制样式 : style
? ? ? ? var box = document.getElementById("box");
?
? ? ? ? box.style.width = "100px";
? ? ? ? box.style.height = "100px";
? ? ? ? box.style.backgroundColor = "pink";
? ? });
</script>
jQuery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? $(function () {
?
? ? ? ? // jquery 控制样式 : css
? ? ? ? $("#box").css({
? ? ? ? ? ? width: "100px",
? ? ? ? ? ? height: "100px",
? ? ? ? ? ? backgroundColor: "skyblue"
? ? ? ? });
? ? ? ??
? ? ? ? // 单个属性 :
? ? ? ? $("#box").css("backgroundColor", "red");
? ? });
</script>
7、控制标签属性
7.1、单属性访问：
jq对象.attr('class'); ? ? ? ? ?
7.2、单属性修改：
jq对象.attr('class ','myClass'); ?
7.3、多属性修改：
jq对象.attr({'class':'myClass','id':'myId'}); ? ?? ?
可一次修改多个attr属性
演示：
html代码：
<body>
? ? <div id="box" class="test" title="bbb"></div>
</body>
js代码：浏览器F12/开发者模式查看
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? $(function () {
?
? ? ? ? // 需求 : 修改 box 标签的class 与 title 属性数值
? ? ? ? var box = document.getElementById("box");
?
? ? ? ? box.className = "bbb";
? ? ? ? box.title = "这里什么都没有";
? ? });
</script>
jQuery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? $(function () {
?
? ? ? ? // 需求 : 修改 box 标签的class 与 title 属性数值
? ? ? ? $("#box").attr("class", "aaa");
? ? ? ? $("#box").attr("title", "这里什么都没有");
? ? });
</script>
7.4、删除属性：
jq对象.removeAttr('class '); ?
演示：
html代码：
<body>
? ? <input type="checkbox" id="ck">
? ? <input type="button" value="Click" id="btn">
</body>
jQuery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? $(function () {
?
? ? ? ? // 需求 : 点击按钮, 删除 checkbox 标签的 id 属性
? ? ? ? $("#btn").click(function () {
? ? ? ? ? ? $("#ck").removeAttr("id");
? ? ? ? });
?
? ? });
</script>
注意：
获取属性我们也可以使用prop()，他跟attr()是互补的，一般来说，我们都是使用attr()来获取标签属性，但是有的时候也会有获取不到的情况，这个时候可以使用prop()的形式来获取，比如表单元素的checked属性。
jq对象.prop();
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
演示：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? $(function () {
?
? ? ? ? // 需求 : 点击click按钮, 查看 checkbox 选项框的 checked 属性数值
? ? ? ? $("#btn").click(function () {
? ? ? ? ? ? // attr 可以获取属性, 但是 `选项框` 的 checked 属性还是获取不到.
? ? ? ? ? ? var result = $("#ck").attr("checked");
? ? ? ? ? ? alert("result = " + result);
?
? ? ? ? ? ? // prop 属性的缩写.
? ? ? ? ? ? result = $("#ck").prop("checked");
? ? ? ? ? ? alert("result = " + result);
? ? ? ? });
? ? });
</script>
?
8、案例一：是否接受协议
图片演示如下：
8.1、说明：
按钮的本身是disabled禁用的状态
当复选框被勾选上的时候，按钮变成启用的状态，其次样式产生了变化
按钮样式的变化都已经通过特定的class名字书写好样式了，只要对按钮的class名字进行修改即可
|