JQuery 的几个简单实现示例

最新推荐文章于 2024-05-08 02:39:14 发布
最新推荐文章于 2024-05-08 02:39:14 发布
阅读量2.3k 收藏 11
点赞数 2
分类专栏： javaScript 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxf512666/article/details/52905906
版权
几种常见选择器的练习例题 熟练使用JQuery操作表单元素
一、实现表格 隔行变色（例题都引入了css做表单的样式设置）
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

     $(function(){
            //1. 点击所有的 p 节点, 能够弹出其对应的文本内容
         $("p").click(function(){
            alert("^^["+this.innerHTML+"]");
        });
        //2. 使第一个 table 隔行变色（从第一行开始变）
         $("table:first tr:even").css("background-color","#00ff00");
        //2. 使二个 table 隔行变色（从第二行开始变）
         $("table:eq(1) tr:odd").css("background-color","#ff0000");
        //3. 点击 button, 弹出 checkbox 被选中的个数
        $("button").click(function(){
             alert($(":checked").length);
        });
     });

    </script>
</head>
<body>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>

    <table>
        <tr>
            <td>第一行</td><td>第一行</td>
        </tr>
        <tr>
            <td>第二行</td><td>第二行</td>
        </tr>
        <tr>
            <td>第三行</td><td>第三行</td>
        </tr>
        <tr>
            <td>第四行</td><td>第四行</td>
        </tr>
        <tr>
            <td>第五行</td><td>第五行</td>
        </tr>
        <tr>
            <td>第六行</td><td>第六行</td>
        </tr>
    </table>
    <br/>
    <hr/>
    <table>
        <tr>
            <td>第一行</td><td>第一行</td>
        </tr>
        <tr>
            <td>第二行</td><td>第二行</td>
        </tr>
        <tr>
            <td>第三行</td><td>第三行</td>
        </tr>
        <tr>
            <td>第四行</td><td>第四行</td>
        </tr>
        <tr>
            <td>第五行</td><td>第五行</td>
        </tr>
        <tr>
            <td>第六行</td><td>第六行</td>
        </tr>
    </table>

    <input type="checkbox" name="test" />
    <input type="checkbox" name="test" />
    <input type="checkbox" name="test" />
    <input type="checkbox" name="test" />
    <input type="checkbox" name="test" />
    <input type="checkbox" name="test" />
    <button>您选中的个数</button>
</body>
</html>

效果如下：
这里写图片描述

这里写图片描述

二、checkbox实现全选 全不选 反选
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
    //全选按钮
    $("#checkedAllBtn").click(function(){
        $(":checkbox").prop("checked",true);
    });
    //全不选按钮
    $("#checkedNoBtn").click(function(){
        $(":checkbox").prop("checked",false);
    });
    //反选按钮
    $("#checkedRevBtn").click(function(){
        var $checkBox=$("input[name]");
        $checkBox.each(function(){
            this.checked=!this.checked;
        });

    $("#checkedAllBox").prop("checked",($("input[name]:checked").length==$("input[name]").length));
    });
    //提交按钮
    $("#sendBtn").click(function(){
        var $checkBox=$("input[name]:checked");
        $checkBox.each(function(){
            alert(this.value);
        });
    });
    //全选/全不选 复选框
    $("#checkedAllBox").click(function(){
        $("input[name]").prop("checked",this.checked);
    });

    //全选/全不选复选框与items状态同步
    $("input[name]").click(function(){
        $("#checkedAllBox").prop("checked",($("input[name]:checked").length==$("input[name]").length));
    });
});
</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>

效果如下：
这里写图片描述

这里写图片描述

三、实现表单选择
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 第一步，一定要先引入jquery文件

// 第二步：书写页面加载完成之后
$(function() {
// 设置单选的下拉列表第三个被选中
//给第一个按钮绑定单击事件
$("input[type='button']:eq(0)").click(function(){
    $("#single").val(['s3']);
});
// 设置多选的下拉列表同时选中第二个和第四个
// 给第二个按钮绑定单击事件
$("input[type='button']:eq(1)").click(function(){
    $("#multiple").val(['x2','x4']);
});
// 给第三个按钮绑定单击事件
// 设置多选框的2号和4号被选中
$("input[type='button']:eq(2)").click(function(){
    $(":checkbox").val(['check2','check4']);
});
// 给第四个按钮绑定单击事件
// 设置单选框2号被选中
$("input[type='button']:eq(3)").click(function(){
    $(":radio").val(['radio2']);
});
//打印所有被选中的值 低五个按钮
$("input[type='button']:eq(4)").click(function(){
    $(":checked").each(function(){
        alert(this.value);
    });
});

});
</script>
</head>
<body>
<input type="button" value="使单选下拉框的'选择3号'被选中" />
<input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中" />
<br>
<input type="button" value="使多选框的'多选2'和'多选4'被选中" />
<input type="button" value="使单选框的'单选2'被选中" />
<br>
<input type="button" value="打印已经被选中的值">
<br>

<br />

<select id="single" name="singlecheck">
    <option value="s1">选择1号</option>
    <option value="s2">选择2号</option>
    <option value="s3">选择3号</option>
</select>

<select id="multiple" multiple="multiple" name="multiplecheck"
    style="height: 120px;">
    <option selected="selected" value="x1">选择1号</option>
    <option value="x2">选择2号</option>
    <option value="x3">选择3号</option>
    <option value="x4">选择4号</option>
    <option selected="selected" value="x5">选择5号</option>
</select>

<br />
<br />

<input type="checkbox" name="c" value="check1" /> 多选1
<input type="checkbox" name="c" value="check2" /> 多选2
<input type="checkbox" name="c" value="check3" /> 多选3
<input type="checkbox" name="c" value="check4" /> 多选4

<br />

<input type="radio" name="r" value="radio1" /> 单选1
<input type="radio" name="r" value="radio2" /> 单选2
<input type="radio" name="r" value="radio3" /> 单选3
</body>
</html>

效果如下：

这里写图片描述

四、将下拉框左边选中的移动到右边 右边选中的移动到左边
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
    select {
        width: 100px;
        height: 140px;
    }

    div {
        width: 130px;
        float: left;
        text-align: center;
    }
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
  $("button:eq(0)").click(function(){
       //获取左边的下拉框被选中的并移动选中的到右边
       $("select[name='sel01']>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[name='sel02']>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>

效果如下：

这里写图片描述

这里写图片描述

这里写图片描述

五、添加或者从表格中删除对象

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
   $(function(){
   function deleteRow(){

     var $row=$(this).parent().parent();

     var name = $row.find("td").first().html();
     var result = confirm("你确定要 删除 [" + name + "] 吗？")          
//          alert(result);
        // 如果用户点击了确认。就可以将所在行删除
        if (result) {
            //remove方法将tr标签从页面中删除
            $row.remove();
        } 
        // 阻止标签的默认行为 
        return false;
    };

    $("a").click(deleteRow);

    $("#addEmpButton").click(function(){
        // 1.获取文本框里输入的内容，name，email，salary
        var nameText = $("#empName").val();
        var emailText = $("#email").val();
        var salaryText = $("#salary").val();

// alert("姓名：" + nameText + ",邮件：" + emailText+",工资：" + salaryText);
        var $newTrObj = $("<tr><td>" + nameText +  "</td><td>" + emailText + "</td><td>" 
                + salaryText + "</td><td><a href='delete=1234'>" 
                + "Delete</a></td></tr>");
        // 把新创建的tr标签对象添加到第一个table中
        $newTrObj.appendTo("#employeeTable");

        // 查找最后一个创建的a标签对象
        // $("a:last");

        // 通过当前行对象，查找后代元素中a标签对象
        $newTrObj.find("a").click(deleteRow);
    });
   });
</script>
</head>
<body>
<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</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>

效果如下：
这里写图片描述

这里写图片描述

NoBugNoCode
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery小案例
weixin_49756484的博客
05-18 827
jQuery小案例 这篇文章我们主要是讲如何改变网页的背景颜色和改变背景图片以及计算器这三个小案例，我们将用到jQuery的方式去实现效果 我们先开始如何该表网页的背景颜色： 第一步：还是老规矩，先把页面新建好，在开始写我们的代码 第二步：开始写我们的html和css样式。这里我就把html和css样式的代码省略了，（图表1 则是我写的最终效果） 图表 1 样式写出来了，可是不我想要的一个效果，我想要的是点击一下红色方块整个网页的背景就变成了红色，点击绿色方块整个网页又变成了绿色，这个效果该
jQuery实现的简单拖动层示例
12-10
在这个代码中，主要使用了jQuery的几个关键方法： 1. `mousedown`：当鼠标按键被按下时触发。在这个事件处理器中，我们初始化一些变量，如`fx`和`fy`记录鼠标按下的位置，以及`top`和`left`记录元素初始位置。 2. ...
jquery简单案例
mockingbirds的专栏
06-28 2953
昨天写了一篇关于jquery选择器的学习的记录，后边发现关于jquery的学习不能只依靠简单的文档，必须动手写出一些实际的东西，这样会学习的更好，今天呢，就给大家带来利用jquery实现文字和图片提示的效果。jquery文字提示先看下效果： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"/
最新JQuery 入门 - 附案例代码_jquery前端开发实战教程案例源码，2024年最新阿里三面
最新发布
2401_84185556的博客
05-08 1003
/通过给$.fn添加方法就能够扩展jquery对象});});标题1我是弹出来的div1◆◆◆});});});
jQuery项目案例
qq_52108058的博客
06-27 4839
2、微博发布 3、移动水果 4、上下拉切换 5、精品演示 6、tab标签切换 7、突出显示 总结 li:first li:last li:eq(2) li:odd --奇数 li:even --偶数 ul li --子代 ul
jquery 示例_最好的jQuery示例
cumian9828的博客
08-14 476
jquery 示例jQuery is the most widely-used JavaScript library, and is used in more than half of all major websites. It's motto is "write less, do more...!" jQuery是使用最广泛JavaScript库，并在所有主要网站的一半以上中使用。 座右铭是“...
几个简单常用的jQuery实例
weixin_30616969的博客
06-30 583
　　000模态框+事件委托+data实现编辑 　　000-1、效果如下 　　000-2、代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <s...
jquery实现pager控件示例
12-08
【jQuery 实现分页器（Pager）控件详解】 在Web开发中，分页是常见的数据展示方式，尤其是在处理大量...通过理解这个示例，开发者可以更好地掌握jQuery的插件开发技巧，以及如何利用它来增强网页的交互性和用户体验。
jQuery pjax 应用简单示例
01-19
pjax有好几个实现方法，这里使用最常用的Jquery库，使用jquery.pjax.js。演示代码的服务器端使用PHP脚本语言。 Pjax用在那儿？就说百度云盘吧，这个大家肯定都用过。百度云盘PC端，在点击打开某个文件夹后会打开这个...
jQuery操作元素追加内容示例
11-29
为了更好地理解这些方法，我们可以创建一个简单的网页，包含几个按钮，点击按钮时调用相应的方法，动态改变页面内容。例如： ```html <h3>jQuery操作文档结构 内部操作 测试追加内容--append" onclick="testAppend...
jQuery实现动态给table赋值的方法示例
10-19
在这个示例中，我们学习了如何使用jQuery从JSON数据生成表格，并展示了jQuery的几个核心方法。这个技巧不仅适用于填充表格，还可以应用于其他需要动态生成或更新DOM内容的场景。结合jQuery的相关专题学习，如jQuery...
jQuery简单例子
12-29
jQuery简单例子 初学者可以看一下效果 图片隐藏的实现
jquery实战案例精粹 源代码
04-10
jquery实例源代码
jquery项目
01-20
一个使用jquery开发的项目
jQuery实战(一)
03-01
NULL 博文链接：https://niunan.iteye.com/blog/258487
关于JQuery（附3个案例）
weixin_43842821的博客
03-07 1746
简介 JQuery是一个快速的，小的，丰富的JavaScript库（类指函数，工具的集合）。使的HTML文档遍历和操作，事件处理，动画和Ajax等操作更加简单。 JQuery官网：https://jquery.com/ JQuery文档：https://www.bejson.com/apidoc/jquery/ JQuery特点 轻量，开源，免费，易于学习 兼容性处理 强大的选择器 链式操作 便捷的DOM操作 可靠的事件机制 封装了简单易用的ajax操作 丰富的插件 JQuery准备工作 下载JQuer
jquery入门级简单案例
weixin_44392027的博客
02-24 613
城市选择案例 上面两个按钮会全部移动，下面则会移动已选中单位 select { width: 200px; /*background-color: teal;*/ height: 200px; font-size: 20px; } .btn-box { width: 30px; ...
JQuery初学者简单的一个例子
sgp4205的专栏
05-21 82
  任何新东东都是这样，当没弄懂或不会的时候 都是被主导；   但，一旦弄懂了，心情就会好很多的，那种感觉很舒服，很享受；这时就是所谓的 主导了；   关注JQuery很久了，看过JQuery.mi的例子(见附件），超级棒；   可是，一直没有成功的做出例子；   在MyEclipse里面添加自动提示JQuery的功能也没成功，十分灰心；   今天又试着去弄懂，因为不想放...
jQuery实现简易商城系统项目实操详解
Free雅轩的博客
07-17 855
全选
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值