jquery选择器

jquery选择器

表单对象属性过滤

• :checked

  多选框选中的(input)

• :selected

  下拉框选中的(selected)

• :enabled

  可用的

• :disabled

  不可用的

//<button id="btn1">对表单内 可用input 赋值操作.</button>
$("#btn1").click(function() {
    // $(":not([disabled])").css("background-color", "red");
    $("input:enabled").css("background-color", "red");
});

//<button id="btn2">对表单内 不可用input 赋值操作.</button>
$("#btn2").click(function() {
    $("input:disabled").css("background-color", "red");
})

//<button id="btn3">获取多选框选中的个数.</button>
$("#btn3").click(function () {
    console.log($("input:checked").length);
})

//<button id="btn4">获取下拉框选中的个数.</button>
$("#btn4").click(function() {
    console.log($("option:selected").length);
})

可见性过滤

• :visible

  显示的

• :hidden

  隐藏的

// <input type="button" value=" 选取所有可见的div元素" id="b1"/>
$("#b1").click(function() {
    // 将jquery对象，转换成js对象
    let visibleElement = $("div:visible");
    for (let element of visibleElement) {
        console.log(element);
    }
});

// <input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/>
$("#b2").click(function() {
    let hiddenElement = $("div:hidden");
    hiddenElement.show();
    // for (let element of hiddenElement) {
    //     console.log(element);
    // }
})

内容过滤选择器

• :has(sel)

$("#btn1").click(function() {
    $("div:has(.mini)").css("background-color", "red");
});

表单元素选择器

• :input
• :text

$("#btn1").click(function() {
    let inputs = $(":input");
    for (let input of inputs) {
        console.log(input);
    }
})

$("#btn2").click(function() {
    let texts = $(":text");
    for (let text of texts) {
        console.log(text);
    }
})

dom操作

• val()

  获取或设置value属性

• text()

  获取或设置innerText

• html()

  获取或设置innerHTML

• prop()

  获取或设置标签属性

• attr()

  获取或设置标签属性

• addClass()

  添加class

• removeClass()

  删除class

            // <button id="btn1">获取input的value值</button>
            $("#btn1").click(function() {
                console.log($("#myinput").val());
            })

            // <button id="btn2">设置input的value值</button>
            $("#btn2").click(function() {
                $("#myinput").val("lisi");
            })

            // <button id="btn3">给p标签，设置innerText</button>
            $("#btn3").click(function() {
                $("p").text("<font color='red'>早起能解决99%的问题</font>")
            })

            // <button id="btn4">获取p标签的innerText</button>
            $("#btn4").click(function() {
                console.log($("p").text());
            })

            // <button id="btn5">给p标签，设置innerHTML</button>
            $("#btn5").click(function() {
                $("p").html("<font color='red'>早起能解决99%的问题</font>");
            })

            // <button id="btn6">获取p标签的innerHTML</button><br/>
            $("#btn6").click(function() {
                console.log($("p").html());
            })

            //1给username添加title属性
            $("#btn1").click(function() {
                // $("[name=username]").attr()
                $("[name=username]").prop("title", "title........");
            });

            //2获取username的title属性
            $("#btn2").click(function() {
                console.log($("[name=username]").prop("title"));
            });

            //3给username添加value和class属性
            $("#btn3").click(function() {
                $("[name=username]").val("lisi");
                $("[name=username]").prop("class", "textClass");
            });

            //4删除username的class属性
            $("#btn4").click(function() {
                $("[name=username]").prop("class", "");
            });

            //5给username添加一个名为textClass的样式
            $("#btn5").click(function() {
                $("[name=username]").addClass("textClass");
            });

            //6删除username的名为textClass的样式
            $("#btn6").click(function() {
                $("[name=username]").removeClass("textClass");
            });

css样式操作

• css()

//1 给div添加边框样式
$("#btn1").click(function() {
    $("div").css("border", "1px solid red");
})

//2 获取div的边框样式
$("#btn2").click(function() {
    console.log($("div").css("border"));
})

//3 给div添加多种样式
$("#btn3").click(function() {
    // $("div").css("background-color", "blue"
    // $("div").css("width", "100px");
    $("div").css({
        "background-color": "blue",
        "width": "100px"
    });
})

//4 获取div的高和宽
$("#btn4").click(function() {
    console.log($("div").css("height"));
    console.log($("div").css("width"));
})

元素的创建与插入

• append()
• prepend()
• after()
• before()
• appendTo()
• prependTo()
• insertAfter()
• insertBefore()

$("#b1").click(function() {
    // 内部追加
    // $("#div2").append("<span>new span</span>");
    $("<span>new span</span>").appendTo($("#div2"));
});

$("#b2").click(function() {
    // 内部前面
    // $("#div2").prepend("<span>new span</span>");
    $("<span>new span</span>").prependTo($("#div2"));
});

$("#b3").click(function() {
    // 外部后面
    // $("#div2").after("<div></div>");
    $("<div></div>").insertAfter($("#div2"));
});

$("#b4").click(function() {
    // 外部前面
    // $("#div2").before("<div></div>");
    $("<div></div>").insertBefore($("#div2"));
});

元素删除与置空

• empty()

  置空，除了自己之外，标签体的所有内容，全部删除
  与text("")等价

• remove()

  删除元素

效果

• hide()

  隐藏元素

• show()

  显示元素

• toggle()

  切换显示/隐藏

• slideUp()

  滑出

• slideDown()

  滑入

• slideToggle()

  滑入/滑出切换

• fadeOut()

  淡出

• fadeIn()

  淡入

• fadeToggle()

  淡出/淡入切换

$("#b1").click(function() {
    $("#b1Div").hide();
})

$("#b2").click(function() {
    $("#b1Div").show();
})

$("#b3").click(function() {
    $("#b1Div").toggle();
})

$("#b4").click(function() {
    $("#b2Div").slideUp(15000);
})

$("#b5").click(function() {
    $("#b2Div").slideDown(15000);
})

$("#b6").click(function() {
    $("#b2Div").slideToggle(15000);
})

$("#b7").click(function() {
    $("#b3Div").fadeOut(5000);
})

$("#b8").click(function() {
    $("#b3Div").fadeIn(5000);
})

$("#b9").click(function() {
    $("#b3Div").fadeToggle(5000);
})

jquery深入

遍历

• for-of
• arr.forEach(function(element, index) {...})
• $(arr).each(function(index, element) {...})
• $.each(arr, function(index, element) {...})

$("#b1").click(function() {
    $(":input:hidden").each(function(index, element) {
        // 注意: element为js对象，并不是jquery对象
        console.log(element.value);
    })

    // let hiddens = $(":input:hidden");
    // for (let hidden of hiddens) {
    //     console.log(hidden.value);
    // }
});

$("#b2").click(function() {
    $.each($(":input:hidden"), function(index, element) {
        console.log(element.value);
    });
});

$("#b3").click(function() {
    let arr = ["zero", "one", "two", "three"];
    $(arr).each(function(index, element) {
        console.log(element);
    })
    // $.each(arr, function(index, element) {
    //     console.log(element);
    // })
});

jquery-validate插件

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/jquery.validate.js"></script>
    <script>
        $(function() {
            $("#formId").validate({
                rules: {
                    username: "required",
                    password: {
                        required: true,
                        number: true
                    },
                    repassword: {
                        required: true,
                        equalTo: "[name=password]"
                    },
                    zuixiaozhi: {
                        min: 15
                    },
                    shuzhiqujian: {
                        // min: 10,
                        // max: 20
                        range: [15, 20]
                    },
                    gender: "required"
                },
                messages: {
                    username: "用户名必填",
                    password: {
                        required: "密码必填",
                        number: "必须是一个合法的数字"
                    },
                    repassword: "重复必填，并且与密码一致",
                    zuixiaozhi: "最小值为{0}",
                    shuzhiqujian: "数值必须在{0}和{1}之间",
                    gender: "性别必填"
                }
            })
        });
    </script>
</head>

<body>
<form id="formId" action="">
    必填：<input type="text" name="username"/> <br/>
    必填数字：<input type="text" name="password"/> <br/>
    必填重复：<input type="text" name="repassword"/> <br/>
    最小值：<input type="text" name="zuixiaozhi"/> <br/>
    区间：<input type="text" name="shuzhiqujian"/> <br/>
    性别：<input type="radio" name="gender"/>男
    <input type="radio" name="gender"/>女
    <label id="gender-error" class="error" for="gender"></label>
    <br/>
    <input type="submit" value="提交"/>
</form>
</body>
</html>