JQuery官方学习资料(译):操作元素
- 获取和设置元素的信息
- .html():获取或设置HTML的内容。
- .text():获取或设置文本内容。
- .attr():获取或设置指定属性的值。
- .width():获取或设置选择器中第一个元素的宽度,值为整数,单位为像素点。
- .height():获取或设置选择器中第一个元素的高度,值为整数,单位为像素点。
- .position():获取选择器中第一个元素对象的位置信息,相对于其第一个定位的先祖,这是一个只读方法。
- .val():获取或设置表单元素的值。
// 改变一个元素内的HTML $( "#myDiv p:first" ).html( "New <strong>first</strong> paragraph!" ); |
- 移动元素
- 相对于其他元素来放置被选元素。
- 相对于被选元素来放置其他元素。
// 使用不同的方法移动元素 // 第一种方式 var $li = $( "#myList li:first" ).appendTo( "#myList" ); // 第二种方式 $( "#myList" ).append( $( "#myList li:first" ) ); |
- 克隆元素
// 拷贝列表的第一个项到列表的末尾 $( "#myList li:first" ).clone().appendTo( "#myList" ); |
如果你需要拷贝相关的数据和事件,那么你需要传递true作为参数给.clone()方法。
- 删除元素
- 创建新元素
// 通过HTML字符串创建一个新元素。 $( "<p>This is a new paragraph</p>" ); $( "<li class=\"new\">new list item</li>" ); // 创建带有属性的新元素。 $( "<a/>", { html: "This is a <strong>new</strong> link", "class": "new", href: "foo.html" }); |
var $myNewElement = $( "<p>New element</p>" ); $myNewElement.appendTo( "#content" ); $myNewElement.insertAfter( "ul:last" ); //这将$myNewElement从#content中移除 $( "ul" ).last().after( $myNewElement.clone() ); // 克隆一个新的元素,这样我们就有2个了 |
被创建的元素并不需要保存在变量中,你可以直接在$()之后调用方法添加元素到页面上。但是大部分情况下你是需要这个被添加元素的引用的。
// 这样创建元素你将无法获取这个元素的引用 $( "ul" ).append( "<li>list item</li>" ); |
这样添加新元素的语法是非常简单的,所以人们经常忘记反复这样的操作会对性能产生巨大的负面影响。如果你添加一些元素到相同的容器,你可以用一个字符串连接所有的HTML,然后一次添加到容器上,而不是一个个元素进行添加。
var myItems = []; var $myList = $( "#myList" ); for ( var i = 0; i < 100; i++ ) { myItems.push( "<li>item " + i + "</li>" ); } $myList.append( myItems.join( "" ) ); |
- 操作属性
// 操作一个属性 $( "#myDiv a:first" ).attr( "href", "newDestination.html" ); // 操作多个属性 $( "#myDiv a:first" ).attr({ href: "newDestination.html", rel: "super-special" }); // 使用一个函数去确定一个属性的新值 $( "#myDiv a:first" ).attr({ rel: "super-special", href: function( idx, href ) { return "/new/" + href; } }); $( "#myDiv a:first" ).attr( "href", function( idx, href ) { return "/new/" + href; }); |
JQuery官方学习资料(译):操作元素的更多相关文章
- JQuery官方学习资料(译):选择元素
选择元素 JQuery最基本的概念是“选择一些元素并让它们做些什么”.JQuery支持大部分的CSS3的选择器,以及一些非标准的选择器. 通过ID选择元素 $( "#myId&quo ...
- JQuery官方学习资料(译):JQuery对象
每当创建一个新的元素(或者选择一个已经存在的元素)时,JQuery将返回一个元素的集合.大部分的开发人员新接触JQuery的时候,都把这个集合当做数组.这个集合中的DOM元素有从零开始的索引, ...
- JQuery官方学习资料(译):使用JQuery的.index()方法
.index()是一个JQuery对象方法,一般用于搜索JQuery对象上一个给定的元素.该方法有四种不同的函数签名,接下来将讲解这四种函数签名的具体用法. 无参数的.index() < ...
- JQuery官方学习资料(译):遍历JQuery对象和非JQuery对象
JQuery提供了一个对象遍历的Utility方法$.each()和一个JQuery集合遍历方法.each(). $.each() $.each()是一个通用的方法用来遍历对象和数组, ...
- JQuery官方学习资料(译):避免与其他库的冲突
避免与其他库的冲突 JQuery库和它所有的插件都是包含在jQuery命名空间下的,作为一般规则,全局对象被存储在jQuery的命名空间内,所以你不会得到jQuery和任何其他库之间的冲突(例 ...
- JQuery官方学习资料(译):类型
类型 JavaScript提供了多个内置数据类型.除了这些,这份文档还将介绍一些虚拟类型,例如选择器.伪类.事件等. String 在JavaScript中字符串是一个不可变的对象,它包含无. ...
- JQuery官方学习资料(译):Utility方法
JQuery提供了一些utility方法在$命名空间里,这些方法对完成常规的编程任务非常有帮助. $.trim() 删除前后部的空白内容. // 返回 "lots of ex ...
- JQuery官方学习资料(译):Data方法
你可能经常会想需要通过元素来存储一些数据.在JavaScript中你可能需要给元素添加属性来实现这样的功能,但是在某些浏览器中,你可能还需要处理因此造成的内存泄露问题.JQuery提供了一个简 ...
- JQuery官方学习资料(译):CSS
JQuery提供了一个处理方法,可以获取或设置元素的CSS属性. // 获取 CSS 属性 $( "h1" ).css( "fontSize" ); / ...
随机推荐
- IOS 模拟器多开集成测试和那些坑
#### 前言公司一直没有IOS自动化,搞得很尴尬,个人感觉搞自动测试的,不搞IOS自动化,就像金X,少了重要一点啊.也向领导申请过不止一次,总只都各种原因没有分配机器,不了了之.某天线上IOS出bu ...
- impala教学视频
https://www.iqiyi.com/playlist394935102.html
- 目标检测算法(2)SPP-net
本文是使用深度学习进行目标检测系列的第二篇,主要介绍SPP-net:Spatial Pyramid Pooling in Deep ConvolutionalNetworks for Visual R ...
- 51nod OJ P1000 A+B
P1000 A+B OJ:51Nod 链接:"http://www.51nod.com/Challenge/Problem.html#!#problemId=1000" 题目描述: ...
- 基于TensorFlow的深度学习系列教程 2——常量Constant
前面介绍过了Tensorflow的基本概念,比如如何使用tensorboard查看计算图.本篇则着重介绍和整理下Constant相关的内容. 基于TensorFlow的深度学习系列教程 1--Hell ...
- 【云盘资料】Sql注入从菜鸟到高手系列教程
[云盘资料]Sql注入从菜鸟到高手系列教程 ps:Sql注入从菜鸟到高手系列教程 链接:阅读原文获取资料:http://bbs.ichunqiu.com/thread-6851-1-1.html 反馈 ...
- MySQL索引优化看这篇文章就够了!
阅读本文大概需要 5 分钟. 来源:cnblogs.com/songwenjie/p/9410009.html 本文主要讨论MySQL索引的部分知识.将会从MySQL索引基础.索引优化实战和数据库索引 ...
- 第33节:Java面向对象中的异常
Java中的异常和错误 Java中的异常机制,更好地提升程序的健壮性 throwable为顶级,Error和Exception Error:虚拟机错误,内存溢出,线程死锁 Exception:Runt ...
- AI - Tips
01- Playground http://playground.tensorflow.org TensorFlow的网页工具Playground提供了几种简单类型的data,可以调节网络结构.学习率 ...
- Docker - 参考信息
初见 从 0 开始了解 Docker 可能是把Docker的概念讲的最清楚的一篇文章 Docker新手指南 8 个基本的 Docker 容器管理命令 Docker 核心技术与实现原理 在线教程 Doc ...