js 针对html 元素 css样式 操作 等 累积

1.。

var totalPanels= $(".scrollContainer").children().size();                                           alert(totalPanels)    结果为2

2 。

$(".test").click(function(){
var sFlag = $(this).parent().parent().find(".label").find(".b").val();
alert(sFlag);                   //输出结果为s2
});

3。this关键字在js中的应用

<ul class="sort-list clearfix" id="sortlist">
<li class="" onclick="arrayflag(this,0);"><a href="javascript:void(0)">默认</a></li>
</ul>

在onclick函数中我们将对象li 传递到js中

function arrayflag(e,flag){

alert($(e).html());            //内容为  <a href="javascript:void(0)">默认</a>

$(e).attr("class","on");     //给该标签的class 赋值为on

}

4.

$("input:not(.rap-table-checkbox),textarea,select").addClass("form-control");

input框，不包括class="rap-table-checkbox"  

5.操作tr 中的指定的 td

tr td:nth-child(5)

 $('#example').on( 'click', 'tbody td:nth-child(5)', function (e) {
     editor.inline( this, {
            submitOnBlur: true
        } );
操作 tr中的第6个td

6.统计table共有几行
var rowCount = $('#rap-table-list tbody tr').length;

var objlength = $('tbody .editBudget').length;    //获取对象的长度

var obj = $('tbody .editBudget');       //获取对象
obj[0].innerHTML="dd";          //对象的html 内容替换写法

7.遍历列 该列的class都为editBudget

$("tbody .editBudget").each(function() {
            $(this).html('<input type="text" class="form-control"  name="amountBudget" value="'+$(this).html()+'">')                   //html内容替换
        });

8.我们先拿一段html代码：

<div role="tooltip" class="popover fade right in" id="popover146190" >
      <div class="arrow"></div>
     <h3 class="popover-title" style="display: none;"></h3>
      <div class="popover-content">
            <textarea class="rap-popover-textarea">更新SVN如发现</textarea>
            <div class="rap-toolbar-small">
                <button onclick="popoverEditCallBack(this,8,function popoverCallback(value){});"class="btn  btn-xs btn-info"><i class="fa fa-checked"></i> 

                      确定             

                </button>
            </div>
      </div>
</div>

//上面的onclick事件，this,表示当前对象

function popoverEditCallBack(obj,length,fnCallback){
       var value = $(obj).parent().prev().val(); //$(obj).parent() 获取到  <div class="rap-toolbar-small">这个对象，$(obj).parent().prev()是  <div class="rap-toolbar-small">这个对象的前一个对象也就是<textarea class="rap-popover-textarea">更新SVN如发现</textarea> 这个对象。因而：

   var value = $(obj).parent().prev().val(); 的值为 ：更新SVN如发现

var id = $(obj).closest(".popover").attr("id"); //找一个离当前对象最近的并且class为popover的对象。 这里是获取属性是id的值。这里的结果为：popover146190

$(obj).closest(".popover").unbind("mouseleave");        //找一个离当前对象最近的并且class为popover的对象。 解除去绑定的mouseleave事件

9..先看图

上图对应的html源码如下：

我们对td里面的input和textarea进行操作。操作代码如下

：

//获取所有的行
 function getToSaveList() {
  var postList = new Array();
  $("#rap-table-list tbody tr").each(function() {
   var addData = getRowData(this);
   postList.push(addData);
  });
  return postList;
 }

 //提交数据时需要特殊处理checkbox的值
 function getRowData(nRow) {
  var data = $('input, select, textarea', nRow).not('input[type="checkbox"]').serialize();
  return data;
 }

我们得到的结果如下：

在浏览器看到的数据为：

在springmvc中用这种方式来接收

用springmvc接收后的值如下：

[uuid=2c90e4d64b492ec6014b49637eef0000&thisYearTarget=22&ranking=1&remark=aaa, uuid=402882964c4ea26f014c4ea392140000&thisYearTarget=33&ranking=2&remark=bbb]

 

 

10。先看如下html

要获取data-content的值。我们通过如下代码来实现

var tr = $("#rap-table-list tbody tr")[i];

var contents = $(tr).find(".remark a").attr("data-content");

结果contents  就为 dddddd dddddd

累积。。。。。