一篇博文带你 jQuery入门，万字肝爆！ 建议收藏~
Posted 贪吃ღ大魔王
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一篇博文带你 jQuery入门，万字肝爆！ 建议收藏~相关的知识，希望对你有一定的参考价值。
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
jQuery
介绍
jQuery是js的库。库就是说将很多js的方法封装在了一个文件中,jquery是全球使用最多的js库。
jQuery是前端编程中使用最多的库。曾经风靡全球的原因：
1.jquery中不用考虑兼容 - 因为jquery把兼容问题都封装好了
2.jquery有强大的选择器机制
3.优质的隐式迭代 - 悄悄的 遍历
4.无所不能的链式编程 - 一行代码搞定tab切换
jquery完全不需要考虑兼容性，因为jquery库将js的兼容都封装好了
⭐中文方法大全：https://jquery.cuishifeng.cn/
要使用jquery首先需要下载一个jquery文件，然后先引入才能使用。
首先检测一下有没有引入成功，就是输出$或者就jQuery。这是jQuery暴露在全局的唯一的两个函数。
检测引入jquery文件是否成功，弹出$
| jquery引入成功 |
|---|
 |
这个美元符号是jQuery库暴露在全局中的一个函数名称
| jQuery最终的返回和暴露 |
|---|
 |
这个函数可以用选择元素。
jQuery伪数组和DOM元素🌙
在jQuery中选择元素，就是暴露在全局的两个函数：
$div = $("div");
//或者
$div = jQuery("div");
console.log($div)
获取的结果：
| jQuery获取元素的结果 |
|---|
 |
从结果中可以看出来，jQuery获取到的是伪数组，不能使用操作DOM元素的方式来操作jQuery获取到的伪数组，jQuery提供了一套专门用来操作jQuery伪数组的方法来操作，而这套方法是不能被DOM元素使用的。
从伪数组中取下标可以获取到DOM元素：
var oDiv = $("div")[0] // 取下标
var oDiv = $("div").get(下标); // 下标
console.log(oDiv)
结果：
| jQuery伪数组中获取到DOM元素 |
|---|
 |
经过这样获取后得到的DOM元素才能使用
原生js的dom元素也不能使用jQuery提供的方法操作，但可以将DOM元素转为jQuery伪数组：
var oDiv = document.querySelector("div");
var $div = $(div)
console.log($div)
效果：
| DOM元素转jQuery伪数组 |
|---|
 |
注意：原生js中的window，在jQuery中是 ( w i n d o w ) ， 原 生 j s 中 的 d o c u m e n t ， 在 j Q u e r y 中 是 (window)，原生js中的document，在jQuery中是 (window)，原生js中的document，在jQuery中是(document)，原生js中的this，在jQuery中是$(this)
选择器⭐⭐⭐
基本选择器 - jquery中，选择到的元素统统都是伪数组，没有具体元素这一说,
jquery选中的伪数组不能使用原生dom操作的,dom元素也不能使用jquery伪数组自己的方法
将dom元素作为参数放在$()函数中，就可以得到jquery的伪数组，就能使用jquery伪数组的方法进行操作了
jQuery选择元素可以使用css选择器。
-
id选择器
$("#id名") -
类名选择器
$(".类名") -
标签选择器
$("标签名") -
属性选择器
$("[name='username']") -
伪类选择器（表单的伪类）
$("li:first-child") $("li:last-child") $("li:nth-child(数字)") / 第一个元素对应数字是1 $("li:empty") / 空标签
jQuery获取元素不会获取单个元素，页面中只要满足选择器的，都会获取到，也就是jQuery获取到的永远是集合。
筛选器⭐⭐⭐
筛选器其实就是简化版的伪类选择器
和伪类选择一样，筛选出需要的元素
$("li:first")
$("li:last")
$("li:event")
$("li:odd")
$("li:eq(数字)") / 选择下标是指定数字的元素
$("li:lt(数字)") / 下标小于指定数字的元素
$("li:gt(数字)") / 下标大于指定数字的元素
表单元素选择器 – 了解
$(":input") / 匹配所有的表单元素 包括：文本框（input）下拉列表(select)、文本域(textarea)
$(":text") / 匹配单行文本框type="text" $("input:text") $("input[type=text]")
$(":password") / 匹配单行密码框
$(":radio") / 匹配单选按钮
$(":checkbox") / 匹配多选按钮
var $submit = $(’:submit’) : 会连button标签也选中，因为button标签跟submit一样能提交表单
表单对象选择器 - 重点⭐⭐⭐
$("input:enabled") / 所有可用表单元素
$("input:disbaled") / 所有禁用表单元素
$("input：checked") / 所有选中的表单元素 -- 重点
$("option:selected") / 被选中的下拉框元素 -- 重点
筛选器方法 – 重点⭐⭐⭐
使用方法来筛选元素
$("li").first() / 元素集合中的第一个
$("li").last() / 元素集合中的最后一个
$("div").next() / div的下一个兄弟元素
$("div").prev() / div的上一个兄弟元素
$("div").nextAll() / div后面的所有兄弟元素
$("div").prevAll() / div前面的所有兄弟元素
$("div").parent() / div的父元素
$("div").parents() / div的所有直系祖宗元素
$("div").eq(数字) / 指定下标的div元素
$("div").find(选择器) / div后代中的的指定元素
$("div").siblings() / div的所有兄弟元素
$("div").children() / div下的所有子元素
筛选方法可以进行链式筛选
事件⭐
jquery中的事件是将事件名作为方法名，传入回调函数即可。
$("div").click(function(){
});
$("div").mouseover(function(){
});
页面加载事件
在原生js中的页面加载事件是window.onload
在jquery中有两种写法：
$(function(){
});
$(document).ready(function(){
});
推荐使用jquery的页面加载事件，jquery的页面加载要比js原生的写法效率高，因为js元素的页面加载事件需要等到页面中的所有资源加载完毕才执行，而jquery的页面加载事件只需要等到页面的标签加载完毕就执行，而不会等待外部文件加载。
标准的事件处理：
on方法用于绑定事件、委托事件、传入参数
$(元素).on(事件类型[,委托的子元素][,传入的参数],处理的函数)
使用说明：
- 事件类型不用加on
- 委托元素必须是子元素
- 传入的参数会传到处理函数中，且在事件对象的data属性中
例：
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<script src="./jquery-3.4.1.js"></script>
<script type="text/javascript">
$("ul").on("click","li",[11,22],function(e){
console.log(e);
});
</script>
执行结果：
| jquery中on绑定事件 |
|---|
 |
off方法用于解绑事件
$(元素).off(事件类型,处理函数)
trigger方法用于手动触发事件：
$(元素).trigger(事件类型,处理函数)
只能触发一次的事件：
$(元素).one(事件类型,处理函数);
特殊事件：
hover事件，包含鼠标放上去和鼠标离开
$("元素").hover(鼠标放上去的处理函数,鼠标离开的处理函数)
属性操作⭐
设置属性：
$("div").prop(属性名,属性值);
获取属性：
$("div").prop(属性名);
设置自定义属性：
$("div").attr(属性名,属性值);
获取自定义属性：
$("div").attr(属性名);
删除属性：
$("div").removeProp(属性名);
$("div").removeAttr(属性名); // 删除自定义属性
当操作jquery对象的时候，不需要遍历操作每一个，直接操作的就是每一个元素。因为在jquery内部自带遍历操作。这就是隐形迭代。
each方法，用来遍历元素，参数有两个，下标和值。
样式操作⭐⭐
设置样式：
$("div").css(css属性名,值); // 设置一个样式
$("div").css({ // 设置多个样式
css属性名:值,
css属性名:值
})
获取样式：
$("div").css(css属性名);
类名操作
$("div").addClass(类名); / 添加类名
$("div").removeClass(类名); / 删除类名
$("div").toggleClass(类名); / 在添加和删除之间切换
$("div").hasClass(类名); / 判断元素是否有这个类名，有是true，没有是false
补充：
$(this).index() / index方法是获取元素的下标
$("li").index(3) / 将li标签的index下标设置为3
链式编程在这里体现的淋漓尽致!
在链式编程中，通常需要操作上一个已经操作过的元素对象，这时候使用end方法，可以将当前返回的对象转到上一个操作过的对象
元素内容操作⭐
$("div").text(); / 获取元素内容 === 相当于 div.innerText
$("div").text("盒子"); / 设置元素内容 === 相当于 div.innerText = "盒子"
$("div").html(); / 获取元素代标签的内容 === 相当于 div.innerHTML
$("div").html("<b>文字</b>"); / 设置元素带标签的内容 === 相当于 div.innerHTML = "<b>文字</b>"
$("input").val(); / 获取表单元素的值 === 相当于 input.value
$("input").val("请输入用户名"); / 设置表单元素的内容 === 相当于 input.value = "请输入用户名"
| jquery对象==伪数组 |
|---|
 |
元素节点操作
创建元素：
$("标签和内容") // 创建一个标签并给里面放内容
例：
var box = $("<div class='box'>div盒子</box>");
console.log(box);
创建的结果：
| 创建的元素 |
|---|
 |
添加元素⭐
给父元素追加子元素：
父元素.append(子元素)
给父元素最前面添加子元素：
父元素.prepend(子元素);
将子元素添加到父元素中
/ 将子元素追加到父元素中
子元素.appendTo(父元素);
/ 将子元素添加到父元素最前面
子元素.prependTo(父元素);
添加兄弟元素：
/ 添加下一个兄弟元素
元素.after(下一个兄弟元素);
添加上一个兄弟元素：
元素.before(上一个兄弟元素);
将元素添加到某个元素的前面或后面：
// 将元素添加到某个元素前面
要添加的元素.insertBefore(元素);
// 将元素添加到某个元素后面
要添加的元素.insertAfter(元素);
替换元素
使用新元素替换某个元素：
某个元素.replaceWith(新元素)
用新元素替换掉某个元素：
新元素.replaceAll(某个元素)
删除元素
删除元素内部所有标签和内容，让自己变成一个空标签
元素.empty()
元素.remove() // 删除自己和自己内部所有内容
复制元素
元素.clone([是否复制自身的事件][,是否复制子元素的事件])
使用说明：
- jqueyr中的复制元素是深复制，复制标签结构和内容
- 这个方法接收两个参数，参数1代表是否把元素的事件也克隆出来，默认为false；参数2代表是否把元素的子元素的事件克隆出来，默认跟随第一个参数的值。
- 如果不复制父元素的事件，子元素的事件也不能复制
元素尺寸
元素内容区域尺寸操作：
元素.height(); / 获取元素内容区域高度
元素.height(高度); / 设置元素内容区域高度
元素.width(); / 获取元素内容区域宽度
元素.width(宽度); / 设置元素内容区域宽度
获取元素内部区域尺寸：
元素.innerHeight(); / 获取元素内部的高度，包含padding，但不包含border
元素.innerWidth(); / 获取元素内部的宽度，包含padding，但不包含border
获取元素占据页面的尺寸：
元素.outHeight(); / 获取元素占据的高度，包含padding和border，不包含margin
元素.outHeight(true); / 获取元素占据的高度，包含padding和border，包含margin
元素.outWidth(); / 获取元素占据的宽度，包含padding和border，不包含margin
元素.outWidth(true); / 获取元素占据的宽度，包含padding和border，包含margin
元素位置
元素相对页面的位置操作：
元素.offset(); / 获取到元素在页面中的位置，包含left值和top值，返回一个对象
元素.offset({left:值,top:值}); / 将元素设定到指定的位置，使用relative
元素相对父元素的值：
元素.position(); / 获取元素相对于定位的父元素的偏移值，不管设置的是什么，获取到的永远是left和top
获取元素滚动过的距离：
$(window).scrollTop(); / 获取元素滚动过的高度
$(window).scrollLeft(); / 获取元素滚动过的宽度
$(window).scrollTop(值); / 设置元素滚动过的高度
$(window).scrollLeft(值); / 设置元素滚动过的宽度
动画⭐
基本动画
共同的参数：
1.时间 - 使用指定的毫秒数完成这次动画 - 也可以使用这次：‘slow(600)/fast(200)/normal(400)’
2.速度方式 - 匀速(linear)/先慢后快再慢(swing)
3.回调函数 - 这次运动结束以后执行的函数
显示：
元素.show(); / 让元素从隐藏状态变为显示状态（从display:none;变为 display:block;）
可选参数1：时间，毫秒数 == 让元素在规定的时间内显示（操作的属性有很多）
可选参数2：速度方式，匀速或加速或减速
可选参数3：动画结束后执行的回调函数
隐藏：
元素.hide()； / 让元素从显示状态切换到显示状态
可选参数和show一样
切换显示隐藏：
元素.toggle(); / 让元素在隐藏和显示状态切换
可选参数和show一样
元素上下拉动隐藏显示：
元素.slideDown() / 让元素向下拉动显示
元素.slideUp() / 让元素向上拉动隐藏
元素.slideToggle() / 让元素切换上下拉动显示隐藏
参数和show一样
元素透明度显示隐藏：
元素.fadeIn() / 让元素从透明度0变为1的显示
元素.fadeOut() / 让元素从透明度1变为0的隐藏
元素.slideToggle() / 让元素切换透明度显示隐藏
参数和show一样
让元素切换到指定的透明度：
元素.fadeTo(毫秒数,透明度,速度方式,结束的回调函数) / 让元素在指定的时间内切换到指定的透明度
自定义动画
开启动画：
元素.animate({
css属性名:属性值,
css属性名:属性值,
。。。
}[,毫秒数][,速度方式][,执行结束的回调函数]);
停止动画：
元素.stop(); / 将动画停止在当前状态
元素.finish(); / 将动画停止在结束状态
stop有两个参数，值都是布尔值：
1.参数1表示是否停止后续的动画，true表示停止，false表示不停止，默认是false
2.参数2表示是否停止在当前动画的结束位置，true表示停止的当前动画的结束位置，false表示停止在当前位置，默认为false
动画的链式操作：
通常在一个动画中的所有css属性是同时进行的，想要将所有动画按顺序执行的话，可以将多个动画嵌套在动画结束的回调函数中，但是这样容易造成回调地狱，所以jquery提供了一个动画的链
以上是关于一篇博文带你 jQuery入门，万字肝爆！ 建议收藏~的主要内容，如果未能解决你的问题，请参考以下文章
一篇博文：带你TypeScript入门，两万字肝爆，建议收藏！
一篇博文：带你TypeScript入门，两万字肝爆，建议收藏！
1小时0基础带你Git入门，保姆式教学，万字肝爆！ 建议收藏~