Go to comments

jQuery 操作

一、内部插入

名称说明举例
append()向每个匹配元素里面的末尾处插入DOM匹配元素在前 $('target').append($('<p>glee</p>'));
appendTo()同上匹配元素在后 $('<p>glee</p>').appendTo('target');
prepend()向每个匹配元素头部插入DOM匹配元素在前 $('target').prepend('<p>Glee</p>');
prependTo()同上匹配元素在后 $('<p>Glee</p>').prependTo($('target'));
html()

获取匹配元素的DOM节点或文本节点


text()获取匹配元素的文本节点


append() 

appendTo()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部插入 append() appendTo()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
</style>
</head>
<body>
<h2>if you want me</h2>
<div id="container">
<div>玫瑰</div>
<div>玫瑰</div>
</div>
<script>
  //创建节点
  //var newElement = $('<div>1：创建div标签</div>'); 
  //插入创建的标签
  //$('body').append(newElement);
	//字符串创建元素
	//$('body').append('<div>2：字符串创建一个节点</div>'); 

    /***
    .append()函数将特定内容插入到每个匹配元素里面的最后面，作为它的最后一个子元素（last child）, 
    (如果要作为第一个子元素 （first child）, 用.prepend()).
    
    .append() 和.appendTo()实现同样的功能。主要的不同是语法——内容和目标的位置不同。
    对于.append(), 选择器表达式在函数的前面，参数是将要插入的内容。
    对于.appendTo()刚好相反，内容在方法前面，无论是一个选择器表达式或创建作为标记上的标记，它都将被插入到目标容器的末尾。
    ***/

    //在每个匹配元素里面的末尾处插入参数内容。
    //$('.inner').append($('<p>glee</p>'));
    //被选中的h2元素插入到另一个地方,是移动不是复杂
    //$('#container').append($('h2'));
    
    /***
    效果：
    <div id="container">
        <div>玫瑰
            <p>glee</p>
        </div>
        <div>
            玫瑰
            <p>glee</p>
        </div>
        <h2>if you want me</h2>
    </div>
    ****/
    //appendTo()与append()效果一样，语法不同
    $('<p>glee</p>').appendTo('.inner');
    $('h2').appendTo('#container');
</script>
</body>
</html>


prepend() 

prependTo()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部插入 prepend() ,prependTo()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
</style>
</head>
<body>

<h2>if you want me</h2>
<div id="container">
  <div>Rose</div>
  <div>Rose</div>
</div>

<script>
    //将参数内容插入到每个匹配元素的前面（元素内部）
    $('.inner').prepend($('<p>Glee</p>'));
    //插入文字
    //$('.inner').prepend('Glee');
    
    //移动h2标签
    $('#container').prepend($('h2'));
    
    /***
    效果如下
    <div id="container">
        <h2>if you want me</h2>
            <div>
            <p>Glee</p>
            Rose
            </div>
            
            <div>
            <p>Glee</p>
            Rose
            </div>
    </div>
    ***/
    
    //prepenTo()语法不同
    //$('<p>Glee</p>').prependTo($('.inner'));
    //$($('h2')).prependTo($('#container'));
</script>
</body>
</html>


html() 

text()

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html() text()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>

<p>To the world 
<span>you may be one person</span>
but to onc person
you may be the world
<em>对世界而言，你是一个人。</em>
但对某人而言，你是他的整个世界。
2018 04 14</p>

<script>
    //text()方法如果没有参数,会获得到匹配元素的文本节点,如果有参数,会修改匹配元素的文本节点
    //alert($('p').text());
    //$('p').text('新的文本节点');
    //如果匹配标签内有子元素，用html()才可以获得到匹配元素里面的所有的内容
    //alert($('p').html());
    //$('p').html('<span style="background:yellow;">If you want me</span>如果我想你');
    
    newdiv = document.createElement('div');//新建div标签
    $('body').prepend(newdiv);//插入新建div标签
    $('div').html($('p').text());//1:text()方法读取p标签内文本.2:html()方法把文本插入div
</script>
</body>
</html>


二、外部插入

名称说明举例
after()在匹配元素之后插入DOM匹配元素在前 $('target').after('<p>glee</p>');
insertAfter()同上匹配元素在前 $('<p>glee</p>').insertAfter($('target'));
before()在匹配元素之前插入DOM匹配元素在前 $('target').before($('<p>rose</p>'));
inserBefore()同上匹配元素在后 $($('<p>Glee</p>')).insertBefore('target');


after() 

insertAfter()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部插入 after() ,insertAfter()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
</style>
</head>
<body>
<div id="container">
    <h2>if you want me</h2>
    <div>玫瑰</div>
    <div>玫瑰</div>
</div>

<script>
    //在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
    //$('.inner').after('<p>glee</p>');
    //移动到#container外作为兄弟元素
    //$('#container').after($('h2'));
    
    /***
    //效果
    <div id="container">
        <div>玫瑰</div>
        <p>glee</p>
        <div>玫瑰</div>
        <p>glee</p>
    </div>
    <h2>if you want me</h2>
    ***/
    
    //insertAfter
    $('<p>glee</p>').insertAfter($('.inner'));
    $('h2').insertAfter($('#container'));
</script>
</body>
</html>


before() 

insertBefor()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部插入 before() ,insertBefor()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
</style>
</head>
<body>
<div id="container">
    <h2>if you want me</h2>
    <div>玫瑰</div>
    <div>玫瑰</div>
</div>

<script>
/***
.before()和.insertBefore()实现同样的功能。主要的不同是语法——内容和目标的位置不同。 
对于.before()要插入的内容来自方法的参数：$(target).before(contentToBeInserted)(即，选择器表达式在方法的前面，参数是将要插入的内容) 。
对于.insertBefore()刚好相反，内容在方法前面并且插入到目标的前面， 
而目标是传递给.insertBefore()方法的参数：$(contentToBeInserted).insertBefore(target)。
***/
//根据参数设定，在匹配元素的前面插入内容
//$('.inner').before($('<p>rose</p>'));
//移动
//$('#container').before($('h2'));

/***
//效果
<h2>if you want me</h2>
    <div id="container">
    <p>rose</p>
    <div>玫瑰</div>
    <p>rose</p>
    <div>玫瑰</div>
</div>
***/

//insertBefore()
$($('<p>Glee</p>')).insertBefore('.inner');
$($('h2')).insertBefore('#container');
</script>
</body>
</html>


三、包裹

名称说明举例
wrap()将所有匹配元素单独包裹
wrapAll()将所有匹配元素用一个元素包裹
wrapInner()将所有匹配的元素的子内容用其它标签包裹


code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>包裹</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
    div{border:1px solid red;margin:10px;}
#container ,#containerAll ,#containerInner{margin:20px;padding:10px;border:1px solid ghostwhite;float:left;}
    p{padding:10px;margin:10px;background:yellow;}
</style>
</head>
<body>
<h4>黄色是目标p元素,橙色是插入包裹的元素</h4>

<!-- wrap() -->
<div id="container">wrap()
  <p>gelan</p>
  <p>rose</p>
</div>

<!-- wrapAll() -->
<div id="containerAll">wrapAll()
  <p>gelan</p>
  <p>rose</p>
</div>

<!-- wrapInner() -->
<div id="containerInner">wrapInner()
  <p>gelan</p>
  <p>rose</p>
</div>

<script>
    //wrap()
    //将所有匹配元素单独包裹
    $('.inner').wrap('<div></div');
    /***
    //warp()效果
    <div id="container">wrap()
      <div><p>gelan</p></div>
      <div><p>rose</p></div>
    </div>
    ***/
    
    //将所有匹配元素用一个元素包裹
    $('.innerAll').wrapAll('<div></div');
    /***
    //warpAll()效果
    <div id="containerAll">wrapAll()
      <div>
        <p>gelan</p>
        <p>rose</p>
      </div>
    </div>
    ***/
    
    //wrapInner()将所有匹配的元素的子内容用其它标签包裹
    $('.innerInner').wrapInner('<span style="border:1px solid red;display:block;padding:10px;"></span>');
    /***
    效果
    <div id="containerInner">wrapInner()
      <p><span style="border:1px solid red;display:block;padding:10px;">gelan</span></p>
      <p><span style="border:1px solid red;display:block;padding:10px;">rose</span></p>
    </div>
    ***/
    
    
    /***
    注意: 
    当通过一个选择器字符串传递给.wrapInner()，
    其参数应该是格式正确的HTML标签应该是被正确关闭的
    如下：
    $('.inner').wrapInner("<div />");
    $('.inner').wrapInner("<div></div>");
    $('.inner').wrapInner("<div class=\"test\"></div>");
    ***/
</script>
</body>
</html>


四、克隆（拷贝）节点

名称说明举例
clone()创建一个匹配的元素集合的深度拷贝副本

//var elem = $('b').clone();//拷贝元素

//elem.prependTo('p');//插入拷贝的元素

$("b").clone().prependTo("p");//合成一行


clone(bool)克隆节点

01

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>clone(bool)</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
body{padding:100px;}
a{width: 20%;background:ghostwhite;border:1px solid orange;padding: 5px;margin:50px;}
</style>
</head>
<body>
<a href="###" id="con">Gelan</a>
<script>
    /***
    //01 给a标签添加一个点击事件
    $('a').click(function(){
      alert($(this).html());
    });
    //02 克隆a标签
    var newA = $('a').clone();
    //03 把克隆插入body
    $('body').append(newA);
    //我们克隆的a标签照道理说,应该有点击事件,但是点击克隆的a标签没有点击事情
    //原因是它只克隆的节点,没克隆点击事件
    //点击事件写克隆前面了，所以没有
    //解决方法如下:
    ***/
    /***
    //02 克隆a标签
    var newA = $('a').clone();
    //03 把克隆插入body
    $('body').append(newA);
    //01 给a标签添加一个点击事件
    $('a').click(function(){
      alert($(this).html());
    });
    
    //接上面，把点击事件写后面
    //这是顺序的问题，放到后面确实是可以的
    //如果我们就是放在前面，改怎么办呢？
    //解决方法如下：
    ***/
    
    //接上面，我们把a标签点击事件克隆过来呢？
    //我们给clone(true)写一个true.
    //01 给a标签添加一个点击事件
    $('a').click(function(){
      alert($(this).html());
    });
    //02 克隆a标签
    var newA = $('a').clone(true);
    //03 把克隆插入body
    $('body').append(newA);
</script>
</body>
</html>

02

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>clone()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
body{padding:100px;}
a{width: 20%;background:ghostwhite;border:1px solid orange;padding: 5px;margin:50px;}
</style>
</head>
<body>
  
<b>To the world,you may be one perpson.</b>
<p>but to one perpson,you may be the world.</p>
<script>
    //最基本的代码:
    //第一步克隆,
    //第二部把克隆写入DOM
    //var elem = $('b').clone();
    //elem.prependTo('p');
    
    $("b").clone().prependTo("p");
</script>
</body>
</html>

03

<!DOCTYPE html>
<html>
<head>
<title>clone()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#orig, #copy, #copy-correct{
      width: 20%;
      background:ghostwhite;
      border:1px solid orange;
      padding: 5px;
      margin:20px;
}
</style>
</head>
<body>
 
<div id="orig">#orig
    <div class="elem"><a>1</a></div>
    <div class="elem"><a>2</a></div>
    <div class="elem"><a>3</a></div>
    <div class="elem"><a>4</a></div>
    <div class="elem"><a>5</a></div>
</div>
<div id="copy">#copy</div>
<div id="copy-correct"></div>
<script>
//最基本的代码:
//第一步克隆,
//第二部把克隆写入DOM
//var elem = $('.elem').clone();
//$('#copy').append($('.elem'));
/*
//example 01:
//原始代码
$('#copy').append($('#orig .elem')
          .clone()
          .children('a')
          .prepend('foo - ')
          .parent()
          .clone());
 */
//链式操作比较多
//分解这个实例：
//第一步：克隆
var orig = $('#orig .elem')
          .clone()//克隆
          .children('a')//找到子元素a标签
          .prepend('foo - ')//给a标签插入"foo-"
          .parent();//回到父元素,如果没有这一步，克隆的是子元素a标签
          //.clone()最后这个方法省略,貌似也可以。
//第二部：把克隆的内容写入#copy
$('#copy').append(orig);
//example 02:
//与上一个例子基本一样
$('#copy-correct')
          .append($('#orig .elem')
          .clone()
          .children('a')
          .prepend('bar - ')
          .end());
//本来想了解基本的克隆方法就往下进行，花了一些时间，耐心研究这个实例，对jquery链式操作的应用收获
//实例来源：http://www.css88.com/jqapi-1.9/clone/
</script>
 
</body>
</html>


五、删除节点（DOM移除）

名称说明举例
remove()删除节点$('target').remove();
empyt()清空节点$('target').empyt();
unwrap()删除元素的父元素$('target').unwrap();
detach()删除节点，但保留jquery对象$('target').detach();
替换节点(DOM 替换)


remove()删除节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>remove()删除节点</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
div,p{border:1px solid orange;background:ghostwhite;margin:10px;padding: 10px;}
</style>
</head>
<body>

<div id="container">
    <p>gelan</p>
    <p>glee</p>
</div>

<button id="button">remove()方法删除.gelan</button>
<button>remove()方法删除div,及子元素,及文本</button>

<script>
    //remove()删除节点
    $('#button').click(function(){
        $('.gelan').remove();
    });
    
    $('.button').click(function(){
        $('div').remove();
    });
    
    //detach()
    //功能与remove()一样
    //手册解释：
    //.detach()方法和.remove()一样, 
    //除了.detach()保存所有jQuery数据和被移走的元素相关联。
    //当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用。
</script>
</body>
</html>

detach()

<!DOCTYPE html>
<html>
<head>
<title>detach()</title>
<style>
p{background:yellow;width:100px;height:100px;float:left;margin:20px;color:red;} 
p.off{background:orange;color: #fff;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <P>对于世界而言，你是一个人</P>
    <p>对于某个人，你是他的整个世界</p>
    <button>Attach/detach paragraphs</button>
<script>
    $("p").click(function(){
      $(this).toggleClass("off");
    });
    
    var p;
    $("button").click(function(){
      //alert(p);
      if (p){
        p.appendTo("body");
      p = null;
      }else{
        p = $("p").detach();
      }
    });
    
    /***
    代码解释：
    1:给p标签添加事件
    2:给button添加事件
      a:刷新页面后p标签是jquery对象,删除p标签
      b:p标签为空，插入p标签
    重点:detach()与remove()基本功能一样
    区别是：
    remove()方法删除jquery对象后,对象赋予的事件也没有了
    detach()方法删除对象后,对象事件还在
    
    手册解释：
    .detach()方法和.remove()一样, 
    除了.detach()保存所有jQuery数据和被移走的元素相关联。
    当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用。
    ***/
</script>
</body>
</html>

empty()清空节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>empty()清空节点</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
div,p{border:1px solid orange;background:ghostwhite;margin:10px;padding: 10px;}
</style>
</head>
<body>

<div id="container">
    <p>gelan</p>
    <p>glee</p>
</div>

<button id="button">清空.gelan内文本</button>
<button>移除#container内子元素(和其他后代元素)</button>

<script>
    //这个方法不仅移除子元素(和其他后代元素)，同样移除元素里的文本。
    //empty()清空节点
    $('#button').click(function(){
        $('.gelan').empty();
    });
    
    $('.button').click(function(){
        $('#container').empty();
    });
</script>
</body>
</html>

unwrap()删除元素的父元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>unwrap()删除元素的父元素</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
div,p{border:1px solid orange;background:ghostwhite;margin:10px;padding: 10px;}
</style>
</head>
<body>

<div id="container">
    <p>gelan</p>
    <p>glee</p>
</div>
<button id="button">wrap/unwrap</button>

<script>
    //.unwrap()删除元素的父级元素和.wrap()的功能相反。
    //匹配的元素(以及他们的兄弟元素，如果有的话)取代他们的父母在DOM结构。
    
    //unwrap()删除元素的父元素
    $('#button').click(function(){
        if($('p').parent().is('#container')){
            $('p').unwrap();
        }else{
            $('p').wrap('<div id="container"/>');
        }
    });
</script>
</body>
</html>


六、替换节点（DOM替换）

名称说明举例
replaceWith()将所有匹配的元素替换成指定的HTML或DOM元素$('target').replaceWith('<h2>LiLi</h2>');
replaceAll()用指定的元素替换掉所有选择到匹配的元素$('<h2>LiLi</h2>').replaceAll('tarset');


替换

<!DOCTYPE html>
<html>
<head>
<title>替换</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
body{padding:100px;}
div, p{width: 20%;background:ghostwhite;border:1px solid orange;padding:5px;margin-bottom:20px;margin-top:20px;}
</style>
</head>
<body>
 
<div class="container">
  <div class="inner first">gelan</div>
  <div class="inner second">glee</div>
  <div class="inner third">rose</div>
</div>
<button>点击</button>

<div class="wrap">
  <p class="inner first">01 gelan</p>
  <p class="inner second">02 glee</p>
  <p class="inner third">03 rose</p>
</div>
<a>点击</a>

<script>
    //.third替换成h2
    $("button").click(function(){
        $('div.third').replaceWith('<h2>LiLi</h2>');
        //replaceAll()与replaceWith()功能一样,区别：目标和源相反
        //$('<h2>LiLi</h2>').replaceAll('div.third');
    });
    
    //通俗的说就是把03换成01(01是移动)
    $("a").click(function(){
        $('p.third').replaceWith($('p.first'));
        //replaceAll()与replaceWith()功能一样,区别：目标和源相反
        //$('p.first').replaceAll('p.third');
    });
</script>
</body>
</html>



Leave a comment 0 Comments.

Leave a Reply

换一张