jQuery脚本语言
1.下载jQuery库
地址：https://code.jquery.com/jquery-3.5.1.js 压缩版和未压缩版(用于发布，不利于学习)
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：
下载到本地：
<head> <script src="jquery-1.10.2.min.js"></script> </head>
连接网络引用：
<head> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> //.min为压缩格式 </head>
2.引入库
<head>
<meta charset="UTF-8">
<script src="code/js/jQuery-3.5.1.js"></script> //未压缩格式
</head>
3.编写jQuery代码
<script> $(document).ready(function (){ //所有的jQuery代码写在这里 alert("Hello World!"); }) </script>
4.js和jQuery比较
<script> // 1.原生JS的固定写法 window.onload = function (ev) { } // 2.jQuery的固定写法 $(document).ready(function () { alert("Hello World"); }); </script>
<head> <meta charset="UTF-8"> <title>JS和jQuery比较</title> <script src = "code/js/jQuery-3.5.1.js"> </script> <script> window.onload = function (ev) { // 1.通过原生的js入口函数可以拿到DOM元素 var img = document.getElementByTagName("img")[0];
console.log(img);
// 2.通过原生的js入口函数拿到DOM元素的宽高
var width = window.getComputedStyle(img).width;
console.log("onload",width); }
/*
*原生JS和jQuery入口函数的加载模式不同
*原生JS会等DOM元素加载完毕，并且图片也加载完毕才会执行
*jQuery会等DOM元素加载完毕，但是不会等到图片也加载完毕就会执行
*/ $(document).ready(function () { // 1.通过jQuery的入口函数可以拿到DOM元素 var $img = $("img")[0]; console.log($img);
// 2.通过jQuery入口函数不可以加载DOM元素的宽高
var $width = $img.width();
console.log("ready",$width);
}); </script> </head> <body> <img src = "https://imgcps.jd.com/ling4/1007592134/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f2/ded1778c/cr/s/q.jpg"> </body>
/*
* 1. 原生js如果编写多个函数入口，后面编写的函数会自动覆盖前面写的
* 2.jQuery中编写的多个入口函数，后面的不会覆盖前面的
*/
入口函数的写法： // 1.第一种 $(document).ready(function () { alert(""); }); // 2. 第二种写法 jQuery(document).ready(function (){ alert(""); });
// 3.第三种写法 $(function () { alert(""); });
// 4.第四种写法 jQuery(function (){ alert(""); });
5.访问冲突问题
<script> // 1.释放$的使用权限 // 注意：释放操作必须在编写其他jQuery代码之前编写 // 释放之后不能再使用$,改为使用jQuery // jQuery.noConflict(); // 2.自定义一个访问符号 var nj = jQuery.noConflict(); nj(function () { alert("hello world"); }); </script>
6.函数
<head> <script> // $(); 代表调用jQuery的核心函数 // 1.接收一个函数 $(function () { alert(""); // 2.接收一个字符 // 2.1接收字符串选择器 // 返回一个jQuery对象，对象中保存了找到的DOM元素 var $box1 = $(".box1"); var $box2 = $("#box2"); console.log($box1); console.log($box2) // 2.2接收一个字符串代码片段 // 返回一个jQuery对象，对象中保存了创建的DOM元素 var $p = $("<p>我是段落</p>") console.log($p); $box1.append($p); // 3.接收一个DOM元素 // 会被包装成一个jQuery对象返回 var span = document.getElementsByTagName("span")[0]; //原生的DOM元素 console.log(span); var $span = $(span); //给核心函数传递DOM元素 console.log($span); }); </script> </head> <body> <div class = "box1"></div> <div id = "box2"></div> </body>
7.jQuery对象
<script> $(function () { /* * 1.什么是jQuery对象 * jQuery对象是一个伪数组 * * 2.什么是伪数组 * 从0-length-1的属性，并且具有length属性 */ var $div = $("div"); console.log($div) }); </script> <div>div1</div> <div>div2</div> <div>div3</div>
8.静态方法和实例方法
<script> // 1.定义一个类 function AClass() { } // 2.给这个类添加一个静态方法 // 直接添加给类的就是静态方法 AClass.staticMethod = function () { alert("staticMethod"); } //静态方法通过类名调用 AClass.staticMethod(); // 3.给类添加实例方法 AClass.prototype.instanceMethod = function () { alert(); } //实例方法通过类的实例调用 //创建一个实例（创建一个对象） var a = new AClass(); //通过实例调用实例方法 a.instanceMethod(); </script>
9.静态方法forEach方法
<script> var arr = [1, 3, 4, 7, 9]; var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}; /* * 第一个参数：遍历到元素 * 第二个参数：当前遍历到的索引 * 注意点：原生的forEach方法只能遍历数组，不能遍历伪数组 */ arr.forEach(function (value, index) { console.log(index, value); }) // 1.利用jQuery的each静态方法遍历数组 /* * 第一个参数：当前遍历到的索引 * 第二个参数：遍历到的元素 * 注意点：jQuery的each方法可以遍历伪数组 */ $.each(obj, function (index, value) { console.log(index, value); }); </script>
