详解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 相关文章推荐
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
详解javascript遍历方式
Nov 11 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
在vue项目中使用md5加密的方法
Sep 14 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
做个自己站内搜索引擎
2006/10/09 PHP
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
Python字符串处理之count()方法的使用
2015/05/18 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
Django 大文件下载实现过程解析
2019/08/01 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
公司庆典邀请函范文
2014/01/13 职场文书
小学运动会表扬稿
2014/01/19 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
实习科室评语
2015/01/04 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
总结一些Java常用的加密算法
2021/06/11 Java/Android