jQuery学习笔记（在js中增加、删除及定位控件的操作）

代码内容很多都是从amazeui直接copy过来的，先声明，请不要说在下抄袭- -

<!-------------------- HTML代码 ---------------------->
<div class="am-tabs"  data-am-tabs="{noSwipe: 1}" id="topbar">
    <!--data-am-tabs 禁止触控-->
    <ul class="am-nav am-tabs-nav am-nav-tabs" id="my-tabs">
        <!--.am-nav-tabs --- 标签式导航-->
        <li class="am-active"><a href="javascript: void(0)">流浪</a></li> <!--javascript:void(0)表示不做任何实际链接-->
        <li><a href="javascript: void(0)">流浪</a></li>
        <li><a href="javascript: void(0)">再流浪</a></li>
    </ul>
    <!--------------- 这里nav和tabs-bd好像可以自动一一对应 ---------------------->
    <div class="am-tabs-bd">
        <div class="am-tab-panel am-active">
            ...
        </div>
        <div class="am-tab-panel">
            ...
        </div>
        <div class="am-tab-panel">
            ...
        </div>
    </div>
</div>

　　

今天看了一下jQuery部分关于选项卡的设置，学到了一些关于控件的增删操作，在此稍微笔记一下。

var $bd = $('#topbar').find('.am-tabs-bd');  /*这里可以注意到find的用法*/

这行代码是找到ID为‘topbar’的子元素中含有类名为'.am-tabs-bd'的控件，并且获得其id。

 var newTabs = '<li><span class="am-icon-close"></span>' +
                '<a href="javascript: void(0)">标签 ' + tabcounter + '</a></li>';

这段代码是定义一个li标签，选项卡中的一个选项。注意其中‘+’号的用法，将字符串拼接在一起。

$mytabs.append(newTabs);

在后代中直接插入newTabs，注意newTabs已经是一个控件

$mytabs.on('click','.am-icon-close', function(){
        var $item = $(this).closest('li');   //找到离这个叉号最近(第一个能匹配的)的li标签（祖先元素），并且获得其id
        var index = $mytabs.children('li').index($item); // 找到该li标签对应的下标

        $item.remove();
        $bd.find('.am-tab-panel').eq(index).remove();  //删除标签相应的内容
        $mytabs.tabs('open',index-1);  // 定位到删除的标签的前一个标签
        $mytabs.tabs('refresh');
    })

事件监听函数on()中，有一个'.am-icon-close'，表示当鼠标点击具有该类的控件时，触发function()中的操作

closet('.class')函数是寻找该控件的第一个符合class这个类的祖先元素。

$mytabs.children('li').index($item)中，children('object')寻找子元素中的object标签，并且把id为‘$item’的object标签的标号返回。

eq(index)是找到标号为index的标签，并且返回其ID。

（下面一段代码来自jQuery官网）

$( "#go" ).click(function() {
  $( ".block:first" ).animate({
    left: 100
  }, {
    duration: 1000,
    step: function( now, fx ){
      // now: 每一步动画下的属性值
      $( ".block:gt(0)" ).css( "left", now );
    }
  });
});

这里的$(".block:first")是选择具有类"block"的第一个控件

$(".block:gt(0)")是选择具有类"block"的，标号大于0的控件，即除了第一个控件外。