jQuerry 对dom 的操作

最新推荐文章于 2025-01-22 08:35:27 发布

原创最新推荐文章于 2025-01-22 08:35:27 发布 · 346 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuerry

jQuerry 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了使用jQuery进行元素操作的方法，包括元素的添加、替换、删除等常见操作，并解释了如何利用jQuery简化DOM操作，提高网页开发效率。

.clone()

$('.hello').appendTo('.goodbye');  会移除hello元素 添加到goodbye元素后面
$('.hello').clone().appendTo('.goodbye'); 不移除hello,添加googbye后面

.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )
withDataAndEvents (默认: false)
类型: Boolean
一个Boolean值，表示是否会复制元素上的事件处理函数。 默认值是 false。
deepWithDataAndEvents (默认: value of withDataAndEvents)
类型: Boolean
一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。默认情况下它的值相匹配的
第一个参数的值（ 默认值是 false）

.get( index )

一个元素集合获取对应index元素(类似数组,从0开始)
var index = $("div").index(this); index 是数字

.map( callback(index, domElement) )

一个元素集合并遍历每个元素,并且返回一个新的元素对象

    $("p").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );  //join("")生成的元素字符串集合 什么字符串来合并成一个新的字符串

.wrap( function )

对元素集合遍历产生一个外包元素

$('.inner').wrap(function() {
  return '<div class="' + $(this).text() + '" />';
});

$("p").wrap("<div></div>");
两种写法

#######wrapAll###########
.wrapAll()
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

---> $('.inner').wrapAll('<div class="new" />'); <--
<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>
#########################

####### wrapInner() #####

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

---> $('.inner').wrapInner('<div class="new" />');<--

<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>
#########################

.append()

添加子元素

.append( content [, content ] )
content 可以是 DOM 元素，文本节点，元素和文本节点的数组，HTML字符串，或者jQuery对象，用来插在每个
匹配元素里面的末尾。 a.apend($('a'))
$('.inner').append('<p>Test</p>');  a.append(b)  b添加到a的末尾
a.appendTo( b )  a添加到b的末尾
.prepend()
.prependTo()
将参数内容插入到每个匹配元素的前面（元素内部）。


<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

$('div.demo-container').html(); -->返回是 <div class="demo-box">Demonstration Box</div> html文本
$('div.demo-container').text(); -->返回是 Demonstration Box 文本

.after .before .insertAfter .insertBefore

添加兄弟节点

.after() //在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
$('.inner').after('<p>Test</p>');  .inner 后面插入 <p>标签作为兄弟节点
.before() //在匹配元素集合中的每个元素前面插入参数所指定的内容，作为其兄弟节点。
$('.inner').before('<p>Test</p>');  .inner 前面插入 <p>标签作为兄弟节点
------------------------------
$('<p>Test</p>').insertAfter('.inner'); 
<p>插入到.inner 后面  

$('<p>Test</p>').insertBefore('.inner'); 
<p>插入到.inner 前面

.detach .remove .empty .unwrap

删除元素节点

.detach(翻译:派遣; 分离) 从DOM中去掉所有匹配的元素。但会返回一个自己的克隆.
p = $("p").detach();

.empty()
从DOM中移除集合中匹配元素的所有子节点。

.remove()
将匹配元素集合从DOM中删除. 不会有任何返回值
$('.hello').remove();

.unwrap()
将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

  if ( pTags.parent().is( "div" ) ) {
    pTags.unwrap();
  } else {
    pTags.wrap( "<div></div>" );
  } //和 wrap 搭配 删除和添加父元素

.replaceAll() .replaceWith()

元素替换

.replaceAll(target)
用集合的匹配元素替换每个目标元素。
a.replaceAll(b)  b集合中每个元素都被a替换
---------------------
.replaceWith()
提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
a.replaceWith(b)  a集合中每个元素都被b替换