jQuery中的DOM操作

DOM是Document Object Model的缩写，意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口。使用该接口可以轻松地访问页面中所有的标准组件。简单来说，DOM解决了Netscape的JavaScript和Microsoft的JScript之间的冲突，给软件设计师和开发者提供一套标准的方法，让他们能够轻松获取和操作页面中的数据、脚本和表现层对象。1.DOM的概念:DOM是英文Document Object Model的缩写,其意思是文档对象模型,根据W3C DOM规范, DOM是一种与浏览器，平台以及语言无关的接口。2.DOM的作用:DOM解决Netscape的JavaScript和Microsoft JScript之间的冲突,给与了web设计师和开发者一套标准的方法3.DOM操作的分类　　(1)DOM core(核心)　　(2)HTML DOM　　(3)CSS DOM4.使用DOM Core来获取表单对象的方法:document.getElementsByTagName("from");5.使用DOM Core来获取某元素的src属性的方法:element.getAttribute("src");6.设置某元素style对象颜色的方法:element.style.color="red";7.查找节点：( 1)查找元素节点获取元素节点并打印他的文本内容：Var $li=$(“ul li:eq(1)”);// 获取<ul>里第2个<li>节点Var $para=$(“p”);//获取<p>节点Var li_text=$li.text();//获取第二个<li>元素节点的文本内容Alter(li_text);//打印文本内容(2)查找属性节点利用attr()方法来获取它的各种属性的值。Attr() 里的参数是一个时：是要查询的属性的名称，也可以是两个。获取属性节点并打印他的文本内容：Var $para=$(“p”);//获取<p>节点Var p_text=$para.attr(“title”);//获取<p>元素节点属性的titleAlter(“p_text”);//打印title属性值8.插入节点:方法描述示例prependTo()将所有匹配元素前置到指定元素中。HTML代码： <p>我想说</p> ；jQuery代码：$ ("<b>你好</b>").prependTo(“p”);结果： <p><b>你好</b>我想说：</p>after()在每个匹配元素之后插入内容。HTML代码： <p>我想说：</p> ；jQuery代码：$("p").after("<b>你好</b>");结果： <p>我想说： </p> <b>你好</b>insertAfter()将所有匹配元素插入到指定元素后面。HTML代码： <p>我想说</p> ；jQuery代码：$ ("<b>你好</b>").insertAfter(“p”);结果： <p>我想说： </p> <b>你好</b>before()在每个匹配元素之前插入内容。HTML代码： <p>我想说：</p> ；jQuery代码：$("p").before("<b>你好</b>");结果： <b>你好</b> <p>我想说：</p>insertBefore()将所有匹配元素插入到指定元素前面。HTML代码： <p>我想说：</p> ；jQuery代码：$("p"). insertBefore("<b>你好</b>");结果： <b>你好</b> <p>我想说：</p>append()向每个匹配元素内部追加内容HTML代码： <p>我想说</p> ；jQuery代码：$("p").append("<b>你好</b>");结果： <p>我想说：<b>你好</b> </p>appendTo()将所有匹配元素追加到指定元素中。HTML代码： <p>我想说</p> ；jQuery代码：$ ("<b>你好</b>").appendTo(“p”);结果： <p>我想说：<b>你好</b> </p>prepend()向每个匹配元素内部前置内容。HTML代码： <p>我想说：</p> ；jQuery代码：$("p").prepend("<b>你好</b>");结果： <p><b>你好</b>我想说：</p>9.删除节点:(1)remove(),(2)empty()10.复制节点$("ul li").click(function () { //注意参数true $(this).clone(true).appendTo("body"); })11.替换节点:replaceAll()方法与replaceWith()方法的作用相同，只是颠倒了replaceWith()操作。12.attr()方法，用于获取标签元素的属性，也可以用于设置标签元素的属性值,是将原来的属性替换为新的属性，而不是追加。13.attr()和addClass()的区别方法addClass()Attr()用途追加样式设置样式对同一个网页元素操作<p>test</p>第一次使用$(“p”).addClass(“high”);$(“p”).attr(“class“,“high”);第一次结果<p class=“high”>test</p>再次使用方法$(“p”).addClass(“another”);$(“p”).attr(“class”,“another”);最终结果<p class=“high another”>test</p><p class=“another”>test</p>14.CSS-DOM操作的常用方法:css()、height()、offset() 、scrollTop()、scrollLeft()15.样式中常用的方法:attr(), addClass(), removeClass(), toggleClass(), hasClass()