JQuery笔记——HTML
2016-07-09 本文已影响13人
luichooy
元素内容和属性的获取与设置
text() html() val() attr()
添加元素
append() - 在被选元素的结尾插入内容 appendTo() prepend() - 在被选元素的开头插入内容 prependTo() after() - 在被选元素之后插入内容 insertAfter() before() - 在被选元素之前插入内容 inertBefore()
上述方法可传入多个参数,从而向DOM中添加若干个参数。
example:将A元素插入B元素
A.append(B)——在B元素内部的后面插入A元素,即B元素和A元素是父子关系。
A.after(B)——在B元素外部的后面插入A元素,即B元素和A元素是兄弟关系。
B.appendTo(A)——将A元素插入B元素内部的后面,父子关系。
A.inertAfter(B)——将A元素插入B元素外部的后面,兄弟关系。
创建元素
- 以html创建新元素
var txt1="<p>Text.</p>"
- 以JQuery的方式创建新元素
var txt2=$('<p></p>').text('Text.')
- 以javascript的方式创建新元素
var txt3=document.creatElement("p"); txt3.innerHTML="Text.";
删除元素
remove()---删除备选元素及其子元素 $("#div1").remove(); empty()---删除备选元素的子元素 $("#div1").empty();---清空div1
过滤被删除的元素
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有p元素:
$("p").remove(".italic");
JQuery中CSS的操作
addClass() - 向被选元素添加一个或多个类 removeClass()- 从被选元素删除一个或多个类 toggleClass()- 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性
JQuery尺寸
width() height()
设置或获取元素的宽度/高度,不包括内边距、边框、外边距
innerWidth() innerHeight()
包括内边距
outerWidth() outerHeight()
包括内边距和边框
获取HTML文档和浏览器视口的宽度:
$(document).width();
$(window).width();