jQuery的简单使用 - 码农教程

通过jQuery注册事件

jQuery注册事件也很简单，通过选择器包装好标签对象后，调用相关的事件方法即可，调用事件方法时需要传递一个函数对象，当事件被触发就会执行函数里的代码。在jQuery里的事件名称并没有与html中的事件名称有多大区别，还是那个熟悉的味道熟悉的套路，示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <body>
        <button type="button" name="click" >单击事件</button>
        <button type="button" name="dbclick" >双击事件</button>
    </body>
    <script>
        $("button[name='click']").click(function(e){
            alert('单击事件！');
        });
        $("button[name='dbclick']").dblclick(function(e){
            alert('双击事件！');
        });
    </script>
</html>

函数中的参数就是事件源对象：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <body>
        <button type="button" name="click" >单击事件</button>
        <button type="button" name="dbclick" >双击事件</button>
    </body>
    <script>
        $("button[name='click']").click(function(e){
            alert(e.toString());
        });
        $("button[name='dbclick']").dblclick(function(e){
            alert(e.toString());
        });
    </script>
</html>

在函数中可以使用this来表示当前触发事件的对象，也可以通过选择器去获取当前对象：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <body>
        <button type="button" name="click" >单击事件</button>
        <button type="button" name="dbclick" >双击事件</button>
    </body>
    <script>
        $("button[name='click']").click(function(e){
            $("button[name='click']").html("Change");
        });
        $("button[name='dbclick']").dblclick(function(e){
            $(this).html("Change");
        });
    </script>
</html>

给标签添加/删除样式

在jQuery中有一个addClass方法，可以给标签添加类样式，相对的removeClass方法则是删除标签中的类样式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <style>
        .text_p{
            color: royalblue;
            font-size: 22px;
        }
    </style>
    <body>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>
    </body>
    <script>
        $("p").mousemove(function(){
            $(this).addClass("text_p");
        });
        $("p").mouseout(function(){
            $(this).removeClass("text_p");
        });
    </script>
</html>

除了以上的方法外，还有一个css方法可以添加样式，以键值的方式添加：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <body>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>
    </body>
    <script>
        $("p").mousemove(function(){
            $(this).css("color","royalblue");
            $(this).css("font-size","22px");
        });
        $("p").mouseout(function(){
            $(this).css("color","black");
            $(this).css("font-size","16px");
        });
    </script>
</html>

如果css方法中传递的是键，那么就可以得到该键的值：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <style>
        .text_p{
            color: royalblue;
            font-size: 22px;
        }
    </style>
    <body>
        <p class="text_p">Hello World!</p>
        <p class="text_p">Hello World!</p>
        <p class="text_p">Hello World!</p>
    </body>
    <script>
        $("p").click(function(){
            alert($(this).css("color"));
            alert($(this).css("font-size"));
        });
    </script>
</html>

运行结果：

控制标签

通过jQuery可以很方便的控制标签，例如可以对某个标签增加子标签，或者删除某个标签等等，append方法就可以给某个标签添加一个子标签：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <body>
        <button type="button">添加标签</button>
        <div></div>
        <select></select>
    </body>
    <script>
        $("button").click(function(){
            $("div").append("<p>Hello Wolrd!</p>");
            $("select").append("<option>hello</option>");
        });
    </script>
</html>

remove方法可以删除某个标签：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

    <body>
        <button type="button">删除标签</button>
        <div>
            <p>hello world!</p>
            <p>hello world!</p>
            <p>hello world!</p>
            <p>hello world!</p>
            <p>hello world!</p>
        </div>
    </body>
    <script>
        $("button").click(function() {
            $("p").remove();
        });
    </script>

</html>

html方法类似于innerHTML方法，可以给开始和结束标签之间填充HTML或文本：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

    <body>
        <button type="button">添加HTML</button>
        <div></div>
    </body>
    <script>
        $("button").click(function() {
            $("div").html("<p>Hello Wolrd!</p>");
        });
    </script>
</html>

text方法可以给开始和结束标签之间填充纯文本内容，即便传的是HTML代码也会被转换成文本：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

    <body>
        <button type="button">添加文本</button>
        <p></p>
    </body>
    <script>
        $("button").click(function() {
            $("p").text("<p>Hello Wolrd!</p>");
        });
    </script>

</html>

val方法可以返回或设置被选元素的值，元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数，则返回被选元素的当前值：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

    <body>
        <button type="button">得到/设置value</button>
        <input type="text" value="test" />
    </body>
    <script>
        $("button").click(function() {
            alert($("input").val());
            $("input").val("Hello World！");
        });
    </script>

</html>

控制标签属性

attr方法可以控制标签的所有属性，通过这个方法可以给某个标签动态设置属性，也可以通过这个方法来获得某个属性的值，而removeAttr方法则可以删除指定的属性：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style>
        .test_div{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
    <body>
        <div>
            <button type="button" id="add">设置属性</button>
            <button type="button" id="del">删除属性</button>
            <img />
        </div>
    </body>
    <script>
        $("button").click(function() {
            $("img").attr("src","img/TIM截图20180105215155.png");
            $("img").addClass("test_div");
        });
        $("#del").click(function(){
            $("img").removeAttr("src");
        });
    </script>

</html>

运行结果：

jQuery的显示/隐藏效果

show方法可以显示某个组件，hide方法则可以隐藏某个组件：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style>
        .test{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
    <body>
        <div>
            <button type="button" name="show">显示</button>
            <button type="button" name="hide">隐藏</button>
            <img class="test" src="img/TIM截图20180105215155.png" />
        </div>
    </body>
    <script>
        $("button[name='show']").click(function() {
            $("img").show();
        });
        $("button[name='hide']").click(function(){
            $("img").hide();
        });
    </script>

</html>

show以及hide方法中都有可选的参数，第一个参数可以设置元素从隐藏到完全可见的速度，可以直接传递毫秒数，也可以传递字符串：slow、normal、fast等。在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。第二个参数就是回调函数，show 函数执行完之后，要执行的函数，示例：

<script>
        function show_img(){
            alert("显示完成！");
        }
        function hide_img(){
            alert("隐藏完成！");
        }
        $("button[name='show']").click(function() {
            $("img").show(5000,show_img);
        });
        $("button[name='hide']").click(function(){
            $("img").hide(5000,hide_img);
        });
</script>

toggle方法可以切换元素的可见状态，如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素，同样的可以设置过程时间和回调函数：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style>
        .test{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
    <body>
        <div>
            <button type="button" name="toggle">显示/隐藏</button>
            <img class="test" src="img/TIM截图20180105215155.png" />
        </div>
    </body>
    <script>
        function done(){
            alert("完成！");
        }
        $("button[name='toggle']").click(function() {
            $("img").toggle(3000,done)
        });
    </script>

</html>

想要有淡入淡出的效果可以使用以下四种fade方法：

fadeIn() 方法用于淡入已隐藏的元素
fadeOut() 方法用于淡出可见元素
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style>
        .test{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
    <body>
        <div>
            <button type="button" name="fadeIn">显示</button>
            <button type="button" name="fadeOut">隐藏</button>
            <button type="button" name="fadeToggle">显示/隐藏</button>
            <button type="button" name="fadeTo">淡出</button>
            <img class="test" src="img/TIM截图20180105215155.png" />
        </div>
    </body>
    <script>
        function fadeIn_img(){
            alert("显示完成！");
        }
        function fadeOut_img(){
            alert("隐藏完成！");
        }
        function done_img(){
            alert("完成！");
        }
        $("button[name='fadeIn']").click(function() {
            $("img").fadeIn(3000,fadeIn_img);
        });
        $("button[name='fadeOut']").click(function(){
            $("img").fadeOut(3000,fadeOut_img);
        });
        $("button[name='fadeToggle']").click(function(){
            $("img").fadeToggle(3000,done_img);
        });
        $("button[name='fadeTo']").click(function(){
            $("img").fadeTo("slow",0.5);
        });
    </script>

</html>

通过jQuery实现元素滑动效果可以使用以下三个方法：

slideDown() 方法用于向下滑动元素。
slideUp() 方法用于向上滑动元素。
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style>
        .test {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>

    <body>
        <button type="button" name="slideDown">向下滑动</button>
        <button type="button" name="slideUp">向上滑动</button>
        <button type="button" name="slideToggle">向下滑动/向上滑动</button>
        <div>
            <img class="test" src="img/TIM截图20180105215155.png" />
        </div>
    </body>
    <script>
        function slideDown_img() {
            alert("向下滑动完成！");
        }

        function slideUp_img() {
            alert("向上滑动完成！");
        }

        function done_img() {
            alert("完成！");
        }
        $("button[name='slideDown']").click(function() {
            $("div").slideDown(3000,slideDown_img);
        });
        $("button[name='slideUp']").click(function() {
            $("div").slideUp(3000,slideUp_img);
        });
        $("button[name='slideToggle']").click(function() {
            $("div").slideToggle(3000,done_img);
        });
    </script>

</html>