jQuery应用实例

最新推荐文章于 2024-05-08 02:39:14 发布

1while(true){learn}

最新推荐文章于 2024-05-08 02:39:14 发布

阅读量991

点赞数 1

分类专栏： JavaWeb 文章标签： java

本文链接：https://blog.csdn.net/m0_55997161/article/details/124322828

版权

JavaWeb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script>
        $(function () {
            //给全选绑定单击事件
            $("#checkedAllBtn").click(function () {
                $(":checkbox").prop("checked",true);
            });
            //给全不选绑定单击事件
            $("#checkedNoBtn").click(function () {
                $(":checkbox").prop("checked",false);
            });
            //反选单击事件
            $("#checkedRevBtn").click(function () {
                //遍历所有的球类复选框
                $(":checkbox[name='items']").each(function () {
                    //对当前遍历到的球类复选框进行操作
                    this.checked=!this.checked;
                });
                //检查是否满选
                //获取全部球类个数
                var all = $(":checkbox[name='items']").length;
                //获取选中球的个数
                var choose = $(":checkbox[name='items']:checked").length;
                $("#checkedAllBox").prop("checked",all==choose);
            });
            //提交按钮单击事件
            $("#sendBtn").click(function () {
                //获取选中球的复选框
                $(":checkbox[name='items']:checked").each(function () {
                    alert(this.value);
                });
            });
            //给全选/全不选绑定单击事件
            $("#checkedAllBox").click(function () {
                $(":checkbox[name='items']").prop("checked",this.checked);
            });
            //给全部球类绑定单击事件
            $(":checkbox[name='items']").click(function () {
                var all = $(":checkbox[name='items']").length;
                //获取选中球的个数
                var choose = $(":checkbox[name='items']:checked").length;
                $("#checkedAllBox").prop("checked",all==choose);
            })
        });
    </script>
</head>
<body>
<form method="post"action="">
    你爱好的运动是？<input type="checkbox"id="checkedAllBox"/>全选/全不选
    <br/>
    <input type="checkbox"name="items"value="足球"/>足球
    <input type="checkbox"name="items"value="篮球"/>篮球
    <input type="checkbox"name="items"value="羽毛球">羽毛球
    <input type="checkbox"name="items"value="乒乓球"/>乒乓球
    <br/>
    <input type="button"id="checkedAllBtn"value="全 选"/>
    <input type="button"id="checkedNoBtn"value="全不选"/>
    <input type="button"id="checkedRevBtn"value="反选"/>
    <input type="button"id="sendBtn"value="提交"/>
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        select {
            width: 100px;
            height: 140px;
        }
        div {
            width: 130px;
            float: left;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script>
        $(function () {
            //选中添加到右边
            $("button:eq(0)").click(function () {
                $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
            });
            //全部添加到右边
            $("button:eq(1)").click(function () {
                $("select:eq(0) option").appendTo($("select:eq(1)"));
            });
            //删除到左边
            $("button:eq(2)").click(function () {
                $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
            });
            //全部删除到左边
            $("button:eq(3)").click(function () {
                $("select:eq(1) option").appendTo($("select:eq(0)"));
            });
        });
    </script>
</head>
<body>
<<div id="left">
    <select multiple="multiple" name="sel01">
        <option value="opt01">选项 1</option>
        <option value="opt02">选项 2</option>
        <option value="opt03">选项 3</option>
        <option value="opt04">选项 4</option>
        <option value="opt05">选项 5</option>
        <option value="opt06">选项 6</option>
        <option value="opt07">选项 7</option>
        <option value="opt08">选项 8</option>
    </select>
    <button>选中添加到右边</button>
    <button>全部添加到右边</button>
</div>
<div id="rigth">
    <select multiple="multiple" name="sel02">
    </select>
    <button>选中删除到左边</button>
    <button>全部删除到左边</button>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/css.css" />
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script>
        $(function () {
            //创建一个复用的function函数
            var deleteFun=function () {
                // 在事件响应的 function 函数中，有一个 this 对象。这个 this 对象是当前正在响应事件的dom对象。
                var $tr = $(this).parent().parent();
                var name = $tr.find("td:first").text();
                /**
                 * confirm 是 JavaScript 语言提供的一个确认提示框函数。你给它传什么，它就提示什么<br/>* 当用户点击了确定，就返回 true。当用户点击了取消，就返回 false
                 */
                if (confirm("你确定要删除["+name+"]")){
                    $tr.remove();
                }
                //return false; 可以阻止 元素的默认行为例如跳转。
                return false;
            };
            //[submit]按钮绑定单击事件
            $("#addEmpButton").click(function () {
                // 获取输入框，姓名，邮箱，工资的内容
                var name = $("#empName").val();
                var email = $("#email").val();
                var salary = $("#salary").val();
                // 创建一个行标签对象，添加到显示数据的表格中
                var $tr = $("<tr>" +
                    "<td>" + name + "</td>" +
                    "<td>" + email + "</td>" +
                    "<td>" + salary + "</td>" +
                    "<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
                    "</tr>");
                // 添加到显示数据的表格中
                $tr.appendTo($("#employeeTable"));
                // 给添加的行的 a 标签绑上事件
                $tr.find("a").click(deleteFun);
            });
            // 给删除的 a 标签绑定单击事件
            $("a").click(deleteFun);
        });
    </script>
</head>
<body>
<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th></th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5888</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8888</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>bobatom.com</td>
        <td>18888</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
    </tr>
</table>
<div id="formDiv">
    <h4>添加新员工</h4>
    <table>
        <tr>
            <td class="word">name:</td>
            <td class="inp">
                <input type="text"name="empName"id="empName"/>
            </td>
        </tr>
        <tr>
            <td class="word">email:</td>
            <td class="inp">
                <input type="text"name="email"id="email"/>
            </td>
        </tr>
        <tr>
            <td class="word">salary:</td>
            <td class="inp">
                <input type="text"name="salary"id="salary"/>
            </td>
        </tr>
        <tr>
            <td colspan="2"align="center">
                <button id="addEmpButton"value="abc">
                    Submit
                </button>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

<script>
        $(function() {
            // 基本初始状态
            $("li:gt(5):not(:last)").hide();

            // 给功能的按钮绑定单击事件
            $("div div a").click(function () {
                // 让某些品牌，显示，或隐藏
                $("li:gt(5):not(:last)").toggle();
                // 判断 品牌，当前是否可见
                if( $("li:gt(5):not(:last)").is(":hidden") ){
                    // 品牌隐藏的状态 ：1 显示全部品牌    == 角标向下 showmore
                    $("div div a span").text("显示全部品牌");

                    $("div div").removeClass();
                    $("div div").addClass("showmore");

                    // 去掉高亮
                    $("li:contains('索尼')").removeClass("promoted");

                } else {
                    // 品牌可见的状态：2 显示精简品牌	 == 角标向上 showless
                    $("div div a span").text("显示精简品牌");

                    $("div div").removeClass();
                    $("div div").addClass("showless");

                    // 加高亮
                    $("li:contains('索尼')").addClass("promoted");
                }

                return false;
            });
        });
    </script>

图片跟随

<script type="text/javascript">
        $(function(){
            $("#small").bind("mouseover mouseout mousemove",function (event) {
                if (event.type == "mouseover") {
                    $("#showBig").show();
                } else if (event.type == "mousemove") {
                    console.log(event);
                    $("#showBig").offset({
                        left: event.pageX + 10,
                        top: event.pageY + 10
                    });
                } else if (event.type == "mouseout") {
                    $("#showBig").hide();
                }
            });
        });
    </script>

1while(true){learn}

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery应用实例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script> $(function () {...
复制链接

扫一扫