5

一篇博文带你 jQuery入门，万字肝爆！ 建议收藏~

 2 years ago
source link: https://blog.csdn.net/weixin_44070254/article/details/117376193
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

jQuery

jQuery是js的库。库就是说将很多js的方法封装在了一个文件中,jquery是全球使用最多的js库。

jQuery是前端编程中使用最多的库。曾经风靡全球的原因：

1.jquery中不用考虑兼容 - 因为jquery把兼容问题都封装好了
2.jquery有强大的选择器机制
3.优质的隐式迭代 - 悄悄的 遍历
4.无所不能的链式编程 - 一行代码搞定tab切换

jquery完全不需要考虑兼容性，因为jquery库将js的兼容都封装好了

⭐官网：https://jquery.com/

⭐中文方法大全：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(事件类型[,委托的子元素][,传入的参数],处理的函数)

使用说明：

  1. 事件类型不用加on
  2. 委托元素必须是子元素
  3. 传入的参数会传到处理函数中，且在事件对象的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([是否复制自身的事件][,是否复制子元素的事件])

使用说明：

  1. jqueyr中的复制元素是深复制，复制标签结构和内容
  2. 这个方法接收两个参数，参数1代表是否把元素的事件也克隆出来，默认为false；参数2代表是否把元素的子元素的事件克隆出来，默认跟随第一个参数的值。
  3. 如果不复制父元素的事件，子元素的事件也不能复制

元素内容区域尺寸操作：

元素.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提供了一个动画的链式操作，让所有动画组成一个队列，按顺序执行，例：

  $("div").animate({
        left:"300px"
    }).animate({
        top:"300px"
    }).animate({
        width:"300px"
    }).animate({
        height:"50px"
    })
});
动画队列 - 动画链式操作在这里插入图片描述

在这里插入图片描述

看的不过瘾吗？那现在来点高级的吧！

JQ高级🌙

jquery发送ajax请求⭐⭐⭐

get请求

jquery针对ajax封装的方法 - 给自己用的方法
get请求：$.get(url-必填,多个可选项)
请求携带的数据 - 请求主体 - 可以是对象，也可以是字符串

$.get('请求地址', 参数, 成功的回调函数, 'json');
参数1：请求地址
参数2：请求携带的数据，可以是拼接的字符串形式，也可以是对象形式
参数3：成功的回调函数，参数为响应回来的的数据
参数4：希望返回的数据格式

$.get("get.php",{id:1},function(res){console.log(res);},"json");

post请求⭐⭐

post请求的方法跟get请求方法的使用方式一模一样的

$.post('请求地址', 参数, 成功的回调函数, 'json');
参数1：请求地址
参数2：请求携带的数据，可以是拼接的字符串形式，也可以是对象形式
参数3：成功的回调函数，参数为响应回来的的数据
参数4：希望返回的数据格式

$.post("post.php",{id:1},function(res){console.log(res);},"json");

ajax请求⭐⭐

$.ajax({
    url: 请求地址,   / 必填，请求的地址
    type: 请求方式,   / 选填，请求方式，默认是 GET（忽略大小写）
    data: {},   / 选填，发送请求是携带的参数
    dataType: 'json',   / 选填，期望返回值的数据类型，默认是 string
    async: true,   / 选填，是否异步，默认是 true
    success () {},   / 选填，成功的回调函数
    error () {},   / 选填，失败的回调函数，参数有xhr，是ajax对象，status状态，err错误信息
    cache: true,   / 选填，是否缓存，默认是 true
    timeout: 1000,   / 选填，超时时间，单位毫秒
    context: div,   / 选填，回调函数中的 this 指向，默认是 ajax 对象
})

jsonp请求⭐⭐

$.ajax({
    url: 请求地址,
    dataType: 'jsonp',
    data: { name: 'Jack', age: 18 },
    success (res) {
        console.log(res)
    },
    jsonp: 'cb',  / jsonp 请求的时候回调函数的 key
    jsonpCallback: 'fn'   / jsonp 请求的时候回调函数的名称
})

全局ajax函数⭐

全局ajax函数指的ajax的钩子函数。钩子函数指的是一件事情执行到某个阶段的时候自动调用的函数。
ajax的全局函数，也称为 钩子函数. 钩子函数：在一个完整的流程中，需要经历到某个阶段的时候，打断并执行一个函数

jquery将ajax发送的过程，捕获到，到某个阶段的时候，可以去执行一个函数 - 全局函数
例：jquery将地址设置好了，请求头设置了，就差send了，我需要在send之前，执行一个函数 - 使用jquery的ajax全局函数

有表a、b、c，我需要将a、b、c三个表中数据请求回来 - 规定需要3个ajax 需求：当所有数据都请求回来的时候，再一次性加载这些数据到html中.

第一个请求在开始的时候就会触发这个函数：

$(window).ajaxStart(function () {
    console.log('有一个请求开始了')
})

任意一个请求在 准备 send 之前 会触发这个函数：

$(window).ajaxSend(function () {
    console.log('有一个要发送出去了')
})

任意一个请求在 成功 的时候就会触发这个函数：

$(window).ajaxSuccess(function () {
    console.log('有一个请求成功了')
})

任意一个请求在 失败 的时候就会触发这个函数：

$(window).ajaxError(function () {
    console.log('有一个请求失败了')
})

任意一个请求在 完成 的时候就会触发这个函数：

$(window).ajaxComplete(function () {
    console.log('有一个请求完成了')
})

任意一个请求在 结束 的时候就会触发这个函数：

$(window).ajaxStop(function () {
    console.log('有一个请求结束了')
})

jquery的标识符

定义在全局中的变量、函数 都容易被覆盖 - 在污染全局

jquery的开头都是 获 取 时 j Q u e r y 。 如 果 在 页 面 引 入 别 人 的 插 件 ， 别 人 的 插 件 写 的 也 是 要 用 获取时jQuery。如果在页面引入别人的插件，别人的插件写的也是要用 获取时jQuery。如果在页面引入别人的插件，别人的插件写的也是要用或jQuery开头的，那么会和引入的jquery产生冲突。jquery早已预料到了这种情况，所以jquery可以将$或jQuery的使用权交出，或换成其他的操作符。

jQuery.noConflict()； / 交出了$使用权，$符号不能使用了，只能使用jQuery
jQuery.noConflict(true)； / 交出了$和jQuery的使用权，$符号和jQuery都不能使用了
var 变量 = jQuery.noConflict(true); / 使用自定义的变量代替$和jQuery

jquery扩展⭐⭐⭐

为什么要扩展？因为jquery虽然很强大，但是不会将所有需要的功能都封装好，有些我们实际应用需要的东西，他就没有，比如：全选功能/数组去重功能

需要自己写 - 希望调用方式使用jquery的使用方式来使用 - 修改源代码

我们在实际开发中，是不修改源代码的，为什么？
因为我们在开发的时候使用的jquery，当项目在上线以后的时候，用的不是开发的时候这个jquery

jquery提供了扩展的接口
可以自己封装一些函数，这个函数可以像jquery一样去掉用他
接口有2种：1.给元素集合伪数组使用的方法 2.给自己使用的方法

jquery总共提供了两类方法，一类是元素集合调用，一类是自己调用：

$("div").css();
$.get();

jquery提供的方法在情况下，会写的很复杂，所以提供了一个插件机制，可以向jquery中扩展自己的方法。

向元素集合扩展方法：

jQuery.fn.extend({
    fn:function(){
        console.log(123);
    }
})
/ 参数是一个对象，对象中的方法是对每个元素集合扩展的方法

这样写好以后，就可以使用元素集合调用这个方法了：

$("div").fn(); / 123

向jquery自身扩展方法：

jQuery.extend({
    fn:function(){
        console.log(456);
    }
});
/ 参数是一个对象，对象中的方法是对自身扩展的方法

jquery插件🌙

jquery之家：http://www.htmleaf.com/jQuery

jq22:https://www.jq22.com/

表单验证插件

jquery-validation

下载地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip

使用：

1.引入jquery

2.引入jquery.validate.js

3.引入语言包

4.form标签调用validate方法

5.自定义错误信息样式，使用类名error

6.自定义验证方法：

jQuery.validator.addMethod("checkTel",function(v){ 
    var reg = /^[1][345789]\d{9}$/;
    if(!reg.test(v)){
    	return false;   
    }else{
        return true;
    }
},"手机号不正确");
/ 验证规则是checkTel，提示信息是固定的

颜色动画插件🌙

下载网址：https://github.com/jquery/jquery-color

jquery.color.js

引入插件即可，写颜色动画就好了

图片懒加载🌙

下载网址：https://github.com/pedromenezes/jQuery-lazyload

jquery.lazyload

  1. 引入jquery
  2. 引入插件名
  3. 将图片的src属性换成data-original属性，给图片标签加宽高
  4. 给图片加类名，用于控制
  5. js代码中调用方法：$("img.类名").lazyload();

自定义占位图片：

$("img.lazy").lazyload(function(){
    placeholder:"image/1.gif",
});

laydate时间插件🌙

官网：http://www.layui.com/laydate/

下载插件，引入核心的js文件

<body>
	<input type="text" id="time">
</body>
<script src="laydate.js"></script>
<script>
/ 初始化时间，执行一个laydate实例
laydate.render({
	elem:"#time",
	type:"datetime", / 可以指定类型：month,year,datetime,time
	mark:{ // 标记
		'0-6-2':"儿童节",
		'0-0-5':'发工资',
		'2019-6-30':'离职',
		'2019-6-28':'',
	},
});
</script>
时间插件效果在这里插入图片描述

layer弹出层插件🌙

弹出层网址：http://layer.layui.com/

<body>
	<button id="loading">加载</button>
</body>
<script src="jquery.js"></script>
<script src="layer.js"></script>
<script>
// loading层
$("#loading").click(function(){
		var index1 = layer.load(1,{
		shade:[0.1,'#666'], // 0.1表示透明度，#666表示背景颜色
		shadeClose:true, // 表示点击遮罩关闭弹出层，默认为false
	});
	// 关闭指定的弹出层:layer.close(弹出层id);
	setTimeout(function(){layer.close(index1);},3000);
});
</script>
效果图在这里插入图片描述

CSDN技术交流群： 不限萌新大佬，欢迎加入我们的技术圈。

QQ交流群：925570980

微信群：
在这里插入图片描述

博主汇总不易，喜欢的朋友们可以收藏。 欢迎一键三连哦~

在这里插入图片描述


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK