第四章 jQuery文档处理

一、创建元素

　　1.$("html");　　创建一个DOM元素

　　2.$("html",props); 创建一个DOM元素，并给予props属性、事件或方法

　　例:$("<div></div>",{id:"div1",text:"hello",width:80,css:{textAlign:"center"},click:function(){alert("123")}});

二、内部插入

　　1.$("selector1").append("html");　　在匹配selector元素集合的每个元素末尾插入“html”;

　　例：$("selector1").append($("h2"));　　该方法会将所有的H2标签移动到匹配元素selector元素的末尾。

　　2.$("selector1").appendTo("selector2");　　将匹配元素selector1插入到selector2元素的末尾。

　　3.$("selector1").prepend("html");　　在匹配元素selector1元素集合的每个元素开头插入“html”;

　　4.$("selector1").prependTo("selector2");　　将匹配元素selector1插入到sleector2元素开头。

　　5.$("selector1").html(["html"]);　　设置或获取selector1的html，当不给参数时代表获取html。

　　6.$("selector1").text(["text"]);　　设置或获取selector1的内容，当不给参数代表获取其内容值。

三、外部插入

　　1.$("selector1").after(content);　　该方法是在所有匹配selector1元素集合后面（同级目录）插入centent（html、DOM对象），若content为选择对象，则该方法将会移动该对象。

　　2.$("selector1").insertAfter("selector2");　　该方法是将元素selector1插入到selector2后面（同级目录）

　　3.$("selector1").before(content);　　该方法是将content插入到匹配元素selector1的前面（同级目录）

　　4.$("selector1").insertBefore("selector2");　　该方法是将元素selector1插入到selector2前面（同级目录）

四、删除元素

　　1.$("selector1").remove();　　该方法将会删除匹配selector1的所有元素（不可恢复）。

　　2.$("selector1").detach();　　该方法将会删除匹配元素，并返回被删除的元素（以便恢复时使用）。

　　3.$("selector1").empty();　　该方法会清空符合selector1元素集合的所有后代节点，以及其中的任何文本。

五、替换元素

　　1.$("selector1").replaceWith(newContent);　　该方法用于将匹配元素sleector1集合中的所有元素替换为newContent（html、DOM，function[返回html]）。

　　2.$("selector1").replaceAll("selector2");　　该方法是使用sleector1替换selecotr2与replaceWith目标相反。

六、复制元素

　　1.$("selector1").clone().appendTo("selecctor2");　　该方法是将selector1复制一份再插入到selector2元素末尾，就避免了移动selecot1。

七、包装元素

　　1.$("selector1").wrap(html);　　该方法是在所有匹配元素selecotor外面包裹一层html。

　　例：$("div").wrap("<h2></h2>");　　这样就会在所有div外面加一层H2标签。

　　2.$("selector1").unwrap();　　　该方法是删除所有匹配元素的父元素。与wrap的作用相反。

　　例:$("selector1").wrap("<h2></h2>").unwrap();　　执行后selector会保持不变。

　　3.$("selector1").wrapAll(html);　　该方法也是在selecotr外面包裹一层html与wrap方法不同的是，该方法会将所有匹配selecotr1的元素视为一个整体只包装一次。

　　4.$("selector1").wrapInner(html);　　该方法是在所有匹配元素selecotr1里面内容包裹一层html

　　例：$("<div id="div1">123</div>").wrapInner(<h2></h2>);　　执行结果为"<div id="div1"><h2>123</h2></div>"

八、设置和获取DOM属性

　　1.$("selecotr1").attr(attrName[，attrvalue]);　　该方法将获取selecotor中的attrName属性值，若指定了attrvalue参数则会设置attrName的属性值。

　　2.$("selector1").removeAttr(attrName);　　删除匹配元素的attrName属性。

　　3.$("selecotor1").val([value]);　　设置或获取表单元素的value属性值，若指定了value参数则会设置表单元素selecotor的value值。

九、设置和切换CSS类

　　1.$("selector1").addClass("className");　　该方法是给所有匹配元素selecotor引用classNmae样式类。

　　2.$("selector1").hasClass("classNmae");　　该方法用于检测selecotor是否引用了className样式类。

　　3.$("selector1").removeClass("className");　　该方法用于删除className样式类

　　4.$("selector1").toggleClass("className");　　该方法作用是判定selecotor1是否拥有className类，若有则删除该类，若没有则添加该类。

十、设置和获取样式属性

　　1.$("selector1").css("css");　　该方法用于设置或获取selector1的样式属性。

　　例：$("selector1").css("color");　　获取其color属性值

　　　　$("selector1").css({"color":"red","background-color":"yellow"});　　这是其颜色和背景颜色。

十一、设置和获取元素的位置

　　1.$("selector1").offset();　　获取selector1相对文档的当前坐标，其返回值包含top和left属性对象。

　　例：$("selector1").offset().top;　$("selector1").offset().left;　　获取位置

　　　　$("selector1").offset({top:100,left:160});　　设置位置

　　2.$("selector1").position();　　该方法用于获取selector元素相对于父元素的偏移量，其返回值包含top和left属性对象。

　　3.$("selector1").scrollLeft([value]);　　该方法用于获取或这是匹配元素的水平滚动条位置。

　　4.$("selector1").scrollTop();　　该方法用于获取或设置匹配元素的垂直滚动条位置。

十二、设置和获取元素大小

　　1.$("selector1").height([value]);　　设置或获取元素的高度。(该属性高度不包括：填充、边框、边距)

　　2.$("selector1").width([value]);

　　3.$("selector1").innerHeight([value]);　　设置或获取元素的内部高度。(该属性高度不包括：边框、边距)

　　4.$("selector1").innerwidth([value]);

　　5.$("selector1").outerHeight([bool]);　　设置或获取元素的外部高度,参数默认为false表示不包括：边距；若给定参数true则包括：边距

　　6.$("selector1").outerwidth([bool]);