一.定义：
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()
holdReady：
$.holdReady() 方法用于暂停或恢复.ready() 事件的执行。
一般我们的ready函数是等到dom加载完后就直接加载，但通过此静态方法我们可以控制加载的时间。
<head>
<script>
//开启锁定
$.holdReady(true);
$(function () {
alert("hi");
})
</script>
</head>
<body>
<button>点击恢复ready</button>
<script>
var button = document.getElementsByTagName("button")[0];
button.onclick = function () {
$.holdReady(false);
}
</script>
</body>
三.选择器：
内容选择器：
返回的都是一个jQuery对象。
：empty 作用：找到既没有文本内容又没有子元素的指定元素。
：parent 作用：找到有文本内容或者子元素的指定元素。
：contains(text)作用：找到包含指定文本内容的指定元素。
：has(selector)作用：找到包含指定子元素的指定元素。
<head>
<script>
$(function () {
// 内容为空的选择器
var $div1 = $("div:empty");
console.log($div1);
var $div2 = $("div:contains('我是')");
console.log($div2);
var $div3 = $("div:parent");
console.log($div3);
var $div4 = $("div:has('p')");
console.log($div4);
})
</script>
</head>
<body>
<div></div>
<div>我是div</div>
<div>ok我是div233</div>
<div><span></span></div>
<div><p></p></div>
</body>
属性节点相关：
只有dom元素才有属性节点
attr方法：
- 获取或设置属性节点的值：attr（name,vaule）
只传入一个参数：获取相应属性节点的值。（返回的是相应的值）
传入两个参数：更改相应属性节点的值。（返回的是jQuery对象）
<script>
$(function () {
var $class = $("span").attr("class");
console.log($class);
console.log($("span").attr("class","test"));
})
</script>
</head>
<body>
<span class="spand" name = "box"></span>
<span class="spandd" name = "box2"></span>
</body>
注：如果是获取值，无论找到多少个元素，只能获取到第一个。
如果是设置元素的值，找到多少个元素就会设置多少个元素的值；并且如果相应属性节点不存在，系统会自动添加。
- removeAttr（name）
删除相应的属性节点的值（返回的是jQuery对象）
如果是想删除两个属性，就两个中间空格写。
$("span").removeAttr("class name");
注：会删除查找到的所有属性节点。
prop方法：
用于操作属性，与arrt方法类似
案例：根据输入框内容点击按钮替换图片
<script src="../js/jquery-3.5.1.js"></script>
<script>
// 获取输入内容
$(function () {
var input = document.getElementsByTagName("input")[0];
var button = document.getElementsByTagName("button")[0];
// var img = document.getElementsByTagName("img")[0];
button.onclick = function(){
console.log(input.value);
$("img").attr("src",input.value);
}
})
</script>
</head>
<body>
<input type="text">
<button>转换</button>
<br>
<img src="https://gw.alicdn.com/tfs/TB176rg4VP7gK0jSZFjXXc5aXXa-286-118.png" alt="" style="margin-top: 10px;">
</body>
css类相关操作：
addClass(）：添加类
removeClass(）：删除类
toggleClass(）：切换类：有就删除，没有就添加。
<style>
.div{
width: 110px;
height: 50px;
background-color: red;
}
.div2{
border: blue 25px solid;
}
</style>
<script>
$(function () {
var button = document.getElementsByTagName("button");
var button1 = button[0];
var button2 = button[1];
var button3 = button[2];
button1.onclick = function () {
$("div").addClass("div");
}
button2.onclick = function () {
$("div").removeClass("div");
}
button3.onclick = function () {
$("div").toggleClass("div2");
}
})
</script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
文本值相关操作：
1.html () 2.text () 3.val ()
区别：html方法和text方法都是用于给标签添加内容，区别在于前者可以识别子标签（类似innerHTML（）），后者只是单纯的给标签添加内容（类似inner（）），识别不了子标签。
<script>
$(function () {
var button = document.getElementsByTagName("button");
button[0].onclick = function () {
//给标签添加内容
$("div").html("<p>我是段落<span>我是span</span></p>");
}
button[1].onclick = function () {
console.log($("div").html());
}
button[2].onclick = function () {
//给标签添加内容
$("div").text("<p>我是段落<span>我是span</span></p>");
}
button[3].onclick = function () {
console.log($("div").text());
}
button[4].onclick = function () {
console.log($("input").val());
}
button[5].onclick = function () {
$("input").val("请输入内容");
}
})
</script>
</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置val</button>
<button>获取val</button>
<div></div>
<input type="text">
</body>
设置css样式：
注：链式设置最好一次只写3个，不然观感不好。
<script>
$(function () {
// 逐个设置
$("div").css("width","100px");
// 链式设置
$("div").css("height","100px").css("background-color","red");
// 批量设置
$("div").css({
border: "2px solid black",
margin: "40px"
});
// 获取样式的值
console.log($("div").css("width"));
})
</script>
操作位置和尺寸方法：
- 尺寸相关：
width()：实际宽度（可以传值设置宽度大小）
innerWidth()：实际宽度+padding
outerWidth()：实际宽度+padding+边框值
console.log($(".father").width());
console.log($(".father").innerWidth());
console.log($(".father").outerWidth());
- 位置相关：
offset（）:获取元素距离窗口的偏移位。
position（）：获取元素距离定位元素的偏移位。（只能获取不能设置）
scrollTop（）方法：
可以获得元素的移动位置和设置元素的移动位置。
注：我们还可以用这个方法获得和设置页面的滚动位置，但是ie浏览器只有通过$(“body”).scrollTop()才可以获得，其他浏览器都是默认 $ (“html”).scrollTop()获得，所以一般写的时候讲两个值相加以解决兼容性问题
<style>
.scroll{
width: 100px;
height: 200px;
border: 2px black solid;
overflow: auto;
}
</style>
<script>
$(function () {
var button = document.getElementsByTagName("button");
button[0].onclick = function () {
console.log($(".scroll").scrollTop());
var value = $("body").scrollTop()+$("html").scrollTop();
console.log(value);
}
button[1].onclick = function () {
console.log($(".scroll").scrollTop(300));
}
})
</script>
<body>
<div class="scroll">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div</div>
<button>获取</button>
<button>设置</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
事件绑定：
两种写法：
- eventName（fn）
编程效率高，但部分功能jQuery没有实现。 - on（eventName,fn）
编程效率低，但所有功能都能实现。
$(function () {
$("button").click(function () {
alert("hi");
})
$("button").on("click",function () {
alert("hi");
})
})
可以添加多种事件类型不会被覆盖。
移除绑定：
off（）
off方法如果不传参数，会移除所有绑定的事件
如果传递一个参数，会移除所有指定类型的事件
如果传两个参数，会移除所有指定类型的指定事件
function test1() {
alert("hi");};
$("button").off("click");
$("button").off("click",test1);
事件冒泡和默认行为：
-
事件冒泡：
事件从下级传给上级的过程，如果给一个父元素和子元素都设置了点击事件，则点击子元素不仅会触发子元素的事件，还会触发父元素的事件。 -
关闭事件冒泡：
两种写法：
$(".son").click(function () {
alert("son");
// 第一种
return false;
// 第二种
event.stopPropagation();
})
$(".father").click(function () {
alert("father");
})
- 默认行为：
例如 a标签或者表单标签会自动的跳转，这就是默认事件 - 关闭默认行为：
同上，也有两种
$("a").click(function () {
alert("弹出");
// return false;
// event.preventDefault();
})
事件自动触发：
两种方法：trigger(）和 triggerHandler(）
区别：前者会触发事件冒泡和事件的默认行为，后者不会触发事件冒泡和事件的默认行为。
<script>
$(function () {
$(".father").click(function () {
alert("father");
});
$(".son").click(function () {
alert("son");
});
$(".son").trigger("click");
$(".son").triggerHandler("click");
})
</script>
注：a标签的特殊性：无法直接利用trigger触发a的默认行为，如果想触发：写法如下：
添加一个span标签，将触发放在span标签上。
<script>
$(function () {
$("span").click(function () {
alert("son");
});
$("span").trigger("click");
})
</script>
<a href="https://www.bilibili.com/"><span>注册</span></a>
自定义事件：
想要自定义事件，必须满足两个条件：
- 事件必须通过on绑定。
- 事件必须用trigger触发。
$(".son").on("myClick",function () {
alert("son");
})
$(".son").trigger("myClick");
事件命名空间：
想要命名空间有效，必须满足两个条件：
- 事件必须通过on绑定。
- 事件必须用trigger触发。
<script>
$(function () {
$(".father").on("click.ww",function () {
alert("father_ww");
})
$(".son").on("click.ww",function () {
alert("ww");
})
$(".son").on("click.xw",function () {
alert("xw");
})
$(".son").trigger("click.ww");
$(".son").trigger("click");//父类也会被触发
})
</script>
作用：
利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发，而父元素没有命名空间的事件不会被触发。
利用trigger触发子元素不带命名空间的事件，那么父元素带相同事件名不管是否有命名空间都会被触发。
事件委托：
隐式遍历：
在jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候，jQuery会遍历所有找到的元素，给所有找到的元素添加事件。
this：谁触发这个事件，this就是谁。
<script>
$(function () {
$("button").click(function () {
$("ul").append("<li>我是新增的li</li>");
})
$("ul>li").click(function () {
console.log($(this).html());
})
})
</script>
</head>
<body>
<ul>
<li>1我是一个li</li>
<li>2我是一个li</li>
<li>3我是一个li</li>
</ul>
<button>新增一个li</button>
</body>
上述代码会产生一个问题：点击按钮新增了一个li后，点击 li 标签控制台不会打印这个li标签的信息，因为事件是在jQuery的入口函数处添加的，而入口函数是在dom元素完全加载完毕后就会执行，而新增的li是动态添加的，获取的ul里全部的li就不包括了后来动态添加的，所以就不会打印信息。
将换成即可：
$("ul").delegate("li","click",function () {
console.log($(this).html());
})
事件委托：找一些在入口函数执行前已有的元素来监听动态添加的元素的某些事件。
移入移出事件：
mouseover/mouseout：子元素的移入移出也会触发父元素的的事件。
mouseenter/mouseleave：子元素的移入移出不会触发父元素的的事件。（推荐）
<script>
$(function () {
$(".father").mouseover(function () {
console.log("经过了");
})
$(".father").mouseout(function () {
console.log("移除了");
})
$(".father").mouseenter(function () {
console.log("父经过了");
})
$(".father").mouseleave(function () {
console.log("父移除了");
})
})
</script>
hover（fn,fn）：将监听移入移出的方法写在一起，底层是集合了mouseenter和mouseleave两个方法，所以子元素的移入移出不会触发父元素的的事件。
$(".father").hover(function () {
console.log("父经过了");
},function () {
console.log("父移除了");
})
动画：
显示隐藏动画：
show（）：显示
hide（）：隐藏
toggle（）：切换:有就隐藏，没有就显示。
中间的1000表示时间：1秒
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").show(1000,function () {
alert("显示完毕");
});
})
$("button").eq(1).click(function () {
$("div").hide(1000);
})
$("button").eq(2).click(function () {
$("div").toggle(1000);
})
})
</script>
展开和收起动画：
与上面动画的不同之处在于动画的运动方向不同。
slideDown（）：展开
slideUp（）：收起
slideToggle（）：切换
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").slideDown(1000,function () {
alert("显示完毕");
});
})
$("button").eq(1).click(function () {
$("div").slideUp(1000);
})
$("button").eq(2).click(function () {
$("div").slideToggle(1000);
})
})
</script>
淡入淡出动画：
fadeIn：淡入
fadeOut：淡出
fadeToggle：切换
fadeTo：可以设置淡入到什么程度
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").fadeIn(3000);
})
$("button").eq(1).click(function () {
$("div").fadeOut(3000);
})
$("button").eq(2).click(function () {
$("div").fadeToggle(3000);
})
$("button").eq(3).click(function () {
$("div").fadeTo(3000,0.5);
})
})
</script>
自定义动画：
animate( )：可以传四个参数
第一个参数：接受一个对象，可以在对象中修改属性。
第二个参数：指定动画时长
第三参数：设置动画效果
第四个参数：动画执行完毕后的回调函数
<script>
$(function () {
//操作属性
$("button").eq(0).click(function () {
$(".one").animate({
width:500,
marginLeft:500
},1000,"linear",function () {
alert("执行自定义动画");
})
})
//更改属性：在原有的属性上添加
$("button").eq(1).click(function () {
$(".two").animate({
width:"+=100"
// marginLeft:500
},1000)
})
//关键字
$("button").eq(2).click(function () {
$(".two").animate({
// 隐藏宽度
// width:"hide"
// 切换
width:"toggle"
// marginLeft:500
},1000)
})
</script>
stop和delay方法：
delay方法：设置两个动画间的暂停时间。
<script>
$(function () {
$("button").eq(0).click(function () {
$(".one").animate({width:200},2000).delay(2000).animate({height:200},2000);
})
})
</script>
立即停止当前动画，继续执行后续的动画:
stop（）、stop（false）、stop（false,false）
立即停止当前和后续的所有动画:
stop（true）、stop（true,false）
立即完成当前，继续执行后续的动画:
stop（false,true）
立即完成当前的，并且停止后续所有的
stop（true,true）
节点相关：
1.添加节点：
内部添加：
将元素添加到指定元素内部的最后
append（）、appendTo（写法不一样）：
将元素添加到指定元素内部的最前面
prepend（）、prependTo（写法不一样）：
外部添加：
将元素添加到指定元素外部的后面：after（）、insertAfter（写法不一样）
将元素添加到指定元素外部的前面：before（）、insertBefore（写法不一样）
区别：位置不同，其他的类似
var $li = $("<li>lili</li>");
$("ul").after($li);
$li.insertAfter("ul");
2.删除节点：
empty(可以指定类名):删除指定元素的内容和子元素，但指定元素的本身不会被删除
remove():删除指定元素
detach(可以指定类名):
3.替换节点：
被替换元素.replaceWith（替换元素）
替换元素.replaceAll（被替换元素）
4.复制节点：
clone（）
浅复制：传入false，浅复制只会复制元素，不会复制元素的事件
深复制：传入true，不仅会复制元素，还会复制元素的事件
1765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
