jQuery 基础 3

一旦选择器的结果集中有元素了,就可以这些元素为基准点遍历其它元素了。关于 jQuery 遍历元素的方法,详见 http://api.jquery.com/category/traversing/,如:

$('h1').next('p');
$('div:visible').parent();
$('input[name=first_name]').closest('form');
$('#myList').children();
$('li.selected').siblings();

还可以用 $.fn.each 方法,对结果集中的元素一个一个处理:

$('#myList li').each(function(idx, el) {
    console.log(
        'Element ' + idx +
        'has the following html: ' +
        $(el).html()
    );
});

移动、复制、删除元素

如果要移动一个元素的位置:

// 把第一个列表移至最后
var $li = $('#myList li:first').appendTo('#myList');

// 另外一种方法,也能达到同样效果
$('#myList').append($('#myList li:first'));

复制一个元素

// 把第一个 li 做一份拷贝,然后放置列表的最后
$('#myList li:first').clone().appendTo('#myList');

如果复制元素的时候,想把元素的属性和事件等信息也一起复制了的话,调用 $.fn.clone 的时候给个参数 true 就 OK 了。

再说删除元素,jQuery 中各有两种方法可以删除元素:$.fn.remove$.fn.detach,这两个方法都可以从页面中删除元素,并且这两种方法的返回值都是被删除的元素,区别是 $.fn.remove 的返回的元素中的不再包含元素的一些附属信息,如 id 和 class 等信息,也不包括元素上绑定的事件。$.fn.detach 则不同,将被删除元素中的附属信息和事件也一并保存了下来,具体是用哪种,要看实际需求了。

创建新元素

jQuery 可以很快捷的换件新元素:

$('<p>这是一个新段落</p>');
$('<li class="new">新列表元素</li>');

$('<a/>', {
    html : '这是一个 <strong>新</strong> 超链接',
    'class' : 'new',
    href : 'foo.html'
});

注意上面传入的 JavaScript 对象,里面的第二个属性 class 被加了引号,因为 class 是 JavaScript 的保留字,htmlhref 不是,所以不需要加引号。

创建新元素后,新元素并不会自动加入到页面中。加入页面中的话,可以用下面的方法:

var $myNewElement = $('<p>New element</p>');
$myNewElement.appendTo('#content');

$myNewElement.insertAfter('ul:last'); // 此操作会把 p 元素从 #content 中移除
$('ul').last().after($myNewElement.clone());  // 当然也可以克隆一个出来,现在 #content 中有两个 p 了哦

严格来说,不是一定要将新创建的元素保存在一个变量中,可以在创建后直接加入页面内。但是很多时候新创建的元素都要被多次使用,所以要缓存在一个变量中,这样不用重复去创建它了。

你甚至可以在向页面添加元素时创建它,但是这种情况下无法获得新创建元素的引用:

$('ul').append('<li>list item</li>');

往页面中添加新元素非常简单,但是如果需要向页面新加很多很多个元素的话,可能会有性能问题。因为每次向页面中添加元素,整个页面的 HTML 都要作为字符串参与拼接,这是非常耗费性能的。这种情况下,通常有以下处理方法:

var myItems = [], $myList = $('#myList');

for (var i=0; i<100; i++) {
    myItems.push('<li>item ' + i + '</li>');
}

$myList.append(myItems.join(''));

via http://jqfundamentals.com/

Posted on 2012-03-06

No Comments

Leave a Comment