jQuery:案例

文章目录

(1) 案例1:简单计算器
(2) 案例2:使用class改变图片的样式
(3) 案例3: 全选反选取消

(1) 案例1:简单计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例-简单计算器</title>
</head>
<body>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        function js() {
            //输入的值就是value，jquery里是val
            var v_num1=$("#num1").val();
            var v_num2=$("#num2").val();
            //避免“+”连接字符串，乘1操作是数字
            var v_num3=(v_num1*1)+(v_num2*1);
            $("#num3").val(v_num3);
        }
    </script>

    第一个数<input id="num1">第二数<input id="num2"><input type="button" value="计算" onclick="js()"><br>
    结果<input id="num3">
</body>
</html>

(2) 案例2:使用class改变图片的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例-使用class改变图片的样式</title>
    <style type="text/css">
        .img{width: 70px;height: 70px;border-color: blue;border-style: solid;}
        .img2{border-color: red;border-style: solid}
    </style>
</head>
<body>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        function over() {
            $("img").removeClass("img2");
            $("#img").addClass("img");
        }

        function out() {
            $("#img").removeClass("img")
            $("#img").addClass("img2");
        }
    </script>

    <img alt="" src="../属性操作/JDBC本质.jpg" height="50" width="50"/>
    <img alt="" id="img" src="../属性操作/JDBC本质.jpg" height="50" width="50" onmousemove="over()" onmouseout="out()"/>
    <img alt="" src="../属性操作/JDBC本质.jpg" height="50" width="50"/>
</body>
</html>

(3) 案例3: 全选反选取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例-全选 反选 取消</title>
</head>
<body>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        function quanXuan() {
            var v_ahObj=$(".ah");
            for(var i in v_ahObj){
                $(v_ahObj[i]).attr("checked",true);
            }
        }
        function fanXuan() {
            var v_ahObj = $(".ah");
            for (var i in v_ahObj) {
                $(v_ahObj[i]).attr("checked",!$(this).attr("checked"));
            }
        }
        function quXiao() {
            var v_ahObj = $(".ah");
            for (var i in v_ahObj) {
                $(v_ahObj[i]).attr("checked", false);
            }
        }
    </script>

    <input type="button" value="全选" onclick="quanXuan()"/>
    <input type="button" value="反选" onclick="fanXuan()"/>
    <input type="button" value="取消" onclick="quXiao()"/><br>
    爱好：<input type="checkbox" class="ah">吃
        <input type="checkbox" class="ah">喝
        <input type="checkbox" class="ah">玩
        <input type="checkbox" class="ah">乐
</body>
</html>

灰色头像JH

发布了42 篇原创文章 · 获赞 8 · 访问量 2420

私信关注

文章目录

(1) 案例1:简单计算器

(2) 案例2:使用class改变图片的样式

(3) 案例3: 全选 反选 取消

猜你喜欢

(3) 案例3: 全选反选取消