前端之jQuery

最新推荐文章于 2024-07-11 17:17:41 发布

Violet永存

最新推荐文章于 2024-07-11 17:17:41 发布

阅读量739

点赞数 30

分类专栏：前端文章标签：前端 javascript jquery

本文链接：https://blog.csdn.net/AWSDN/article/details/136671707

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了jQuery库的基础概念，包括库的引入、基本语法、DOM与JDOM转换、事件类型绑定（ready、click等）、动画效果、回调函数以及方法链接。作者鼓励读者通过实践积累知识，并推荐了W3C学习资源。

摘要由CSDN通过智能技术生成

一、前言

之前就说好要把前端系列更新完的，但是开学事情有点多，断更了些日子，实属无奈。

那我们来继续更新前端的内容，往期的内容可以到前端专栏里去看，也可以点下面的链接

HTML常用内容：

https://blog.csdn.net/AWSDN/article/details/136112174spm=1001.2014.3001.5501
CSS前言：

前端之CSS前言-CSDN博客

CSS选择器：

前端之CSS选择器-CSDN博客

CSS盒子模型：

前端之CSS盒子模型-CSDN博客

CSS布局：

https://blog.csdn.net/AWSDN/article/details/136168009?spm=1001.2014.3001.5501

CSS样式：

前端之CSS样式

这期我们就来更新jQuery的内容。下面我们就进行介绍。

二、内容

1、基本介绍

“jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。”

上面这一句话就概括了jQuery的特点，jQuery极大的简化了js编程，并且非常简单。因为jQuery是js的一个库，所以我们在使用的时候要先引入，那么下面就详细讲一下。

（1）引入

有两种引入方式，一种是在联网状态下，引入jQuery的链接，另一种则是访问链接复制jQuery的内容，自己建一个js文件粘贴上去，然后引入这个js文件就可以了。

下载jQuery的链接我就放在下面（或者自己去搜jQuery 下载，估计看本篇博客的各位朋友早已经懂怎么引入jQuery了吧😶，不会有人不懂吧）

https://jquery.com/download/

在HTML文件中引入jQuery要放在引入js文件前面

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.0.min.js"></script>
    <script src="test1.js"></script>
    <link rel="stylesheet" href="test1.css">
</head>

（2）基础语法

基础语法：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

jQuery名称冲突

比如 Prototype同样使用 $ 符号
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
或者直接使用原生变量jQuery代替$

2、dom与jdom转换

使用环境：js与jQuery混编
通过js获得对象称为dom对象
通过jQuery获得对象称为jdom对象
dom => jdom：$(dom)
jdom => dom：jdom[0]

3、事件类型绑定

（1）方式一

可以使用js中大部分事件类型

ready：就绪事件
click：单击事件
dblclick：双击事件
focus：获得焦点事件
mouseover：鼠标悬停事件

jQuery自行封装事件

hover：两次执行逻辑，放上一次，离开后复原又一次

（2）方式二：on（"事件",方法）

两个参数（"事件",方法） //事件转为字符串作为参数
不能使用hover事件
意义：可以把"事件"定义为变量，使其可变，脱离固定语法

$(".qcby").on("click",function(){

})

（3）方式三：on（"事件",selector,方法）

三个参数（"事件",selector,方法）
为已有的和未来的元素绑定事件
body位置要用父集元素(必须包含selector)，可以用body
（最大的）意义：可以为未来元素绑定事件

$("body").on("click",".qcby",function(){
//
})

4、函数

（1）文档就绪函数

$(document).ready(function(){

})
//可以省略为
$(function(){

})
//效果等于defer

（2）隐藏/显示

//隐藏
$(selector).hide(speed,callback)
//显示
$(selector).show(speed,callback)
//显示被隐藏的元素，并隐藏已显示的元素
$(selector).toggle(speed,callback)
//可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

（3）淡入淡出 fade-In/Out/Toggle/To

//淡入已隐藏的元素
$(selector).fadeIn(speed,callback)
//淡出可见元素
$(selector).fadeOut(speed,callback)
//在 fadeIn() 与 fadeOut() 方法之间进行切换
//如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果
//如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果
$(selector).fadeToggle(speed,callback)
//fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
$(selector).fadeTo(speed,opacity,callback)
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒
//可选的 callback 参数是 fading 完成后所执行的函数名称

（4）滑动效果 slide-Down/Up/Toggle

//向下滑动元素
$(selector).slideDown(speed,callback)
//向上滑动元素
$(selector).slideUp(speed,callback)
//在 slideDown() 与 slideUp() 方法之间进行切换
$(selector).slideToggle(speed,callback)
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒
//可选的 callback 参数是滑动完成后所执行的函数名称

（5）动画

$(selector).animate({params},speed,callback)
//必需的 params 参数定义形成动画的 CSS 属性
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒
//可选的 callback 参数是动画完成后所执行的函数名称
//默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素
的 CSS position 属性设置为 relative、fixed 或 absolute
//1.操作多种属性
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
})
})
//2.几乎可以用 animate() 方法来操作所有 CSS 属性，但是必须使用 Camel 标记法（驼峰写法）书写
所有的属性名，除非以字符串形式
//例如：必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right
//或者用"padding-left","margin-right"
//颜色动画并不包含在核心 jQuery 库，生成颜色动画，您需要从 jQuery.com 下载 Color Animations
插件
//3.使用相对值
//在值的前面加上 += 或 -=
//例如height:'+=150px'
//4.使用预定义的值
//把属性的动画值设置为 "show"、"hide" 或 "toggle"
//例如：height:'toggle'
//5.使用队列功能
//编写多个 animate()，jQuery 会创建包含这些方法调用的“内部”队列，然后逐一运行这些 animate
调用

（6）stop（）

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

//1.stop（）
//按钮会停止当前活动的动画，但允许已排队的动画向前执行
//2.stop(true)
//按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止
//3.stop(true,true)
//会立即完成当前活动的动画，然后停下来

（7）Callback

在当前动画 100% 完成之后执行
由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成，为了避免这个情况，可以以参数的形式添加 Callback 函数
支持嵌套

//错误写法（不按顺序执行）
$("p").hide(1000)
alert("The paragraph is now hidden")
//正确写法（按顺序执行）
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

（8）方法链接（Chaining）

jQuery允许在相同的元素上运行多条 jQuery 命令，一条接着另一条
意义：浏览器就不必多次查找相同的元素

$("#p1").css("color","red").slideUp(2000).slideDown(2000)
//应用(防止多次重复调用)
$(this.nextElementSibling).stop().slideToggle("3000")

（9）循环（each）

$("p").each(function(){
alert($(this).css("background-color"))
})
//带参数（index：索引值 item：对应dom元素）
$("p").each(function(index,item){
alert(item.css("background-color"))
//或
alert(item.css.style.backgroundColor)
}
//循环遍历数组

三、总结

这期内容更重要的是需要积累，有时间就练习一下。那么这期，jQuery内容就更新完了，如果有错误欢迎指正，另外如果本文对你有帮助的话，希望关注点赞支持，谢谢各位😘😘😘

最后推荐一个网站给大家，可以帮助你更好的学习jQuery（w3c）

https://www.w3school.com.cn/jquery/index.asp

Violet永存

关注

30
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
前端之jQuery

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。上面这一句话就概括了jQuery的特点，jQuery极大的简化了js编程，并且非常简单。因为jQuery是js的一个库，所以我们在使用的时候要先引入，那么下面就详细讲一下。这期内容更重要的是需要积累，有时间就练习一下。那么这期，jQuery最后推荐一个网站给大家，可以帮助你更好的学习jQuery（w3c）
复制链接

扫一扫