• jquery 开发总结


    $(document).ready(function(){

    });

    $(function(){

     

    });

     

    1 取值

       <input type="text" name="name" id="name" value="测试" >

     

       var value=$("#name").val(); //取值

       $("#name").val("测试 测试"); //设置值

     

       var valueTrim= jQuery.trim(value); //去掉左右空格

       //或 var valueTrim= $.trim(value);

     

      //去掉页面中所有文本框中的空格

      $("input:text").each(function(){
                  var v=$(this).val().replace(/[ ]/g,"");  //去掉所有空格
                  $(this).val(v);
         });

     

     

    2 操作内容

       1)<span id="test"><font color="red">测试</font></span>

     

            var rs=$("#test").test();  //取内容

            $("#test").test(" 测试 测试 测试"); //设置内容

     

             var rs=$("#test").html(); //取html内容

            $("#test").html("<font color="red">测试</fong>"); //设置html内容

     

       2)<select name="test" id="test" style="180px">

                   <option value="">全部</option>

                   <option value="test1">测试一</option>

                   <option value="test2">测试二</option>

     

              var rs=$("#test").find("option:selected").text(); //取得被选中的内容

     

       3) 设置下拉框根据条件默认选中(使用2)中的select)

            var length=$("#test option").length;

            for (var i=0;i<length;i++){

                    if ($("#test").get(0).options[i].value=="测试二"){

                           $("#test").get(0).options[i].selected=true; //将下拉框,内容为"测试二"的选项选中
                           break;

                    }

            }

     4) 删除下拉框选项和新增下拉框选中

          $("#test option").each( 
        function(){
                                           if($(this).val() == 111){
                                                     $(this).remove();
                                           }
                            }
        );

           $("#test").append("<option value=''>请选择</option");


    3 禁用启用文本框

         <input type="text" name="name" id="name" value="测试" >

     

         $("#name").attr({'disabled':'disabled'}); //禁用

         $("#name").removeAttr("disabled"); //启用

     

    4.1 复选框操作

             <input type="checkbox" name="test" value="test1" >

             <input type="checkbox" name="test" value="test2" >

             <input type="checkbox" name="test" value="test3" >

     

           var num=0; //统计被选中的个数

           var ids=null;  //统计被选中的值

          $("input[name='test']:checkbox").each(function(){
                if($(this).attr("checked")){
                    num+=1;
                    ids=ids+$(this).val()+",";
                }
           });

           alert(num);

           alert(ids);

     

    4.2 单选按钮取值方法 

          <input type="radio" name="test" value="test1"/>

          <input type="radio" name="test" value="test2"/>

          <input type="radio" name="test" value="test3"/>

     

          $("input[type=radio]").bind("click",function(){ 
                   var value = $("input[name='test'][type='radio'][checked]").val(); 
                   alert(value);
           });

     

    4.3  单选按钮默认选中

          <input type="radio" name="test" value="test1"/>

          <input type="radio" name="test" value="test2"/>

          <input type="radio" name="test" value="test3"/>

     

         $("input[name='test']:radio").each(function(){
                  if($(this).attr("value")=="test2"){
                     $(this).attr('checked','checked');
                  }
             }); 

     

    5 事件绑定

           <input type="button" value="测试" id="test" />

     

           $("#test").bind("click",function(){ 

                    alert("做我想做的");

           });

            //其中事件真对不同的元素有不同的事件,包括 blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,

    mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error

     

    6 ajax  

     

         var param="name=zhangshan,age=30"l

        $.ajax({
           url: '${ctx}/scoreMngAction.do?method=relScore',
           type: 'POST',
           dataType:'html',
           timeout: 2000000,//超时时间设定
           data:param,//参数设置
           error: function(){alert('error:不能连接远程服务器');},//错误处理,隐藏进度条
           success: function(data){
                 alert(data);
           }      
         });  

     

         后台取值

         String name=request.getParameter("name");

         String age=request.getParameter("age");

         后台返回值

         PrintWriter out = response.getWriter();

         out.print("操作成功!");

     

    7 操作元素属性

      <input type="text" name="test1" id="test" value="测试" />

     

      $("#test").attr("name","test2"); //设置元素中name属性中的内容,将test1改为test2

      alert($("#test").attr("name")); //取得元素name属性中的内容

     

     

    8 表单提交

       <form  id="form1">

              <input  type="button"  id='submit'  value="提交"/>

       </form>

     

       $("#submit").bind("click",function(){
            $("#form1").attr("action","xx.action");
            $("#form1").attr("method","post");
            $("#form1").submit();
       });

     

    9 填加和移除样式

      <style type="text/css">

         .focus { 
              border: 1px solid #f00;
              background: #fcc;
          }

     </style>

     

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

      <input id="pass" type="password" />

      <textarea id="msg" rows="2" cols="20"></textarea>

     

    <script type="text/javascript">
        $(function(){
           $(":input").focus(function(){  //文本框获得焦点时增加样式
                    $(this).addClass("focus");  
               }).blur(function(){ //文本框失去焦点时移除样式
                    $(this).removeClass("focus");
               });
        })
        </script>

     

    10 遍历指定无素

       <input type="text" name="test1" id="test1" />

       <input type="text" name="test2" id="test2" />

        <input type="text" name="test3" id="test3" />

     

       function disableText(){ 
             $("input[type='text']").each(function(){ //遍历所有text元素
                    $(this).attr({'disabled':'disabled'}); //增加禁用属性

                    //$(this) 为当前所遍历到的元素对象
             });
        }

     

         //$(":input").attr({'disabled':'disabled'});  该方法可以默认禁用所有input元素

     

    11 显示隐藏指定元素

        <span id="test"  style="display: none">测试</span>

     

       $("#test").show(); //显示

       $("#test").hide();  //隐藏

     

    12 文本框获得焦点

         <input type="text"  id="test1" value="" />

     

         $("#test1")[0].focus();

     

     

    13 表格操作

         <table id="tab1">

             <thead>

                   <tr id="testTr1">

                       <td>测试一</td>

                       <td>测试二</td>

                       <td>测试三</td>

                       <td>测试四</td>

                    </tr>

             </thead>

             <tbody>

                  <tr id="testTr1">

                     <td><input type="radio" name="test1" id="test1" value="测试1" ></td>

                      <td>test2</td>

                      <td><input type="checkbox" name="test3" id="test3" onclick="checkSelect(this)" value="测试3"></td>

                      <td><input type="button" id="add" value="添加下一行" /></td>

                       <td><input type="button" id="del" value="删除下一行" /></td>

                  </tr>

                  <tr id="testTr2">

                      <td><input type="radio" name="test1" id="test1" value="测试11" checked="checked"></td>

                      <td>test22</td>

                      <td><input type="checkbox" name="test3" id="test3" onclick="checkSelect(this)" value="测试3"></td>

                      <td><input type="button" id="addLast" value="添加表格最后行" /></td>

                      <td>test4</td>

                   </tr>

              </tbody>

         <table>

     

          //改变表中的第某行中列的内容1

          var tr=$("#testTr1");

          tr.find("td").get(0).innerHTML="con1"

          tr.find("td").get(0).innerHTML="con2"

     

          //改变表中的第某行中列的内容2

          var td1=$('#conTab > tbody > tr :radio:checked').parents("td"); //取得单选按钮所在的列

          var td2=td1.next(); //取得下一列

          var con=td2.text();  //取得下一列的内容

     

          //点击单选按钮所在行,选中本行单选按钮

          $('#tab1 > tbody > tr').bind("click",function(){
              $(this).find(':radio').attr('checked',true);
          });

     

         //点击复选框所在行,控制复选框是否选中( 增加此功能后单击复选框,将不起作用,所以复选框增加onclick方法checkSelect(this))  

          $('#tab1 > tbody > tr').bind("click",function(){
                if ($(this).find(':checkbox').attr('checked')){
                      $(this).find(':checkbox').attr('checked',false);
                }else{
                      $(this).find(':checkbox').attr('checked',true);
                }
           });

     

           //点击复选框,控制复选框是否选中
            function checkSelect(obj){
                if ($(obj).attr('checked')){
                     $(obj).attr('checked',false);
                }else{
                     $(obj).attr('checked',true);
                }
             }

     

            //添加下一行

            $('#add). ("click",function(){
                   $(this).parent().parent().after("<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>");

             });   

     

            //删除下一行

             $('#del). ("click",function(){
                   $(this).parent().parent().next().remove(); //删除下一行

                   $(this).parent().parent().remove(); //删除本行 

             });  

     

             //添加表格最后一行

              $('#addLast). ("click",function(){
                    $("#tab1").append("("<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>");

              });  

  • 相关阅读:
    线程池原理分析
    强引用-软引用-弱引用
    并发编程之多线程
    linux关于获取时间的几个函数
    gdb安装和使用
    c++四种显式类型转换
    ARP协议
    Vmware 共享文件夹不显示的问题
    gdb基本使用
    动态二维数组实现
  • 原文地址:https://www.cnblogs.com/toge/p/6114693.html
Copyright © 2020-2023  润新知