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>");

          });