详解jQuery中的元素的属性和相关操作

前端技术 2023/09/04 JavaScript

元素属性

元素的属性中可以包含很多有用的信息，所以如何设置或得到属性中的值，就显得非常重要。

jQuery 的 $.fn.attr 方法可以作为 setter 和 getter 使用，用来设置或获取属性的值。和 $.fn.css 用法类似，$.fn.attr 既可一次性接受单个属性，也可以接受多个属性（对象） ：

$(\'a\').attr(\'href\', \'allMyHrefsAreTheSameNow.html\');
$(\'a\').attr({
  \'title\' : \'all titles are the same too!\',
  \'href\' : \'somethingNew.html\'
});

上面代码中写对象的时候写成多行了，更具可读性。

$(\'a\').attr(\'href\'); // 返回选择其中第一个超链接的链接地址

一旦选择器的结果集中有元素了，就可以这些元素为基准点遍历其它元素了。关于 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 的保留字，html 和 href 不是，所以不需要加引号。

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

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(\'\'));

本文地址：https://www.stayed.cn/item/9340

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案