jQuery

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=" 300px;height: 300px;background-color: dodgerblue">点我滑下面板</div>
    <div id="app2" style=" 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=" 300px;height: 300px;background-color: dodgerblue">点我滑下面板</div>
    <div id="app2" style=" 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 遍历 - 祖先

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

通过 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 方法不会缓存数据，并且常用于连同请求一起发送数据。

生命不止，折腾不息