JQuery: 操作页面

一、操作属性

1. arrt() 获取和设置(html标签)的属性
2. removeArrt() 删除(html标签)的属性
3. prop() 获取和设置(DOM元素)的属性(布尔值类型的属性都用prop获取和设置)
4. removeProp() 删除(DOM元素)的属性(布尔值类型的属性都用prop删除)

二、获取和设置样式

2.1 获取和设置css

1. 添加样式
   1.1 一次添加一个
   $(‘div’).css(“color”,“red”);
   1.2 一次添加多个样式
   $(‘div’).css({“color”:“red”,“font-size”:“18”});
2. 获取样式
   2.1 一次获取一个
   $(‘div’).css(“color”);
   2.2 一次获取多个
   $(‘div’).css([“color”,“font-size”]);

2.2 获取和设置内容的宽高

以宽为例

获取宽
$(‘div’).width();
设置宽 不带单位
$(‘div’).width(200);

2.3 获取widnth+padding的宽高

innerWidth 不包括border

获取宽
$(‘div’).innerwidth();
设置宽 不带单位
$(‘div’).innerwidth(200);

2.4 获取和设置盒子的宽高

outerWidht默认为内容+padding+border

获取宽
$(‘div’).outerWidth();
获取占用宽(margin+border+padding+内容)
$(‘div’).outerWidth(true);
设置宽 不带单位 放大和缩小的都是内容的大小
$(‘div’).outerWidth(200);

2.5 获取和设置坐标

1. 获取当前元素到根元素的距离
   $(‘div’).offset;
   可以设置偏移量
   $(‘div’).offset({ x : 100 , y : 100 });

2. 获取当前元素距有定位的父元素的距离 只能获取不能设置
   $(‘div’).position();

三、复制元素

clone(true/false,true/false)
第一个参数决定是否赋值当前元素的方法
第二个参数决定子元素是否复制方法

四、包裹元素

$(‘div’).wrap("<div class=‘a’></div>");
使用a分别包裹所有的div;
$(‘div’).wrapAll("<div class=‘a’></div>");
将所有的div集合在一起然后a进行包裹
$(‘div’).wrapInner("<div class=‘a’>啥范德萨发</div>");
使用指定的元素分别包裹集合中每个元素的内容，包括文本内容。
$(‘div’).unwrap();
删除集合中每个元素的包裹元素。如果指定选择器，则只删除匹配选择器的包裹元素。

五、内部插入

html() 获取和设置html 类似innerHtml
text() 获取和设置文本 类似innerText
append() 插入到指定元素之后
appendTo()
prepend() 插入到指定元素之前
prependTo()

六、外部插入

before() 在集合前插入元素
insertBefore() 将集合中的元素插入到目标元素（target）的前面
after() 在集合后插入元素
insertAfter() 将集合中的元素插入到目标元素（target）的前面

七、删除元素

remove() 从页面上删除集合中的所有元素及其内容，包括事件监听器和数据
empty() 删除集合中所有元素的内容，元素本身不会被删除
detach() 从页面上删除集合中的所有元素及其内容，但是保留事件监听器和数据

八、替换元素

replaceAll() 用匹配的元素替换掉所有 selector匹配到的元素
replaceWidth() 将所有匹配的元素替换成指定的HTML或DOM元素