前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
返回腾讯云官网
社区首页 >专栏 >jQuery的简单使用

jQuery的简单使用

作者头像
端碗吹水
发布于 2020-09-23 04:20:17
发布于 2020-09-23 04:20:17
7.1K00
代码可运行
举报
文章被收录于专栏：程序猿的大杂烩程序猿的大杂烩
运行总次数：0
代码可运行
关联问题
换一批

通过jQuery注册事件

jQuery注册事件也很简单，通过选择器包装好标签对象后，调用相关的事件方法即可，调用事件方法时需要传递一个函数对象，当事件被触发就会执行函数里的代码。在jQuery里的事件名称并没有与html中的事件名称有多大区别，还是那个熟悉的味道熟悉的套路，示例：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <body>
        <button type="button" name="click" >单击事件</button>
        <button type="button" name="dbclick" >双击事件</button>
    </body>
    <script>
        $("button[name='click']").click(function(e){
            alert('单击事件！');
        });
        $("button[name='dbclick']").dblclick(function(e){
            alert('双击事件！');
        });
    </script>
</html>

函数中的参数就是事件源对象：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <body>
        <button type="button" name="click" >单击事件</button>
        <button type="button" name="dbclick" >双击事件</button>
    </body>
    <script>
        $("button[name='click']").click(function(e){
            alert(e.toString());
        });
        $("button[name='dbclick']").dblclick(function(e){
            alert(e.toString());
        });
    </script>
</html>

在函数中可以使用this来表示当前触发事件的对象，也可以通过选择器去获取当前对象：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <body>
        <button type="button" name="click" >单击事件</button>
        <button type="button" name="dbclick" >双击事件</button>
    </body>
    <script>
        $("button[name='click']").click(function(e){
            $("button[name='click']").html("Change");
        });
        $("button[name='dbclick']").dblclick(function(e){
            $(this).html("Change");
        });
    </script>
</html>

给标签添加/删除样式

在jQuery中有一个addClass方法，可以给标签添加类样式，相对的removeClass方法则是删除标签中的类样式：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <style>
        .text_p{
            color: royalblue;
            font-size: 22px;
        }
    </style>
    <body>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>
    </body>
    <script>
        $("p").mousemove(function(){
            $(this).addClass("text_p");
        });
        $("p").mouseout(function(){
            $(this).removeClass("text_p");
        });
    </script>
</html>

除了以上的方法外，还有一个css方法可以添加样式，以键值的方式添加：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <body>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>
    </body>
    <script>
        $("p").mousemove(function(){
            $(this).css("color","royalblue");
            $(this).css("font-size","22px");
        });
        $("p").mouseout(function(){
            $(this).css("color","black");
            $(this).css("font-size","16px");
        });
    </script>
</html>

如果css方法中传递的是键，那么就可以得到该键的值：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <style>
        .text_p{
            color: royalblue;
            font-size: 22px;
        }
    </style>
    <body>
        <p class="text_p">Hello World!</p>
        <p class="text_p">Hello World!</p>
        <p class="text_p">Hello World!</p>
    </body>
    <script>
        $("p").click(function(){
            alert($(this).css("color"));
            alert($(this).css("font-size"));
        });
    </script>
</html>

运行结果：

控制标签

通过jQuery可以很方便的控制标签，例如可以对某个标签增加子标签，或者删除某个标签等等，append方法就可以给某个标签添加一个子标签：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <body>
        <button type="button">添加标签</button>
        <div></div>
        <select></select>
    </body>
    <script>
        $("button").click(function(){
            $("div").append("<p>Hello Wolrd!</p>");
            $("select").append("<option>hello</option>");
        });
    </script>
</html>

remove方法可以删除某个标签：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

    <body>
        <button type="button">删除标签</button>
        <div>
            <p>hello world!</p>
            <p>hello world!</p>
            <p>hello world!</p>
            <p>hello world!</p>
            <p>hello world!</p>
        </div>
    </body>
    <script>
        $("button").click(function() {
            $("p").remove();
        });
    </script>

</html>

html方法类似于innerHTML方法，可以给开始和结束标签之间填充HTML或文本：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

    <body>
        <button type="button">添加HTML</button>
        <div></div>
    </body>
    <script>
        $("button").click(function() {
            $("div").html("<p>Hello Wolrd!</p>");
        });
    </script>
</html>

text方法可以给开始和结束标签之间填充纯文本内容，即便传的是HTML代码也会被转换成文本：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

    <body>
        <button type="button">添加文本</button>
        <p></p>
    </body>
    <script>
        $("button").click(function() {
            $("p").text("<p>Hello Wolrd!</p>");
        });
    </script>

</html>

val方法可以返回或设置被选元素的值，元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数，则返回被选元素的当前值：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

    <body>
        <button type="button">得到/设置value</button>
        <input type="text" value="test" />
    </body>
    <script>
        $("button").click(function() {
            alert($("input").val());
            $("input").val("Hello World！");
        });
    </script>

</html>

控制标签属性

attr方法可以控制标签的所有属性，通过这个方法可以给某个标签动态设置属性，也可以通过这个方法来获得某个属性的值，而removeAttr方法则可以删除指定的属性：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style>
        .test_div{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
    <body>
        <div>
            <button type="button" id="add">设置属性</button>
            <button type="button" id="del">删除属性</button>
            <img />
        </div>
    </body>
    <script>
        $("button").click(function() {
            $("img").attr("src","img/TIM截图20180105215155.png");
            $("img").addClass("test_div");
        });
        $("#del").click(function(){
            $("img").removeAttr("src");
        });
    </script>

</html>

运行结果：

jQuery的显示/隐藏效果

show方法可以显示某个组件，hide方法则可以隐藏某个组件：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style>
        .test{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
    <body>
        <div>
            <button type="button" name="show">显示</button>
            <button type="button" name="hide">隐藏</button>
            <img class="test" src="img/TIM截图20180105215155.png" />
        </div>
    </body>
    <script>
        $("button[name='show']").click(function() {
            $("img").show();
        });
        $("button[name='hide']").click(function(){
            $("img").hide();
        });
    </script>

</html>

show以及hide方法中都有可选的参数，第一个参数可以设置元素从隐藏到完全可见的速度，可以直接传递毫秒数，也可以传递字符串：slow、normal、fast等。在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。第二个参数就是回调函数，show 函数执行完之后，要执行的函数，示例：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<script>
        function show_img(){
            alert("显示完成！");
        }
        function hide_img(){
            alert("隐藏完成！");
        }
        $("button[name='show']").click(function() {
            $("img").show(5000,show_img);
        });
        $("button[name='hide']").click(function(){
            $("img").hide(5000,hide_img);
        });
</script>

toggle方法可以切换元素的可见状态，如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素，同样的可以设置过程时间和回调函数：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style>
        .test{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
    <body>
        <div>
            <button type="button" name="toggle">显示/隐藏</button>
            <img class="test" src="img/TIM截图20180105215155.png" />
        </div>
    </body>
    <script>
        function done(){
            alert("完成！");
        }
        $("button[name='toggle']").click(function() {
            $("img").toggle(3000,done)
        });
    </script>

</html>

想要有淡入淡出的效果可以使用以下四种fade方法：

  • fadeIn() 方法用于淡入已隐藏的元素
  • fadeOut() 方法用于淡出可见元素
  • fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
  • fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

示例：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style>
        .test{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
    <body>
        <div>
            <button type="button" name="fadeIn">显示</button>
            <button type="button" name="fadeOut">隐藏</button>
            <button type="button" name="fadeToggle">显示/隐藏</button>
            <button type="button" name="fadeTo">淡出</button>
            <img class="test" src="img/TIM截图20180105215155.png" />
        </div>
    </body>
    <script>
        function fadeIn_img(){
            alert("显示完成！");
        }
        function fadeOut_img(){
            alert("隐藏完成！");
        }
        function done_img(){
            alert("完成！");
        }
        $("button[name='fadeIn']").click(function() {
            $("img").fadeIn(3000,fadeIn_img);
        });
        $("button[name='fadeOut']").click(function(){
            $("img").fadeOut(3000,fadeOut_img);
        });
        $("button[name='fadeToggle']").click(function(){
            $("img").fadeToggle(3000,done_img);
        });
        $("button[name='fadeTo']").click(function(){
            $("img").fadeTo("slow",0.5);
        });
    </script>

</html>

通过jQuery实现元素滑动效果可以使用以下三个方法：

  • slideDown() 方法用于向下滑动元素。
  • slideUp() 方法用于向上滑动元素。
  • slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

示例：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style>
        .test {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>

    <body>
        <button type="button" name="slideDown">向下滑动</button>
        <button type="button" name="slideUp">向上滑动</button>
        <button type="button" name="slideToggle">向下滑动/向上滑动</button>
        <div>
            <img class="test" src="img/TIM截图20180105215155.png" />
        </div>
    </body>
    <script>
        function slideDown_img() {
            alert("向下滑动完成！");
        }

        function slideUp_img() {
            alert("向上滑动完成！");
        }

        function done_img() {
            alert("完成！");
        }
        $("button[name='slideDown']").click(function() {
            $("div").slideDown(3000,slideDown_img);
        });
        $("button[name='slideUp']").click(function() {
            $("div").slideUp(3000,slideUp_img);
        });
        $("button[name='slideToggle']").click(function() {
            $("div").slideToggle(3000,done_img);
        });
    </script>

</html>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018/01/05 ，如有侵权请联系 cloudcommunity@tencent.com 删除
jquery
网站
html
css
编程算法

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

jquery
网站
html
css
编程算法
评论
登录后参与评论
暂无评论
登录 后参与评论
推荐阅读
认识PHP函数
php编程算法
PHP 在用户自定义函数中支持可变数量的参数列表。在 PHP 5.6 及以上的版本中，由 ... 语法实现；在 PHP 5.5 及更早版本中，使用函数 func_num_args()，func_get_arg()，和 func_get_args() 。
老雷PHP全栈开发
2020/07/02
3.5K0
学习PHP函数
php编程算法
PHP 在用户自定义函数中支持可变数量的参数列表。在 PHP 5.6 及以上的版本中，由 ... 语法实现；在 PHP 5.5 及更早版本中，使用函数 func_num_args()，func_get_arg()，和 func_get_args() 。
老雷PHP全栈开发
2020/07/02
4240
php函数基础（一）
编程算法
有效的函数名以字母或下划线开头，后面跟字母，数字或下划线，注意：不能用数字开头。
全栈程序员站长
2022/07/08
9250
php函数基础（一）
编程日记：PHP实用函数记录（二）
phplinuxshell编程算法
匿名函数（Anonymous functions），也叫闭包函数（closures），允许 临时创建一个没有指定名称的函数。最经常用作回调函数 callable参数的值。
房东的狗丶
2023/02/17
7360
PHP丨PHP基础知识之PHP基础入门——函数「理论篇」
php编程算法
前两天讲过PHP基础知识的判断条件和流程控制，今天来讲讲PHP基础知识之PHP基础入门--函数！
大脸猫
2020/06/15
1.1K0
PHP丨PHP基础知识之PHP基础入门——函数「理论篇」
PHP 8 所有新特性一览和代码示例
php.nethttps网络安全laravel
PHP 8 正式版即将发布：10 月 29 日会发布 RC3，11 月 12 日会发布 RC4，11 月 26 日会发布正式版本。
学院君
2020/10/30
1.2K0
PHP 8 所有新特性一览和代码示例
Python入门-函数
python编程算法
此处的函数区别于我们数学上的函数，在编程世界中，函数（Functions）是指可重复使用的程序片段。它们允许你为某个代码块赋予名字，允许你 通过这一特殊的名字在你的程序任何地方来运行代码块，并可重复任何次数。这就是所谓的调用函数。我们已经使用过了许多内置的函数，例如 len 和 range 。
py3study
2020/01/03
4810
es6箭头函数详解_es6的新特性
ecmascripthttpsjavajavascript网络安全
使用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。
全栈程序员站长
2022/08/03
2930
es6箭头函数详解_es6的新特性
PHP匿名函数与匿名类详解
php闭包对象函数作用域
引用官方的一句话：匿名函数（Anonymous functions），也叫闭包函数（closures），允许临时创建一个没有指定名称的函数。最经常用作回调函数（callback）参数的值。当然，也有其它应用的情况。
高久峰
2023/09/18
2860
PHP匿名函数与匿名类详解
php闭包对象函数接口
引用官方的一句话：匿名函数（Anonymous functions），也叫闭包函数（closures），允许临时创建一个没有指定名称的函数。最经常用作回调函数（callback）参数的值。当然，也有其它应用的情况。
陈大剩博客
2023/03/22
8980
Datawhale组队学习 -- Task 6: 函数与Lambda表达式
python编程算法serverless
Python 的函数具有非常灵活多样的参数形态，既可以实现简单的调用，又可以传入非常复杂的参数。从简到繁的参数形态如下：
余生大大
2022/11/02
2530
PHP 闭包及Closure类
phpgo编程算法c++
上面就是一个简单的匿名函数，定义一个函数体，将函数体赋值给一个变量（php5.3之后支持该写法）。
猿哥
2019/11/27
8390
PHP7新特性和变化
php编程算法
组合比较符号用于比较两个表达式。当 a 小于、等于或大于 b 时它分别返回-1、0或1，比较规则延续常规比较规则。对象不能进行比较
憧憬博客
2021/03/05
4K0
php关于闭包（匿名函数）的理解
编程算法面向对象编程php
匿名函数（Anonymous functions），也叫闭包函数（closures），允许 临时创建一个没有指定名称的函数。最经常用作回调函数（callback）参数的值。当然，也有其它应用的情况。
黄啊码
2020/05/29
1.2K0
Python函数
编程算法pythonmapreduce
位置可变参数可以在普通参数之前， 但是在位置可变参数之后的普通参数变成了keyword-only参数:
职场亮哥
2020/10/10
2.6K0
PHP笔记(一)
编程算法数据库sqlc++php
数据库项目作业要团队开发 web，选择了尝试后端，又向做出自己的网站这个目标踏出了一步。
赤蓝紫
2023/01/02
1.3K0
PHP笔记(一)
基于PHP函数的操作方法
编程算法unix
//可变参数的函数(特殊用法) function sum(){ $arr = func_get_args(); $sum = 0; for($i=0;$i<count($arr);$i++){ $sum+=$arr[$i]; } echo $sum; } sum(1,2,5);
用户2323866
2021/07/01
2590
7-函数
python
当存在多个默认参数的时候，调用的时候，既可以按顺序提供默认参数，比如调用enroll('Bob', 'M', 7)，意思是，除了name，gender这两个参数外，最后1个参数应用在参数age上，city参数由于没有提供，仍然使用默认值。
用户3106371
2019/03/11
7490
7-函数
化整为零优化重用,Go lang1.18入门精炼教程，由白丁入鸿儒，go lang函数的定义和使用EP07
pythongo编程算法
    函数是基于功能或者逻辑进行聚合的可复用的代码块。将一些复杂的、冗长的代码抽离封装成多个代码片段，即函数，有助于提高代码逻辑的可读性和可维护性。不同于Python，由于 Go lang是编译型语言，编译之后再运行，所以函数的定义顺序无关痛痒。
用户9127725
2022/09/21
2030
PHP 函数篇（下）：匿名函数和作用域
编程算法php
从 PHP 5.3 开始，引入了对匿名函数的支持，所谓匿名函数就是在函数定义中没有显式声明函数名，在 PHP 中，匿名函数也被称作闭包函数（Closure）。
学院君
2020/06/02
1K0
推荐阅读
编辑精选文章
万字详解高可用架构设计Go 开发者必备：Protocol Buffers 入门指南10分钟带你彻底搞懂分布式链路跟踪
相关讨论
人脸核身在线调试接口的工具入口在哪？想找下一篇就是找不到？腾讯在 MICCAI 2019 入选的8篇文章在哪边可以找到？
相关课程
AI代码助手快速上手训练营数字化IT从业者知识体系微信小程序应用实践_《锋运票务系统》
认识PHP函数
3.5K0
学习PHP函数
4240
php函数基础（一）
9250
编程日记：PHP实用函数记录（二）
7360
PHP丨PHP基础知识之PHP基础入门——函数「理论篇」
1.1K0
PHP 8 所有新特性一览和代码示例
1.2K0
Python入门-函数
4810
es6箭头函数详解_es6的新特性
2930
PHP匿名函数与匿名类详解
2860
PHP匿名函数与匿名类详解
8980
Datawhale组队学习 -- Task 6: 函数与Lambda表达式
2530
PHP 闭包及Closure类
8390
PHP7新特性和变化
4K0
php关于闭包（匿名函数）的理解
1.2K0
Python函数
2.6K0
PHP笔记(一)
1.3K0
基于PHP函数的操作方法
2590
7-函数
7490
化整为零优化重用,Go lang1.18入门精炼教程，由白丁入鸿儒，go lang函数的定义和使用EP07
2030
PHP 函数篇（下）：匿名函数和作用域
1K0
相关推荐
认识PHP函数
更多 >
用户16873750
LV.0
这个人很懒，什么都没有留下～
文章
79
获赞
349
专栏
1
目录
  • 通过jQuery注册事件
  • 给标签添加/删除样式
  • 控制标签
  • 控制标签属性
  • jQuery的显示/隐藏效果
加入讨论
的问答专区 >
进击的老头子
1架构师擅长4个领域
相关课程
一站式学习中心 >
AI代码助手快速上手训练营
1828人在学
腾讯云AI代码助手
数字化IT从业者知识体系
369人在学
CODING DevOps
软件开发
微信小程序应用实践_《锋运票务系统》
314人在学
云托管 CloudBase Run
Serverless 容器服务
对象存储
云数据库 MySQL
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
2