jQuery效果_隔行变色_jQuery操作css/属性/DOM_JSON_表单校验

最新推荐文章于 2022-07-22 11:13:26 发布

Levana_123

最新推荐文章于 2022-07-22 11:13:26 发布

阅读量229

点赞数

分类专栏： Java Web开发文章标签： css jquery

本文链接：https://blog.csdn.net/qq_41541451/article/details/112368729

版权

Java Web开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

2021-01-08

主要内容：

1、jQuery动画效果

显示与隐藏：show，hide，toggle

淡入淡出：fadeIn，fadeOut，fadeToggle；淡入指的是针对与页面入的

划入划出：slideDown，slideUp，slideToggle；划入指的是针对页面划入

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #d1{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn10").click(function () {
                $("#d1").show("slow",function () {
                    alert("我显示完了");
                })
            });
            $("#btn11").click(function () {
                $("#d1").hide("slow");
            });

            $("#btn12").click(function () {
                $("#d1").toggle(5000);
            });
            $("#btn20").click(function () {
                $("#d1").fadeIn("slow");//淡入：淡入页面
            });
            $("#btn21").click(function () {
                $("#d1").fadeOut("slow");
            });
            $("#btn22").click(function () {
                $("#d1").fadeToggle("slow");
            });
            $("#btn30").click(function () {
                $("#d1").slideDown("slow");//划入：划入页面
            });
            $("#btn31").click(function () {
                $("#d1").slideUp("slow");
            });
            $("#btn32").click(function () {
                $("#d1").slideToggle("slow");
            });
        })
    </script>

</head>
<body>
<input type="button" id="btn10" value="显示">
<input type="button" id="btn11" value="隐藏">
<input type="button" id="btn12" value="显示隐藏切换"><br/>
<input type="button" id="btn20" value="淡入">
<input type="button" id="btn21" value="淡出">
<input type="button" id="btn22" value="淡入淡出切换"><br/>
<input type="button" id="btn30" value="划入">
<input type="button" id="btn31" value="划出">
<input type="button" id="btn32" value="划入划出切换"><br/>
<hr/>
<div id="d1"></div>
</body>
</html>

案例：

描述：页面加载后，3秒后右下角出现一幅广告图片（show），双击（dblclick）图片，隐藏（hide）

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #adv{
            width: 220px;
            height: 220px;
            border:1px solid pink;
            background-image: url("images/1.png");
            position: absolute;
            right: 0px;
            bottom: 0px;
            display: none;
        }
    </style>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            function showAdv() {
                $("#adv").show("slow");
            }
            setTimeout(showAdv,3000);//方法不能加括号
            $("#adv").dblclick(function () {//双击事件
                $(this).hide();
            })
        })
    </script>
</head>
<body>
<div id="adv"></div>
</body>
</html>

2、jQuery操作CSS

案例：1、表格隔行变色：

①：css（“样式属性”，“值”）或css（{“样式属性”：“值”，“样式属性”：“值”}）

获取样式：对象.css（“color”）；

设置样式：对象.css（“color”，“blue”）；

②：addClass：为每个匹配的元素添加指定的类名，来更改样式等

③：removeClass：从所有匹配的元素中删除全部或者指定的类。

④：toggleClass：如果存在（不存在）就删除（添加）一个类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        td,th{
            padding: 0px;
            border:1px solid black;
            width: 190px;
            height: 35px;
            text-align: center;
        }
        .even{
            background-color: #c3f3c3;
        }
        .odd{
            background-color: #f3c3f3;
        }
        .highLight{
            background-color: pink;
        }
    </style>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //头
            $("tr:eq(0)").css("backgroundColor","green");
            //隔行变色
            $("tr:gt(0):even").addClass("even");
            $("tr:gt(0):odd").addClass("odd");
            //高亮
            $("tr:gt(0)").mouseover(function () {
                $(this).addClass("highLight");
            }).mouseout(function () {
                $(this).removeClass("highLight");
            })
        })
    </script>
</head>
<body>
<table>
    <tr>
        <th><input type="checkbox" id="selectBtn"/>选择</th>
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>所属门派</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="userid" value="1"/></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td>华山派</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="userid" value="2"/></td>
        <td>2</td>
        <td>任盈盈</td>
        <td>女</td>
        <td>日月神教</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="userid" value="3"/></td>
        <td>3</td>
        <td>岳灵珊</td>
        <td>女</td>
        <td>华山派</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="userid" value="4"/></td>
        <td>4</td>
        <td>林平之</td>
        <td>男</td>
        <td>华山派</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="userid" value="5"/></td>
        <td>5</td>
        <td>岳不群</td>
        <td>男</td>
        <td>华山派</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="userid" value="6"/></td>
        <td>6</td>
        <td>左冷禅</td>
        <td>男</td>
        <td>嵩山派</td>
    </tr>
</table>
</body>
</html>

3、jQuery操作属性

attr或prop

操作checked、disabled、selected等属性时，可以使用prop

操作其他属性的标签属性时，使用attr。

注意：如果使用attr不行，就换prop（和jQuery的版本存在关系）

案例：

1、全选全不选反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //方式一：选项的状态和选择按钮保持一致
            $("#selector").click(function () {
                var selectorStatus = $(this).prop("checked");//获取selector状态
                $("input[name='hobby1']").prop("checked",selectorStatus);
            });
            //方式二
            $("#btn1").click(function () {
                $("input[name='hobby2']").prop("checked",true);
            });
            $("#btn2").click(function () {
                $("input[name='hobby2']").prop("checked",false);
            });
            $("#btn3").click(function () {
                //jquery的遍历
                $("input[name='hobby2']").each(function () {
                    //this表示当前遍历的元素，是dom对象
                    $(this).prop("checked",!$(this).prop("checked"));
                    //将获取name=hobby2的元素的checked属性的状态，并将其取反赋值给自己
                });
            });
        })
    </script>
</head>
<body>
<input type="checkbox" id="selector"/>选择<br/>
<input type="checkbox" name="hobby1" value="fb">足球
<input type="checkbox" name="hobby1" value="bb">篮球
<input type="checkbox" name="hobby1" value="ppb">乒乓球
<hr/>
<input type="button" id="btn1" value="全选"/>
<input type="button" id="btn2" value="全不选"/>
<input type="button" id="btn3" value="反选"/><br/>
<input type="checkbox" name="hobby2" value="fb"/>足球
<input type="checkbox" name="hobby2" value="bb"/>篮球
<input type="checkbox" name="hobby2" value="ppb"/>乒乓球
</body>
</html>

jQuery的each遍历.each

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                $("ul li").each(function () {
                    alert($(this).text())//text获取文本内容
                })
            })
        })
    </script>
</head>
<body>
<input id="btn1" type="button" value="打印"/>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
</ul>
</body>
</html>

4、jQuery操作DOM

案例：

省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var pros = ["北京市","山东省","广东省"];
            var citys = {
                "北京市":["东城区","西城区","朝阳区","丰台区","石景山区","海淀区","顺义 区","通州区","大兴区","房山区","门头沟区","昌平区","平谷区","密云区","怀柔区","延庆区"],
                "山东省":["济南市","青岛市","淄博市","枣庄市","东营市","烟台市","潍坊 市","济宁市","泰安市","威海市","日照市","滨州市","德州市","聊城市","临沂市","菏泽市"],
                "广东省":["广州市","深圳市","珠海市","汕头市","佛山市","江门市","湛江 市","茂名市","肇庆市","惠州市","梅州市","汕尾市","河源市","阳江市","清远市","东莞市","中山 市","潮州市","揭阳市","云浮市"]
            };
            //初始化省和市,添加子元素“选择”
            $("#province").html("<option value=''>==省份==</option>")//innerHTML
            $("#city").html("<option value=''>==城市==</option>");
            //初始化省份选择
            $(pros).each(function () {
                $("#province").append("<option value='"+this+"'>"+this+"</option>");
            })
            //注册事件
            $("#province").change(function () {
                $("#city").html("<option value=''>==城市==</option>");
                var cityOPtions = citys[$(this).val()];//获取省份对象的数组
                $(cityOPtions).each(function () {
                    $("#city").append("<option value='"+this+"'>"+this+"</option>");
                })
            })
        })
    </script>
</head>
<body>
地址：<select id="province" name="province"></select>
<select id="city" name="city"></select>
</body>
</html>

5、★★★★★JSON

JSON简介：

官方网站： https://www.json.org/json-zh.html

JSON (JavaScript Object Notation) ，是一种数据的描述方式。本身就是 javascript 的内容。

作用：目前现在开发中经常将 java 对象转换为 JSON 格式，将 JSON 格式解析成 java 对象。 ( 前后端分离开发所需)

JSON的数据格式：

JSON 的数据格式一共有两种：

第一种：键值对。主要用于描述对象。标志： {"key":value,"key":value,....}

{}

{”username“:"admin"}

{”username“:"admin","age":18}

第二种结构：数组结构。主要描述多个对象。标记： [ 元素 1, 元素 2,....]

[]

["a"]

["a","b"]

value的取值：

{”username“:"admin"}

{"age":18}

{"address":{"province":" 山东省 ","city":" 济南市 "}}

[{"province":" 山东省 ","city":" 济南市 "} ， {"province":" 山东省 ","city":" 青岛市 "}]

[["a"],["b","c"]]

6、表单校验

介绍：

jQuery本身是一个函数库，功能很强大。还支持扩展，扩展的部分就是jQuery的自定义内容。

表单验证就是基于 jQuery 的扩展产生的一个第三方的插件。功能就是方便对表单内容进行校验。

工具导入：

step1、先导入jQuery.js

step2、再导入jQuery.validate.js

step3、消息提示包message_zh.js

注意：必须按照这个顺序导入

表单绑定验证方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/messages_zh.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#f1").validate()
        })
    </script>
</head>
<body>
<form id="f1">
    用户名：<input type="text" id="username" required="true" rangelength="[3,6]"/>
    <input type="submit" value="提交"/>
</form>
</body>
</html>

指定验证规则

1、。validate()表单验证函数

rules：验证规则

message：提示信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/messages_zh.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#f1").validate({
                "rules":{//验证规则
                    "username":{//name属性
                        "required":true,
                        "rangelength":[3,6]
                    },
                    "password":{
                        "required":true,
                        "rangelength":[6,16]
                    },
                    "repassword":{
                        equalTo:"#password"//id选择器
                    },
                    "email":"email",
                    "birthday":{
                        "dateISO":"yyyy-MM-dd"
                    }
                }
            })
        })
    </script>
</head>
<body>
<form id="f1">
    用户名：<input type="text" id="username" name="username"/><br/>
    密码：<input type="password" id="password" name="password"/><br/>
    确认密码：<input type="password" id="repassword" name="repassword"/><br/>
    电子邮箱：<input type="text" id="email" name="email"/><br/>
    出生日期：<input type="text" id="birthday" name="birthday"/><br/>
    <input type="submit" value="提交"/>
</form>
</body>
</html>

Levana_123

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
jQuery效果_隔行变色_jQuery操作css/属性/DOM_JSON_表单校验

2021-01-081、jQuery动画效果显示与隐藏：show，hide，toggle淡入淡出：fadeIn，fadeOut，fadeToggle；淡入指的是针对与页面入的划入划出：slideDown，slideUp，slideToggle；划入指的是针对页面划入代码演示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&
复制链接

扫一扫