DOM 操作分为三个部分：ＤＯＭ Ｃｏｒｅ ＨＴＭＬ－ＤＯＭ ＣＳＳ－ＤＯＭ
查找元素节点和查找属性节点
<body> <p title="选择你喜欢的水果。">你最喜欢的水果是？</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul><script> var $li=$("p"); var li_text1=$li.text(); /*查找元素节点*/ var li_text2=$li.attr("title");/*查找属性元素*/ alert(li_text1) alert(li_text2)</script></body>创建节点
<body> <p title="选择你喜欢的水果。">你最喜欢的水果是？</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul><script> $(HTMLAllCollection); var $li_1=$("<li>香蕉</li>");/*创建第一个<li>元素*/ var $li_2=$("<li>雪梨</li>")/*创建第二个<li>元素*/ $("ul").append($li_1); $("ul").append($li_2);</script></body>创建属性节点
<body> <p title="选择你喜欢的水果。">你最喜欢的水果是？</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul><script> $(HTMLAllCollection); var $li_1=$("<li title='香蕉'>香蕉</li>");/*创建第一个<li>元素*/ var $li_2=$("<li title='雪梨'>雪梨</li>")/*创建第二个<li>元素*/ $("ul").append($li_1); $("ul").append($li_2);</script></body>３.２.３插入节点方法append() 向每个匹配的元素内部追加内存appendTo（） 将所有匹配的元素追加到指定的元素中，与append（）方法相反prepend（） 向每个匹配的元素的内部前置内容pretendTo（） 将所有匹配的元素前置到指定的元素中after（） 在每个匹配的元素之后插入内容insertAfter() 将所有匹配的元素插入到指定的元素的后面before（） 在每个匹配的元素之前插入内容insertBefore();
<body> <p title="选择你喜欢的水果。">你最喜欢的水果是？</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul><script> $(HTMLAllCollection); var $li_1=$("<li title='香蕉'>香蕉</li>");/*创建第一个<li>元素*/ var $li_2=$("<li title='雪梨'>雪梨</li>")/*创建第二个<li>元素*/ var $li_3=$("<li title='其他'>其他</li>")/*创建第三个<li>元素*/ var $parent=$("ul"); $parent.append($li_1); $parent.prepend($li_2); $li_3.insertAfter($li_1);</script></body>3.2.4删除节点 remove（）和empty()
<body> <p title="选择你喜欢的水果。">你最喜欢的水果是？</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul><script> /*删除节点*/ var $li=$("ul li:eq(1)").remove();/*橘子被删除*/ $("ul").append($li);/*将橘子移到最后*/ $("ul li").remove("li[title='菠萝']");/*将title=菠萝 删除 注意li与【】之间不能有空格*/</script></body>empty()方法 并不是删除节点而是清空节点，他能清除元素中的后代节点
<body> <p title="选择你喜欢的水果。">你最喜欢的水果是？</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul><script> $("ul li:eq(1)").empty();/*清空节点*/ $("ul li").click(function () { $(this).clone().appendTo("ul"); } /*单击<li>元素后需要再复制clone一个<li>元素， 被复制的新元素并不具有任何行为。如果需要新元素也具有复制功能，令clone(true)*/ $(this).clone(true).appendTo("ul"); } )</script>替换节点 replaceWith（） 和 replaceAll（）；replaceWith（）方法的作用是将所有匹配的元素都替换成指定的元素replaceAll（）方法颠倒了replaceWith的操作
<body> <p title="选择你喜欢的水果。">你最喜欢的水果是？</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul><script> $("ul li:eq(0)").replaceWith("<li title='活力'>活力</li>"); $("<li title='活力'>活力</li>").replaceAll("ul li");</script></body>
包裹节点：wrap（）方法：该方法对于需要在文档中插入额外的结构化标记非常有用，而且它不会破坏原始文档的语义，对每个对象分别进行包裹
<body> <p title="选择你喜欢的水果。">你最喜欢的水果是？</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul><script> $("p").wrap("<strong></strong>")/*用<strong>标签把<p>标签包裹起来*/</script></body>1.wrapAll（）方法 将包围的对象放在一起进行包裹2wrapInner（）方法 将每一个匹配的元素子内容（包括文本节点）用其他结构化的标记包裹起来3.2.8属性操作 attr（）方法来获取和设置元素的属性，removeAttr（）方法来删除元素的属性1.获取属性和设置属性2删除属性
<body> <p title="选择你喜欢的水果。">你最喜欢的水果是？</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul><script> var $para=$('p'); var p_text=$para.attr("title"); /*获取元素的属性*/ $para.attr("title","your paper");/*设置单个的属性值*/ $para.attr({"title" : "your paper" },{ "name" : "caorunzhi"});/*设置多个属性值*/ $("p").removeAttr("title");/*删除元素p的title属性*/</script></body>
3.2.9 样式操作1.样式获取和设置样式attr()方法实现的追加效果会对之前的类进行覆盖<body>
<p class="myclass" title="选择你喜欢的水果。">你最喜欢的水果是？</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul><script> var p_valss=$("p").attr("class");/*获取<p>元素的class*/ $('p').attr("class","high");/*设置<p>元素的class为high 此时实现的是追加的效果*/</script>2追加样式 $('p').addClass("another");3移除样式：$('p').removeClsaa("high").removeClass("another")$('p').remveClass("high another") 以空格的方式删除多个类$('p').removeClass();移除<p>元素的所有class
4切换样式 toggle（）控制样式上的重复切换$toggleBtn.toggle(function(){ //toggle（）：交替一组动作//显示元素 代码3}，function（）{//隐藏元素 代码4})toggleClass（）控制样式上的重复切换，如果类名存在则删除它如果类名不存在就添加它$('p').toggleClass("another"); //重复切换类名“another”5判断是否含有某个样式：hasClass()可以用来判断元素中是否含有某个class，如果有则返回true 否则返回false$('p').hasClass("another");这个方法是为了增强代码的可读性，在JQuery中实际上是调用了is（）方法来完成这个功能的。该方法的等价为：$("p").is(":another") //is（“.”+class）3.2.10 设置和获取HTML、文本和值1html（）方法 可以用来读取或者设置某个元素中的HTML内容。可以用于XHTML文档，但是不能用于XML文档。2text()方法 可以用来读取或者设置某个元素中的文本内容，支持所有的浏览器 $('p').text(); //提取 $('p').text("修改参数")3val（）方法可以用来设置和获取元素的值，无论元素是文本框还是下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组在Jquery中，val（）方法是从最后一个选项往前读取的，如果选项的value或者text中任意一项符合就会被选中
<body> <select id="single"> <option>选择1号</option> <option>选择2号</option> <option>选择3号</option> </select> <select id="multiple" multiple="multiple" style="height: 120px"> <option selected="selected">选择1号</option> <option >选择2号</option> <option >选择3号</option> <option >选择4号</option> <option selected="selected">选择五号</option> </select> <input type="checkbox" value="check1">多选1 <input type="checkbox" value="check2">多选2 <input type="checkbox" value="check3">多选3 <input type="checkbox" value="check4">多选4 <input type="radio" value="radio1">多选1 <input type="radio" value="radio2">多选2 <input type="radio" value="radio3">多选3 <script> $('#single').val("选择2号"); $("#multiple " ).val(["选择2号","选择3号"]); /*下面代码可以使多选框和单选框被选中*/ $(":checkbox").val(["check2","check3"]); $(":radio").val(["radio2"]); /*也可以使用attr()方法*/ $("#single option:eq(1)").attr("selected",true);/*设置属性checked*/ $("[value=radio2]:radio").attr("selected",true);/*设置属性checked*/ </script></body>3.2.11遍历节点 1children（）方法 用于取得匹配元素的子元素的集合 只考虑子元素而不考虑其他的任何后代元素2next（）方法 用于取得匹配元素后面紧邻的同辈元素、3prev（）方法 用于取得匹配元素前面紧邻的同辈元素4sibling（）方法 用于取得匹配元素前后所有的同辈元素5closet（）方法 用来取得最近匹配的元素，首先检查当前元素是否匹配，如果匹配则直接返回元素本身，如果不匹配，则向上查找父元素逐级向上直到找到匹配选择器的元素。如果什么都没有找到，则返回一个空Jquery对象3.2.12CSS-DOM操作即读取和设置style对象的各种属性。$('p').css("color") //获取<p>元素的样式颜色$('p').css({"fontSize:":"30px","background":"#8888888"}) //同时设置多个属性常用的几种方法：1offset（）方法 获取元素在当前视窗的相对偏移，其中放回的对象包含两个属性，即top 和 left 它只对可见元素有效。2 position（）方法获取元素相对于最近的一个position样式属性设置为relative或者absolute 的祖父节点的相对偏移，与offset一样它返回的对象也包括两个属性即top 和 left 3 scrollTop（）方法和 scrollLeft（）方法这两种方法的作用分别是获取或指定元素的滚动条距顶端的距离和距左侧的距离