jQuery

时间：2019-05-24 20:25:04 阅读：108 评论：0 收藏：0 [点我收藏+]

jQuery 语法

文档就绪事件

$(document).ready(function(){

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

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

jQuery 选择器

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

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

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

元素选择器

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

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

元素选择器

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

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

View Code

#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>

View Code

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>

View Code

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>

View Code

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>

View Code

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>

View Code

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>

View Code

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>

View Code

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>

View Code

获取属性 - 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>

View Code

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>

View Code

设置属性 - 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>

View Code

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>

View Code

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>

View Code

过滤被删除的元素

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>

View Code

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>

View Code

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>

View Code

jQuery toggleClass() 方法

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

jQuery

原文：https://www.cnblogs.com/steakliu/p/10919968.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)