jquery快速使用文档

jQuery简单文档

一、介绍

1、什么是jquery

jQuery是js的库。也就是说jQuery是很多js的方法封装在了一个文件中。

jQuery是前端编程中使用最多的库。曾经风靡前端。

$.fn是jQuery的原型对象。

你可能认为jquery已经过时了。

但当你自己练习demo时，你会发现还是jquery好用，用起来真香。

二、使用

1、引入

地址：网上很多jquery的cdn地址。可以自行查找最快的。

这里提供一个地址：https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js

可以通过script标签直接通过cdn引入，也可以把源码复制下拉，创建本地jquery.js使用

2、检测

输出console.log($)，查看是否输出成功

3、入口函数

相当于window.onload。或者script标签的defer属性。等待dom文档读取完成后，在执行js

$(function(){});
$(document).ready(function(){});
$(window).ready(function(){});

4、链式调用

$('#level > a').click(function()（{
$(this).addClass('current').next().show().parent().siblings().children('a').removeClass('current').next().hide()
})

5、暂停恢复加载

$.holdReady(true)//开始延迟加载
$(document).ready(function(){
    //延迟读取的内容
    $('button').click(function(){
        alert('解除延迟后被弹出')
    })
})
$("button").dblclick(function(){ 
    $.holdReady(false); 
    //解除延迟加载
})

三、选择器

1、一般选择器

就是获取页面上面的标签元素

$("#id名") // id选择器
$('.类名') // class选择器, 多个class会获取数组
$('标签名') // 标签选择器
$("标签名 (属性='属性值')") // 属性选择器

// 伪类选择器
$("li:first-child")
$("li:last-child")
$("li:nth-child(数字)") // 第一元素对应数字是1
$("li:empty") // 空标签

// jQuery获取元素有个特点，页面中能选到多个元素就会都获取到，也就是说获取到的是集合

2、筛选器

$("li:first") // 选择第一个li
$("li:last") // 选择最后一个li
$("li:event") // 奇数
$("li:odd") // 偶数
$("li:eq(数字)") // 选择下标是指定数字的元素
$("li:lt(数字)") // 下标小于指定数字的元素
$("li:gt(数字)") // 下标大于指定数字的元素
$("div:has(p)") // 含有p的div
$("div:is(p)") // 是否含有p，反布尔值
$("div:visible") // 获取不可见的元素

3、表单选择器

$(":input") // 匹配所有的表单元素 包括：文本框（input）下拉列表(select)、文本域(textarea)

//	匹配单行文本框type="text"
$(":text") 
$("input:text")
$("input[type=text]")

$(":password") // 匹配单行密码框 
$(":radio") // 匹配单选按钮 
$(":checkbox") // 匹配多选按钮
$(":submit") // 匹配提交按钮
$(":reset") // 匹配重置按钮
$(":image") // 匹配图片按钮 
$(":button") // 匹配普通按钮
$(":hidden") // 匹配隐藏域

4、表单对象选择器

$("input:enabled") // 所有可用表单元素
$("input:disbaled") // 所有禁用表单元素
$("input：checked") // 所有选中的表单元素-- 重点
$("input:not(:checked)") // 未选
$("select:selected") // 被选中的下拉框元素 -- 重点

5、筛选器方法

$("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() // 自己除外的所有兄弟元素

6、内容选择器

$("标签:contains('内容')")

7、判断选择器

const checked = $('inputCheck').is(":checked")

8、遍历

$("div").each((index, element) => {})

四、DOM

1、标签

1、创建节点：$('<p>内容</p>')

2、添加节点：

父元素.append(子元素) // 后面加
父元素.prepend(子元素) // 头前加
子元素.appendTo(父元素) // 后面加
子元素.prependTo(父元素) // 头前加
已有元素.after(添加元素) // 已有后面加
已有元素.before(添加元素) // 已有前面加
添加元素.insertBefore(已有元素) // 已有前面加
添加元素.insertAfter(已有元素) // 已有后面加

3、删除元素：

$('div').empty() // 删除元素内容，不删除自身
$('div').remove() // 移除整个元素

4、替换元素：

元素1.replaceWith(元素2) // 将元素1 换成 元素2
元素1.replaceAll(元素2) // 将元素2 换成 元素1
// 注意：元素2是字符串，直接写标签

5、复制：

$('div').clone(true, true)
// 被复制元素.clone([是否复制自身事件] [，是否复制子元素的事件]) // 默认true

6、包裹：

$('p').wrap("<div></div>") // 给p元素外面包裹一层div
$('p').unwrap("<div></div>") // 去掉p元素外面包裹一层div

// 所以的p元素合成一体，外面包裹一层div。会破坏dom结构。
$('p').wrapAll("<div></div>") 

// 给p元素的内容包裹一层b标签
$('p').wrapInner("<b></b>") 

2、标签内容

// 获取元素内容 === 相当于 div.innerText
$("div").text();
// 设置元素内容 === 相当于 div.innerText = "盒子"
$("div").text("盒子");
// 获取元素代标签的内容 === 相当于 div.innerHTML
$("div").html();
// 设置元素带标签的内容 === 相当于 div.innerHTML = "<b>文字</b>"
$("div").html("<b>文字</b>");
// 获取表单元素的值 === 相当于 input.value
$("input").val();
// 设置表单元素的内容 === 相当于 input.value = "请输入用户名"
$("input").val("请输入用户名");
// 删除字符串前后空格
$.trim(str);

3、类名操作

// 添加类名
$("div").addClass(类名);
$("div").addClass(类名1, 类名2, ...);
$("div").removeClass(类名); // 删除类名
$("div").toggleClass(类名); // 在添加和删除之间切换
$("div").hasClass(类名); // 判断元素是否有这个类名，有是true，没有是false

五、Dom样式

1、设置样式

$("div").css(css属性名,值); // 设置一个样式
$("div").css({ // 设置多个样式
    css属性名:值,
    css属性名:值,
})

2、获取样式

$("div").css(css属性名);

六、Dom属性

1、属性

1. 设置属性

   $('div').prop('title', '设置div的title属性')
   $('p').attr('title', '设置p的title属性')
   

2. 读取属性

   const divTitleText = $('div').prop('title')
   const pTitleText = $('p').attr('title')
   

3. 删除属性

   $("div").removeProp(属性名);
   $("div").removeAttr(属性名); // 删除自定义属性
   

4. 区别

   一、attr和prop含义的区别
   attr 是从页面搜索获得元素值，所以页面必须明确定义元素才能获取值，相对来说较慢。

   prop是从属性对象中取值，属性对象中有多少属性，就能获取多少值，不需要在页面中显示定义。
   二、在高版本的jquery引入prop方法后，attr和prop在使用时如何选择？
   对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。快速，准确。

   对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

2、尺寸

1、内容区尺寸（不含padding和border）

const height = $('div').height(); // 获取元素内容区域高度
$('div').height(高度); // 设置元素内容区域高度
const width $('div').width(); // 获取元素内容区域宽度
$('div').width(宽度); // 设置元素内容区域宽度

2、内部（含padding，不含border）

const innerHeight = $('div').innerHeight(); // 获取元素内部的高度
$('div').innerHeight(高度); // 设置元素内部高度
const innerWidth $('div').innerWidth(); // 获取元素内部宽度
$('div').innerWidth(宽度); // 设置元素内部宽度

3、占据元素页面的尺寸（padding和border都含）

// 获取元素占据的高度，默认false(不包括margin)
$('div').outerHeight([boolean])
// 获取元素占据的宽度，默认false(不包括margin)
$('div').outerWidth([boolean])

3、位置

$('div').offset(); // 获取元素在页面中的位置 结果接口为{ left: , right: }

// 将元素设置在页面中的位置
// 如果元素没有定位，会设置元素相对定位样式
$('div').offset({ left: 10, right: 10 });

$('div').position(); // 获取元在父元素中的位置
$('div').position({ left: 10, right: 10 }); // 设置元素在父元素中的位置

4、滚动距离

$('div').scrollTop(); // 获取元素竖向滚动过的距离
$('div').scrollTop(10); // 设置元素竖向滚动的距离

$('div').scrollLeft(); // 获取元素横向滚动过的距离
$('div').scrollLeft(10); // 设置元素横向滚动的距离

七、Dom事件

注意：jQuery的事件绑定不是像原生json绑定事件那样的覆盖式绑定，而是多次重复绑定。类似addEventListener属性

1、onload事件

$(function(){});
$(document).ready(function(){});
$(window).ready(function(){});

// 入口函数就是使用了onload事件

2、绑定事件

$("div").click(function(){});
$("div").mouseover(function(){});

3、绑定解除

$(元素).on(事件类型[,处理函数]) // 不加处理函数解除所有此类型事件绑定
$(元素).off(事件类型[,处理函数]) // 不加处理函数解除所有此类型事件绑定

$(元素).bind(event, function); // 同上
$(元素).unbind(event, function);

$(元素).die(event, function) // 同上
$(元素).live(event, function)

区别：

• bind只能给符合条件的元素本身添加事件
• on可以将子元素的事件委托给父元素进行处理,而且可以给动态添加的元素加上绑定事件

4、手动触发

// 手动触发绑定的事件，类似dispatchEvent的方法
$(元素).trigger(事件类型[,处理函数]);

5、一次事件

$(元素).one(事件类型,处理函数);

6、阻止冒泡

jquery和很多浏览器一样，没有事件捕获阶段。绑定函数返回false就阻止冒泡

$('div').click(function(e) {
    // ...
    return false
})

$('div').click(function(e) {
    // ...
    e.stopPropagation()
})

7、解决重复绑定

$(元素).off("click").on("click",function(){})
$(元素).unbind("click").bind("click",function(){})
$(元素).die("click").live("click",function(){})

8、特殊事件

$("div").hover(鼠标放上去的处理函数, 鼠标离开的处理函数)

八、动画

1、显示隐藏

$('div').show([speed], [easing], [callback]) // 显示
$('div').hide([speed], [easing], [callback]) // 隐藏
$('div').toggle([speed], [easing], [callback]) // 切换显示隐藏

// speed(速度，毫秒数)，callback(动画完成后的回调函数)
// easing(动画效果速度): swing(头尾快中间慢), linear(匀速)
// 动画通过修改height和width两个样式实现动画，然后display:none隐藏
// 非动画通过display:none 切换实现

2、下拉显示隐藏

$('div').slideDown([speed], [easing], [callback]) // 下拉显示
$('div').slideUp([speed], [easing], [callback]) // 隐藏
$('div').slidetoggle([speed], [easing], [callback]) // 切换显示隐藏

// speed(速度，毫秒数)，callback(动画完成后的回调函数)
// easing(动画效果速度): swing(头尾快中间慢), linear(匀速)
// 通过修改样式height实现动画，然后display：none隐藏

3、淡入淡出

$('div').fadeIn([speed], [easing], [callback]) // 淡入
$('div').fadeOut([speed], [easing], [callback]) // 淡出
$('div').fadeToggle([speed], [easing], [callback]) // 切换淡入淡出

// 设置动画到指定透明度
$('div').fadeTo(speed, option, [easing], [callback])

// speed(速度，毫秒数)，callback(动画完成后的回调函数)
// easing(动画效果速度): swing(头尾快中间慢), linear(匀速)
// 通过修改样式opacity实现动画，然后display：none隐藏

4、自定义动画

$('div').animate(styles, [speed], [easing], [callback])
// styles(设置的css样式对象)
// speed(速度，毫秒数)，callback(动画完成后的回调函数)
// easing(动画效果速度): swing(头尾快中间慢), linear(匀速)

5、队列动画

// jquery的链式调用，所用可以设置多个动画，队列排序依次执行
$('div')
    .animate({ left: "10px" })
	.animate({ top: "10px" })
	.animate({ left: "0px" })
	.animate({ top: "0px" })

6、动画停止

$('div').stop([stopAll], [goToEnd]) // 停止动画

// stopAll(停止队列全部动画, 默认false)
// goToEnd(立刻完成当前动画，默认false)

$('div').stop() // 停止当前运行的动画，但是不会影响下一个动画
$('div').stop(true) // 停止所有队列的动画
$('div').stop(false, true) // 立刻完成当前动画，但不会停止下一个动画
$('div').stop(true, true) // 立即完成当前动画，并停止队列所有动画

7、动画延迟

$('div').delay([speed]).animate({ width: '100px' })

// speed(延迟动画的毫秒数)

九、Ajax

1、load请求

// 直接把请求结果放在标签里面渲染显示
$('div').load(url, [data], [callback])

// url(请求服务器地址, 或者文件地址)
// data(传递的数据, post传值)
// callback(请求完成后的回调函数)

// 注意，如果没有data, 就是get请求。 
// 如果有，就是post请求。即使data = {}，也是post请求。

2、getJSON请求

// get请求，获取数据
$.getJSON(url, [data], function(data) {
    console.log(data)
    // ....
})

// url(请求的地址, 或文件地址)
// data(get传值的入参，最后会拼接在url后面)
// callback(回调函数), 入参为(data, status, xml)

3、getScript请求

// 就是jsonp请求，请求获取js代码，并引入到页面，然后执行获取的js代码
$.getScript(url, [callback(data, status)])

// url(请求的地址, 或文件地址)
// callback(回调函数), 入参为(data, status)

4、get请求

$.get(url, [data], [callback], [type])

// url(请求的地址, 或文件地址)
// data(get传值的入参，最后会拼接在url后面)
// callback(回调函数), 入参为(data, status, xml)
// type(指定响应数据类型，xml, html, script, text, json, jsonp)

// 注意：type会修改request header里面的accept期望
// 完全可以直接替代getJSON和getScript

5、post请求

$.post(url, [data], [callback], [type])

// 同get请求

6、对象序列化

// post请求在某些情况下会要求以表单的形式传值
// 就需要把请求参数序列化
const data = $.param(obj)

// node的qs.stringify也可以序列化

7、获取表单值并序列化

const data = $('form').serialize()
// 直接获取表单内各个表单元素的值，并直接序列化

8、ajax

// 案例
$.ajax({
    url: 请求地址, // 必填，请求的地址
    type: 请求方式, // 选填，请求方式，默认是 GET（忽略大小写）
    data: {}, // 选填，发送请求时携带的参数
}).then()// 选填，自带promise属性

配置值

名称	值/描述
async	布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr)	发送请求前运行的函数。
cache	布尔值，表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status)	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
contentType	发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。
context	为所有 AJAX 相关的回调函数规定 “this” 值。
data	规定要发送到服务器的数据。
dataFilter(data,type)	用于处理 XMLHttpRequest 原始响应数据的函数。
dataType	预期的服务器响应的数据类型。
error(xhr,status,error)	如果请求失败要运行的函数。
global	布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified	布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp	在一个 jsonp 中重写回调函数的字符串。
jsonpCallback	在一个 jsonp 中规定回调函数的名称。
password	规定在 HTTP 访问认证请求中使用的密码。
processData	布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset	规定请求的字符集。
success(result,status,xhr)	当请求成功时运行的函数。
timeout	设置本地的请求超时时间（以毫秒计）。
traditional	布尔值，规定是否使用参数序列化的传统样式。
type	规定请求的类型（GET 或 POST）。
url	规定发送请求的 URL。默认是当前页面。
username	规定在 HTTP 访问认证请求中使用的用户名。
xhr	用于创建 XMLHttpRequest 对象的函数。

9、ajaxSetUp

// ajax全局统一配置。
// 每一个ajax都配置一边，会影响开发效率，所有全部统一配置，优化开发。
$.ajaxSetup(config)

// 和$.ajax的配置基本一样。参考上表

10、请求前拦截

1. 目前无法通过jquery自身的方法实现请求前拦截，
2. 只能做的请求前监听，但是无法修改请求参数和url配置
3. 但可以通过封装进行自定义操作
4. 所以请求监听，按照个人需求进行使用，不做介绍

11、响应前拦截

同上

12、简单封装

// 借鉴axios的封装, 简单写一个
$.ajaxSetup({ ... }) // 进行简单的ajax全局配置

function createApi(url, type, data, config) {
  // 这里可以进行 请求前拦截操作逻辑
  return new Promise((resolve, reject) => {
    $.ajax({
      url,
      type,
      data,
      success: (result) => {
          // 这里可以进行响应前拦截逻辑
          resolve(result)
      },
      error: (...err) => {
          // 这里可以进行统一处理错误逻辑
          reject(err)
      },
      ...config
    })
  })
}

const fn1 = (data) => createApi('userinfo.json', 'get', data)
const fn2 = (data) => createApi('userinfo2.json', 'get', data)

13、终止ajax

• 需求：切换到其他页面是，停止当前页面的所有请求
• 目前：jquery没有这种操作
• 可以使用xhr.abort()实现

十、插件与功能

1、proxy

对值域的代理

• $.proxy(function, scope)
• $.proxy(scope, name)

2、懒加载

懒加载详解

3、其他插件

1、菜鸟教程啥都有（ctrl+左键=进入链接哟！）

菜鸟教程

2、layui文件里也有

3、网址：

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

jq22:www.jq22.com