详解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 相关文章推荐
javascript中的location用法简单介绍
Mar 07 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
原生JavaScript实现拖动校验功能
Sep 29 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
php 三元运算符实例详细介绍
2016/12/15 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
vue-router定义元信息meta操作
2020/12/07 Vue.js
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
Python常见数据结构详解
2014/07/24 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
python处理excel绘制雷达图
2019/10/18 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
python 利用toapi库自动生成api
2020/10/19 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
PHP面试题集
2016/12/18 面试题
小学同学聚会感言
2015/07/30 职场文书
2019年最新借条范本!
2019/07/08 职场文书
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫