jQeury入门:操作元素 Manipulating Elements

页面导航:首页 > 网络编程 > JavaScript > jQeury入门:操作元素 Manipulating Elements

jQeury入门:操作元素 Manipulating Elements

来源: 作者: 时间:2016-01-22 08:40 【

更完整的jQuery操作方法,参见 Manipulation documentation on api jquery com。获取和设置关于元素的信息有很多方法可以改变当前的元素。在这些方法中最常用的任务是改变元素内部的HTML或者属性

 

获取和设置关于元素的信息

有很多方法可以改变当前的元素。在这些方法中最常用的任务是改变元素内部的HTML或者属性。jQuery为这些类型的操作提供了简单的,跨浏览器的方法。你也能够用很多同样的方法用它的获取函数化身来获取关于元素的信息。关于获取函数和设置函数的更多信息,参见 Working with Selections章节。这里有一些你可以用来设置和获取元素信息的方法:

.html() – 获取或设置元素中的HTML内容。 .text() – 获取或设置元素中的文本内容;HTML代码会被过滤。 .attr() – 获取或设置元素提供的属性的值。 .width() – 获取或设置包装集中的首个元素的宽度整数像素值。 .height() – 获取或设置包装集中的首个元素的高度整数像素值。 .position() – 获取包装集中第一个含有定位信息元素的对象,相对于它的第一个被定位的上代元素。这个方法只有获取函数。 .val() – 获取或设置表单元素的值。

更改相关元素的一些东西不是很重要,但是记住,这个改变将影响包装集中的所有元素。如果你只想更改一个元素,那么在调用设置函数之前,一定要在包装集中指定它。

//更改元素的HTML
$( #myDiv p:first ).html( New first paragraph! );

移动,复制,和删除元素

有各种各样的方法让元素在DOM中移动,常用的有两种方法:

相对于另一元素来放置所选元素。 相对于所选元素来放置一个元素。

举例来说,jQuery提供.insertAfter().after().insertAfter() 方法将被选择的元素做为一个参数放置到提供的元素后。.after() 方法将提供的元素做为参数放置到被选择元素之后。一些其他的方法也延用这种模式:.insertBefore().before(), .appendTo().append(), 以及 .prependTo().prepend().

最有意义的方法将取决于所选择的元素,以及是否需要存储你添加到页面中的元素的引用
(添加后,是否还需要调用被添加的元素?——译者按)。如果你需要存储引用,你最好使用第一种办法——将所选元素相对于另外一个元素——这样会返回这个放置的元素。既然这样,.insertAfter().insertBefore().appendTo(),和 .prependTo() 就是被选择的操作。

//用不同的方式移动元素

//让第一条排列到的列表的最后一条
var li = $( #myList li:first ).appendTo( #myList );

//解决同一个问题的另外一种方法:
$( #myList ).append( $( #myList li:first ) );

//注意,没有办法访问添加的列表项,被移动后,返回的是列表本身。

克隆元素

.appendTo()这样的方法移动元素,但是某些时候是需要元素的副本。如果这样,最好用.clone()

// 生成一个元素的副本

//复制列表项的第一项到列表最后:
$( #myList li:first ).clone().appendTo( #myList );

如果你需要复制相关的数据和事件,确定传递参数true.clone()

删除元素

有两种方式将元素从页面中删除:.remove().detach()。当你想彻底在页面中删除包装集时,使用.remove()。虽然.remove()会返回删除的元素,如果它们再次在页面中出现,这些元素将不再有依附于他们的关联数据和事件。

如果你需要保留这些数据和事件,使用.detach()。和.remove()一样,它会返回包装集,但在包装集中,它也维持了数据和事件的关联,所以稍后你能够在页面中恢复这个包装集。

如果你对元素做了大量的操作,.detach()方法是非常有价值的。既然这样,从页面中.detach()元素是有益于继续在代码中操作它,然后需要的话就在页面中恢复它。这样限制了昂贵的”DOM touches”并且保留了元素的数据和事件。

如果在页面中你想保留元素但是删除它的内容,你能使用.empty()来处理元素的内部HTML。

创建新元素

jQuery提供了一个平凡且简洁的办法,用和创建包装集一样的$()方法来创建新元素:

// 用HTML字符串创建新的元素
$( 

This is a new paragraph

); $(
  • new list item
  • ); // 用属性对象创建一个新元素 $(

    
    

    
    
    • 
      
      • 
        

         

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<