[JavaScript知识库] jQuery应用实例

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> jQuery应用实例 -> 正文阅读

[JavaScript知识库]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 () {
            //给全选绑定单击事件
            $("#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>