一.jquery简介
1.什么是Jquery?
jQuery的本质就是JavaScript
只是将JavaScript的某些方法封装成一个库，
极大简化了原生JavaScript开发。
（潜台词：JS怎么用，Jquery就怎么用，只是把JS的代码简化了）
2.什么是库? -----lib
“库”--->（library--文库，图书馆）--> 将一些相关函数方法进行封装以便使用。
类似于jar包。
3.Jquery的优势：
①.轻量级，jquery库的大小仅仅几十kb
②.强大的选择器
（用更精简的代码即可获取指定的html元素，
摈弃了之前通过document.getElement等方法，并支持批量操作元素）
③.浏览器的兼容性，能兼容大部分市面上的浏览器
④.等等...
4.jQuery的版本：
主要分为1.x.x 2.x.x 3.x.x
jQuery的三个版本功能几乎相同，主要是浏览器的兼容性不同，
随着版本的升高，jQuery逐步放弃了对老旧浏览器的兼容
二.如何使用Jquery
就理解为 引入的一个外部的JS 这个外部的JS就是Jquery
如下：
<script src="xxx" ></script>
然后再另外的script标签中就可以既使用JS代码 也可以使用Jquery代码
如何引用：
1.下载jquery的js文件 但是Hbuiler内置了如何操作：
A.选中js文件夹
B.右键创建一个js文件
C.在下方选中jquery1.x 然后重命名即可
D.不要去动里面的代码
2.在script标签中引入刚刚下载的jquery文件
<script src="js/jquery.js"></script>
3.设置语法提示库
右下角 选择jquery xxx
4.测试
通过alert($) ; 如何正确弹窗就说明OK了 反之失败
凡是在控制台看到了这一行代码：$ is not defined
就表示Jquery没有引入成功
Jquery的压缩版：
在开发中：会经常看见xxxx.min.xx格式的文件
看到了这个min就理解为压缩版即可。
就是去除了空格、换行、注释等，让占据空间变小而已。
没有min关键字的就是未压缩版
了解即可。
压缩版理解为 上线版 项目都上线了，希望项目的体积越小。
未压缩版理解为 开发版 项目还没有上线，我随时需要对代码进行修改
<script src="js/jquery.js"></script>
<script>
alert($);
</script>
三.初学者的引入Jquery的常见错误
1.引入js的路径有问题或忘记引入jquery
2.顺序问题,要先引入jquery 再写相关的代码 script的顺序问题
3.不要在引入的jquery的script标签内部写代码
四.jquery的魔力1_代码的简化
<body> <h1>hello js</h1> <script src="js/jquery.js"> </script> <script> //魔力1---体现代码的简化 //分别用JS和Jquery来将页面中的h1标签的内容 修改为 你好 //实现 // document.getElementsByTagName("h1")[0].innerText = "你好"; //jquery实现 暂时先将$("h1") 理解为 获取所有的h1标签 // $("h1").text("你好"); </script> </body>
五.jquery的魔力2_批量操作元素的魔力
<body> <h1>hello js</h1> <h1>hello js</h1> <h1>hello js</h1> <h1>hello js</h1> <h1>hello js</h1> <h1>hello js</h1> <script src="js/jquery.js"> </script> <script> //魔力2---批量操作元素的简化 //分别用JS和Jquery来将页面中所有的h1标签的内容 修改为 你好 //JS实现 // var h1 = document.getElementsByTagName("h1"); // for (let i = 0; i < h1.length; i++) { // h1[i].innerText = "你好"; // } //jquery实现 暂时先将$("h1") 理解为 获取所有的h1标签 $("h1").text("你好"); </script> </body>
六.jquery的常见方法
<body> <input type="text" id="a1" value="123" /> <h3>这是一个h3标签</h3> <p style="color: red;">这是p标签</p> <button>按钮</button> <script src="js/jquery.js"></script> <script> //暂时先将$("xx") 理解为是获取xx元素 且暂时理解为它是jquery对象 //暂时将 document.getElementByXxx 理解为JS对象 //注意: js对象无法使用Juqery的相关用法 Juqery对象也无法使用JS的相关用法 //Jquery中常见方法如下: // val() text() html() css() attr() prop() //将input组件的值修改 // document.getElementById("a1").value = "你好"; // $("input").val("鸟"); //注意事项: js的value是属性 jquery的val是方法 //val使用场景:只能修改表单元素 且拥有value值的组件 //例如文本框密码框 但是像h1标签 span标签就无法使用该方法 //val的2种用法: //1.取值: // var str = $("input").val(); // alert(str); //2.赋值 // $("input").val("~~~"); //注意事项: js的innerText是属性 jquery的text是方法 //text使用场景:只能修改非表单元素 //例如h1标签 span标签 但是像文本框密码框就无法使用该方法 //text的2种用法: //1.取值: // var str = $("h3").text(); // alert(str); //2.赋值 // $("h3").text("!!!"); //注意事项: js的innerHtml是属性 jquery的html是方法 //html使用场景:只能修改非表单元素 //例如h1标签 span标签 但是像文本框密码框就无法使用该方法 //html和text的区别是:前者会将html标签识别 后者只会解析成文本 //html的2种用法: //1.取值: // var str = $("h3").html(); // alert(str); //2.赋值 // $("h3").html("!!!"); //注意事项: js的style.xxx是属性 jquery的css是方法 //css使用场景:修改或获取HTML元素的CSS的样式 //css的2种用法: //1.取值: // var str = $("p").css("color"); // alert(str); // 2.赋值 // $("p").css("color" , "yellow"); //attr使用场景:修改或获取HTML元素的属性 该属性的值 不为true或false //常见的属性A类(等于一个具体的值):id class name type src href //attr的2种用法: //1.取值: // var str = $("input").attr("id"); // alert(str); // 2.赋值 // $("input").attr("id" , "aaa"); // $("button").attr("disabled","disabled");//没问题 //但是你会发现 无法通过attr将其修改为 可以使用 //prop使用场景:修改或获取HTML元素的属性 该属性的值 为true或false //常见的属性B类(等于一个true或false):disable readonly checked // var str = $("button").prop("disabled"); // alert(str); $("button").prop("disabled",false); </script> </body>
七.文档就绪函数
<script src="js/jquery.js"> </script> <script> //了解即可 只要你保证你的js代码 放在HTML最下方 就可以不用写它 //文档就绪函数意义: 将HTML加载完毕之后 再执行 // $(function(){ // //代码~~ // }); //看到上面的代码 就需要知道 他是文档就绪函数 </script>
八.js对象和jquery对象的讲解
<body> <script> // jquery对象： // $(“xxx”)函数会返回一个对象，这个对象被称为jQuery对象。 // 例如刚刚所学习的css(),html()等都是jQuery对象的专属方法。 // dom对象：就是JS通过document对象获取的对象 // 例如document.getElementById(); // js对象无法使用Juqery的相关用法 Juqery对象也无法使用JS的相关用法 //js对象和jquery对象的区别: // 下表列出了dom对象和jQuery对象进行一些操作的对比 // 1.原生JavaScript都是通过更改属性来实现 // 2.jQuery对象都是通过调用方法来实现 // 3.JavaScript是单独操作--如需批量操作需要借助for循环 // 4.jQuery是批量操作--如需单独设置，就确保其只有一个元素 </script> </body>
九.jquery对象的别名
<body> <script src="js/jquery.js"></script> <script> //jqury对象的名字是: $ //jqury对象的名字是: jQuery alert($==jQuery);//true $("aa"); jQuery("aa"); //上述两行代码的意义一样,都表示获取aa元素 </script> </body>
