devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JQuery学习之（二）_button id=btn1 瞬间显示

作者：小丑西瓜9 | 2024-05-15 17:34:33

赞

踩

button id=btn1 瞬间显示

1.属性选择

 
包含指定属性的 jquery 对象
例： $(‘input[name]’) ，表示获取所有具有 name 属性的 input 元素，只有硬编码写出了 name 属性，才会被选择到
带 = 的：表示属性等于指定值的，如 $('input[name=hello]')
带* = 的：表示属性包含指定值的，如 $('input[name*=hello]')
带 ^= 的：表示以指定字符开头的
带 $= 的：表示以指定字符结尾的
写多个 [] ：表示同时具有多个属性的，多个 [] 中的属性不分先后，如 $('input[id][name][style]')
  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>02属性选择器</title>
  6.     <script src="scripts/jquery-1.7.1.min.js"></script>
  7.     <script>
  8.         $(function () {
  9.             $('input');
  10.         });
  11.     </script>
  12. </head>
  13. <body>
  14.     <input type="button" id="btn1" value="显示1" />
  15.     <input type="button" id="btn2" />
  16.     <input type="button" value="显示3" />
  17.     <input type="text" id="txt1" />
  18. </body>
  19. </html>

2.表单选择器

选择指定类型的元素，使用“:类型”，这是“input[type=类型]”的简写形式
$(':checkbox')：选择所有的checkbox元素
jq对象调用val()方法，则返回第一个对象的value值；如果要获取所有项的value，需要each循环遍历
4种常用选择器的简写
:enabled：选择所有被启用的元素
:disabled：选择所有被禁用的元素
:checked：表示checked属性为选中状态的元素，用于checkbox、radio控件
:selected：表示所有被selected的option，用于select控件

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>03权限选择</title>
  6.     <script src="scripts/jquery-1.7.1.min.js"></script>
  7.     <script>
  8.         $(function () {
  9.             //为 右移按钮  绑定事件
  10.             $('#btnRightAll').click(function () {
  11.                 //获取所有子元素，追加到右边的select中
  12.                 $('#selectLeft').children().appendTo('#selectRight');
  13.             });
  14.  
  15.             //为 单个右移事件 绑定事件
  16.             $('#btnRight').click(function () {
  17.                 //获取所有被选中的option
  18.                 $('#selectLeft :selected').appendTo('#selectRight');
  19.             });
  20.  
  21.             //为“全部左移”按钮绑定事件
  22.             $('#btnLeftAll').click(function () {
  23.                 //获取右侧所有的option
  24.                 $('#selectLeft').append($('#selectRight option'));
  25.             });
  26.  
  27.             //为“选中左移”按钮绑定事件
  28.             $('#btnLeft').click(function () {
  29.                 //获取右侧选中的项，加到左边
  30.                 $('#selectLeft').append($('#selectRight :selected'));
  31.             });
  32.  
  33.  
  34.         });
  35.  
  36.     </script>
  37. </head>
  38. <body>
  39.     <select id="selectLeft" multiple="true">
  40.         <option>北京</option>
  41.         <option>上海</option>
  42.         <option>广州</option>
  43.         <option>深圳</option>
  44.     </select>
  45.  
  46.     <input type="button" id="btnRightAll" value=">>" />
  47.     <input type="button" id="btnRight" value=">" />
  48.     <input type="button" id="btnLeft" value="<" />
  49.     <input type="button" id="btnLeftAll" value="<<" />
  50.  
  51.     <select  id="selectRight"  multiple="true"></select>
  52. </body>
  53. </html>

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>04表格数据</title>
  6.     <style>
  7.         #bgDiv {
  8.             position: absolute;
  9.             left: 0px;
  10.             top: 0px;
  11.             background-color: black;
  12.             opacity: 0.2; /*设置不透明度，即可以看到层下面的内容，但是由于层的遮挡，是不可以进行操作的*/
  13.             display: none;
  14.         }
  15.  
  16.         #fgDiv {
  17.             position: absolute;
  18.             width: 300px;
  19.             height: 100px;
  20.             border: 1px solid red;
  21.             background-color: #e7e7e7;
  22.             display: none;
  23.         }
  24.     </style>
  25.     <script src="scripts/jquery-1.7.1.min.js"></script>
  26.     <script>
  27.         var list = [
  28.             { id: '1', country: '中国', capital: '北京' },
  29.             { id: '2', country: '美国', capital: '华盛顿' },
  30.             { id: '3', country: '日本', capital: '东京' },
  31.             { id: '4', country: '韩国', capital: '首尔' }
  32.         ];
  33.  
  34.         $(function () {
  35.             //数据表
  36.             $.each(list, function () {
  37.                 $('<tr id="' + this.id + '">' +
  38.                     '<td><input type="checkbox"/></td>' +
  39.                     '<td>' + this.id + '</td>' +
  40.                     '<td>' + this.country + '</td>' +
  41.                     '<td>' + this.capital + '</td>' +
  42.                     '<td><input type="button" value="修改"/></td>' +
  43.                     '</tr>').appendTo('#list');
  44.             });
  45.  
  46.             //为复选框chkAll设置点击事件，完成全选、全消的功能
  47.             $('#chkAll').click(function () {
  48.                 //根据当前复选框的状态设置其它行复选框的状态
  49.                 $('#list :checkbox').attr('checked', this.checked);
  50.             });
  51.  
  52.             //反选
  53.             $('#btnReverse').click(function () {
  54.                 //获取实际数据行的复选框
  55.                 $('#list :checkbox').each(function () {//jquery对象.each
  56.                     this.checked = !this.checked;
  57.                 });
  58.             });
  59.  
  60.             //删除选中项
  61.             $('#btnRemove').click(function () {
  62.                 //确认
  63.                 if (confirm('确定要删除吗')) {
  64.                     //获取所有数据行中选中的checkbox
  65.                     //$('#list :checked').parent().parent().remove();
  66.                     //直接在祖宗节点中找到tr节点
  67.                     $('#list :checked').parents('tr').remove();
  68.                 }
  69.             });
  70.  
  71.             //添加
  72.             $('#btnAdd').click(function () {
  73.                 //显示添加界面
  74.                 $('#bgDiv').css('display', 'block')
  75.                     .css('width', window.innerWidth + 'px')
  76.                     .height(window.innerHeight + 'px');
  77.                 $('#fgDiv').css('display', 'block')
  78.                     .css('left', (window.innerWidth - 300) / 2 + 'px')
  79.                     .css('top', (window.innerHeight - 100) / 2 + 'px');
  80.                 //清除文本框中的数据
  81.                 $('#fgDiv :text,:hidden').val('');
  82.             });
  83.  
  84.             //保存
  85.             $('#btnSave').click(function () {
  86.                 var id = $('#hidId').val();
  87.                 if (id == '') { //添加
  88.                     $('<tr id="' + $('#txtId').val() + '">' +
  89.                         '<td><input type="checkbox"/></td>' +
  90.                         '<td>' + $('#txtId').val() + '</td>' +
  91.                         '<td>' + $('#txtCountry').val() + '</td>' +
  92.                         '<td>' + $('#txtCapital').val() + '</td>' +
  93.                         '<td><input type="button" value="修改"/></td>' +
  94.                         '</tr>').appendTo('#list')
  95.                         .find(':button').click(function () {//为修改按钮绑定事件
  96.                             //显示添加界面
  97.                             $('#bgDiv').css('display', 'block')
  98.                                 .css('width', window.innerWidth + 'px')
  99.                                 .height(window.innerHeight + 'px');
  100.                             $('#fgDiv').css('display', 'block')
  101.                                 .css('left', (window.innerWidth - 300) / 2 + 'px')
  102.                                 .css('top', (window.innerHeight - 100) / 2 + 'px');
  103.                             //找到当前按钮所在td的之前的所有td，因为数据就在这些td中
  104.                             var tds = $(this).parent().prevAll();
  105.                             //设置文本框的值
  106.                             $('#hidId').val(tds.eq(2).text());//作用：在修改后用于查找原始数据的行
  107.                             $('#txtId').val(tds.eq(2).text());
  108.                             $('#txtCountry').val(tds.eq(1).text());
  109.                             $('#txtCapital').val(tds.eq(0).text())
  110.                         });
  111.                 } else {//修改
  112.                     var tds = $('#' + id + '>td');
  113.                     tds.eq(1).text($('#txtId').val());
  114.                     tds.eq(2).text($('#txtCountry').val());
  115.                     tds.eq(3).text($('#txtCapital').val());
  116.                     //改tr的id属性，保持数据一致
  117.                     $('#' + id).attr('id', $('#txtId').val());
  118.                 }
  119.  
  120.                 //隐藏层
  121.                 $('#bgDiv').css('display', 'none');
  122.                 $('#fgDiv').css('display', 'none');
  123.             });
  124.  
  125.  
  126.             //修改
  127.             $('#list :button').click(function () {
  128.                 //显示添加界面
  129.                 $('#bgDiv').css('display', 'block')
  130.                     .css('width', window.innerWidth + 'px')
  131.                     .height(window.innerHeight + 'px');
  132.                 $('#fgDiv').css('display', 'block')
  133.                     .css('left', (window.innerWidth - 300) / 2 + 'px')
  134.                     .css('top', (window.innerHeight - 100) / 2 + 'px');
  135.                 //找到当前按钮所在td的之前的所有td，因为数据就在这些td中
  136.                 var tds = $(this).parent().prevAll();
  137.                 //设置文本框的值
  138.                 $('#hidId').val(tds.eq(2).text());//作用：在修改后用于查找原始数据的行
  139.                 $('#txtId').val(tds.eq(2).text());
  140.                 $('#txtCountry').val(tds.eq(1).text());
  141.                 $('#txtCapital').val(tds.eq(0).text());
  142.             });
  143.  
  144.  
  145.         });
  146.  
  147.  
  148.  
  149.  
  150.     </script>
  151.       
  152.  
  153. </head>
  154. <body>
  155.     修改操作：1、将原有数据展示在div中；2、点击保存时，需要知道对应表格中的哪行数据；3、为新增的修改按钮绑定事件
  156.     <br />
  157.     难点：在第2步中，如何在点击div中按钮时，知道对应原表格中的哪行数据
  158.     <hr />
  159.     <input type="button" id="btnAdd" value="添加" />
  160.     <input type="button" id="btnReverse" value="反转" />
  161.     <input type="button" id="btnRemove" value="删除选中项" />
  162.     <table border="1">
  163.         <thead>
  164.         <th width="100"><input type="checkbox" id="chkAll" /></th>
  165.         <th width="100">编号</th>
  166.         <th width="100">国家</th>
  167.         <th width="100">首都</th>
  168.         <th width="100">修改</th>
  169.         </thead>
  170.         <tbody id="list"></tbody>
  171.     </table>
  172.  
  173.  
  174.  
  175.     <div id="bgDiv">
  176.     </div>
  177.     <div id="fgDiv">
  178.         <input type="hidden" id="hidId" />
  179.         编号：<input type="text" id="txtId" />
  180.         <br />
  181.         国家：<input type="text" id="txtCountry" />
  182.         <br />
  183.         首都：<input type="text" id="txtCapital" />
  184.         <br />
  185.         <input type="button" id="btnSave" value="保存" />
  186.     </div>
  187. </body>
  188. </html>

 
本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/574176
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号