jQuery学习第四课(jquery中的DOM操作)

浏览数：22 / 时间：2015年06月09日

jquery中DOM操作

1.查找节点（略,前面课中已介绍）

2.创建节点

3.插入节点

4.包裹节点

5.删除节点

6.复制节点

7.替换节点

8.遍历节点（略,前面课中已介绍）

9.操作DOM节点属性

10.操作样式

11.设置和获取节点内的html和文本

创建节点

a.用$()来创建节点

b.用字符串来创建节点

/*var newElement = ‘<div>我是用字符串方法创建的标签</div>‘;
$(‘body‘).append(newElement);*/
</script>

插入节点

A、内部插入

a. append()向每个匹配元素尾部插入DOM，匹配元素在前

b. appendTo()向每个匹配元素尾部插入DOM，匹配元素在后

c. prepend()向每个匹配元素头部插入DOM，匹配元素在前

d. prependTo()向每个匹配元素头部插入DOM，匹配元素在后

B、外部插入

a. after()在匹配元素之后插入DOM，匹配元素在前

b. insertAfter()在匹配元素之后插入DOM，匹配元素在后

c. before()在匹配元素之前插入DOM，匹配元素在前

d. insertBefore()在匹配元素之前插入DOM，匹配元素在后

包裹节点

a. wrap()将所有匹配元素单独包裹

b. wrapAll()将所有匹配元素用一个元素包裹

c. wrapInner()将所有匹配的元素的子内容用其它标签包裹

<body>
<p>我是第一个P标签</p>
<p>我是第二个P标签</p>
<script>
// $(‘p‘).wrap(‘<div></div>‘);
// $(‘p‘).wrapAll(‘<div></div>‘);

// $(‘p‘).wrapInner(‘<div>11111</div>‘);
</script>
</body>

删除节点

a. remove()删除节点

b. empyt()清空节点

c. unwrap()删除元素的父元素1.4+

d. detach()删除节点，但保留jquery对象

<body>
<p>我是P标签</p>
<span>我是span标签</span>
<div><strong>我是div标签</strong>1111111</div>
<em>我是em标签</em>

复制节点

a. clone(bool)克隆节点 //参数默认为false，即只克隆节点而不克隆节点的事件

var newA = $(‘a‘).clone(true);
$(‘body‘).append(newA);

  $(‘a‘).click(function(){
   alert(1111);
  });

</script>
</body>

替换节点

a. replaceWidth()将所有匹配的元素替换成指定的HTML或DOM元素

b. replaceAll()用指定的元素替换掉所有选择到匹配到的元素

<body>
<p>我是P标签</p>
<script>
  //alert($(‘p‘).html())
  // $(‘p‘).replaceWith(‘<strong>我是strong标签</strong>‘);
  $(‘<strong>我是strong标签</strong>‘).replaceAll($(‘p‘));
</script>
</body>

操作DOM节点属性

a. attr(key,value)获取添加属性值

b. removeAttr()删除属性值

c. prop()同attr()

d. removeProp()同removeAttr()

操作样式

addClass()添加样式

removeClass()移除样式

toggleClass()切换样式

hasClass()判断是否有样式

css()设置匹配元素的css样式（行内样式）

height()获取高度

innerHeight()获取padding的高度，不包括border

outerHeight(bool)参数为true时获取内外边距和border的高度

width()获取宽度

innerWidth()获取包括padding的宽度，不包括border

outerWidth()参数为true时获取内外边距和border的宽度

offset()获取元素的位置

offsetParent()离匹配元素最近的有position属性的元素

position()相对于offsetParent()的坐标

scrollTop()纵向滚动条的位置

scrollLeft()横向滚动条的位置

--------------------------------------------css()------------------------------------------------------

<body>
<p>11111111</p>
<script>
  /*$(‘p‘).css(‘background‘,‘red‘).css(‘color‘,‘white‘).css(‘border‘,‘10px solid #abcdef‘);*/
  $(‘p‘).css({
   ‘backgroundColor‘:‘red‘,
   ‘color‘:‘white‘,
   ‘border‘:‘10px solid #abcdef‘
  });
  //建议大家把css属性名用引号引起来
</script>
</body>

-------------height()---innerHight()------outerHeight()---------------------------

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo10</title>
<script src="jquery.js"></script>
<style type="text/css">
  p{height: 30px;border: 10px solid red;padding: 10px;margin:10px;}
</style>
</head>
<body>
<p>1111111111</p>
<script>
  //alert($(‘p‘).height());
  //innerHight()方法获得到的高度不把border和margin计算进去,但是会把padding值计算进去
  //outerHeight()方法如果参数不写，为默认值false，不会把margin值计算进去，如果参数为true，会把border,margin,padding都计算进去
  alert(‘我是outerHeight获得到的高度：‘+$(‘p‘).outerHeight(true));
  alert(‘我是innerHeight获得到的高度：‘+$(‘p‘).innerHeight());
</script>
</body>

-----------------offset()------position()----------------------------------------

offsetParent()在前面课中讲过

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo1</title>
<style type="text/css">
  *{margin: 0;}
  div{
   position: relative;
   left: 20px;
   top: 20px;
   width: 200px;
   height: 200px;
   background: red;
  }
  p{
   position: absolute;
   left: 100px;
   top: 50px;
   width: 50px;
   height: 50px;
   background: yellow;
  }
</style>
<script src="jquery.js"></script>
</head>
<body>
<div>divdivdiv
  <p>ppppp</p>
</div>
<script>
  /*var a = $(‘p‘).offset();
  alert(a.left);
  alert(a.top);*/

  var a = $(‘p‘).position();
  var b = $(‘p‘).offset();
  alert(‘position方法获得到的值‘+a.left);
  alert(‘offset方法获得到的值‘+b.left);
</script>
</body>

------------------------scrollTop()---------------------------------------------

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo12</title>
<script src="jquery.js"></script>
<style>
  button{
   position: fixed;
   top: 50px;
  }
</style>
</head>
<body style="height:8000px">
<button>弹出滚动条离顶部的距离</button>
<script>
  $(‘button‘).click(function(){
   alert($(window).scrollTop());
  });
</script>
</body>

设置和获取节点内的html和文本

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

b. html()获取匹配元素的dom节点或文本节点

<body>
<p>11<strong style="background:red">111</strong>11</p>
<script>
  // text()方法如果没有参数，会获得到匹配元素的文本节点，如果有参数，会修改匹配元素的文本节点
  // alert($(‘p‘).text());
  // $(‘p‘).text(‘2222222‘);
  // 如果匹配标签内有子元素，用html()才可以获得到匹配元素里面的真实内容
  alert($(‘p‘).html());
  $(‘p‘).html(‘22222<span style="background:#f90">22222</span>22222‘)
</script>
</body>

实例

a.查看，修改，删除

b.滚动公告

  .popDiv{
   width: 500px;
   padding: 10px;
   border: 1px solid red;
   position: absolute;
   left: 50%;
   margin-left: -250px;
   top: 100px;
   background: #fff;
   display: none;
   z-index: 4;
  }
  .popDiv p{
   border-bottom: 1px solid red;
  }
</style>
<script src="jquery.js"></script>
</head>
<body>

<table id="table">
  <tr>
   <th>姓名</th>
   <th>年龄</th>
   <th>职位</th>
   <th>工资</th>
   <th>操作</th>
  </tr>

  <tr>
   <td>张三</td>
   <td>23</td>
   <td>资深前端工程师</td>
   <td>12000</td>
   <td><a href="#" class="view">查看</a><a href="#" class="del">删除</a><a href="#">修改</a></td>
  </tr>

  <tr>
   <td>李四</td>
   <td>28</td>
   <td>资深java程序员</td>
   <td>12000</td>
   <td><a href="#" class="view">查看</a><a href="#" class="del">删除</a><a href="#">修改</a></td>
  </tr>

</table>

//查看
$(‘.view‘).click(function(){

   var maskHeight = $(document).height();
   var maskWidth = $(document).width();
   //alert(maskWidth)
   //添加遮照层
   $(‘<div class="mask"></div>‘).appendTo($(‘body‘));
   $(‘div.mask‘).css({
    ‘opacity‘:0.4,
    ‘background‘:‘#000‘,
    ‘position‘:‘absolute‘,
    ‘left‘:0,
    ‘top‘:0,
    ‘height‘:maskHeight,
    ‘width‘:maskWidth,
    ‘z-index‘:2

});

   var arr = [];
   $(this).parent().siblings().each(function(){
    arr.push($(this).text());
   });
   //alert(arr);
   $(‘.popDiv‘).show().children().each(function(i){
    $(this).children(‘span‘).text(arr[i]);
   });

   //关闭
   $(‘.close‘).click(function(){
    $(this).parent().hide();
    $(‘.mask‘).remove();
   });
  });

  //删除
  $(‘a.del‘).click(function(){
   $(this).parents(‘tr‘).remove();
  });
</script>

</body>
</html>

------------------------滚动公告-------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>滚动公告</title>
<style>
  *{padding: 0;margin: 0;}
  body{margin: 50px;}
  ul{list-style-type: none;}
  li{height: 30px;line-height: 30px;}
</style>
<script src="jquery.js"></script>
</head>
<body>
<ul>
  <li>我是第1条公告。。。。。</li>
  <li>我是第2条公告。。。。。</li>
  <li>我是第3条公告。。。。。</li>
  <li>我是第4条公告。。。。。</li>
  <li>我是第5条公告。。。。。</li>
  <li>我是第6条公告。。。。。</li>
  <li>我是第7条公告。。。。。</li>
  <li>我是第8条公告。。。。。</li>
  <li>我是第9条公告。。。。。</li>
  <li>我是第10条公告。。。。。</li>
</ul>
<script>
setInterval(function(){