1.查找节点(略,前面课中已介绍) 2.创建节点 3.插入节点 4.包裹节点 5.删除节点 6.复制节点 7.替换节点 8.遍历节点(略,前面课中已介绍) 9.操作DOM节点属性 10.操作样式 11.设置和获取节点内的html和文本
创建节点
a.用$()来创建节点 b.用字符串来创建节点 <script> /*var newElement = $('<div>div标签</div>'); $('body').append(newElement);*/ /*var newElement = '<div>我是用字符串方法创建的标签</div>'; $('body').append(newElement);*/ </script>
插入节点 |
A、内部插入
a. append()向每个匹配元素尾部插入DOM,匹配元素在前 b. appendTo()向每个匹配元素尾部插入DOM,匹配元素在后 c. prepend()向每个匹配元素头部插入DOM,匹配元素在前 |
d. prependTo()向每个匹配元素头部插入DOM,匹配元素在后 <script> var strong = $('<strong>我是被插入的新标签</strong>'); // $('p').append(strong); // strong.appendTo($('p')); // // $('p').prepend(strong); // strong.prependTo($('p')); // // $('p').after(strong); // strong.insertAfter($('p')); // $('p').before(strong); // strong.insertBefore($('p')); </script> 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> <script> // $('p').remove(); // $('div').empty(); // $('strong').unwrap(); </script> </body>
复制节点
a. clone(bool)克隆节点 //参数默认为false,即只克隆节点而不克隆节点的事件 |
<body> <a href="#">点击</a> <script>
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() <!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>demo7</title> <script src="jquery.js"></script> <style> .a{background: red} .b{background: #abcdef} .aa{color: #fff;} </style> </head> <body> <p title="js" class="a aa">1111111</p> <script> // $('p').attr('title','livescript'); // $('p').attr('class','b'); //$('p').removeAttr('class'); // $('p').removeAttr('class'=='aa'); </script> </body> </html>
操作样式
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()横向滚动条的位置 <style type="text/css"> .bgred{background: red;} .white{color:#fff;} </style> </head> <body> <p>我是P标签</p> <script> // $('p').addClass('bgred white'); // $('p').removeClass('white bgred'); // /*$('p').click(function(){ $(this).toggleClass('bgred white'); });*/ //$(this).hasClass('bgred')返回的一个布尔值true/false $('p').click(function(){ if($(this).hasClass('bgred')){ $(this).removeClass('bgred'); }else{ $(this).addClass('bgred'); } }); </script> </body> --------------------------------------------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>
实例
b.滚动公告 <!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> <script src="jquery.js"></script> <style> #table{border: 1px solid #abcdef;border-collapse: collapse;width: 600px;} tr{height: 30px;} th{border: 1px solid #abcdef;} td{border: 1px solid #abcdef;text-align: center;} td a{margin-right: 5px;color: #f00;} .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> <tr> <td>王五</td> <td>30</td> <td>项目经理</td> <td>10000+提成</td> <td><a href="#" class="view">查看</a><a href="#" class="del">删除</a><a href="#">修改</a></td> </tr> </table> <div class="popDiv"> <p><strong>姓名:</strong><span></span></p> <p><strong>年龄:</strong><span></span></p> <p><strong>职位:</strong><span></span></p> <p><strong>工资:</strong><span></span></p> <a href="#" class="close">关闭</a> </div>
<script> //查看 $('.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> |