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


Posted in Javascript onAugust 14, 2015

元素属性

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

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(''));
Javascript 相关文章推荐
Dom操作之兼容技巧分享
Sep 20 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
javascript时间函数大全
Jun 30 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
第一篇初识bootstrap
Jun 21 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
js实现图片放大展示效果
Aug 30 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
js实现人才网站职位选择功能的方法
Aug 14 #Javascript
jQuery入门基础知识学习指南
Aug 14 #Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 #Javascript
js实现Select列表各项上移和下移的方法
Aug 14 #Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 #Javascript
jQuery编程中的一些核心方法简介
Aug 14 #Javascript
CSS图片响应式 垂直水平居中
Aug 14 #Javascript
You might like
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
js面向对象的写法
2016/02/19 Javascript
js微信分享API
2020/10/11 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
Vue SSR 组件加载问题
2018/05/02 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
Python 流程控制实例代码
2009/09/25 Python
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
用python找出那些被“标记”的照片
2017/04/20 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python实现五子棋程序
2020/04/24 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
简历中自我评价分享
2013/10/09 职场文书
物流管理专业应届生求职信
2013/11/21 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
电影复兴之路观后感
2015/06/02 职场文书
《小摄影师》教学反思
2016/02/18 职场文书