jQuery笔记归纳

使用jQuery前首先需要导如jQuery包:https://jquery.com/（点击下载按钮，进入后点击鼠标右键另存为即可下载）

例如：<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>

jQuery选择器

标签选择器
id选择器 $("#id")
类选择器 $(".class")
群组选择器 $("选择器1,选择器2,...,选择器n")
兄弟选择器 ~ $("兄~弟") 平级关系
相邻元素选择器 +
父子选择器 > $("父>子")
祖先子孙选择器 $(" 空格 ") $("祖子")
表单元素选择器 $(":表单元素")
元素属性选择器 $("html元素[属性名称=属性值]")
伪类选择器 $("真实选择器:伪类属性")

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery</title>
        <style>
            #div1,#div2,#div3{
                width: 50px;
                height: 50px;
                border: 3px solid teal;
                float: left;
                line-height: 50px;
                text-align: center;
            }
            ul li{
                list-style-type: none;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
        <script>
            $(function(){
                // 设置所有div向右移动10px
                $("div").css({"margin-left":"10px"});
                
                // 兄弟选择器
                $("h1~div").css("color","red");
                // 相邻元素选择器
                $("h1+div").css("color","blue");
                // 表单元素选择器
                $(":text").val("Hello jQuery");
                // 元素属性选择器
                $("input[type=password]").val("123456");
                // 伪类选择器(第一个元素)
                $("ul>li:first-child").css("background-color","pink");
                
                // 最后一个元素
                $("ul>li:last-child").css("background-color","green");
                // 第三个元素
                $("ul>li:nth-child(3)").css("background-color","yellow");
                // 倒数第三个元素
                $("ul>li:nth-last-child(3)").css("background-color","teal");
                // 把除第4个以外的字体样式都设置为"黑体"
                $("ul>li:not(:nth-child(4))").css("font-family","黑体");
                // 奇数项
                $("ul>li:nth-child(odd)").css("border","2px dashed red");
                // 偶数项
                $("ul>li:nth-child(even)").css("border","2px solid");
                /**
                 * eq()：匹配一个给定索引值的元素
                 * gt()：匹配所有大于给定索引值的元素
                 * lt()：匹配所有小于给定索引值的元素
                 * 注意：索引从0开始的
                 */
                $("ul>li:eq(1)").css("color","orange");
//              $("ul>li:gt(2)").css("color","orange");
//              $("ul>li:lt(2)").css("color","orange");
                
                // :header  匹配如 h1, h2, h3之类的标题元素
                $("h1:header()").css("color","teal");
            })
        </script>
    </head>
    <body>
        <h1>我是一级标题</h1>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
        <br /><br /><br />
        <input type="text" id="in_txt" name="inText" placeholder="文本框" /><br />
        <input type="password" id="in_psd" name="inPsd" placeholder="密码框" />
        <ul>
            <li>AAA</li>
            <li>BBB</li>
            <li>CCC</li>
            <li>DDD</li>
            <li>EEE</li>
            <li>FFF</li>
        </ul>
    </body>
</html>

jQuery事件

单击事件 click()

双击事件 dblclick()

焦点事件 focus()：触发焦点， blur() ：失去焦点

鼠标事件

mouseOver()：鼠标悬停事件

mouseMove()：鼠标移动事件

mouseDown()：鼠标按下事件

mouseUp()：鼠标释放事件

mouseOut()：鼠标离开事件

键盘事件

keyUp()：键盘释放事件

keyDown()：键盘按下事件

keyPress()：键盘按下和释放之间的事件

选项改变事件 change()

hover事件：

一次能够绑定多个事件，它在鼠标事件上进行了扩充，在hover事件上能够将鼠标悬停和离开绑定在一起

例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>hover事件</title>
        <style>
            #div1{
                width:200px;
                height:200px;
                border: 1px solid teal;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
        <script>
            $(function(){
                //悬停显示背景颜色，离开清除背景颜色
                $("#div1").hover(function(){
                    $(this).css("background-color","teal");
                },function(){
                    $(this).css("background-color","");
                }); 
            })
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
</html>

绑定/解绑事件 on()/off()

on()：在选择元素上绑定一个或多个事件的事件处理函数。

off()：在选择元素上移除一个或多个事件的事件处理函数。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>绑定/解绑事件</title>
        <style>
            #div1{
                width:120px;
                height:auto;
                border:3px solid teal;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
        <script>
            $(function(){
                //on是绑定事件的函数
                //参数1：事件名称
                //参数2：选择器(一个或者多个)
                //参数3：一旦事件源触发事件，执行的回调函数
                $("#div1").on("click",".p1,.p3",function(){
                    $(this).css("color","red");
                })
                
                // off()：解除绑定
                // 参数1：之前绑定的事件  参数2：选择器
                $("#div1").off("click",".p1,.p2");
            })
            // Servlet+Jquery+ajax 
        </script>
    </head>
    <body>
        <div id="div1">
            <p class="p1">晴川历历汉阳树</p>
            <p class="p2">芳草萋萋鹦鹉洲</p>
            <p class="p3">烟波江上使人愁</p>
        </div>
    </body>
</html>

操作节点的属性

val()：获得匹配元素的当前值。对应js的value属性

attr()：设置或返回被选元素的属性值。对应js的setAttribute和getAttribute

prop()：获取在匹配的元素集中的第一个元素的属性值。用户input标签 type='checkbox' checked属性值的设置

text()：取得所有匹配元素的内容。对应js的innerText

html()：取得第一个匹配元素的html内容。对应js的innerHTML

遍历节点 each()

遍历祖先节点：parent()、遍历后代节点：children()、遍历同辈节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery遍历节点</title>
        <script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
        <!-- 遍历祖先节点 -->
        <script>
            $(function(){
                // 获取上一级父元素$("#sixth").parent()
                $("#sixth").parent().css("color","pink");
                // each()：规定为每个匹配元素规定运行的函数（遍历）
                $("#sixth").parent().each(function(){
                    console.log("遍历#sixth的父节点");
                    var att = $(this).attr("id");
                    console.log(att);
                });
                
                // .parents().each()：遍历所有父节点
                $("#sixth").parents().each(function(){
                    // this.tagName：获取标签名称
                    console.log(this.tagName);
                });
                
                // .parents("").each()：获取指定的父元素
                $("#sixth").parents("#div-zhuxian").each(function(){
                    var att = $(this).attr("id");
                    console.log(att);
                });
            })
        </script>
        
        <!-- 遍历后代节点 -->
        <script>
            $(function(){
                // children()：只能获取父元素下的一级子元素
                $("#div-zhuxian").children().each(function(){
                    // this.tagName：获取标签名称
                    console.log("遍历后代节点：" + this.tagName);
                    
                    if(this.tagName=="P"){  // 注意：标签名称必须大写
                        $(this).css("background-color","pink");
                    }
                    
                    if($("#first")){
                        var val1 = $(this).innerText = "666";
                        console.log(val1);
                        // on()：在选择元素上绑定一个或多个事件的事件处理函数
                        $("#div-zhuxian").on("click","#first",function(){
                            $(this).css("background-color","teal");
                        });
                    }
                });
            })
        </script>
        
        <!-- 遍历同辈节点（不涉及父元素和子元素） -->
        <script>
            $(function(){
                // next()：获取下一个同辈元素
                $("#third").next().css("background-color","salmon");
                // nextAll()：查找当前元素之后所有的同辈元素
                $("#third").nextAll().css("background-color","teal");
                // 获取上一个同辈元素
                $("#fourth").prev().css("font-size","20px");
                // prevAll()：查找当前元素之前所有的同辈元素
                $("#fourth").prevAll().css("font-size","30px");
                // siblings()：获取所有的同辈元素
                $("#fourth").siblings().css("color","red");
            })
        </script>
    </head>
    <body>
        <div id="div-zhuxian">
            <p id="first">AAA</p>
            <p id="second">BBB</p>
            <div id="div-father">
                <p id="third">CCC</p>
                <p id="fourth">DDD</p>
                <div id="div-son">
                    <p id="fifth">EEE</p>
                    <p id="sixth">FFF</p>                   
                </div>
            </div>
        </div>
    </body>
</html>

节点操作

内部插入节点

首部插入：prepend()/prependTo()，尾部插入：append()/appendTo()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery节点操作</title>
        <style>
            #div1{
                width: 100px;
                height: 150px;
                border: 3px solid teal;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
        <!-- 将子元素插入到父元素的首部 -->
        <script>
            $(function(){
                var newElement = $("#div1").prepend("<p id='p0'>P0标签</p>");
                $("#p0").css("font-size","12px");
                // 为所有的P标签增加class属性
                newElement.addClass("label");
                // 为所有类为label的标签添加样式
                $(".label").css("color","red");
                
                // prepend()：向每个匹配的元素内部前置内容。
                $("#div1").prepend("<p>BBBBBB</p>")
                /*prepend：正向插入子元素       $("父选择器").prepend("字符串")；
                  prePend使用父元素为参照物 */
                // prependTo()：把所有匹配的元素前置到另一个、指定的元素元素集合中
                $("<p>AAAAAA</p>").prependTo("#div1");  // 把p标签添加到id为div1的盒子中
                /*prependTo：反向插入子元素 $("子选择器").prependTo("父选元素择器"):
                  prependTo使用子元素为参照物 */
            })
        </script>
        
        <!-- 将子元素插入到父元素的尾部 -->
        <script>
            $(function(){
                // append：附加
                // $("父元素选择器").append("子元素选择器")：将子元素追加到父元素的末尾，正向追加
                $("#div1").append("<h6>我是6级标签</h6>");
                //$("子元素选择器").appendTo("父元素选择器")：资源元素追加到父元素的末尾，反向追加
                $("<P>P标签</P>").appendTo("#div1");
            })
        </script>
    </head>
    <body>
        <div id="div1">
            <p id="p1">我是P标签</p>
        </div>
    </body>
</html>

外部插入节点

之前插入：before()/insertBefore()，之后插入：after()/insertAfter()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery节点操作</title>
        <style>
            #div1{
                width: 100px;
                height: 50px;
                border: 3px solid teal;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
        <!-- 外部插入节点 -->
        <!-- 外部之前插入节点 -->
        <script>
            $(function(){
                // bofore()：在每个匹配的元素之前插入内容，正向插入
                $("#div1").before("<div>短歌行 （曹操）</div>")
                // insertBefore()：把所有匹配的元素插入到另一个、指定的元素元素集合的前面，反向插入
                $("<p>对酒当歌，人生几何！</p>").insertBefore($("#div1"));
                $("<p>譬如朝露，去日苦多。</p>").insertBefore("#div1");
            })
        </script>
        
        <!-- 外部之后插入节点 -->
        <script>
            $(function(){
                // after()：在每个匹配的元素之后插入内容，正向插入
                $("#div1").after($("<p>山不厌高，海不厌深。</p>"));
                $("#div1").after("<p>何以解忧，唯有杜康。</p>");
                // 把所有匹配的元素插入到另一个、指定的元素元素集合的后面，反向插入
                // 后插入的元素离div最近
                $("<p>慨当以慷，忧思难忘。</p>").insertAfter("#div1");
            })
        </script>
    </head>
    <body>
        <div id="div1">
            <p id="p1">我是P标签</p>
        </div>
    </body>
</html>

删除节点：remove()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>remove()：删除节点</title>
        <style>
            #div1{
                width: 100px;
                height: 50px;
                border: 3px solid teal;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.4.1.js" ></script>  
        <!-- 删除节点 -->
        <script>
            $(function(){
                $("#p1").click(function(){
                    // remove()：删除指定节点
                    $("#p1").remove();
                });
            })
        </script>
    </head>
    <body>
        <div id="div1">
            <p id="p1">我是P标签</p>
        </div>
    </body>
</html>

清空节点：empty()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>empty()：清空节点</title>
        <style>
            ul>li{
                list-style-type: none;
            }
        </style>
        <script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
        <script>
            $(function(){
                $("#btn").click(function(){
                    // 清空ul下面所有的li
                    $("ul>li").empty();
                })
            })
        </script>
    </head>
    <body>
        <ul>
            <li>AAA</li>
            <li>BBB</li>
            <li>CCC</li>
            <li>DDD</li>
        </ul>
        <input type="button" id="btn" value="清空" />
    </body>
</html>

克隆节点：clone()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>clone()：克隆节点</title>
        <style>
            #div1{
                width: 100px;
                height: auto;
                border: 3px solid teal;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
        <!-- 克隆节点 -->
        <script>
            $(function(){
                $("#c_btn").click(function(){
                    // 将id为p1的标签克隆到id为div1中
                    $("#p1").clone().prependTo("#div1");
                });
            })
        </script>
    </head>
    <body>
        <div id="div1">
            <p id="p1">我是P标签</p>
        </div>
        <input type="button" id="c_btn" value="克隆" />
    </body>
</html>

动画操作

隐藏和显示：hide()/show()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery隐藏和显示</title>
        <style>
            #div1{
                width: 130px;
                height: auto;
                border: 3px solid teal;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
        <!-- 隐藏和显示 -->
        <script>
            $(function(){
                $("#h_btn").click(function(){
                    // hide()：隐藏    ()中是隐藏所用的时间，毫秒为单位
//                  $("#div1").hide();
                    $("#div1").hide(1000);
                });
                $("#s_btn").click(function(){
                    // show()：显示    ()中是显示所用的时间，毫秒为单位
//                  $("#div1").show();
                    $("#div1").show(1000);
                });
            })
        </script>
    </head>
    <body>
        <div id="div1">
            <p id="p1">别有幽愁暗恨生，此时无声胜有声。</p>
        </div>
        <input type="button" id="h_btn" value="隐藏" />
        <input type="button" id="s_btn" value="显示" />
    </body>
</html>

淡出和淡入

fadeOut()：淡出(亮--->暗)，fadeIn()：淡入(暗--->亮)，fadeTo()：渐变，fadeToggle()：淡入淡出切换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery淡出和淡入</title>
        <style>
            #div1{
                width: 130px;
                height: auto;
                border: 3px solid teal;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
        <!-- 淡入和淡出 -->
        <script>
            $(function(){
                $("#btn1").click(function(){
                    // fadeOut()：淡出
                    $("div").fadeOut(1000);
                })
                
                $("#btn2").click(function(){
                    // fadeIn()：淡入
                    $("div").fadeIn(1000,function(){
                        alert("成功淡入");
                    })
                })
                
                // 淡入和淡出之间切换
                $("#btn3").click(function(){
                    //fadeToggle()：在淡入和淡出之间切换
                    // 一旦淡出执行完毕，按钮变为淡入,否则变为淡出
                    $("div").fadeToggle(1000,function(){
                        if($("#btn3").val()=="淡出"){
                            $("#btn3").val('淡入');
                        }else{
                            $("#btn3").val('淡出');
                        }
                    })
                })
                
                // 渐变
                $("#btn4").click(function(){
                    // 参数1：渐变的时间  参数2：0.0~1.0之间的透明度
                    $("div").fadeTo(1000,0.7);
                    $("div").fadeTo(1000,0.4);
                    $("div").fadeTo(1000,0.1);
                })
                
            })
        </script>
    </head>
    <body>
        <div id="div1">
            <p id="p1">别有幽愁暗恨生，此时无声胜有声。</p>
        </div>
        <input type="button" id="btn1" value="淡出" />
        <input type="button" id="btn2" value="淡入" />
        <input type="button" id="btn3" value="淡出" />
        <!-- 透明度在1.0~0.0之间慢慢的变暗 -->
        <input type="button" id="btn4" value="渐变" />
    </body>
</html>

收起和展开

slideUp(): 收起，slideDown()：展开，slideTo()：收起和展开之间切换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery收起与展开</title>
        <style>
            #div1{
                width: 130px;
                height: auto;
                border: 3px solid teal;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
        <!-- 收起与展开 -->
        <script>
            $(function(){
                $("#btn1").click(function(){
                    //slideUp()：收起（上下收起）
                    $("div").slideUp(1000);
                })
                $("#btn2").click(function(){
                    //slideDown()：展开（上下展开）
                    $("div").slideDown(1000);
                })
                
                // slideToggle()：收起跟展开之间切换
                $("#btn3").click(function(){
                    $("div").slideToggle(2000,function(){
                        if($("#btn3").val()=='收起'){
                            $("#btn3").val('展开');
                        }else{
                            $("#btn3").val('收起');
                        }
                    })
                })
            })
        </script>
    </head>
    <body>
        <div id="div1">
            <p id="p1">别有幽愁暗恨生，此时无声胜有声。</p>
        </div>
        <input type="button" id="btn1" value="收起" />
        <input type="button" id="btn2" value="展开" />
        <input type="button" id="btn3" value="收起" />
    </body>
</html>

jQuery在线API文档：http://jquery.cuishifeng.cn/

jQuery离线API文档：https://www.lanzous.com/i6zz7yh