Javascript(学习一之DOM操作)

filter(expr):筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。注意：
区分他和find()方法。find方法会在元素内寻找匹配元素，而filter()则是筛选元素。一个是对他的子集操纵（find），一个是对自身集合元素进行筛选（filter）
append() 向每个匹配的元素内部追加内容
appendTo() 将所有匹配的元素追加到指定的元素中。
prpend() 向每个匹配的元素内容前置内容
prependTo()将所有匹配的元素前置到指定的元素中
after() 在每个匹配的元素之后插入内容
insertAfter()
before() 在每个匹配的元素之前插入内容
insertbefore()

删除节点
remove() 删除某个节点（包括所有后代节点）返回值指向已被删除的节点引用
detach() 删除某个节点（包括所有后代节点） 但是不会把匹配的元素从jQuery对象中删除，可以在将来再使用这些匹配的元素
empty()不是删除节点，而是清空节点

复制节点
clone() 复制一个节点
clone(true)复制元素的同时复制元素中的帮定事件

替换节点
replaceWith()
replaceAll();
包裹节点
wrap()
wrapAll();
wrap方法是将所有的元素进行单独包裹，而wrapAll是将所有匹配的元素用一个元素来包裹
例：<strong>你最喜欢的食物？</strong>
<strong>你最喜欢的食物？</strong>
$("strong").wrap("<b></b>")
结果：<b><strong>你最喜欢的食物？</strong></b>
<b><strong>你最喜欢的食物？</strong></b>
$("strong").wrapAll("<b></b>")
结果：
<b><strong>你最喜欢的食物？</strong>
<strong>你最喜欢的食物？</strong></b>
注意：如果被包裹的多个元素间有其它元素，其它元素会被放到包裹元素之后。

wrapInner()方法

将方法每一个匹配的元素的子内容（包括文本节点）用其他结构的标记包裹起来

例：$("strong").wrapInner("<b></b>")

结果:<strong><b>你最喜欢的食物？</b></strong>

样式操作

删除样式：removeClass("样式名")

删除多个样式：removeClass("样式名1  样式名2 ……")

删除全部样式:removeClass();即不带任何参

切换样式

toggleClass(“样式名”);如果样式名存在则删除，如果不存在则添加

hasClass()判断元素中是否含某个class ,有 返回true 没有返回 false

例:$("p").hasClass("promoted") JQuery内部实际上是调用了is()方法来完成的

 设置和获取 HTML、文本和值

html(),text(),val()

遍历节点

children()  匹配元素的子元素集合

next() 匹配元素后紧邻的同辈元素

例:

 <div>  <p>段落</p> <ul><li>爱好1</li><li>爱好2</li><li>爱好3</li></ul> <div>

var $ul=$("p").next()得到的结果: <ul><li>爱好1</li><li>爱好2</li><li>爱好3</li></ul>

prev() 获得匹配元素前面紧邻的同辈元素

siblings() 取得匹配元素前后所有的同辈元素

closest() 取得最近的匹配元素，首先检查当前元素是否匹配，如果匹配直接返回元素本身。如果不匹配则向上查找父级元素，逐级向上寻找。没找到返回空jQuery对象

CSS-DOM操作

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

可以同时设置多个样式

$("p").css({"color":"red","backgroundColor":"#fff"})

注：1、如果值是数值，自动转化为像素值

       2、如果属性带‘-’符号，如果设置这些属性时不带引号，那么用驼峰命名法 如：background-color 写成backgroundColor

       3、带上引号的话两者都可以，建议带引号

如果获得某个元素的height属性，可以通过

$(element).css('height')或者$(element).height();

两者的区别：1、在jQuery1.2版本以后的height()方法可以用来获取window和document的高度

                     2、css()方法获取的高度值与样式的设置有关，可能会得到auto，"10px"之类的字符串，而height()获取的是元素在页面中的实际的高度，与样式的设置无关，并且不带样式

offset()方法：

获取元素在当前视窗的相对偏移量，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。

position()方法：

获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，他返回的对象也包括两个属性，即top和left

scrollTop()方法和scrollLeft()方法：

scrollTo：是获得元素滚动条距顶端的距离

scrollLeft：是获得元素滚动条距左侧的距离

另外还可以为这两个方法指定一个参数，控制元素的滚动到指定的位置