JQuery

# JQuery

jQuery 是个 JavaScript 库, 它简化了JavaScript编程! 封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

# 快速入门

# 引用

外部引用JavaScript脚本文件即可

<head>
	<script src="..."></script>
</head>

# 语法

以下语法的作用是在文档加载完再执行的JQ代码

//No.1
$(document).ready(function(){
	//jQuery 代码 ...
});

//No.2
$(function(){
	//jQuery 代码 ...
});

# 对象转化

DOM对象转 JQ对象 ==$(<DOM对象>)==

JQ对象转 DMO对象 ==<JQ对象>.get(0)==

# JQuery选择器

$(this)	选取
$("p")	所有 `<p>` 元素
$("p.intro")	所有 class="intro" 的 `<p>` 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的
$("ul li:first")	每个 `<ul>` 的第一个 `<li>` 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 `<div>` 元素中的所有 class="head" 的元素
$("div , p")	所有 `<div>` `<p>` 元素
$("form input")	所有 `<form>` 中的 `<input>` 元素
$("form>input")	所有 `<form>` 中的 `<input>` 元素
$("label+input")	所有 `<label>` 的下一个元素

点击更多JQuery选择器 (opens new window)

<head>
<script src="../js/jquery-1.11.1.js"></script>
    <script>
        function printList(list) {
            for (var i = 0; i < list.length; i++) {
                console.log(list[i]);
            }
        }
        //引用JQ代码
        $(function () {
            allSelector();
        });
        //标签
        function LabelSelector() {
            //遍历结果是 HMTL节点 集合
            var list = $("div");
            printList(list);
        }
        //id
        function idSelector() {
            var list = $("#div4");
            printList(list);
        }
        //class
        function classSelector() {
            var list = $(".div2");
            printList(list);
        }
        //全局
        function allSelector() {
            var list = $("*");
            printList(list);
        }
    </script>
</head>
<body>
    <div>div1</div>
    <div class="div2">div2</div>
    <div>div3</div>
    <div id="div4">div4</div>
</body>

<head>
<script src="../js/jquery-1.11.1.js"></script>
<script>
    function printList(list) {
        for (var i = 0; i < list.length; i++) {
            console.log(list[i]);
        }
    }
    //引用JQ代码
    $(function () {
        visibilitySelector();
    });
    //并集
    function episodeSelector() {
        var list = $("div,b");
        printList(list);
    }
    //后代
    function descendantSelector() {
        var list = $("form label");
        printList(list);
    }
    //子
    function sonSelector() {
        var list = $("form>.test");
        printList(list);
    }
    //相邻
    function adjacentSelector() {
        var list = $("label+input");
        printList(list);
    }
    //属性
    function attributesSelector() {
        // var list = $("input[name]");
        // var list = $("p[class='test']");
        // var list = $("input[type='text'][name='userss']");
        // var list = $("input[name^='user']");
        var list = $("input[name$='ss']");
        // var list = $("input[name*='ss']");
        printList(list);
    }
    //可见性
    function visibilitySelector(){
        var list = $("div:hidden");
        // var list = $("div:visible");
        printList(list);
    }
</script>
</head>
<body>
    <form action="#">
        <label for="userid">I D : </label>
        <input type="text" name="userid">
        <br>
        <label for="userss">账号:</label>
        <input type="text" name="userss">
        <br>
        <label for="password">密码:</label>
        <input type="password" name="password">
        <br>
        <b>b1</b>
        <b class="test">b2</b>
        <div>
            div1
            <p class="test">p1</p>
            <p>p2</p>
        </div>
        <div class="div2" style="display: none;" >div2</div>
        <div class="test" style="visibility: hidden;" >div3</div>
        <div id="div4">div4</div>
    </form>
</body>

# JQuery HTML

点击更多jQuery操作方法 (opens new window)

# HTML内容

常用方法	说明
$(selector).text([content])	设置或返回所选元素的文本内容
$(selector).html([content])	设置或返回所选元素的内容,包括 HTML 标签
$(selector).val([content])	设置或返回表单字段的值

<head>
<script src="../js/jquery-1.11.1.js"></script>
<script>
    $(function(){
        var str = "Test!!";
        var div = $("div");
        console.log(div.html());    //div<button>按钮</button>
        console.log(div.text());    //div按钮
        console.log(div.val());     //null ,因非表单value值
        console.log($("input").val());  //张三
    });
</script>
</head>
<body>
    <div>
        div
        <button>按钮</button>
    </div>
    <input type="text" value="张三">
</body>

# HMTL属性

常用方法	说明
$(selector).attr(<属性名> [,<属性值>])	返回/设置属性值 (无参则返回值
$(selector).prop(<选中属性>,<选中>)	判断是否选中
$(selector).removeAttr()	元素移除指定属性

<head>
    <script src="../js/jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //指定第一个元素的div节点
            var box = $("div:eq(0)");
            var user = $("input[id='user']");
            var password = $("input[id='password']");
            var button = $(".buttonTest");

            //编辑属性值    attr
            //attr(属性) => 返回属性值
            $("button:eq(0)").click(function () {
                alert(user.attr("value"));
            });
            //attr(属性,属性值) => 更改属性值
            $("button:eq(1)").click(function () {
                user.attr("value", "Sanscan");
            });
            //attr(属性,函数(index,oldValue)) => 编辑属性值
            $("button:eq(2)").click(function () {
                //每次运行都会在 属性值追加'S'
                user.attr("value", function (n, o) {
                    alert("n = " + n + "o = " + o);
                    return o + "S";
                });
            });
            //获取单选 信息 prop
            $("button:eq(3)").click(function () {
                var list = $("input[name='sex']");
                var str;
                for (var i = 0; i < list.length; i++) {
                    alert( $(list[i]).attr("id") +" = " + $(list[i]).prop('checked'));
                }
            });
            //移除属性 removeAttr
            $("button:eq(4)").click(function () {
                password.removeAttr("value");
            });

        });
    </script>
</head>
<body>
    <div>
        <form action="#">
            <label for="user">name:</label>
            <input type="text" id="user" name="user" value="洋葱小鱿"><br>
            <label for="">password:</label>
            <input type="password" id="password" name="password" value="*****"><br>
            <label for="sex">sex:</label>
            <input type="radio" name="sex" checked="checked" id="man">man
            <input type="radio" name="sex" id="woman">woman
        </form>
    </div>
    <div>
        <button>获取名称值</button><br>
        <button>更改属性值</button><br>
        <button>追加属性值</button><br>
        <button>获取单选按钮信息</button><br>
        <button>移除密码value值</button><br>
    </div>
</body>

# CSS样式

点击更多CSS样式 (opens new window)

常用方法	说明
$(selector).css()	编辑属性
$(selector).addClass()	元素添加类
$(selector).removeClass()	匹配元素中删除全部或指定的类
$(selector).toggleClass()	元素中添加或删除类
$(selector).hasClass()	检查元素是否拥有指定的类
$(selector).width()	设置元素的宽度
$(selector).height()	设置元素的高度

<head>
<script src="../js/jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //指定第一个元素的div节点
            var box = $("div:eq(0)");
            var user = $("input[id='user']");
            var password = $("input[id='password']");
            var button = $(".buttonTest");

            //添加类 属性   addClass
            $("button:eq(0)").click(function () {
                box.addClass("box");
            });
            //删除类 属性   removeClass
            $("button:eq(1)").click(function () {
                box.removeClass("box");
            });
            //检查 类是否包含"box类"    hasClass
            $("button:eq(2)").click(function () {
                alert(box.hasClass("box"));
            });
            //按钮颜色  css
            $("button:eq(3)").click(function () {
                alert(button.css("background"))
            });
            //修改按钮颜色 css
            $("button:eq(4)").click(function () {
                button.css("background","darkseagreen");
            });2
            //修改盒子高度 height
            $("button:eq(5)").click(function () {
                box.height(200);
            });
            //修改盒子宽度  width
            $("button:eq(6)").click(function () {
                box.width(300);
            });
            //设置移除  toggleClass
            $("button:eq(7)").click(function () {
                button.toggleClass("buttonTest");
            });
        });
</script>
<style>
        .box {
            width: 200px;
            padding-left: 24px;
            background: chartreuse;
        }
        .buttonTest {
            background: coral;
            margin: 4px;
        }
    </style>
</head>
<body>
    <div>
        <form action="#">
            <label for="user">name:</label>
            <input type="text" id="user" name="user" value="洋葱小鱿"><br>
            <label for="">password:</label>
            <input type="password" id="password" name="password" value="*****"><br>
            <label for="sex">sex:</label>
            <input type="radio" name="sex" checked="checked">man
            <input type="radio" name="sex">woman
        </form>
    </div>
    <div>
        <button class="buttonTest">添加盒子样式</button><br>
        <button class="buttonTest">删除盒子样式</button><br>
        <button class="buttonTest">检查盒子样式</button><br>
        <button class="buttonTest">获取按钮颜色</button><br>
        <button class="buttonTest">修改按钮颜色</button><br>
        <button class="buttonTest">修改盒子高度</button><br>
        <button class="buttonTest">修改盒子宽度</button><br>
        <button class="buttonTest">移除/恢复 按钮样式</button><br>
    </div>
</body>

on事件绑定应用

<head>
    <script src="../js/jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //一对一
            // //on(events , selector , fn)
            // $("body").on("click" , "button" , function(){
            //     $(this).css("fontSize", "+=20px");
            // });

            //多选择 一个事件
            //on(events , fn)
            // $("button,p").on("click",function(){
            //     $(this).css("fontSize","+=20px")
            // });
            // //on(events , selector , fn)
            // $("body").on("click" , "button,p" , function(){
            //     $(this).css("fontSize", "+=20px");
            // });

            //多事件 一个方法
            //on(events , fn)
            // $("button").on("click mouseover",function(){
            //     $(this).css("fontSize", "+=20px");
            // });
            
            //多选择 多事件 不同方法
            $("button , p").on({
                mouseover: function(){
                    $("button").css("fontSize", "+=20px");
                    $("p").css("fontSize", "+=20px");
                },
                mouseout: function(){
                    $("button").css("fontSize", "-=20px");
                    $("p").css("fontSize", "-=20px");
                },
                click: function(){
                    $("button").css("fontSize", "+=20px");
                    $("p").css("fontSize", "+=20px");
                }
            });
        });
    </script>
</head>
<body>
    <button>点击触发</button>
    <br>    
    <br>    
    <br>    
    <p style="background: chartreuse;">Test</p>
</body>

# JQuery事件

点击更多JQuery事件 (opens new window)

常用方法	说明
$(selector).click()	鼠标点击
$(selector).dblclick()	鼠标双击
$(selector).mouseover()	获取鼠标焦点
$(selector).mouseout()	失去鼠标焦点
$(selector).keydown()	键盘按下
$(selector).keyup()	键盘松开
$(selector).submit()	表单提交
$(selector).change()	元素值改变
$(selector).focus()	获取表单焦点
$(selector).blur()	失去表单焦点
$(selector).load()	图片加载完毕
$(selector).on()	节点事件绑定
$(selector).off()	节点解除事件绑定

鼠标事件

<head>
    <script src="../js/jquery-1.11.1.js"></script>
    <script>
        $(function(){
            //鼠标点击触发  click
            $("a:eq(0)").click(function(){
                $(this).html("??");
            });
            //鼠标双击触发  dblclick
            $("a:eq(1)").dblclick(function () {
                $(this).html("??");
            });
            //鼠标移上触发 mouseenter
            $("a:eq(2)").mouseenter(function () {
                $(this).html("??");
            });
            //鼠标移上触发 mouseenter
            $("a:eq(2)").mouseenter(function () {
                $(this).html("??");
            });
            //鼠标离开触发 mouseleave
            $("a:eq(2)").mouseleave(function () {
                $(this).html("鼠标移上触发");
            });
        });
    </script>
</head>
<body>
    <div>
        <a href="#">鼠标点击</a>
        <a href="#">鼠标双击</a>
        <a href="#">鼠标移上</a>
    </div>
</body>

键盘事件

<head>
    <script src="../js/jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //键盘按下  keydown
            $("input").keydown(function () {
                $("div").css("background", "red");
            });
            //键盘松开  keydown
            $("input").keyup(function () {
                $("div").css("background", "dodgerblue");
            });
        });
    </script>
    <style>
        div{
            width: 20px;
            height: 20px;
            background: dodgerblue;
        }
    </style>
</head>
<body>
    <input type="text">
    <p>按下变红/松开变蓝:</p>
    <div></div>
</body>

表单事件

<head>
    <script src="../js/jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //提交表单触发  submit
            $("form").submit(function () {
                alert("提交成功");
            });
            //提交2 
            $("button:eq(0)").click(function () {
                $("form").submit();
            });
            //元素值改变触发 change
            $("#user").change(function () {
                $("#user+label").html("值更变!!!");
            });
            //更改2
            $("button:eq(1)").click(function () {
                $("#user").change();
            });
            //获取焦点触发 focus
            $("input").focus(function (e) {
                $("input").css("background", "chartreuse");
            });
            //获取焦点2
            $("button:eq(2)").click(function () {
                $("input").focus();
            });
            //失去焦点 blur
            $("input").blur(function () {
                $("input").css("background","white");
            });
            //也可强制失去焦点
        });
    </script>
</head>
<body>
    <div>
        <form action="#">
            <label for="user">name:</label>
            <input type="text" id="user" name="user" value="洋葱小鱿">
            <label></label><br>
            <label for="">password:</label>
            <input type="password" id="password" name="password" value="*****">
            <label></label><br>
            <label for="sex">sex:</label>
            <input type="radio" name="sex" checked="checked" id="man">man
            <input type="radio" name="sex" id="woman">woman
            <br>
            <input type="submit">
            <input type="reset">
        </form>
        <button>提交2</button>
        <button>强制更变</button>
        <button>强制获取焦点</button>
    </div>
</body>

图片加载

<head>
    <script src="../js/jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $("img").load(function(){
                $("img+p").html("图片加载完毕");
            });
        });
    </script>
</head>
<body>
    <img src="https://sanscan.top/medias/banner/0.jpg" alt="">
    <p>图片加载中......</p>
</body>

# JQuery效果

点击更多JQuery效果 (opens new window)

常用方法	说明
$(selector).hide()	隐藏所有匹配的节点
$(selector).show()	显示所有匹配的节点
$(selector).toggle()	隐藏/显示所有匹配的节点
$(selector).fadeOut()	淡化隐藏所有匹配的节点
$(selector).fadeIn()	淡化显示所有匹配的节点
$(selector).fadeToggle()	淡化隐藏/显示所有匹配的节点
$(selector).animate()	自定义动画

隐藏和显示

<head>
    <script src="../js/jquery-1.11.1.js"></script>
    <script>
        //淡化使用方式是一样的该方法即可
        $(function(){
            //隐藏div hide  淡化方法 fadeOut
            $("button:eq(0)").click(function(){
                //可能值:"slow"/"normal"/"fast"/数值
                $("div").hide("slow");
            });
            //显示div show  淡化方法 fadeIn
            $("button:eq(1)").click(function(){
                //可能值:"slow"/"normal"/"fast"/数值
                $("div").show(2000);
            });
            // 隐藏/显示 show   淡化方法 fadeToggle
            $("button:eq(2)").click(function(){
                //可能值:"slow"/"normal"/"fast"/数值
                $("div").toggle(1400);
            });
        });
    </script>
</head>
<body>
    <button>隐藏</button>
    <button>显示</button>
    <button>隐藏/显示</button>
    <br><br> 
    <div style="background: hotpink; width: 200px; height: 200px;"></div>
    <div>Test</div>
</body>

自定义动画

<head>
    <script src="../js/jquery-1.11.1.js"></script>
    <script>
    $(function(){
        // 语法 $(selector).animate(styles[,speed][,easing][,callback])
        var box = $(".box");
        //变大
        $("button:eq(0)").click(function(){
            box.animate({height:"+=50px",width:"+=50px"});
        });
        //变小
        $("button:eq(1)").click(function () {
            box.animate({ height: "-=50px", width: "-=50px" });
        });
    });
    </script>
    <style>
        .box{
            background: hotpink;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <button>宽高+++</button>
    <button>宽高--</button>
    <br><br>
    <div class="box"></div>
</body>

# JQuery文档

点击更多JQuery文档操作 (opens new window)

常用方法	说明
$(selector).append()	匹配的节点插入内容结尾
$(selector).prepend()	匹配的节点插入内容开头
$(selector).after()	匹配的节点之后插入
$(selector).before()	匹配的节点之前插入
$(selector).clone()	克隆节点副本
$(selector).replaceWith()	所有匹配节点替换新节点
$(selector).remove()	删除所有匹配的节点
$(selector).empty()	删除所有匹配的节点, 不包括本身
$(selector).parent()	获取父节点
$(selector).children()	获取子节点

添加节点

<head>
    <script src="../js/jquery-1.11.1.js"></script>
    <script>
        $(function(){
            //指定节点插入内容结尾 append
            $("button:eq(0)").click(function(){
                $(".box").append("<p>插入P尾</p>");
            });
            //指定节点插入内容开头 prepend
            $("button:eq(1)").click(function () {
                $(".box").prepend("<p>插入P尾</p>");
            });
            //指定节点后 after
            $("button:eq(2)").click(function () {
                $(".box").after("<p>写入P后</p>");
            });
            //指定节点前 before
            $("button:eq(3)").click(function () {
                $(".box").before("<p>写入P前</p>");
            });
        });
    </script>
    <style>
        .box{
            background: violet;
            padding:10px;
        }
        p{
            background: wheat;
            padding: 10px;
        }
    </style>
</head>
<body>
    <button>插入div尾</button>
    <button>插入div头</button>
    <button>写入div尾</button>
    <button>写入div头</button>
    <br><br>
    <div class="box">
        p标签
        <p>div</p>
    </div>
</body>

克隆节点

<head>
    <script src="../js/jquery-1.11.1.js"></script>
    <script>
        $(function(){
            //克隆div参数true   clone
            $("button:eq(0)").click(function(){
                $("body").append($(".box").clone(true));
            }); 
            //克隆div参数false  clone
            $("button:eq(1)").click(function () {
                $("body").append($(".box").clone(false));
            });
            $("button:last").click(function(){
                alert("嘿嘿嘿!!");
            });
        });
    </script>
    <style>
        .box{
            background: violet;
            padding:10px;
            border: red 2px solid;
        }
        p{
            background: wheat;
            padding: 10px;
        }
    </style>
</head>
<body>
    <button>克隆div参数true</button>
    <button>克隆div参数false</button>
    <br><br>
    <div class="box">
        p标签
        <button>点击看看</button>
        <p></p>
    </div>
    <p>p</p>
</body>

替换节点

<head>
    <script src="../js/jquery-1.11.1.js"></script>
    <script>    
        $(function(){

            //替换div  replaceWith  
            $("button:eq(0)").click(function(){
                $("div").replaceWith("<p>替换标签</p>");
            });
            //替换div  replaceWith  
            $("button:eq(1)").click(function(){
                $("p").replaceWith("<p>替换标签</p>");
            });

            //替换div     replaceAll
            $("button:eq(2)").click(function(){
                $("<p>替换标签</p>").replaceAll("div");
            });
            //替换p     replaceAll
            $("button:eq(3)").click(function(){
                $("<p>替换标签</p>").replaceAll("p");
            });
        });
    </script>
    <style>
        div {
            background: violet;
            padding: 10px;
            border: red 2px solid;
        }
        p {
            background: wheat;
            padding: 10px;
        }
    </style>
</head>
<body>
    <button>替换全部div replaceWith</button>
    <button>替换全部p replaceWith</button>
    <button>替换全部div replaceAll</button>
    <button>替换全部p replaceAll</button>
    <br><br>
    <div class="box">
        div
        <p>p</p>
    </div>
    <p>p</p>
    <div>div</div>
</body>

删除节点

<head>
    <script src="../js/jquery-1.11.1.js"></script>
    <script>    
        $(function(){
            //删除所有div  remove  
            $("button:eq(0)").click(function(){
                $("div").remove();
            });
            //删除所有div  empty  
            $("button:eq(1)").click(function(){
                $("div").empty();
            });
            
        });
    </script>
    <style>
        div {
            background: violet;
            padding: 10px;
            border: red 2px solid;
        }
        p {
            background: wheat;
            padding: 10px;
        }
    </style>
</head>
<body>
    <button>删除所有div remove</button>
    <button>删除所有div empty</button>
    <br><br>
    <div class="box">
        div
        <p>p</p>
    </div>
    <p>p</p>
    <div>div</div>
</body>

# JQuery 遍历

变量方式一共有四种：

传统for循环
jq集合 each() 循环
jq方法 each() 循环
for of 循环

后面三种注意 jq对象集合 遍历使用

# for循环

let arr = [1,2,3,4];
for(let i = 0 ; i < arr.length ; i++){...}

# each()1 循环

let arr = [1,2,3,4];
$(arr).each(function(i , e){...});

# each()2 循环

let arr = [1,2,3,4];
$.each($(arr) , function(i , e){...});

# for of 循环

let arr = [1,2,3,4];
for(let e of $(arr)){...}

# 整体展示

let arr = [1,2,3,4,5,6];

// no1
console.log("no1:")
for (let i = 0; i < arr.length ; i++) {
    console.log(arr[i]);
}

// no2
console.log("no2:")
$(arr).each(function (i , e) {
    console.log(i,e)
});

// no3
console.log("no3:")
$.each($(arr), function (i, e) {
    console.log(i,e);
});

// no4
console.log("no4")
for (let e of $(arr)) {
    console.log(e);
}

# JQuery 插件

# 扩展机制

jQuery提供的 ==jQuery.fn.extend()==/==jQuery.extend()== (全局扩展/对象扩展），扩展jQuery的功能

实现实例：

// 对象扩展方法
jQuery.fn.extend({
	getText:function () {
	    return $(this).text();
	},
	getHtml:function () {
	    return $(this).html();
	}
})
// 应用:  $(..).getHtml(); / $(..).getText();

// 全局扩展方法
// 扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
$.extend({
    min:function (a,b) {
        return a<b?a:b;
    },
    max:function (a,b) {
        return a>b?a:b;
    }
})
// 应用 $.min(1,2) / $.max(23,2)

# Validator表单验证插件

插件网站： https://www.jq22.com/jquery-info743

插件应用

$(“<form表单的选择器>”).validate({
  // 设置约束规则
  rules:{
   <表单选项name值>:<验证规则> [, <表单项name值>:<验证规则>]
 },
  // 验证失败提示
  messages:{
   <表单项name值>:<错误提示信息> [, <表单项name值>:<错误提示信息>]
 }
});

当验证失败显示效果未达到预期时，可按照以下方式自定义错误显示标签

<lable for="<表单项name值>" class="error" style="display:none">错误信息</lable>

验证规则

属性名	值	描述
`required`	boolean	是否必填
`email`	boolean	验证邮箱
`url`	boolean	验证地址
`date`	boolean	验证日期
`dateISO`	boolean	验证日期(ISO)
`number`	boolean	合法数值(包含负数/小数)
`digits`	boolean	输入整数
`equalTo`	JQ对象	比较两值是否相同
`accept`	String	验证符合后缀的字符串
`maxlength`	Number	最多输入长度为 <参数> 的字符串
`minlength`	Number	至少输入长度为 <参数> 的字符串
`rangelength`	[Number1 , Number2]	指定输入长度为 [Number1 , Number2] 个的字符串
`range`	[Number1 , Number2]	指定输入值为 Number1至Number2 的范围值
`max`	Number	输入值不能大于 Number
`min`	Number	输入值不能小于 Number

# 自定义验证方法

步骤：

使用$.validator.addMethod(<校验规则名称>,function(value,element,params) {...}) value：组件value值；element：组件节点对象；params：验证规则的参数
在 rules 中通过 校验规则名称 使用校验规则
在 messages 中定义该规则对应的错误提示信息

#JQuery

上次更新: 2023/03/12, 00:43:49

← Bootstrap TypeScript→