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

webdev2014

浏览: 680675 次

最近访客更多访客>>

u012363178

仙丹灵药

hellodota

WIN2333

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1653)

社区版块

存档分类

2014-04 ( 64)
2014-03 ( 97)
2014-02 ( 113)
更多存档...

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(){

var newLi = $('ul>:first').clone(true);
$('ul').append(newLi);
$('ul>:first').remove();

},2000);

</script>
</body>
</html>

分享到：

2014-04-07 22:41
浏览 310
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论