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的控件，即除了第一个控件外。

巴特西

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

最新文章

热门文章