查看文章 |
jQuery基础教程笔记3
2008-06-30 10:03
17, 做一个实例 ： 段落 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" c /> <title>DOM Manipulation</title> <script src="jquery.js" type="text/javascript"></script> <SCRIPT LANGUAGE="JavaScript"> $(function(){ // $('<a href="#top">回到顶部</a>').insertAfter('div.chapter p');//每个段落后面添加 超链接 $('<a href="#top">回到顶部</a>').insertAfter('div.chapter p:gt(2)');//（除掉前3个 ）每个段落后面添加 超链接 $('<a name="top"></a>').prependTo('body');//在body后的开始位置 添加 超链接。 }) </SCRIPT> </head> <body> <h1 id="excerpt">Demo</h1> <div class="chapter"> <p>段落1段落1段落1段落1<br/><br/><br/><br/><br/><br/></p> <p>段落2段落2段落2段落2<br/><br/><br/><br/><br/><br/></p> <p>段落3段落3段落3段落3<br/><br/><br/><br/><br/><br/><br/></p> <p>段落4段落4段落4段落4<br/><br/><br/><br/><br/><br/><br/></p> <p>段落5段落5段落5段落5<br/><br/><br/><br/><br/><br/><br/></p> <p>段落6段落6段落6段落6<br/><br/><br/><br/><br/><br/><br/></p> <p>段落7段落7段落7段落7<br/><br/><br/><br/><br/><br/><br/></p> </body> </html> 改进： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" c /> <title>DOM Manipulation</title> <script src="[url=http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js]http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js[/url]" type="text/javascript"></script> <SCRIPT LANGUAGE="JavaScript"> $(function(){ // $('<a href="#top">回到顶部</a>').insertAfter('div.chapter p');//每个段落后面添加 超链接 $('<a href="#top">回到顶部</a>').insertAfter('div.chapter p:gt(2)');//（除掉前3个 ）每个段落后面添加 超链接 $('<a name="top"></a>').prependTo('body');//在body后的开始位置 添加 超链接。 $('div.chapter p').each(function(index){ $(this).attr("id","node_"+(index+1) ); //瞄点：在 标签a 上可以用name //在标签p上 我用name不可以，只能用id }) var k =""; $('div.chapter p').each(function(index){ k += "<a href='#node_"+(index+1)+"'>段落"+(index+1)+"</a> "; }) $(k).insertBefore('.chapter');//在body后的开始位置 添加 超链接。 //用prependTo（）的时候， 发现k的内容 被倒置了。我晕。。。 //所以 改用 insertBefore（）、 }) </SCRIPT> </head> <body> <h1 id="excerpt">Demo</h1> <div class="chapter"> <p>段落1段落1段落1段落1<br/><br/><br/><br/><br/><br/></p> <p>段落2段落2段落2段落2<br/><br/><br/><br/><br/><br/></p> <p>段落3段落3段落3段落3<br/><br/><br/><br/><br/><br/><br/></p> <p>段落4段落4段落4段落4<br/><br/><br/><br/><br/><br/><br/></p> <p>段落5段落5段落5段落5<br/><br/><br/><br/><br/><br/><br/></p> <p>段落6段落6段落6段落6<br/><br/><br/><br/><br/><br/><br/></p> <p>段落7段落7段落7段落7<br/><br/><br/><br/><br/><br/><br/></p> </body> </html> 18，包装元素 : wrap(): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" c /> <title>DOM Manipulation</title> <script src="jqurey.js" type="text/javascript"></script> <SCRIPT LANGUAGE="JavaScript"> $(function(){ $("p").wrap("<div class='chapter'></div>"); }) </SCRIPT> </head> <body> <p>段落1段落1段落1段落1</p> <p>段落2段落2段落2段落2</p> </body> </html> <!-- 结果为： <div class="chapter"> <p> 段落1段落1段落1段落1 </p> </div> <div class="chapter"> <p> 段落2段落2段落2段落2 </p> </div> 而不是： <div class="chapter"> <p> 段落1段落1段落1段落1 </p> <p> 段落2段落2段落2段落2 </p> </div> --> 19, 关于clone： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" c /> <title>DOM Manipulation</title> <script src="jquery.js" type="text/javascript"></script> <SCRIPT LANGUAGE="JavaScript"> $(function(){ $("p").bind("click",function(){ alert("cssrain test:"); }) $("p").clone(true).appendTo("body"); $("p").clone(false).appendTo("body"); //我们发现 clone(true) 会连带绑定的事件一起复制， //false只复制元素，而绑定的事件已经被它扔掉。 $("p").clone().appendTo("body");//默认是 false /* 这点 jquery的clone（）跟dom里的clone有点区别了。 如果想实现dom 里的clone（） 可以这么做; $("p").clone(true).empty().appendTo("body"); */ }) </SCRIPT> </head> <body> <p>段落1段落1段落1段落1</p> </body> </html> 20, DOM操作总结： 创建节点： 直接 $("<p>cssrain</p>") 复制节点: .clone() 插入节点： .append() .appendTo() .prepend() .prependTo() .after() .insertAfter() .before() .insertBefore() 删除节点： .remove() 清空节点: .empty() 包装节点： .wrap() 设置属性 .attr() 删除属性 .removeAttr() 基本跟javascript中的DOM操作一样，clone()稍微不一样，前面例子说过区别了。。 |
最近读者：
