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

jQuery ——（很全、很清晰，三小时带你学会 jQuery 基础）

2023-06-13 364
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： jQuery ——（很全、很清晰，三小时带你学会 jQuery 基础）

前言

jQuery 虽然在逐渐被框架取代，但其语法思想还是有必要学习的。下面是 jQuery 的一些基本语

一、jQuery是什么？🤔

jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库（框架）。即倡导写更少的代码，做更多的事情。

二、jQuery 效果

(一). jQuery——隐藏与显示

1. hide()：隐藏
2. show()：显示
3. toggle()：切换
  <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">切换</button>
    <p>Hello jQuery!</p>
    $(function(){ 
       $('#hide').click(function(){
            $('p').hide(1000) // 隐藏
       })
       $('#show').click(function(){
           $('p').show(1000) // 显示
       })
       $('#toggle').click(function(){
           $('p').toggle(1000) // 切换
       })
    })

(二). jQuery——淡入淡出

1. fadeIn()：淡入
2. fadeOut()：淡出
3. fadeTo()：渐变
    div{
        position: absolute;
        width: 150px;
        height: 150px;
        background-color: pink;
    }
    <button id="fadeIn">淡入</button>
    <button id="fadeOut">淡出</button>
    <button id="fadeToggle">切换</button>
    <button id="fadeTo">渐变</button><hr/>
    <div></div>
    $(function(){ 
       $('#fadeIn').click(function(){
            $('div').fadeIn(1000) // 1s淡入
       })
       $('#fadeOut').click(function(){
            $('div').fadeOut(1000) // 1s淡出
       })
       $('#fadeToggle').click(function(){
            $('div').fadeToggle(1000) // 切换
       })
       $('#fadeTo').click(function(){
            $('div').fadeTo('slow',0.5) // 渐变到0.5透明度
       })
    })
</body>
</html>

(三). jQuery——滑动

1. slideDown()：向下滑动
2. slideUp()：向上滑动
3. slideToggle()：切换
    #panel,#flip {
        padding:5px;
        text-align:center;
        background-color:#e5eecc;
        border:solid 1px #c3c3c3;
    }
    #panel {
        padding:50px;
        display:none;
    }
    <div id="flip">点我滑下面板</div>
    <div id="panel">Hello world!</div>
    $(function(){
        $('#flip').click(function(){
            $('#panel').slideToggle(500)
        })
    })

5e1f060a955b4369ae42940af445f20e.png

(四). jQuery——动画

1. animate() 方法用于创建自定义动画。

2. 语法：$(selector).animate({params},speed,callback)

必需的 params 参数定义形成动画的 CSS 属性。

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

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

操作单个属性：点击按钮，div右移200个像素

  $(function(){
        $('button').click(function(){
            $('div').animate({left:200})
        })
    })

注意：对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

操作多个属性：点击按钮，右移200px，透明度改为0.5，高度改为150px

  $(function(){
        $('button').click(function(){
          var div = $('div')
            div.animate({
        left: '200px',
        opacity: '0.5',
        height: '150px' 
      })
        })
    })

(五). jQuery——停止动画

1. stop()：用于停止动画或效果，在它们之前完成。
2. stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
3. 语法：$(selector).stop(stopAll,goToEnd);
  1. 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
  2. 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

点击按钮div下滑，当点击停止下滑时，停止滑动

    div{
        width: 120px;
        height: 300px;
        display: none;
        background-color: lightblue;
    }
    <button>开始滑动</button>
    <button>停止滑动</button>
    <div></div>
    $(function(){
        $("button").eq(0).click(function(){
            $('div').slideDown(2000)
        })
        $("button").eq(1).click(function(){
            $('div').stop()
        })
    })

5c6118392b034be3949cb52491c087d2.png

(六). jQuery——链

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

点击按钮，字体变红色，先隐藏后显示

    <p>Hello World!</p>
    <button>点我</button>
    $(function() {
        $('button').click(function(){
            $('p').css('color','red').slideUp(2000).slideDown(2000)
        })
    })

cd24b02775a04516b9c9ca42c44a267a.png

三、jQuery HTML

(一). jQuery——捕获

1. 获得内容 - text()、html()、val()

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

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

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

text() 和 html() 获得内容:

  <p id="test">这是段落中的 <b>粗体</b> 文本。</p>
    <button id="btn1">显示文本</button>
    <button id="btn2">显示 HTML</button>
    $(function() {
        $('#btn1').click(function(){
            alert('Text:' + $('#test').text())
            })
        $('#btn2').click(function(){
            alert('HTML:' + $('#test').html())
        })
    })

c33c6070cdfe459291348241ba9c4966.png

b7b232e5ed88430da9bf5fe13926b9dd.png

val() 获得输入字段的值: 你好 世界

  名称：<input type="text" id="test" value="你好 世界">
    <button id="btn">显示值</button>
    $(function() {
        $('#btn').click(function(){
            alert('Text:' + $('#test').val())
        })
    })
2. 获取属性 arr()：用于获取属性值。
  <a href="http://baidu.com">百度</a><hr/>
    <button id="btn">显示 href 属性的值</button>
    $(function() {
        $('#btn').click(function(){
            alert( $('a').attr("href"))
        })
    })

70a4a244719b4e87861fcdb6979c9a48.png

(三). jQuery——设置

1. 设置 -text()、html()、val()

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

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

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

点击按钮，值发生变化：Hello World!

  <p id="test1">这是一个段落</p>
    <p id="test2">这是另一个段落</p>
    <p>输入框：<input type="text" id="test3" value='web前端'></p>
    <button id="btn1">设置文本</button>
    <button id="btn2">设置 HTML</button>
    <button id="btn3">设置值</button>
    $(function(){
        $('#btn1').click(function(){
            $('#test1').text('Hello World!')
        })
        $('#btn2').click(function(){
            $('#test2').html('<b>Hello World!</b>')
        })
        $('#btn3').click(function(){
            $('#test3').val('Hello World!')
        })
    })

e24807d6a5c24c11a384848662ddb1ed.png

69ebd2b27ea74632bcb632c315ab67ef.png

2. text()、html()、val() 的回调函数
  <p id='test'>这是一个有<b>粗体</b>字的段落</p>
    <button id='btn'>显示 新/旧文本</button>
    <script>
        $(function(){
            $('#btn').click(function(){
                $('#test').text(function(i,origText){
                    return '旧文本：' + origText + '新文本：Hello World! (index:' + i + ')'
                })
            })
        })
    </script>

72112fec81e84b83b34e756968421792.png

50eeecb9c282486a9f0f3ea13e76ff4d.png

3. 设置属性 -attr()：也用于设置 / 改变属性值。

点击链接，跳转到新地址：

  <a href="http://www.baidu.com">百度</a>
    <script>
        $(function(){
            $('a').click(function(){
                $(this).attr('href','http://www.runoob.com/jquery')
            })
        })
    </script>

点击按钮，修改链接和链接文字：

  <p><a href="http://www.baidu.com" id="runoob">菜鸟教程</a></p>
    <button>修改 href 和 title</button>
    <script>
        $(function(){
            $('button').click(function(){
                $('#runoob').attr({
                    "href":"http://www.runoob.com/jquery",
                    "title" : "jQuery 教程"
                })
                title = $("#runoob").attr('title')
                $('#runoob').html(title)
            })
        })
    </script>

11f2c8dd64714348b20c9d321ec1ae4d.png

18953b3cf88542ec896787e5ec7a9882.png

4.attr() 的回调函数：

回调函数有两个参数：

  1. 被选元素列表中当前元素的下标，以及原始（旧的）值。
  2. 然后以函数新值返回希望使用的字符串。

使用 attr 的回调到新的地址：

  <a href="http://www.runoob.com">菜鸟教程</a>
    <script>
        $(function(){
            $('a').click(function(){
                $(this).attr('href',function(){
                    return origValue + '/jQuery'
                })
            })
        })
    </script>

(三). jQuery——添加元素

1. append() 方法：再被选元素的结尾插入内容（仍然在该元素的内部）

点击按钮，添加新列表项

  <ol>
       <li>List 1</li>
       <li>List 2</li>
   </ol>
  <button>添加列表项</button>
    <script>
        $(function(){
            $('button').click(function(){
                $('ol').append('<li>追加列表项</li>')
            })
        })
    </script>

4ce8dd7e8dfb4b02989ed43059865162.png

2. prepend() 方法：在被选元素的开头插入内容。

点击按钮，添加新列表项

  <ol>
       <li>List 1</li>
       <li>List 2</li>
   </ol>
  <button>添加列表项</button>
    <script>
        $(function(){
            $('button').click(function(){
                $('ol').prepend('<li>追加列表项</li>')
            })
        })
    </script>

e73a2e39d1bb41afa0929bc2c90dafc7.png

3. after()：在被选元素之后插入内容。
4. before()：在被选元素之前出入内容。

点击按钮，在文本之前 / 之后 添加文本：

  <div>你好</div>
  <button>xx你好</button><hr>
    <div>你好</div>
  <button>你好xx</button>
    <script>
        $(function(){
            $('button').eq(0).click(function(){
                $('div').eq(0).before('小明')
            })
            $('button').eq(1).click(function(){
                $('div').eq(1).after('小爱')
            })
        })
    </script>

42a9b823063544a0b1347f59142388ff.png

(四). jQuery——删除元素

1. remove()：删除被选元素（及其子元素）

点击按钮，移出div元素：

    <div>
        <p>这是div的文本</p>
        <p>这是div的另一个文本</p>
    </div> 
    <button>移出div元素</button>
    <script>
        $(function(){
            $('button').click(function(){
                $('div').remove()
            })
        })
    </script>

b341278815274d7ba3193c85f769de99.png

2. empty()：删除被选元素的子元素。

点击按钮，删除 div 里面的 p：

<div>
        <p>这是div的文本</p>
        <p>这是div的另一个文本</p>
    </div> 
    <button>移出div元素</button>
    <script>
        $(function(){
            $('button').click(function(){
                $('div').empty()
            })
        })
    </script>

6e56f06e07614ffc8fddc3f2662fba2a.png

3. remove()：该方法也可以接受一个参数，允许对被删除元素进行过滤。该参数可以是任何 jQuery 选择器的语法。

删除 class = ‘italic’ 的所有 p元素：

  <p class="italic">class="italic"的段落</p>
    <p>class!="italic"的段落</p>
    <p>class!="italic"的段落</p>
    <button>移出italic段落</button>
    <script>
        $(function(){
            $('button').click(function(){
                $('p').remove(".italic")
            })
        })
    </script>

86fde0c75585403ebde337b6f04f9f04.png

(五). jQuery——css类

1. addClass()：想被选元素添加一个或多个类
  //css
  .red {
            color:red;
        }
    //html
  <p>Hello-前端开发人员</p>
    <h3>HELLO</h3>
    <button>添加 class 属性</button>
    <script>
        $(function(){
            $('button').click(function(){
                $('p,h3').addClass("red")
            })
        })
    </script>

8981c7b4e53948098f109b2137288a77.png

2. removeClass()：删除指定的 class 属性
  $('button').click(function(){
        $('p,h3').removeClass("red")
    })
3. 切换：添加 / 删除类的切换操作
  $("button").click(function(){
      $("p,h3").toggleClass("red");
  })

(六). jQuery —— css() 方法

1. 返回 css 属性：css("propertyname");
  <p style='background-color:#ff36ea'>这是一个段落</p>
    <button>返回段落的颜色</button>
    <script>
        $(function(){
            $('button').click(function(){
                alert('背景颜色 = ' + $('p').css('background-color'))
            })
        })
    </script>

c1f8f4bb2c274bb799611604686dca30.png

2. 设置 css 属性：css("propertyname","value");
  <p>这是一个段落</p>
    <button>设置段落的颜色</button>
    <script>
        $(function(){
            $('button').click(function(){
                $('p').css('background-color','yellow')
            })
        })
    </script>

2bd6ec2fcda84674959ae51327b0c1f2.png

3. 设置多个 css 属性：css({"propertyname":"value","propertyname":"value",...});
  $('button').click(function(){
        $('p').css({
            'background-color':'yellow',
            'font-size': 25
        })
     })

7a88685d9b3d4252ba6197bbe0f39fad.png

四、jQuery 遍历

(一). jQuery——祖先

1. parent()：返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

96bdbcd185514edba29fd5afc558df5c.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jQuery.js"></script>
    <style>
        .ancestors *{ 
          display: block;
          border: 2px solid lightgrey;
          color: lightgrey;
          padding: 5px;
          margin: 15px;
        }
    </style>
</head>
<body>
    <div class="ancestors">
        <div style="width:500px;">div (祖父元素)   
          <p>p (父元素)
              <span>span</span>
            </p> 
        </div>
    </div>
    <script>
        $(function(){
                $('span').parent().css({"color":"red","border":"2px solid red"})
        })
    </script>
</body>
</html>
2. parents()：返回被选元素的所有祖先元素，一路向上直到文档的根元素。
  $('span').parents().css({"color":"red","border":"2px solid red"})
3. parentsUntil()：返回介于两个给定元素之间的所有祖先元素。
  // 返回介于 span 和 div的所有祖先元素
    $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"})

d786149032d7450ea69557c7dcfc1906.png

(二). jQuery——后代

1. children()：返回被选元素的所有直接子元素。该方法只会向下一级对DOM树进行遍历。

返回每个 div 元素的所有直接子元素：

  $('p').children().css({"color":"red","border":"2px solid red"})

86c47e743ee244cd81f143c9adede942.png

返回类名为 1 的所有 p 元素：

  $("div").children("p.1")
2. find()：返回被选元素的后代元素，一路向下直到最后一个后代。

返回属于 div 后代的所有 span 元素：

  $('div').find('span').css({"color":"red","border":"2px solid red"})

0b0ef4bf38884a03a18b4a097308bd45.png

(三). jQuery——同胞（水平遍历）

1. siblings()：返回被选元素的所有同胞元素。

返回 h2 的同胞元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  .siblings *
  { 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
  }
</style>
    <script src="jQuery.js"></script>
<script>
  $(document).ready(function(){
    $("h2").siblings().css({"color":"red","border":"2px solid red"});
  })
</script>
</head>
<body class="siblings">
  <div>div (父元素)
      <p>p</p>
      <span>span</span>
      <h2>h2</h2>
      <h3>h3</h3>
      <p>p</p>
  </div>
</body>
</html>

151d518bbe7149438240d427c3899665.png

返回属于 h2 的同胞元素的所有 p 元素：$("h2").siblings("p");

2. next()：返回被选元素的下一个同胞元素。该方法只返回一个元素。
  $("h2").next()

361857653be44db694eeaeb724e58abf.png

3. nextAll()：返回被选元素的所有跟随的同胞元素。
  $("h2").nextAll()

e3a025e2e6ac42deb8fae6e458096d13.png

4. nextUntil()：返回介于两个给定参数之间的所有跟随的同胞元素。
  $("p").nextUntil("h3");

cffaa77c369b451e99da6a6988e1e77d.png

(四). jQuery——过滤

1. first()：返回被选元素的首个元素。

选取首个 div 元素内部的第一个 p 元素：

  <div>
        <p>这是 div 中的一个段落。</p>
    </div>
    <div>
        <p>这是另外一个 div 中的一个段落。</p>
    </div>
    <script>
        $(function(){
            $("div p").first().css('background-color','yellow')
        })
    </script>

d92e33e263fc44e99e826704ba0f5f8c.png

2. last()：返回被选元素的最后一个元素。
  $('div p').last().css('background-color','yellow')

1af9fd74e5a346b3848d867174984edb.png

3. eq()：返回被选元素中带有指定索引号的元素。索引号从0开始而不是从1。
  $("p").eq(1).css('background-color','yellow')

2d768835582b49dd87359869ff49f7f4.png

4. filter()：允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
  <p class='url'>http://www.baidu.com</p>
    <p>百度baidu</p>
  $("p").filter('.url').css('color','red')

d5bec0a0018745f0b8839fff9c290336.png

5. not()：返回不匹配标准的所有元素。
  $("p").not('.url').css('color','red')

b80a4e0999724f3396a2c4a7542dd01a.png

五、jQuery —— AJAX（常见格式）

    $.ajax({
        type:'GET', 
        dataType:'JSON', 
        url:'js/weather.json', 
        success:function(res){ 
            ........
        }
    })
  1. type：“POST” 或 “GET”，请求类型
  2. dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json
  3. url：链接地址，字符串表示
  4. success：请求成功后，服务器回调的函数

总结

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能 接口；具有高效灵活的 CSS选择器 ，并且可对CSS选择器进行 扩展；拥有便捷的 插件扩展机制和 丰富的插件。

不积跬步无以至千里🌕 ，不积小流无以成江海🌊。

道阻且长，一起加油，与君共勉！😉

文章标签：
JavaScript
前端开发
数据格式
JSON
前端杂货铺
目录
相关文章
三三是该溜子
|
8天前
|
JavaScript 前端开发 API
【JQuery】基础从零入门操作，简单详细
jQuery下载，引入依赖，JQuery语法、选择器、时间、获取元素、返回CSS、修改属性、添加元素、删除元素、猜数字游戏、表白墙
三三是该溜子
40 11
hnrk7epeorhrk
|
7月前
|
移动开发 JavaScript 前端开发
老程序员分享：jQuery笔记（四）jQuery中的动画
老程序员分享：jQuery笔记（四）jQuery中的动画
hnrk7epeorhrk
54 0
hnrk7epeorhrk
|
7月前
|
JavaScript 程序员
老程序员分享：jquery方法总结
老程序员分享：jquery方法总结
hnrk7epeorhrk
33 0
老板这功能得加钱
|
8月前
|
JavaScript 前端开发 索引
jQuery学习教程，写更少的代码,做更多的事情（二）
jQuery学习教程，写更少的代码,做更多的事情（二）
老板这功能得加钱
49 0
.昭阳.
|
JavaScript 前端开发 CDN
jQuery补充
jQuery补充
.昭阳.
227 0
阿甘兄
|
JavaScript 前端开发
前端基础 -JQuery之 相关效果
前端基础 -JQuery之 相关效果
阿甘兄
42 0
embelfe_segge
|
存储 JavaScript 前端开发
jQuery内容学习总结2
jQuery内容学习总结
embelfe_segge
83 0
embelfe_segge
|
Web App开发 存储 设计模式
jQuery内容学习总结1
jQuery内容学习总结
embelfe_segge
84 0
牛哄哄的柯南8151
|
JavaScript 前端开发 CDN
jQuery入门基础
jQuery入门基础 jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
牛哄哄的柯南8151
170 0
jQuery入门基础
布小禅
|
JavaScript 前端开发 Java
前端基础六之jQuery效果
前端基础六之jQuery效果
布小禅
127 0
前端基础六之jQuery效果

热门文章

最新文章

  • 1
    为什么说流处理即未来？
  • 2
    【实战】锐捷AC+AP配置WLAN基本服务系列
  • 3
    丰富、连接、待集成—MaxCompute 生态再出发
  • 4
    securecrt克隆会话与sshd 的 MaxSessions
  • 5
    阿里云云端即时渲染技术带您“云考古”
  • 6
    Console-算法[for]-输出等腰三角形
  • 7
    asp.net日期显示 问题
  • 8
    MFC单文档应用程序显示图像
  • 9
    最新10款精美的免费PSD网站模板下载
  • 10
    嵌入式系统工程师的十个不要
  • 1
    《docker基础篇：5.本地镜像发布到阿里云》
    103
  • 2
    《人工智能可视化：数据洞察的新窗口》
    38
  • 3
    《揭秘人工智能数据安全风险评估方法：守护数字未来的关键》
    35
  • 4
    《探秘人工智能之关联规则挖掘：解锁数据背后的隐藏联系》
    30
  • 5
    《数据质量评估方法大揭秘：精准衡量数据价值的关键》
    31
  • 6
    《数据质量：人工智能模型的成败关键》
    20
  • 7
    发现API安全风险，F5随时随地保障应用和API安全
    17
  • 8
    机器学习在网络安全中的防护：智能化的安全屏障
    27
  • 9
    基于AI的运维资源调度：效率与智能的双重提升
    28
  • 10
    2024年终总结：选择错误、加班三月、降薪、面试无果...
    89

    • 相关课程

    更多
  • jQuery开发教程
  • 前端开发CSS基础
  • JavaScript入门与实战
  • Vue.js完全自学手册图文教程
  • Vue.js 入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JS零基础入门教程（上册）
  • 现代Javascript高级教程
  • 23-Vue.js在前端...1506518547.pdf

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月