一.定义：
jQuery：JavaScript的一个类库，它极大地简化了 JavaScript 编程。
jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
它有两个版本：一种是未压缩版一种是压缩版本（mini）
1.1 写法：
<script>
// 原生js的加载时通过这个语句设置页面加载后立刻执行操作
window.onload = function (ev) {
}
// jquery中这么写
$(document).ready(function () {
alert("hi");
})
</script>
区别：
1.原生js和jQuery入口函数的加载模式不同
原生js会等到DOM元素加载完毕，并且图片也加载完毕后才会执行。
jQuery会等到DOM元素加载完，但不会等图片元素加载完就执行。
<script src="js/jquery-3.5.1.js"></script>
<script>
// 原生js获得元素宽度
window.onload = function () {
var img = document.getElementsByTagName("img")[0];
console.log(img);
var width = window.getComputedStyle(img).width;
console.log("onload",width);
}
// jquery获得元素宽度
$(document).ready(function () {
var $img = $("img")[0];
console.log($img);
var $width = $img.width;
console.log("ready",$width);
})
</script>
<body>
<img src="https://gw.alicdn.com/tfs/TB176rg4VP7gK0jSZFjXXc5aXXa-286-118.png">
</body>
2.原生js如果编写了多个入口函数，后面的会覆盖前面的
jQuery如果编写了多个入口函数，后面的不会覆盖前面的。
//只会弹出hi2，不会弹出hi1
window.onload = function () {
alert("hi1");
}
window.onload = function () {
alert("hi2");
}
//两个都会弹出：先弹出hi1后弹出hi2
$(document).ready(function () {
alert("hi1");
})
$(document).ready(function () {
alert("hi2");
})
入口函数的四种写法：
常用的是第三种
<script>
$(document).ready(function () {
alert("hi1");
})
jQuery(document).ready(function () {
alert("hi2");
})
$(function () {
alert("hi3");
})
$(function () {
alert("hi4");
})
</script>
冲突问题：
前提：我们可能会用到不止jQuery一个JavaScript类库或者使用其他框架，可能在引用的其他文件中的$符号作用不同，此时会产生冲突。
解决方法一：取消 $在jquery中的意义，需要用到的地方用jquery代替。
注意这行代码要写在jquery代码的最前边。
jQuery.noConflict();
解决方法二：
设置其他字符代替$符号的意义。
var w = jQuery.noConflict();
w(function () {
alert("hi3");
})
核心函数学习：
2、3返回的都是一个jQuery对象。
<script>
$(function () {
// 1.接受一个函数
alert("hi1");
// 2.接受一个字符串
// 2.1 接受一个字符串选择器
var $box = $(".box");
console.log($box);
var $box2 = $("#box2");
console.log($box2);
// 2.2 接受一个代码片段
var $code =$("<p>我是小吴</p>");
console.log($code);
// 3.接受一个dom元素:会返回一个jquery对象，其中包含了dom元素
var span = document.getElementsByTagName("span");
var $span =$(span);
console.log($span);
})
</script>
jQuery对象
1.jQuery对象：是一个伪数组
2.伪数组：有0到length-1的属性并有length属性
静态方法和实例方法：
<script>
function AClass() {
}
// 直接给类添加静态方法
AClass.staticMethod = function () {
alert("static");
}
// 静态方法用类名调用
AClass.staticMethod();
// 实例方法要创建一个实例调用
AClass.prototype.instanceMethod =function () {
alert("instance");
}
var a = new AClass();
a.instanceMethod();
</script>
静态方法
each方法：
回调函数：回调函数是作为参数传给另一个函数的函数，然后通过在外部函数内部调用该回调函数以完成某种操作。
<script>
//数组
var arr = [1,23,45,6];
// 伪数组
var obj = {0:1,1:34,2:5,length:3};
// 原生js可以通过foreach静态方法对数组进行遍历：这是一个匿名回调函数
arr.forEach(function (value, index) {
console.log(index,value);
})
// 但发现它无法遍历伪数组，会报错
obj.foreach(function (value, index) {
console.log(index,value);
})
// 用jquery遍历伪数组，注意两个参数顺序不同
$.each(obj,function (index,value) {
console.log(index,value);
})
</script>
map方法：
<script>
//数组
var arr = [1,23,45,6];
// 伪数组
var obj = {0:1,1:34,2:5,length:3};
arr.map(function (value,index) {
console.log(index,value);
})
$.map(obj,function (value,index) {
console.log(index,value);
})
</script>
jquery中两个方法的区别：
map源码：可以看到返回的是ret，一个空的数组；并且map方法可以在回调函数中通过return对遍历的数组进行处理，然后生成新的数组返回。
map: function( elems, callback, arg ) {
var length, value,
i = 0,
ret = [];
// Go through the array, translating each of the items to their new values
if ( isArrayLike( elems ) ) {
length = elems.length;
for ( ; i < length; i++ ) {
value = callback( elems[ i ], i, arg );
if ( value != null ) {
ret.push( value );
}
}
// Go through every key on the object,
} else {
for ( i in elems ) {
value = callback( elems[ i ], i, arg );
if ( value != null ) {
ret.push( value );
}
}
}
// Flatten any nested arrays
return flat( ret );
},
each源码：返回的是原数组，并且不支持在回调函数中对遍历的数组进行处理。
each: function( obj, callback ) {
var length, i = 0;
if ( isArrayLike( obj ) ) {
length = obj.length;
for ( ; i < length; i++ ) {
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
break;
}
}
} else {
for ( i in obj ) {
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
break;
}
}
}
return obj;
},
其他静态方法：
- trim：
去除字符串两边的空格，返回一个新的字符串。
<script>
var str= " inj ";
var res = $.trim(str);
console.log(str);
console.log(res);
</script>
- isWindow()
判断传入对象是不是window全局变量，返回值是布尔类型。
$.isWindow()
- isArray()
判断是否是真数组，返回值是布尔类型。
$.isArray()
- isFunction()
判断是否为函数，返回值是布尔类型。
注：jquery整个类库本质上是个函数
$.isFunction()