jQuery层次选择器用法示例

jquery树形表格treetable插件使用方法步骤：

第一步：

1上官网下载。

2插件引用，当下载的时候，会有很多个文件，但是根据api来看，如果只想做简单的效果，js除了引用juquery外，只需要引用jquerytreetablejs插件，如果想让它有默认的外观样式还需要引入它们的jquerytreetablecss和jquerytreetablethemedefaultcss

第二步：建立table格式

<table id="example-advanced">

<tr data-tt-id="1">

<td>大家电</td>

</tr>

<tr data-tt-id="2" data-tt-parent-id="1">

<td>---电视</td>

</tr>

<tr data-tt-id="3" data-tt-parent-id="1">

<td>---洗衣机</td>

</tr>

<tr data-tt-id="4" data-tt-parent-id="1">

<td>---冰箱</td>

</tr>

</table>

第三步：引入JS

/ 初始化数据 /

$("#example-advanced")treetable({ expandable: true });/ 高亮显示 /$("#example-advanced tbody")on("mousedown", "tr", function() {

$("selected")not(this)removeClass("selected");

$(this)toggleClass("selected");

});/ 点击展开&&关闭 /<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced')treetable('expandAll'); return false;">展开</a>

<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced')treetable('collapseAll'); return false;">关闭l</a>

当都选其中某几项时，如果需要给服务端ajax传递对应项的id值，该如何做呢？

思路应该是这样的：

①获取被勾选项（即checked的checkbox所在行）

②将id存在checkbox所在input的自定义属性中，如 data-id 中

③创建空数组，遍历被选中的checkbox所在行，获取对应的 data-id 值，存入数组中

④将存入的数组转化为字符串，并用逗号隔开（join(',')）

1、首先新建html文档，向下查找兄弟标签：next()。

2、jquery支持链式 *** 作，向下查找兄弟标签的兄弟标签：next()next()。

3、接着向下查找所有兄弟标签：nextAll()，向下查找一直找到某个条件为止：nextUntil('条件')。

4、向上查找兄弟标签：prev()，向上查找所有兄弟标签：prevAll()，向上查找一直找到某个条件为止：prevUntil('条件')。

5、最后查找父标签：parent()，查找所有父标签：parents()，如果没有人拦着，会一直找找到最上面的父标签（没什么用），条件满足时停止查找：parentsUntil('body') 。

Jquery实现移动元素的方法有很多种，这里就说insertAfter方法和insertBefore方法。

insertAfter方法 定义和用法

　　insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。

　　注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。

insertAfter方法 语法

$(content)insertAfter(selector)

实例：

    把id="th1"的th移动到 id="tr1"的tr下的最后一个th元素的后面。

$("th#th1")insertAfter($("tr#tr1>th")last());

insertBefore方法的参数和用法与insertAfter相同，不同的是insertBefore是把匹配的元素插入到另一个指定的元素集合的前面。   

jquery *** 作文档的方法还有很多，例如append() 、prepend()、after()、before()等等。具体可以百度“jQuery 参考手册 - 文档 *** 作”