AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

jQuery

2023-09-26 109
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： jQuery 语法jQuery 选择器

jQuery


jQuery 语法


文档就绪事件


$(document).ready(function(){

 

// 开始写 jQuery 代码... });


这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。


jQuery 选择器


jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。


jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。


jQuery 中所有选择器都以美元符号开头：$()。


元素选择器


jQuery 元素选择器基于元素名选取元素。


在页面中选取所有 <p> 元素:


元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:


#id 选择器


$("#test")

 

.class 选择器


jQuery 类选择器可以通过指定的 class 查找元素。


语法如下：


$(".test")


jQuery 事件


jQuery 是为事件处理特别设计的。


click()


click() 方法是当按钮点击事件被触发时会调用一个函数。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#app").click(function () {
                $(this).hide();
            });
        });
    </script>
</head>
<body>
    <p id="app">点我我就消失</p>
</body>
</html>


dblclick()


当双击元素时，会发生 dblclick 事件。


dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#app").dblclick(function () {
                $(this).hide();
            });
        });
    </script>
</head>
<body>
    <p id="app">鼠标双击我我就消失</p>
</body>
</html>


mouseenter()


当鼠标指针穿过元素时，会发生 mouseenter 事件。


mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#app").mouseenter(function () {
                alert("你好刘牌");
            });
        });
    </script>
</head>
<body>
    <p id="app">鼠标经过我</p>
</body>
</html>


mouseleave()


当鼠标指针离开元素时，会发生 mouseleave 事件。


mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#app").mouseleave(function () {
                alert("你好刘牌");
            });
        });
    </script>
</head>
<body>
    <p id="app">鼠标经过我</p>
</body>
</html>


mousedown()


当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。


mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

 

mouseup()


当在元素上松开鼠标按钮时，会发生 mouseup 事件。


mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：


hover()


hover()方法用于模拟光标悬停事件。


当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。


jQuery 效果- 隐藏和显示


jQuery hide() 和 show()


通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

 

jQuery toggle()


通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。


显示被隐藏的元素，并隐藏已显示的元素：


jQuery 效果 - 滑动


jQuery slideDown() 方法


jQuery slideDown() 方法用于向下滑动元素。


$(selector).slideDown(speed,callback);


可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。


可选的 callback 参数是滑动完成后所执行的函数名称。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
           $("#app1").click(function () {
               $("#app2").slideDown();
           })
        });
    </script>
</head>
<body>
    <div id="app1" style="width: 300px;height: 300px;background-color: dodgerblue">点我滑下面板</div>
    <div id="app2" style="width: 300px;height: 600px;background-color: dodgerblue;display: none">我叫刘牌</div>
</body>
</html>


jQuery slideUp() 方法


jQuery slideUp() 方法用于向上滑动元素。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
           $("#app1").click(function () {
               $("#app2").slideUp();
           })
        });
    </script>
</head>
<body>
    <div id="app1" style="width: 300px;height: 300px;background-color: dodgerblue">点我滑下面板</div>
    <div id="app2" style="width: 300px;height: 600px;background-color: dodgerblue;">我叫刘牌</div>
</body>
</html>


jQuery slideToggle() 方法


jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。


如果元素向下滑动，则 slideToggle() 可向上滑动它们。


如果元素向上滑动，则 slideToggle() 可向下滑动它们。

 

jQuery 效果- 动画


jQuery animate()


jQuery 停止动画


jQuery stop() 方法

 

jQuery Callback 方法


Callback 函数在当前动画 100% 完成之后执行。


jQuery - 链(Chaining)


通过 jQuery，可以把动作/方法链接在一起。


Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#app").click(function () {
                $("#app1").css("color","red").slideToggle(2000);
            })
        });
    </script>
</head>
<body>
    <button id="app">点我</button>
    <p id="app1">我叫刘牌</p>
</body>
</html>


jQuery - 获取内容和属性


获得内容 - text()、html() 以及 val()


三个简单实用的用于 DOM 操作的 jQuery 方法：


  • text() - 设置或返回所选元素的文本内容

  • html() - 设置或返回所选元素的内容（包括 HTML 标记）

  • val() - 设置或返回表单字段的值


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#app").click(function () {
                alert("输入的值为："+$("#username").val());
            })
        });
    </script>
</head>
<body>
    <button id="app">点我</button>
    <input type="text" id="username" />
</body>
</html>


获取属性 - attr()


jQuery attr() 方法用于获取属性值。


下面的例子演示如何获得链接中 href 属性的值：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#app").click(function () {
                alert($("#value").attr("href"));
            })
        });
    </script>
</head>
<body>
    <button id="app">点我</button>
    <a href="www.baidu.com" id="value">百度</a>
</body>
</html>


jQuery - 设置内容和属性


  • text() - 设置或返回所选元素的文本内容

  • html() - 设置或返回所选元素的内容（包括 HTML 标记）

  • val() - 设置或返回表单字段的值


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#app").click(function () {
                $("#app1").text("刘牌");
            })
        });
    </script>
</head>
<body>
    <button id="app">点我</button>
    <p id="app1">liu pai</p>
</body>
</html>


设置属性 - attr()


jQuery attr() 方法也用于设置/改变属性值。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#app").click(function () {
                $("#app1").attr("href","http://www.sina.com");
            })
        });
    </script>
</head>
<body>
    <button id="app">点我</button>
    <a href="www.baidu.com" id="app1">百度</a>
</body>
</html>


attr() 的回调函数


jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

 

jQuery - 添加元素


  • append() - 在被选元素的结尾插入内容

  • prepend() - 在被选元素的开头插入内容

  • after() - 在被选元素之后插入内容

  • before() - 在被选元素之前插入内容


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#app").click(function () {
                $("p").append("<span>刘牌</span>");
            })
            $("#app2").click(function () {
                $("ul").append("<li>家庭住址</li>")
            })
        });
    </script>
</head>
<body>
    <button id="app">追加文本</button>
    <button id="app2">追加段落</button>
    <p>帅哥是谁？</p>
    <ul>
        <li>姓名</li>
        <li>年龄</li>
    </ul>
</body>
</html>


jQuery - 删除元素


通过 jQuery，可以很容易地删除已有的 HTML 元素。


删除元素/内容


如需删除元素和内容，一般可使用以下两个 jQuery 方法：


  • remove() - 删除被选元素（及其子元素）

  • empty() - 从被选元素中删除子元素

remove()


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#app").click(function () {
               $("#app3").remove();
            })
        });
    </script>
</head>
<body>
    <button id="app">移除元素</button>
    <ul id="app3">
        <li>姓名</li>
        <li>年龄</li>
    </ul>
</body>
</html>


过滤被删除的元素


jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。


该参数可以是任何 jQuery 选择器的语法。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#app").click(function () {
               $("p").remove(".app1");
            })
        });
    </script>
</head>
<body>
    <button id="app">移除元素</button>
    <p class="app1">你好</p>
    <p class="app1">刘牌</p>
</body>
</html>


jQuery - 获取并设置 CSS 类


jQuery addClass() 方法


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#app").click(function () {
               $("p").addClass("blue");
               $("div").addClass("app3");
            })
        });
    </script>
    <style>
        .app3{
            font-size: 30px;
            color: red;
        }
        .blue{
            color: blue;
        }
    </style>
</head>
<body>
    <button id="app">添加class</button>
    <p class="app1">你好</p>
    <p class="app2">刘牌</p>
    <div >I love you</div>
</body>
</html>


jQuery removeClass() 方法


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#app").click(function () {
               $("p,div").removeClass("app1")
            })
        });
    </script>
    <style>
        .app1{
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <button id="app">移除class</button>
    <p class="app1">你好</p>
    <p class="app1">刘牌</p>
    <div class="app1">I love you</div>
</body>
</html>


jQuery toggleClass() 方法


该方法对被选元素进行添加/删除类的切换操作：

 

jQuery 遍历 - 祖先


祖先是父、祖父或曾祖父等等。


通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。


jQuery parents() 方法


parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

 

jQuery parentsUntil() 方法


parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。


jQuery 遍历 - 后代


jQuery children() 方法


children() 方法返回被选元素的所有直接子元素。


该方法只会向下一级对 DOM 树进行遍历。

 

jQuery find() 方法


find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。


jQuery 遍历 - 同胞(siblings)


同胞拥有相同的父元素。

 

jQuery siblings() 方法


siblings() 方法返回被选元素的所有同胞元素。


jQuery next() 方法


next() 方法返回被选元素的下一个同胞元素。


该方法只返回一个元素。

 

jQuery nextAll() 方法


nextAll() 方法返回被选元素的所有跟随的同胞元素。


jQuery nextUntil() 方法


nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

 

jQuery 遍历- 过滤


jQuery first() 方法


first() 方法返回被选元素的首个元素。


jQuery last() 方法


last() 方法返回被选元素的最后一个元素。

 

jQuery eq() 方法


eq() 方法返回被选元素中带有指定索引号的元素。


索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。


jQuery filter() 方法


filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

 

jQuery not() 方法


not() 方法返回不匹配标准的所有元素。


提示：not() 方法与 filter() 相反。


jQuery - AJAX


jQuery - AJAX load() 方法


jQuery load() 方法


jQuery load() 方法是简单但强大的 AJAX 方法。


load() 方法从服务器加载数据，并把返回的数据放入被选元素中。


语法:


$(selector).load(URL,data,callback);


必需的 URL 参数规定您希望加载的 URL。


可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。


可选的 callback 参数是 load() 方法完成后所执行的函数名称。


jQuery - AJAX get() 和 post() 方法


HTTP 请求：GET vs. POST


两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。


  • GET - 从指定的资源请求数据

  • POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。


POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

文章标签：
CDN
JavaScript
前端开发
缓存
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
刘牌
目录
相关文章
神明木佑
|
2月前
|
Web App开发 JavaScript 前端开发
什么是jQuery
什么是jQuery
神明木佑
29 0
白砂糖与香辛料`
|
7月前
|
JavaScript 前端开发 开发者
什么是jQuery?
什么是jQuery?
白砂糖与香辛料`
35 0
算精通
|
7月前
|
JavaScript 前端开发 开发工具
jQuery
jQuery是一个流行的JavaScript库,它简化了HTML文档的遍历、操作、事件处理和动画等任务,使得Web开发更加高效和直观。使用jQuery,可以轻松地添加、删除或修改HTML元素的内容,也可以方便地处理用户输入和表单验证等问题。jQuery还提供了丰富的插件和扩展,可以实现更多的功能,例如动画效果、滚动效果、表格排序等。
算精通
50 7
匿瘾
|
Web App开发 设计模式 JavaScript
jquery
jquery
匿瘾
62 0
阿选不出来
|
存储 JavaScript 前端开发
JQuery
JQuery
阿选不出来
89 0
游客o2spemb4lkrv6
|
机器学习/深度学习 存储 JSON
Jquery
介绍Jquery
游客o2spemb4lkrv6
108 0
游客d7sf7jc5pjjba
|
XML 缓存 JavaScript
jQuery（下）
jQuery（下）
游客d7sf7jc5pjjba
63 0
前端歌谣
|
JavaScript
jquery效果-20
jquery效果-20
前端歌谣
99 0
jquery效果-20
andyahui
|
JavaScript 前端开发
JQuery01
JQuery01
andyahui
138 0
JQuery01
胡临任
|
JavaScript 前端开发 程序员
jQuery的介绍
jQuery是对JavaScript的封装
胡临任
131 0

热门文章

最新文章

  • 1
    Hive之数据倾斜的原因和解决方法
  • 2
    【Java】留下没有基础眼泪的面试题
  • 3
    四大触点，教你从“用户视角”构建数据分析体系
  • 4
    CentOS7 yum的一次报错" 14: curl#56 - "Recv failure: Connection reset by peer" "
  • 5
    [软件工程导论(第六版)]第5章 总体设计（课后习题详解）
  • 6
    同步、异步、阻塞、非阻塞
  • 7
    ArcEngine控制台应用程序
  • 8
    perl学习笔记(10)
  • 9
    新疆电信新疆联通签网络合作协议
  • 10
    epoll是如何监控多个描述符及如何获得通知(2)
  • 1
    《容器化赋能：C++人工智能模型部署的卓越之道》
    27
  • 2
    《C++与类脑芯片：开启人工智能硬件新征程》
    26
  • 3
    《C++与AMD ROCm：人工智能计算的强力引擎》
    31
  • 4
    《C++携手英特尔OpenVINO：加速人工智能推理新征程》
    25
  • 5
    《C++ 赋能强化学习：Q - learning 算法的实现之路》
    22
  • 6
    鸿蒙开发：ForEach中为什么键值生成函数很重要
    19
  • 7
    AI+脱口秀，笑点能靠算法创造吗
    18
  • 8
    「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
    100
  • 9
    AI客服会完全替代人工客服吗
    21
  • 10
    影智科技唐沐：人形是累赘，具身智能并不缺少落地场景
    20

    • 相关课程

    更多
  • jQuery开发教程
  • CSS 快速掌握
  • Vue.js 入门与实战
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 23-Vue.js在前端...1506518547.pdf
  • Javascript中的函数
  • JavaScript函数

    • 相关实验场景

    更多
  • HTML及前端框架
    • 下一篇
    阿里云oss存储简介和如何使用