JavaWeb课程系列

7．dom增删改

7.1文档操作

对dom对象的增删改

7.1.1内部插入

append(content|fn)：父.append(子)：父元素的最后插入子元素

prepend(content|fn)：父.prepend(子)：父元素的最前面插入子元素

appendTo(content)：子.appendTo(父)：子元素添加到父元素的最后

prependTo(content)： 子.prependTo(父)：子元素添加到父元素的最前面

7.1.2外部插入

after(content|fn) ：A.after(B)：a的后边插入b

insertAfter(content) ：A.insertAfter(B)：把a插入到b后边

before(content|fn) ：A.before(B)：a的前边插入b

insertBefore(content) ：A.insertBefore(B)：把a插入到b的前边

7.1.3替换

replaceWith(content|fn) ：A.replaceWith(B)：A被B替换（A不存在,B存在）

replaceAll(selector) ：A.replaceAll(B)：A替换所有B（B不存在，A存在）

7.1.4删除

empty() ：A.empty()：将A元素下的子元素全部删除（将A置空，子元素没有，A还在）

remove([expr]) ：A.empty()：将A元素删除（A不存在）

7.1.5复制

clone([Even[,deepEven]]) ：A.clone()：克隆A元素并选中克隆的副本

7.2属性操作

对dom对象属性的增删改

7.2.1属性

attr(name|pro|key,val|fn) ：

获取属性值：$("img").attr("src");

设置属性值：$("img").attr("src","test.jpg");

设置多属性：$("img").attr({ src: "test.jpg", alt: "Test Image" });

removeAttr(name) ： 移除属性：$("img").removeAttr("src");

prop(name|pro|key,val|fn)1.6+ ：一般用来操作内置属性

获取属性值：$("input[type='checkbox']").prop("checked");

设置属性值：$("input[type='checkbox']").prop("checked",true);

设置多属性：$("input[type='checkbox']").prop({ disabled: true});

removeProp(name)1.6+ ：移除属性：$('div').removeProp('style')

7.2.2 CSS 类

addClass(class|fn) ：A.addClass(“selected1 selected2”)：为A添加两个class

removeClass([class|fn]) ：

A.removeClass(“selected1 selected1”)：删除A的两个class，

A.removeClass()：删除A的所有class

toggleClass(class|fn[,sw]) ：

A.toggleClass(“highlight”)：切换A的class，如果有highlight移除，如果没有添加

7.2.3 HTML代码/文本/值

html([val|fn]) ：

获取html内容：A.html()；

设置html内容：A.html(“<a href=’#’>链接</a>”)

text([val|fn]) 

获取文本内容：$('p').text();

设置文本内容：$("p").text("Hello world!");

val([val|fn|arr]) 

获取表单元素值：$("input").val();

设置表单元素值：$("input").val("hello world!");

7.3 css操作

对dom对象样式的增删改

7.3.1 CSS

css(name|pro|[,val|fn]) ：

获取css值：$("p").css("color");

设置css值：

$("p").css({ color: "#ff0011", background: "blue" });

$("p").css("color","red");

7.3.2位置

offset([coordinates]) 

position() 

scrollTop([val]) 

scrollLeft([val]) 

7.3.3尺寸

heigh([val|fn]) 

width([val|fn]) 

innerHeight() 

innerWidth() 

outerHeight([soptions]) 

outerWidth([options]) 

8．jquery动画

1）show([speed,[easing],[fn]]); 

显示隐藏的元素：

$("p").show()；

$("p").show("slow");

2）hide([speed,[easing],[fn]]);

隐藏显示的元素:

$("p").hide()；

$("p").hide("slow");

3）toggle([speed],[easing],[fn]);

切换元素的显示状态

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

$(‘p’).toggle();  //显示隐藏p

$(‘p’).toggle("slow");

$('#foo').toggle(showOrHide);  // showOrHide是个true或者false值，如果这个参数 为true ，那么匹配的元素将显示;如果false ，元素将隐藏