详解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 打开窗口返回值实现代码
Mar 04 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 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中str_pad()函数用法分析
2017/03/28 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
解析Python中的异常处理
2015/04/28 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
在python中修改.properties文件的操作
2020/04/08 Python
jupyter实现重新加载模块
2020/04/16 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
美国时尚女装在线:Missguided
2016/12/03 全球购物
安全生产标语大全
2014/10/06 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS