JavaScript之jQuery库

已于 2022-12-15 21:07:26 修改
阅读量2.1k 收藏 1
点赞数 1
分类专栏： 前端 文章标签： javascript jquery 前端
于 2022-12-14 22:11:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54889094/article/details/128322894
版权

文章目录

jQuery

官网下载

jQuery入口函数

第一种写法

// 等着页面DOM加载完毕再去执行JavaScript代码
$(document).ready(function() {
    
})

第二种写法

// 等着页面DOM加载完毕再去执行JavaScript代码
$(function() {
    
})

  • 相当于原生js中的DOMContentLoaded

  • 推荐使用第二种方式

jQuery顶级对象$

$是jQuery的别称，在代码中可以使用jQuery代替$，但我多用$

$是jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用$包装成jQuery对象，就可以调用jQuery方法

jQuery对象和DOM对象

// DOM对象，使用原生js获取过来的对象
let div = document.querySelector('div')
console.dir(div)
// jQuery对象，使用jQuery获取过来的对象
let $div = $('div')
console.dir($div)
// jQuery对象只能使用jQuery方法，DOM对象只能使用原生JavaScript方法
// div.style.display = 'none'
// $div.hide()

它们的相互转换

因为原生JavaScript对象比jQuery对象更大，原生的js的一些属性和方法jQuery可能没有帮我们封装，想要使用这些方法需要把jQuery对象转换为DOM对象

  1. DOM对象转换为jQuery对象：$(DOM对象)
// 我们已经使用原生JavaScript获取了
let div = document.querySelector('div')
// 转为jQuery对象
let $div = $(div)
console.log($div)
  1. jQuery对象转换为DOM对象
// 使用jQuery获取了对象
let $div = $('div')
// 将jQuery对象转换为DOM对象
// 0代表索引号，从零开始
let div = $div[0]
console.log(div)

常用API

jQuery选择器

$('选择器') // 里面的选择器直接使用css选择器即可

隐式迭代

遍历内部DOM元素的过程叫做隐式迭代

// 获取4个div元素
let $div = $('div')
// console.log($div)
// 给4个div设置背景颜色为红色
// 样式方法css()
// 隐式迭代
$div.css({
    background: 'red',
    width: '120px'
})

jQuery筛选选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aiAHu9ha-1671026814587)(image/image-20221214133016453.png)]

// 获取第一个ul中的小li
let $li = $('ul li:first')
// 获取ul中索引为2的小li，索引从零开始
let $li1= $('ul li:eq(2)')
// 选取ol中的奇数索引小li
let $li2= $('ol li:odd')
$li.css({
    background: 'red'
})
$li1.css({
    background: 'red'
})
$li2.css({
    background: 'red'
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3201onj5-1671026814588)(image/image-20221214134417614.png)]

// 返回最近一级的父元素
let father = $('.son').parent()
console.log(father)
// 选择最近一级的子元素
let son = $('.nav').children()
console.log(son)
// 选择所有子元素，只要是子元素，参数是必选参数，不能省略
let child = $('.nav').find('*')
console.log(child)

// 选择兄弟元素，去开自己
$('ul .item').siblings().css({
    background: 'red'
})

jQuery排他思想

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
    </head>
    <style>
        /* div {
        width: 100px;
        height: 100px;
        background-color: blue;
        } */
    </style>
    <body>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <script>
            // 隐式迭代
            $('button').click(function() {
                $('button').siblings('button').css({
                    background: ''
                })
                $(this).css({
                    background: 'red'
                })
            })
        </script>
    </body>
</html>

jQuery样式操作

css()方法

// 添加一个样式
// $('div').css('height', 300)
// 添加多个样式
$('div').css({
    // 小驼峰命名法
    backgroundColor: 'red',
    height: 300,
    width: 300
})

设置类

addClass()方法：添加类，不影响以前的类名
$('div').addClass('类名')
removeClass()方法：删除类，同样不影响
$('div').removeClass('类名')
切换类
$('div').toggleClass('类名')

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
    </head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .current {
            background-color: rebeccapurple;
            height: 12.5rem;
            width: 12.5rem;
        }
    </style>
    <body>
        <div class="current"></div>
        <script>
            $('div').click(function() {
                $(this).toggleClass('current')
            })
        </script>
    </body>
</html>

jQuery效果

jQuery给我们封装了很多动画效果，比较常见的如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VEfBGZGU-1671026814589)(image/image-20221214154324909.png)]

显示隐藏效果

show(speed, easing, fn) // 显示元素
  • 参数可以都省略，无动画直接显示
  • speed：‘slow’，‘normal’，'fast’或表示时长的毫秒数值
  • easing：用来指定切换效果，默认’swing’，可以改为’linear’
  • fn：回调函数
hide(speed, easing, fn) // 隐藏元素
  • 参数可以都省略，无动画直接显示
  • speed：‘slow’，‘normal’，'fast’或表示时长的毫秒数值
  • easing：用来指定切换效果，默认’swing’，可以改为’linear’
  • fn：回调函数
toggle(speed, easing, fn) // 切换状态

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
    </head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <body>
        <button>显示</button>
        <button>隐藏</button>
        <button>切换</button>
        <div></div>
        <script>
            // 隐藏
            $('button').eq(1).click(function() {
                $('div').hide(1000)
            })
            // 显示
            $('button').eq(0).click(function() {
                $('div').show(1000)
            })
            // 切换
            $('button').eq(2).click(function() {
                $('div').toggle(1000)
            })
            // 一般不加参数
        </script>
    </body>
</html>

滑动效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
    </head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blue;
            display: none;
        }
    </style>
    <body>
        <button>显示</button>
        <button>隐藏</button>
        <button>切换</button>
        <div></div>
        <script>
            // 上滑动
            $('button').eq(1).click(function() {
                $('div').slideUp(1000)
            })
            // 下滑动
            $('button').eq(0).click(function() {
                $('div').slideDown(1000)
            })
            $('button').eq(2).click(function() {
                $('div').slideToggle(1000)
            })
            // 一般不加参数
        </script>
    </body>
</html>

停止动画

stop()：停止其他动画，只做当前动画

淡入淡出效果

fadeTo(speed, opacity, easing, fn)

  • opacity：透明度，必须写，取值0-1

  • speed：必须写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
    </head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blue;
            display: none;
        }
    </style>
    <body>
        <button>显示</button>
        <button>隐藏</button>
        <button>切换</button>
        <div></div>
        <script>
            // 淡出
            $('button').eq(1).click(function() {
                $('div').fadeOut()
            })
            // 淡入
            $('button').eq(0).click(function() {
                $('div').fadeIn()
            })
            $('button').eq(2).click(function() {
                $('div').fadeToggle().fadeTo(1000, .5)
            })
            // 一般不加参数
        </script>
    </body>
</html>

自定义动画

animate(params, speed, easing, fn)
  • params：想要更改的样式属性，以对象形式传递，必须写，其余参数可以省略
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
    </head>
    <style>
        div {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <body>
        <button>动画</button>
        <div></div>
        <script>
            $('button').click(function() {
                $('div').animate({
                    left: 200,
                    top: 200,
                    opacity: .3
                })
            })
        </script>
    </body>
</html>

jQuery属性操作

prop()：设置或获取元素固有属性值

// 获取固有属性
console.log($('a').prop('href'))
// 设置固有属性
$('a').prop('title', '百度一下')

attr()：设置或获取元素自定义属性

// 获取元素自定义属性
console.log($('div').attr('index'))
// 设置元素自定义属性
$('div').attr('index', '1')

$('div').data('uname', 'andy')
console.log($('div').data('uname'))

console.log($('div').data('index'))
console.log($('div').attr('data-index'))

jQuery内容操作

html()：标签也会解析

// 获取文本内容
console.log($('div').html())
// 设置文本内容
$('div').html('123')

text()：忽略标签

// 获取文本内容
console.log($('div').text())
// 设置文本内容
$('div').text('123')

val()：获取或设置表单内容的值

// 获取表单内容
console.log($("input").val())
// 设置表单内容
$('input').val('请输入数字')

jQuery元素操作

遍历元素

jQuery隐式迭代是对同一类元素做了同样操作，如果想要给同一类元素做不同的操作，就需要用到遍历

$('div').each(function(index, domEle) {
    
})
  • index：每个元素的索引号
  • DOMElement：每个DOM对象
$('div').each(function(index, elem) {
    elem.style.background = 'red'
    elem.style.width = '100px'
    elem.style.height = '100px'
    console.log(elem)
})

$.each($('div'), function(index, elem) {
    
})
  • 第一个参数是索引号
  • 第二个参数是遍历内容
$.each($('div'), function(index, elem) {
    console.log(elem)
})

创建添加删除操作

创建元素
// 动态创建li
let li = $('<li></li>')
添加元素
// 动态创建li
let li = $('<li></li>')
// console.log(li)
// 内部添加并且放到元素的最后面
$('ul').append(li)
// 内部添加并且放到元素的最前面
// $('ul').prepend(li)

// 动态创建div
let div = $('<div>我是后面来的</div>')
// 外部添加，添加到后面
// $('div:eq(0)').after(div)
// 外部添加，添加到前面
$('div:eq(0)').before(div)
删除元素
// 删除本身
// $('div').remove()
// 清空子元素和下面一行相等
// $('div').empty()
// 清空内容
$('div').html("")

jQuery事件

事件注册

element.事件(function() {
    
})

$('div').click(function() {
    $(this).css({
        background: 'red'
    })
})

事件处理

element.on(events, selector, fn)
  • events：一个或多个用空格分开的事件类型
  • selector：元素的子元素选择器
  • fn：回调函数
$('div').on({
    mouseenter: function() {
        $(this).css('background', 'red')
    },
    click: function() {
        $(this).css('background', 'blue')
    }
})

事件委托

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
    </head>
    <style>

    </style>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <script>
            $('ul').on('click', 'li', function() {
                alert('1')
            })
        </script>
    </body>
</html>

解绑事件

// 第一个参数为解绑事件类型
$('div').off()

one()：绑定事件只执行一次

自动触发事件

$('div').on('click', function() {
    console.log('1')
})
// 自动触发事件s
// 1. 元素.事件()
$('div').click()
// 2. 元素.trigger('事件')
$('div').trigger('click')
// 3. 元素.triggerHandler('事件')
// 不会触发元素默认行为
$('div').triggerHandler('click')

事件对象

$('div').on('click', function(e) {
    // 事件对象
    console.log(e)
})

jQuery拷贝对象

$.extend(deep, target, obj)
  • deep：如果设置为true，为深拷贝，默认false
  • target：要拷贝的对象
  • obj：待拷贝的对象
let obj = {
    id: '0',
}
let obj1 = {
    id:'1',
    name: 'andy',
    msg: {
        age: 22
    }
}
// 把obj1拷贝给obj
// 会覆盖obj原来的数据
$.extend(obj, obj1)
obj.msg.age = 1
console.log(obj1) // 会影响

let obj = {
    id: '0',
}
let obj1 = {
    id:'1',
    name: 'andy',
    msg: {
        age: 22
    }
}
// 把obj1拷贝给obj
// 会覆盖obj原来的数据
$.extend(true, obj, obj1)
obj.msg.age = 1
console.log(obj1) // 不会影响

jQuery位置

offset()

设置或获取元素偏移

offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系，可以修改

position()方法

返回被选元素相对于带有定位父级偏移坐标，如果父级都没有定位，则以文档为准，不可以修改

scrollTop()和scrollLeft()

设置或获取元素被滚去的头部和左侧距离

草莓小子
关注
专栏目录
jQuery库（1）
thwr1881的博客
07-14 1008
jQuery库（1）
JavaScript jQuery库 概述
chengqingshihuishui的博客
09-06 228
一、jQuery介绍 jQuery 指 JavaScript 和 查询（Query），是辅助JS发开的JS类库。核心思想是，写的更少，做的更多，实现了很多浏览器的兼容问题。免费、开源、语法设计使得开发更加便捷，例如操作DOM对象，选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。 二、jQuery导入 1、从jQuery下载jQuery库，我在200906下载的版本是3.5.1，放入工程目录下任意文件 2、<script type="text/javascript" src=“
jQuery —— JavaScript 库
我的的博客哦
04-25 1070
/ css `div`中定义 position: absolute;})params想要更改的样式属性，以对象的形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余的参数可以忽略。🔰用户自己给元素添加的属性，我们称为自定义属性。比如给div添加index= "1"
jQuery的简介：一个强大的JavaScript库
最新发布
2302_78593467的博客
08-12 859
jQuery不仅仅是一个JavaScript库，它是Web开发历史上的一个里程碑。尽管新的技术和框架不断涌现，但jQuery依然以其易用性、强大的功能和庞大的社区支持，继续在Web开发领域占有一席之地。对于初学者和经验丰富的开发者来说，jQuery都是一个值得学习和掌握的工具。
Jquery库
weixin_49697978的博客
11-29 277
Jquery库类：浏览器端的库 操作节点 1.安装 npm install jquery 可在package.json中查看是否下载完成 2.在第三方包中找到 jquery 下的dist中的 jquery.min.js 然后复制到public 中的 lib 包中 3.在HTML中在自己的书写的上面进行引入 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。 对原生JS中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装。 基础语法：$(*selector*).*a
jQuery库
来了一起学
04-07 1585
语法：animate(params,[speed],[easing],[fn])1.params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性则需要采取驼峰命名法borderLeft，其余参数都可以省略2.speed：三种预定速度之一的字符串(‘slow’,‘normal’,‘fast’)或表示动画时长的毫秒数值3.easing：(Optionakl)用来指定切换效果，默认是’swing’,可用参数‘linear’
jQuery入门
weixin_46370867的博客
11-03 152
jQuery入门 下面是对jQuery的大概介绍，希望可以帮助到有需要的小伙伴。 一、jQuery是什么 1、JavaScript类库 JavaScript类库简称为JS库，是为了简化JavaScript额开发或者是DOM的操作等。其中一些JS库也会根据特定场景封装一系列的操作，例如日期控件等。 JavaScript类库会预定义一系列对象和函数，境地开发人员使用JavaSript的难度，兼容各个浏览器提供简单易用的相应功能。 目前，巿面上的JavaScript类库数量众多，质量也是参差不齐。一般会选用生命周
JavaScript——jQuery
Scccc_的博客
03-10 5025
JavaScript学习笔记
JavaScript的jQuery库中function的存在和参数问题
12-01
jQuery function 参数传递 jQuery的function函数中使用外部变量： //如何取得i的变量 for(i=0;i<3;i++) { $.get("/test.html", ... alert(...JavaScript、jQuery 检测某 function 是否存在 JavaScript 中检测
jQuery JavaScript库v3.4.1
10-01
jQuery 是一个JavaScript 库，它有助于简化 JavaScript 以及 Asynchronous JavaScript + XML (Ajax) 编程。与类似的 JavaScript 库不同，jQuery 具有独特的基本原理，可以简洁地表示常见的复杂代码。学习
JavaScript+jQuery交互式Web前端开发-源代码.zip
04-16
jQuery 是一个 JavaScript 库，它简化了 JavaScript 的使用，提供了一套丰富的API来处理常见的网页操作，如选择DOM元素、事件处理、动画效果等。jQuery 的出现极大地降低了前端开发的门槛，使得开发者可以更快速、更...
jquery库文件
08-21
js插件 jquery jQueryRotate.2.2.js jquery.easing.min.js
jQuery插件库
01-29
jQuery插件库jQuery插件库jQuery插件库jQuery插件库jQuery插件库
jquery源代码库
03-16
最近搞了一下jquery,jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jquery源代码文件库
08-30
jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 在您开始学习 jQuery 之前，您应该对以下知识有基本的了解： HTML CSS JavaScript
JavaScript+jQuery网页特效设计任务驱动教程-PPT.zip
07-12
2. jQuery入门：讲解如何引入jQuery库，使用jQuery选择器，以及进行基本的DOM操作。 3. 事件处理：讲解JavaScript和jQuery中的事件监听和触发，以及如何使用事件委托。 4. 动画效果：介绍jQuery的`.animate()`方法和...
jQuery 库学习
编程菜鸟
01-05 659
下载 jQuery 共有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读）。 这两个版本都可从jQuery.com下载。 Google CDN: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> Microsoft CDN: <script src="http://ajax.aspnetcdn.com/ajax/jQuery/j..
jQuery函数库
weixin_30339969的博客
04-28 99
jQuery函数库1 书写问题jQuery是一个类型非常丰富的函数库,他封装了以前我们所学到的大多数的属性及事件,此时一定要加以区分,正因为他是函数,所以在书写过程中我们一定要注意的是书写规则: 函数名(). 其中这个函数名可能是以前的相关属性名或事件名等熟悉关键字,此时一定要加上括号.2关于控制css/html与原生js不同的是,jQuery控制css/html用法是相似的,控制css用到的是c...
jquery—— js工具库
weixin_53757879的博客
04-01 632
https://jquery.com/download/：生产版本 压缩过的 体积小。css({"属性名":" 属性值"，"属性名":" 属性值"})attr("属性名","属性值")css("属性名"," 属性值")$(this).off("事件名","函数名")$(this).one("事件名","函数名")$(this).on("事件名","函数名")如果没有实参就是获取 有实参就是设置。文档加载完毕事件：$(funtion(){"加载完毕"})attr("属性名")css("属性名")
JavaScript入门：jQuery库的介绍与使用
"本课程主要讲解JavaScript基础知识以及jQuery库的使用。内容涵盖了JavaScript的语法、常量、变量和数据类型，以及如何利用JavaScript的消息框进行用户交互。此外，还深入介绍了jQuery，阐述了其作为JavaScript函数...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

草莓小子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值