JS JQuery使用笔记

来源：互联网发布：游戏账号交易平台软件编辑：程序博客网时间：2024/05/09 01:14

简述：

记录在JQuery过程中遇到的问题，搜索之后的解决方法（备忘）

内容：

1. 用某个值查找对象

$("img[name='pic1']")

2. 修改某个属性

$("#input1").attr('value', "vvvvv")

3. 清空某个div可用方法

<div id="homeImage" class="loading"></div>

                document.getElementById('homeImage')                .innerHTML='<div id="homeImage" class="loading"></div>';

4. 遍历ul元素中所有的li元素

html代码：

<ul id="sideBar"><li name="voucherBar" class="selected "><ahref="${ctx}/business/voucher?action=list">Part1</a></li><li name="signActivityBar" class=" "><ahref="${ctx}/business/activity?action=list">Part2</a></li></ul>

jquery代码：

$(document).ready(function(){$("#sideBar li").each(function(){if($(this).attr('name') == 'signActivityBar'){$(this).attr('class', 'selected');}else{$(this).attr('class', false);}});});

5 . radio选中

$("input[name='forward']").attr("checked","checked")

5.2 选出radio选中的值

$("input:radio[name='activityPublish']:checked").val()

6. 判断name相同的radio 组中选中与否

if($("input[name='forward']").get(0).checked == true)    $("#tablePreview td[name='Forward']").text("是");else    $("#tablePreview td[name='Forward']").text("否");

7 设置radio选中（name相同的情况）

  if(forward == 'true')     $("input[name='forward']:eq(0)").attr("checked",'checked');  else     $("input[name='forward']:eq(1)").attr("checked",'checked');

html如下：

          <label>能否转发：</label>          <span class="pr5"><input name="forward" type="radio" value="true" /> 是</span>          <span class="pr5"><input name="forward" type="radio" value="false" /> 否</span>

8 删除数组某个元素

$.each(unitImageList, function(index,item){   if(item.url == imageUrl){     unitImageList = unitImageList.slice(0, index)             .concat(unitImageList.slice(index+1));}});

9. 获取selector子元素的方法

 $(this).children('option:selected').val()

10 遍历验证html表单中数据（非空，非数字验证），该循环跳出的时候需要return两次

function validateMember(){    var result = true;    $('#form input').each(function(){        var name = $(this).attr('name');        if(name=='age'){        if(isNaN($(this).val())){            result = false;            alert(ERROR_NON_NUM);            return false;        }        if($(this).val()==''){            result = false;            alert(name + ": " + ERROR_EMPTY);            return false;        }        }    });    return result;}

动态生成table

html:

<table class="table table-striped table-bordered table-hover"><thead><tr>    <td>        <select id="2_direction" style="width:70px">             <option value="1">东</option>             <option value="2">南</option>             <option value="3">西</option>             <option value="4">北</option>        </select>   面    </td>    <td><input class="span10" id="2_road" type="text" name="road" value="" dataType="Require" msg="请填写路"/>   路</td>    <td><input class="span10" id="2_longNo" name="2_longNo" type="text" value="" dataType="Number" msg="请填写数字"/>   弄</td>    <td><input style="width:50px" type="text" id="2_startNo" name="startNo" value="" dataType="Number" msg="请填写数字"/>   号至</td>    <td><input style="width:50px" type="text" id="2_endNo" name="endNo" value="" dataType="Number" msg="请填写数字"/>   号</td></tr><tr >    <td colspan="5" style="text-align:center"><a class="btn btn-info"  style="text-align:center;" href="javascript:saveLocation()" id="2_btn"><b class="ico-ok"></b>确认保存</a></td></tr></thead></table>

function renderLocationTable(list){    if(list == null)        return;    var START_ROW = 2;    var tableObj = document.getElementById("tb_2");    var len = list.length; for (var i=tableObj.rows.length-1; i>=START_ROW; i--) {tableObj.deleteRow(i);}$.each(list, function(i, item){   //console.info(list[i].id);   var id = list[i].id;   var direction = list[i].direction;   var road = list[i].road;   var longNo = list[i].longNo;   var startNo = list[i].startNo;   var endNo = list[i].endNo;   var accountId = list[i].accountId;      // 新增行   var tr = tableObj.insertRow(START_ROW, 1);// 新增空格var spaceTd = tr.insertCell(0);var directionTd = tr.insertCell(1);var roadTd = tr.insertCell(2);var longNoTd = tr.insertCell(3);var startNoTd = tr.insertCell(4);var endNoTd = tr.insertCell(5);var opTd=tr.insertCell(6);      spaceTd.innerHTML = len-i;      switch(direction){   case 1:       direction = "东";       break;   case 2:       direction = "南";       break;   case 3:       direction = "西";       break;   case 4:       direction = "北";       break;   default:       break;   }   directionTd.innerHTML = direction;   roadTd.innerHTML = road;   longNoTd.innerHTML = longNo;   startNoTd.innerHTML = startNo;   endNoTd.innerHTML = endNo;   opTd.innerHTML = "<a href=\"javascript:deleteLocation('" + id + "')\"><i class='ico-trash'></i></a>";   });}

12. 循环遍历id, 并设置，对于那些字段非常多的数据表在实现约定名称的情况下可以迅速完成赋值

function fetchBusiness(){$.ajax({   type: "GET",   dataType: "JSON",   url: "account-base!doBusiness.action?actionFlag=" + DO_FETCH,   data: {       accountId: GetRequest()['accountId']   },   success: function(response){       var obj = response.data.obj;   for(var key in obj){           $("#9_"+key).val(obj[key]);       }   }});}

13. 获取url中的参数

/** * 获取URL中的参数 */function GetRequest() {   var url = location.search; // 获取url中"?"符后的字串   var theRequest = new Object();   if (url.indexOf("?") != -1) {      var str = url.substr(1);      strs = str.split("&");      for(var i = 0; i < strs.length; i ++) {         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);      }   }   return theRequest;}

14 表单清除

        /**         * 清除表单         */         function clearForm(){            $('#form input,textarea,select').each(function(){                $(this).val('');            });         }

15. jquery 选择器 - table

1) table 最后一个

$("#table").find("tbody tr:last");

2) tr的总数

$("#table").find("tbody tr").size()

3) 取第n个tr

$("#table").find("tbody tr:eq("+n+")");