返回

jQuery文档、事件、动画 | jQuery从入门到精通05

前端

目录

  1. jQuery文档处理：增删改查
    • append()
    • appendTo()
    • prepend()
    • prependTo()
    • before()
    • after()
    • remove()
    • empty()
    • html()
    • text()
  2. jQuery事件处理
    • click()
    • dblclick()
    • mouseover()
    • mouseout()
    • mousedown()
    • mouseup()
    • keydown()
    • keyup()
      *keypress()
    • change()
    • submit()
  3. jQuery动画效果
    • fadeIn()
    • fadeOut()
    • fadeToggle()
    • slideDown()
    • slideUp()
    • slideToggle()
    • animate()

1. jQuery文档处理：增删改查

jQuery提供了多种方法来操作HTML文档中的元素，包括添加、删除、修改和获取内容。

  • append() ：将内容追加到每个匹配元素的末尾。
  • appendTo() ：将所有匹配的元素追加到另一个指定的元素。
  • prepend() ：将内容追加到每个匹配元素的开头。
  • prependTo() ：将所有匹配的元素追加到另一个指定的元素的开头。
  • before() ：在每个匹配元素之前插入内容。
  • after() ：在每个匹配元素之后插入内容。
  • remove() ：删除所有匹配的元素。
  • empty() ：清空所有匹配的元素的内容。
  • html() ：获取或设置所有匹配元素的HTML内容。
  • text() ：获取或设置所有匹配元素的文本内容。

2. jQuery事件处理

jQuery提供了丰富的事件处理方法，允许您对用户的各种操作进行响应。

  • click() ：当元素被点击时触发。
  • dblclick() ：当元素被双击时触发。
  • mouseover() ：当鼠标指针移入元素上时触发。
  • mouseout() ：当鼠标指针移出元素上时触发。
  • mousedown() ：当鼠标指针在元素上按下时触发。
  • mouseup() ：当鼠标指针在元素上松开时触发。
  • keydown() ：当键盘上的一个键被按下时触发。
  • keyup() ：当键盘上的一个键被松开时触发。
  • keypress() ：当键盘上的一个键被按下并松开时触发。
  • change() ：当元素的值发生改变时触发。
  • submit() ：当表单被提交时触发。

3. jQuery动画效果

jQuery提供了多种方法来创建动画效果，让网页变得更加生动有趣。

  • fadeIn() ：逐渐显示元素。
  • fadeOut() ：逐渐隐藏元素。
  • fadeToggle() ：在显示和隐藏元素之间切换。
  • slideDown() ：垂直向下显示元素。
  • slideUp() ：垂直向上隐藏元素。
  • slideToggle() ：在显示和隐藏元素之间垂直切换。
  • animate() ：以指定的持续时间和效果来改变元素的样式。

示例代码

<html>
<head>
    
    <script src="jquery.min.js"></script>
</head>
<body>
    <div id="div1">这是一个元素</div>

    <script>
        $(document).ready(function() {
            // 添加元素
            $("#div1").append("<p>这是一个段落</p>");

            // 删除元素
            $("#div1 p").remove();

            // 修改元素内容
            $("#div1").html("这是一个新的元素");

            // 获取元素内容
            var content = $("#div1").html();

            // 绑定事件
            $("#div1").click(function() {
                alert("元素被点击了！");
            });

            // 创建动画效果
            $("#div1").fadeIn(1000);
        });
    </script>
</body>
</html>

总结

jQuery是一个功能强大的JavaScript库，提供了丰富的功能来操作HTML文档、处理事件和创建动画效果。通过学习jQuery，您可以轻松地创建出更具交互性和动态性的网页。