jQuery基础之三 -- 操作DOM

转载：http://blog.csdn.net/zzq58157383/article/details/7645716

什么是 DOM？
通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
在 1998 年，W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。
所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。
DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。
DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：
Core DOM    定义了一套标准的针对任何结构化文档的对象
XML DOM     定义了一套标准的针对 XML 文档的对象
HTML DOM  定义了一套标准的针对 HTML 文档的对象。
 
1.查找节点
[java] view plaincopyprint?
  1. 查找元素节点： var $li = $("ul li:eq(1)");查找<ul>里第二个<li>节点  
  2. 查找属性节点： var p_txt = $("p").attr("title");获取p元素节点的属性title  

2.创建节点 $(html)
[java] view plaincopyprint?
  1. 创建元素节点： $(html); //根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象返回  
  2.    var $li_1 = $("<li></li>");  
  3.    var $li_2 = $("<li></li>");  
  4.    $("ul").append($li_1).append($li_2);  
  5.   
  6. 创建文本节点：   
  7.    var $li_1 = $("<li>aaa</li>"); //即包含元素节点，又包含文本节点  
  8.    var $li_2 = $("<li>bbb</li>");  
  9.    $("ul").append($li_1).append($li_2);  
  10.   
  11. 创建属性节点：   
  12.    var $li_1 = $("<li title='aaa'>aaa</li>"); //即包含元素节点，又包含文本节点, 还包含属性节点  
  13.    var $li_2 = $("<li title='bbb'>bbb</li>");  
  14.    $("ul").append($li_1).append($li_2);  
  15.   
  16. 当HTML字符串是没有属性的元素时, 内部使用document.createElement创建元素, 比如:  
  17. //jQuery内部使用document.createElement创建元素:  
  18. $("<div/>").css("border","solid 1px #FF0000").html("动态创建的div").appendTo(testDiv);  
  19.   
  20.  否则使用innerHTML方法创建元素:  
  21. //jQuery内部使用innerHTML创建元素:  
  22. $("<div style=\"border:solid 1px #FF0000\">动态创建的div</div>").appendTo(testDiv);  
3.插入节点 
[java] view plaincopyprint?
  1. append();       向每个匹配的元素的内部追加内容 eg: $("p").append("<b>bbbb</b>"); <p>pppp <b>bbbb</b> </p>  
  2. appendTo();     将所有匹配的元素追加到指定的元素上eg: $("<b>bbbb</b>").appendTo("p"); <p>pppp <b>bbbb</b> </p>  
  3. prepend();      向每个匹配的元素的内部前置内容eg: $("p").prepend("<b>bbbb</b>"); <p> <b>bbbb</b> pppp</p>  
  4. prependTo();    将所有匹配的元素前置到指定的元素上eg: $("<b>bbbb</b>").prependTo("p"); <p> <b>bbbb</b> pppp</p>  
  5. after();        在每个匹配的元素之后插入内容eg: $("p").after("<b>bbbb</b>"); <p>pppp</p> <b>bbbb</b>  
  6. insertAfter();  将所有匹配的元素插入到指定的元素后面eg: $("<b>bbbb</b>").insertAfter("p"); <p>pppp</p> <b>bbbb</b>  
  7. before();       在每个匹配的元素之前插入内容eg: $("p").before("<b>bbbb</b>"); <b>bbbb</b> <p>pppp</p>  
  8. insertBefore(); 将所有匹配的元素插入到指定的元素前面eg: $("<b>bbbb</b>").insertBefore("p"); <b>bbbb</b> <p>pppp</p>  

4.删除节点
[java] view plaincopyprint?
  1. remove(); //所有后代节点将同时被删除  
  2.    var $li=$("ul li:eq(1)").remove();  
  3.    $li.appendTo("ul");  
  4.    $("ul li").remove("li[title!=aaa]"); //将元素不等于aaa的<li>元素删除  
  5. empty(); //清空元素中的所有后代节点  
  6.    $("ul li:eq(1)").empty(); //清空此元素里的内容，注意是元素里  

5.复制节点
[java] view plaincopyprint?
  1. $("ul li").click(function(){  
  2.    $(this).clone(true).appendTo("ul"); //参数true的含义是复制元素的同时复制元素中所绑定的事件，否则不具备任何行为  
  3. });  

6.替换节点
[java] view plaincopyprint?
  1. //如果在替换前绑定了事件，替换后原先绑定的事件和被替换的元素一起消失，需要在新元素上重新绑定事件    
  2. replaceWith(); $("p").replaceWith("<strong>aaa</strong>"); //将所有匹配的元素都替换成指定的HTML或者DOM元素  
  3. replaceAll(); $("<strong>aaa</strong>").replaceAll("p"); //与replaceWith相同，只是颠倒了操作  

7.包裹节点
[java] view plaincopyprint?
  1. wrap();      将所有元素单独包裹 $("strong").wrap("<b></b>"); <b> <strong>aaaaaa</strong> </b>, <b> <strong>aaaaaa</strong> </b>  
  2. wrapAll();   将所有元素一起包裹 $("strong").wrapAll("<b></b>"); <b> <strong>aaaaaa</strong> <strong>aaaaaa</strong> </b>  
  3. wrapInner(); 包裹所有匹配元素的子内容 $("strong").wrapInner("<b></b>"); <strong> <b>aaaaaa</b> </strong>  
  4. unwrap();    移除并替换指定元素的父元素$("p").unwrap();  移除<p>的父元素  

8.属性操作
[java] view plaincopyprint?
  1. 获取属性和设置属性  
  2.    var txt=$("p").attr("title");  
  3.    $("p").attr("title", "your title");  
  4.    $("p").attr("title":"your title", "name":"your name");  
  5. 删除属性  
  6.    $("p").removeAttr("title");  

9.样式操作
[java] view plaincopyprint?
  1. 获取样式和设置样式  
  2.    var p_class=$("p").attr("class");  
  3.    $("p").attr("class", "your class");  
  4. 追加样式  
  5.    $("p").addClass("your class");  
  6. 移除样式  
  7.    $("p").removeClass(); //全部样式被移除  
  8.    $("p").removeClass("your class");  
  9.    $("p").removeClass("class1 class2");  
  10. 切换样式  
  11.    $("p").toggleClass("your class"); //如果类名存在则删除它，如果类名不存在则添加它  
  12. 判断是否含有某个样式  
  13.    $("p").hasClass("your class"); //返回true或者false 等价于$("p").is(.myClass);  
10.设置和获取HTML、文本和值
[java] view plaincopyprint?
  1. $("p").html();  //获取p元素的HTML代码  
  2. $("p").html("<strong>xxxxxxxx</strong>"); //设置p元素的HTML代码  
  3. text(); val();方法同html();方法  
  4.   
  5. 另外，val();方法在表单操作中，能使select, checkbox, radio相应的选项被选中，如：  
  6. $("single").val("select 1");  
  7. $("multiple").val("select 1", "select 2");  
  8. $(":checkbox").val("check2", "check3");  
  9. $(":radio").val("radio2");  

11.遍历节点
[java] view plaincopyprint?
  1. each();  对 jQuery 对象进行迭代，为每个匹配元素执行函数  
  2.      $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });   
  3.      $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });  
  4.      $("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})      //为索引分别为0，1，2的p元素分别设定不同的字体颜色。  
  5.      $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})//实现表格的隔行换色效果  
  6.   
  7. 过滤：  
  8. first();       将匹配元素集合缩减为集合中的第一个元素 $('li').first()  
  9. last();        将匹配元素集合缩减为集合中的最后一个元素 $('li').last()  
  10. has(expr);     将匹配元素集合缩减为包含特定元素的后代的集合。$('li').has('ul').css('background-color', 'red');给含有ul的li加上背景色  
  11. hasClass(class); 检查当前的元素是否含有某个特定的类，如果有，则返回true。  if ( $("div").hasClass("protected") ){....}  
  12. is(expr);        根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。$("input[type='checkbox']").parent().is("form")  
  13. eq(index);       将匹配元素集合缩减为位于指定索引的新元素  $("p").eq(1)获取匹配的第二个元素  
  14. not(expr);       从匹配元素集合中删除元素  $("p").not("#selected").css('background-color', 'red');  
  15. slice(start [,end]);    将匹配元素集合缩减为指定范围的子集,start从0开始  $("p").slice(0, 2).wrapInner("<b></b>"); //第1，2个p元素里面内容将被包裹   
  16. map(callback);          把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象  
  17.            $("p").append( $("input").map(function(){return $(this).val();}).get().join(",")); //<p>John, password, http://ejohn.org/</p>   
  18. filter(expr | fn);      将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素  
  19.            $("div").css("background", "#c8ebcc")  
  20.            .filter(".middle")  
  21.            .css("border-color", "red"); 改变所有 div 的颜色，然后向类名为 "middle" 的类添加边框  
  22.   
  23. 查找：  
  24. children([expr]); 取得匹配元素的子元素集合，children方法只考虑子元素而不考虑任何后代元素$("div").children() || $("div").children(".selected")  
  25. closest([expr]);  从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素  
  26.     $(document).bind("click", function(){  
  27.       $(e.target).closest("li").css("color", "red"); //给点击的目标元素的最近的li元素添加颜色  
  28.     });  
  29. find([expr]);     获得当前匹配元素集合中每个元素的后代，由选择器进行筛选  
  30.    $("p").find("span").css('color','red'); 搜索所有段落中的后代 span 元素，并将其颜色设置为红色  
  31. next([expr]);     取得匹配元素后面紧邻的同辈元素 $("p").next() || $("p").next(".selected")  
  32. nextAll([expr]);  取得匹配元素后面所有的同辈元素 $("div:first").nextAll().addClass("after");  
  33. nextUntil([expr]);获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止 $('#term-2').nextUntil('dt').css('background-color', 'red');给#term-2后面直到dt前的元素加上红色背景  
  34. prev([expr]);     取得匹配元素前面紧邻的同辈元素  
  35. prevAll([expr]);  取得匹配元素前面所有的同辈元素   
  36. prevUntil([expr]);获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止  
  37. siblings([expr]); 取得匹配元素前后所有的同辈元素 $("div").siblings() || $("div").siblings(".selected")  
  38.   
  39. offsetParent([expr]); 搜索DOM树中元素的祖先，并构造一个由最近的定位祖先元素包围的jQuery对象,返回父元素中第一个其position设为relative或者absolute的元素  
  40. parent([expr]);       获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）$("p").parent() || $("p").parent(".selected")  
  41. parents([expr]);      获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选） $("span").parents()找到每个span元素的所有祖先元素。  
  42. parentsUntil([expr]); 获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止 $('li.item-a').parentsUntil('.level-1').css('background-color', 'red');  
  43.   
  44.   
  45. 串联  
  46. contents(); 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容  
  47.             $("p").contents().not("[nodeType=1]").wrap("<b/>"); 查找所有文本节点并加粗  
  48.             $("iframe").contents().find("body").append("I'm in an iframe!"); 往一个空框架中加些内容  
  49. end();      回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。  
  50.             $("p").find("span").end() 选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素  
  51. add(expr [,context]);   将元素添加到匹配元素的集合中 $("p").add("span")添加一个新元素到一组匹配的元素中，并且这个新元素能匹配给定的表达式。  
  52. andSelf();  $("div").find("p").andSelf().addClass("border"); //div自己和p元素都被添加了边框，包括选择器自己  

12.CSS-DOM操作
[java] view plaincopyprint?
  1. $("p").css("color");  
  2. $("p").css("color", "red");  
  3. $("p").css({"fontSize":"30px", "backgroundColor":"#888888"}); //如果属性中带有"-"符号，可以写成"font-size"或"fontSize", 也可以直接写成fontSize，建议带引号  
  4. offset(); //获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，top和left，只对可见元素有效  
  5.           var p = $("p:last");  
  6.           var offset = p.offset();  
  7.           p.html( "left: " + offset.left + ", top: " + offset.top );  
  8. position(); //获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，其中返回的对象包含两个属性，top和left  
  9.          var p = $("p:first");  
  10.          var position = p.position();  
  11.          $("p:last").html( "left: " + position.left + ", top: " + position.top );  
  12. scrollTop(); //获取元素的滚动条距顶端的距离  
  13. scrollLeft();//获取元素的滚动条距左侧的距离  

posted on 2014-04-28 16:29  pcshell  阅读(98)  评论(0)  编辑  收藏  举报

导航