jQuery的表单操作

最新推荐文章于 2022-02-25 17:08:18 发布
最新推荐文章于 2022-02-25 17:08:18 发布
阅读量53 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/liurg/p/8231994.html
版权

 

1.表单选择框

运行效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单操作</title>
    </head>
    <body>
        <div id="checkbox">
            <input type="checkbox" />吃
            <input type="checkbox" />喝
            <input type="checkbox" />玩
            <input type="checkbox" />乐
        </div>
        <div id="btn">
            <input type="button" id="checkall" value="全选" />
            <input type="button" id="checknone" value="全不选" />
            <input type="button" id="checkinverse" value="反选" />
        </div>
    </body>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>
    <script>

        //获取id为checkbox的元素下查找input的type=checkbox的子元素
        var Checkbox = $('#checkbox>:checkbox');
        
        $('#checkall').click(function(){
            //Checkbox.attr('checked','checked');
            Checkbox.attr('checked',true);
        })
        
        $('#checknone').click(function(){
            //两种方法移除checked属性，常用第二种，因为checked是一个boolean值
            //Checkbox.removeAttr('checked');
            Checkbox.attr('checked',false);
        })
        
        $('#checkinverse').click(function(){
            //加上！是的true变false，false变true
            Checkbox.each(function(){
                this.checked = !this.checked;
        })
        
    </script>

</html>

 2.页面搜索

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面搜索实例</title>
    </head>
    <link rel="stylesheet" href="../css/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <style>
        #form{
            width: 200px;
        }
    </style>
    <body>
        <table class="table table-bordered">
            <tr class="head">
                <th>姓名</th>
                <th>性别</th>
                <th>电话</th>
            </tr>
            
            <tr>
                <th>张三</th>
                <th>男</th>
                <th>123456</th>
            </tr>
            
            <tr>
                <th>李四</th>
                <th>男</th>
                <th>654321</th>
            </tr>
            
            <tr>
                <th>王五</th>
                <th>女</th>
                <th>612345</th>
            </tr>
        </table>
        <div class="row">
              <div class="col-lg-6">
                <div class="input-group">
                  <span class="input-group-btn">
                         <button class="btn btn-default" type="button">Go!</button>
                  </span>
                  <input type="text" class="form-control" placeholder="Search for...">
                </div><!-- /input-group -->
              </div><!-- /.col-lg-6 -->
  
        </div><!-- /.row -->
    </body>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>
    <script>
        $('button').click(function(){
            //:contains 选择器选取包含指定字符串的元素。
            var text = $('input[type=text]').val();
            $('table tr:not("#thead")').hide().filter(':contains("'+text+'")').show();
            //输入搜索内容后清空搜索框的值
            $('input[type=text]').val("");
        })
    </script>
</html>

 3.仿微博发布框，主要是限制文本域中的字符数，用到了substring()截取

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>仿微博发布框</title>
    </head>
    <link rel="stylesheet" href="../css/bootstrap-3.3.7-dist/css/bootstrap.css" />
    
    <body>
        <textarea class="form-control" rows="3"></textarea>
        <span>你还可以输入<strong style="color: red;">140</strong>个字</span>
    </body>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>
    <script>
        var maxLength = 140;
        $('textarea').keyup(function(){
            var l = $(this).val().length;//获取当前文本域内文字的长度
            $('strong').text(maxLength-l);
            
            if(parseInt($('strong').text())<0){
                $('strong').text('0');
                
                //截取0-140个字符
                var val = $(this).val().substring(0,140);
                //截取到的字符放到textarea中
                $(this).val(val);
            }
        });
    </script>

</html>

 

转载于:https://www.cnblogs.com/liurg/p/8231994.html

weixin_34121282
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery对表单的操作
ChibiMarukoChan的博客
06-24 558
表单应用 1.单行文本框应用 初始化网页，样式如下： <form> <fieldset> <legend>个人基本信息</legend> <div class="col-line"> <label>名称：</label&g...
JQuery的表单操作
qsfwy的专栏
07-29 97
获取值：文本框，文本区域：$("#txt").attr("value")；多选框checkbox：$("#checkbox_id").attr("value")；单选组radio：   $("input[@type=radio][@checked]").val();下拉框select：  $('#sel').val();控制表单元素：文本框，文本区域：$("#txt").attr(&quo
jQuery表单常用操作收藏（转）
a651944226的专栏
12-21 639
jquery的表单操作
wenzhu0_0的专栏
03-04 431
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 03_select .addBg { background:#f00; color:#fff; } .bigger { font-size:20px; }
jQuery 表单的操作
YOUAFR的博客
10-25 492
Hello World !!!" //$(':text') == $('input[type=text]') //添加/修改属性 $(':text').attr('placeholder','请输入用户名！'); //获取placeholder即属性上的值 console.log($(':text').attr('placeholder')); // 移除inp
jQuery常见的表单操作
11-21
工作中常用的jQuery表单操作：$("input[name='checkbox_name'][checked]"); //选择被选中CheckBox元素的集合 $("#checkbox_id").attr("checked",true);设置一个CheckBox的状态为选中
Java Web Jquery表单验证
最新发布
07-26
Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write.html、end.html、style.css。 1...
jquery对表单操作2
10-28
jquery对表单操作2，最近几篇整理都是jquery表格操作相关，大家可以收藏下。
jQuery对表单的操作代码集合
01-19
改变文本框的获得焦点的样式 代码如下: <form action=”#” method=”POST” id=”regForm”> <fieldset> 个人基本信息</legend> <div> ”username”>名称：</label> <input id=”username” type=”text”...
Jquery 表单取值赋值的一些基本操作
10-29
JQUERY找无规律元素文本的办法
jquery常用的表单操作很全很详细.rtf
03-21
jquery常用的表单操作很全很详细.rtf
Jquery-关于表单的操作
那杯热咖啡
08-15 303
学习笔记整理： 1,Jquery-input * 获取input框的value $('input:first').val(); $('input:first').val('demo'); * 显而易见，这就是设置值了 $('input:first').attr('value'); ...
Jquery 操作表单
海涛高软
02-25 317
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
jQuery操作form表单
LFSenior
07-15 3565
1.1 操作form表单 1.1.1 属性操作 设置属性： // 第一个参数表示：要设置的属性名称 // 第二个参数表示：改属性名称对应的值 $(selector).attr(“title”, “传智播客”);   获取属性： // 参数为：要获取的属性的名称，改操作会返回指定属性对应的值 $(selector).attr(“title”); 此时，返回指定属性的值
jQuery对form表单的操作
社会你鑫哥的博客
11-12 656
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> &
jquery常用的表单操作
小白编程
10-18 99
jquery常用的表单操作很全很详细 urlref: http://hi.baidu.com/wangfengkun/blog/item/97b98900b595351c728b65c3.html 先给一个例子:假设在一个表单中有一个按钮id="save"$(document).ready(function(){$("#save").click(function(){$("#save"...
jQuery对表单的基本操作
zhou363667565的专栏
08-30 98
  //选择所有复选框; function selectCheckBoxAll(baseCheckID,subchkBoxID){ var prentCheckBox = jQuery("#"+baseCheckID); var chkObject = jQuery(document.getElementsByName(subchkBoxID)); var bol = false;...
jq 表单 操作
zhan_lijian的博客
04-07 680
1. 表单序列化 表单一般字段都比较多怎么处理呢 按照jq写法 一个元素元素的取 真蛋疼 $("#myForm").serializeArray() 如图 一目了然 舒服吧 但这些整理都需要通过 表单控件设置 name 属性 2.表单赋值 也是蛋疼吧 元素书写难受吧 function loadData(obj) { var ...
jquery 对form表单的动态操作
wwwffy的博客
04-09 842
表单练习3 $(document).ready(function(){ $('#b_add').click(function(){ var fullname = $("input[id='fullname']").val(); var sex = $("input[type='radio']:checked").val(); var dept = $('#dept option:
jquery操作表单和表格
05-20
jQuery是一个用于简化JavaScript操作的库，可以轻松地操作表单和表格。下面是一些常见的jQuery操作表单和表格的方法。 1. 获取表单元素的值： ```javascript var value = $('#inputId').val(); // 获取输入框的值 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值