jQuery

简介: jQuery 语法jQuery 选择器

jQuery


jQuery 语法


文档就绪事件


$(document).ready(function(){

 

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


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


jQuery 选择器


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


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


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


元素选择器


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


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


元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:


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


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>


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>


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>


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>


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>


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>


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>


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


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>


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


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>


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>


过滤被删除的元素


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>


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>


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>


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

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
6月前
|
Web App开发 设计模式 JavaScript
jquery详解
jquery详解
29 0
|
5月前
|
设计模式 JavaScript 前端开发
什么是Jquery?
什么是Jquery?
22 0
|
JavaScript 前端开发
jQuery小练习
jQuery小练习
|
11月前
|
JavaScript
jQuery_01
jQuery_01
44 0
|
Web App开发 设计模式 JavaScript
jquery
jquery
58 0
|
JavaScript 前端开发 程序员
|
前端开发 JavaScript
Html+Css+jquery 2021/11/1
Html+Css+jquery 2021/11/1
81 0
Html+Css+jquery 2021/11/1
|
JavaScript CDN
|
存储 JavaScript 前端开发
三天轻松搞定JQuery
三天轻松搞定JQuery
116 0
三天轻松搞定JQuery
|
JavaScript 索引 容器
一文深入JQuery
一文深入JQuery
155 1