案例一：下拉列表左右选择

<body>

    <div>

        <select style="width:60px" multiple size="10" id="leftID">

            <option>选项A</option>

            <option>选项B</option>

            <option>选项C</option>

            <option>选项D</option>

            <option>选项E</option>

        </select>

    </div>

    <div style="position:absolute;left:100px;top:60px">

        <input type="button" value="批量右移" id="rightMoveID" />

    </div>

    <div style="position:absolute;left:100px;top:90px">

        <input type="button" value="全部右移" id="rightMoveAllID" />

    </div>

    <div style="position:absolute;left:220px;top:20px">

        <select multiple size="10" style="width:60px" id="rightID"></select>

    </div>

</body>

<script type="text/javascript">

    //双击右移

    //定位左边的下拉框，同时添加双击事件

    $("#leftID").dblclick(function() {

        //获取双击时选中的option标签

        var $option = $("#leftID option:selected");

        //将选中的option标签移动到右边的下拉框中

        $("#rightID").append($option);

    });

    //批量右移

    //定位批量右移按钮，同时添加单击事件

    $("#rightMoveID").click(function() {

        //获取左边下拉框中选中的option标签

        var $option = $("#leftID option:selected");

        //将选中的option标签移动到右边的下拉框中

        $("#rightID").append($option);

    });

    //全部右移

    //定位全部右移按钮，同时添加单击事件

    $("#rightMoveAllID").click(function() {

        //获取左边下拉框中所有的option标签

        var $option = $("#leftID option");

        //将选中的option标签移动到右边的下拉框中

        $("#rightID").append($option);

    });

</script>

案例二：动态添加标签事件

<body>

    <table id="tableID" border="1" align="center" width="60%">

        <tr>

            <th>用户名</th>

            <th>密码</th>

            <th>操作</th>

        </tr>

        <tbody id="tbodyID"></tbody>

    </table>

    <hr />

    用户名：

    <input type="text" id="usernameID" /> 密码：

    <input type="text" id="passwordID" />

    <input type="button" value="增加" id="addID" />

</body>

<script type="text/javascript">

    //定位"增加"按钮，同时添加单击事件

    $("#addID").click(function() {

        //获取用户名和密码的值

        var username = $("#usernameID").val();

        var password = $("#passwordID").val();

        //去掉二边的空格

        username = $.trim(username);

        password = $.trim(password);

        //如果用户名或密码没有填

        if (username.length == 0 || password.length == 0) {

            //提示用户

            alert("用户名或密码没有填");

        } else {

            //创建1个tr标签

            var $tr = $("<tr></tr>");

            //创建3个td标签

            var $td1 = $("<td>" + username + "</td>");

            var $td2 = $("<td>" + password + "</td>");

            var $td3 = $("<td></td>");

            //创建input标签，设置为删除按钮

            var $del = $("<input type='button' value='删除'>");

            //为删除按钮动态添加单击事件

            $del.click(function() {

                //删除按钮所有的行，即$tr对象

                $tr.remove();

            });

            //将删除按钮添加到td3标签中

            $td3.append($del);

            //将3个td标签依次添加到tr标签中

            $tr.append($td1);

            $tr.append($td2);

            $tr.append($td3);

            //将tr标签添加到tbody标签中

            $("#tbodyID").append($tr);

            //清空用户名和密码文本框中的内容

            $("#usernameID").val("");

            $("#passwordID").val("");

        }

    });

</script>

案例三：全选反选

<body>

    <table border="1" align="center">

        <tr>

            <th>状态</th>

            <th>用户名</th>

        </tr>

        <tbody>

            <tr>

                <td><input type="checkbox" /></td>

                <td>赵</td>

            </tr>

            <tr>

                <td><input type="checkbox" /></td>

                <td>钱</td>

            </tr>

            <tr>

                <td><input type="checkbox" /></td>

                <td>孙</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td><input type="checkbox" /> 全选</td>

                <td><input type="button" value="全反选" /></td>

            </tr>

        </tfoot>

    </table>

    <script type="text/javascript">

        //全选中和全取消

        //定位tfoot中的全选复选框，同时添加单击事件

        $("tfoot input:checkbox").click(function() {

            //获取该全选复选框的状态

            var flag = this.checked;

            //如果选中

            if (flag) {

                //将tbody中的所有复选框选中

                $("tbody input:checkbox").attr("checked", "checked");

                //如果未选中

            } else {

                //将tbody中的所有复选框取消

                $("tbody input:checkbox").removeAttr("checked");

            }

        });

        //全反选

        //定位tfoot标签中的全反选按钮，同时添加单击事件

        $("tfoot input:button").click(

                function() {

                    //将tbody标签中的所有选中的复选框失效

                    $("tbody input:checkbox:checked").attr("disabled",

                            "disabled");

                    //将tbody标签中的所有生效的复选框选中

                    $("tbody input:checkbox:enabled")

                            .attr("checked", "checked");

                    //将tbody标签中的所有生效的复选框生效且设置为未选中

                    $("tbody input:checkbox:disabled").removeAttr("disabled")

                            .removeAttr("checked");

                });

    </script>

</body>

案例四：输入框暗影提示

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style type="text/css">

    .myClass {

        color: inactivecaption

    }

</style>

<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>

</head>

<body>

    <table border="1" align="center">

        <tr>

            <th>用户名</th>

            <td><input type="text" value="输入用户名" /></td>

        </tr>

    </table>

    <script type="text/javascript">

        //当浏览器加载web页面时

        $(function() {

            //将文本框中的文本样式改变

            $(":text").addClass("myClass");

        });

        //当光标定位文本框时

        $(":text").focus(function() {

            //清空文本框中的内容

            $(this).val("");

            //删除文本框的样式

            $(this).removeClass("myClass");

        });

        //当文本框失去焦点时

        $(":text").blur(function() {

            //获取文本框中填入的内容

            var content = $(this).val();

            //去二边的空格

            content = $.trim(content);

            //如果没填了内容

            if (content.length == 0) {

                //在文本框显示提示信息

                $(":text").val("输入用户名");

                //设置文本框中文本的样式

                $(":text").addClass("myClass");

            }

        });

    </script>

</body>

jQuery的DOM操作小案例的更多相关文章

[jQuery学习系列六]6-jQuery实际操作小案例
前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...
第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
js，jQuery和DOM操作的总结（二）
jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...
jQuery – 3.JQuery的Dom操作
3.1 JQuery的Dom操作 1.使用html()方法读取或者设置元素的innerHTML 2.使用text()方法读取或者设置元素的innerText 3.使用attr() ...
jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类核心-DOM: DOM Co ...
解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
03-老马jQuery教程-DOM操作
jQuery DOM操作在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
Jquery所有Dom操作汇总
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
js，jQuery和DOM操作的总结（一）
废话不说,直接上图一 js的基本操作 (1)js 的六种数据类型 var n4;//六种数据类型用typeof来确定类型,Null类型的用typeof是不行的,这个是特殊 alert(typeof ...

随机推荐

Spring AOP 性能监控器
spring,真是一个好东西:性能,真是个让人头疼又不得不面对的问题.如何排查出项目中性能瓶颈?如何迅速定位系统的慢查询?在这我就不说spring自带的性能监控器了,实在是有些简陋.下面就说说我自己写 ...
hdu 4267
一个很不错的题: 刚刚看到这个题目就感觉要用线段树或者树状数组,但是有感觉有点不同: 敲了一发简单的线段树之后果断的T了: 网上一搜题解,发现要用55颗线段树或者树状数组: 一共有k种树,然后每种树根 ...
ASP.NET 弹出对话框和页面之间传递值的经验总结
今天碰到一个弹出对话框(PopUp dialog)的问题, 因该是个傻瓜问题, 但是还是让我研究了半天, 总结了一些前人经验, 拿出来跟大家分享一下! 在ASP.Net中页面之间的传值方法有很多,但是 ...
VMware与宿敌Amazon一笑泯恩仇：重新定义混合云？（私有云节节败退）
摘要: 私有云巨头VMware看来是真的要输给一个“书贩子” 了!这意味着私有云将败给公有云? [阅读原文] 三年前,虚拟化巨头VMware曾对亚马逊Amazon云服务AWS竖过中指:我们怎么可能打不 ...
linux 匹配查询列表中包含某一特殊字符的所有行中的某一列
命令: ll | grep sh | awk '{print $9}' 解析: 其中,匹配列的命令为awk '{print $n}',$n为匹配的第几列.
Android DownloadThread.run()学习
android系统的下载代码写的很好,考虑的比较全面,值得我们学习.DownloadThread是其中执行下载的部分,下面从run进行研究. run(){ 一上来会设置一下下载线程的优先级:THREA ...
bzoj3262
三维裸的做法是一维排序,剩下树套树,可我好像还没写过树套树先说cdq分治吧,先对一维排序,相当于原来修改询问里的时间线在这上面分治.划分,计算前半部分对后半部分的影响,显然可以按第二维的顺序维护树状数 ...
加快VisualStudio的开发速度--VS的一些开发技巧
最近不得不使用VisualStudio来进行一些开发,用习惯了Eclipse,感觉VS很难上手,不过通过google,把VS进行Eclipse化,顺便记录下来,以防忘记. 1)显示文字的自动完成. 改 ...
windows播放声音
一般播放MP3常见的有两种方法,一种是自己解码,另外一种用系统的库,比如MCI,当然如果可以用控件直接用个控件会更方便. 1. 使用mci #include <windows.h> ...
【 D3.js 选择集与数据详解 — 3 】绑定数据的顺序
data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0 ...

jQuery的DOM操作小案例

案例一：下拉列表左右选择

案例二：动态添加标签事件

案例三：全选反选

案例四：输入框暗影提示

jQuery的DOM操作小案例的更多相关文章

随机推荐

热门专题