zoukankan html css js c++ java

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

生命不止，折腾不息

查看全文

相关阅读:
wget(转)
852. Peak Index in a Mountain Array
617. Merge Two Binary Trees
814. Binary Tree Pruning
657. Judge Route Circle
861. Score After Flipping Matrix
832. Flipping an Image
461. Hamming Distance
654. Maximum Binary Tree
804. Unique Morse Code Words

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