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

曾经终败给现在 2022-08-25 09:22 140阅读 0赞

1.。

![SouthEast][]

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

2 。

![SouthEast 1][]

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

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

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

function arrayflag(e,flag)\{

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

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

$("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 οnclick="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..先看图

![Center][]

上图对应的html源码如下：

![Center 1][]

我们对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;  
\}

我们得到的结果如下：

在浏览器看到的数据为：

![Center 2][]

在springmvc中用这种方式来接收

![Center 3][]

用springmvc接收后的值如下：

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

10。先看如下html

![Center 4][]

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

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

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

结果contents 就为 dddddd dddddd

累积。。。。。

[SouthEast]: /images/20220824/95bbc911bc0640ad9843773794d2a1ea.png
[SouthEast 1]: /images/20220824/a1ed7954619c4531b0a72e2bbf624862.png
[Center]: /images/20220824/397d8227fcbd4eee811a21d14e918059.png
[Center 1]: /images/20220824/382a79650d98403d82e7c235e258a914.png
[Center 2]: /images/20220824/057cb9d7109e42449e3347c66d3fe80c.png
[Center 3]: /images/20220824/86b30858843443c3860d578a40fccc9c.png
[Center 4]: /images/20220824/c515be2f7bc94450a25e3a617d451104.png