jquery DOM操作总结

jquery 文档操作

1. addClass();

addClass(); // 向某个元素添加一个类
$("button").click(function(){
  $("p:first").addClass("intro");
});

2. 元素之外追加

after(); //在指定元素之后插入内容, 外部插入
//插入文本
$("button").click(function(){
  $("p").after("<p>Hello world!</p>");
});
//使用方法插入
$(selector).after(function(index)); //index 接收selector的index位置

insertAfter(); //将指定内容插入到匹配的元素之后
$("button").click(function(){
  $("<span>Hello world!</span>").insertAfter("p");
});

before(); // 和after()使用相同, 在元素之前插入, 外部插入

insertBefore(); // 和insertAfter使用相同

3. 元素之内追加

append(); //在指定元素之后插入内容, 内部插入
//插入文本
$("button").click(function(){
  $("p").append(" <b>Hello world!</b>");
});
//使用方法插入
$(selector).append(function(index,html)); 
//index 接受selector的index位置, html 可选。接收选择器的当前 HTML

appendTo(); //追加内容到某个元素, 和append功能相同
$("button").click(function(){
  $("<b>Hello World!</b>").appendTo("p");
}); // 将内容添加到P元素的末尾

prepend(); //在元素的最前边追加

prependTO(); // 和appendTo() 方法使用相同

4. 删除移动元素和属性

detach(); //删除一个匹配的元素, 包括事件, 子元素, 文本, 并返回. 此方法可以用来进行移动节点

empty(); //删除匹配元素的所有内容

clone(flag); //返回一个事件的副本, flag为boolean值, 是否复制事件处理器

remove(); //和detach();方法使用相同, 不同的是remove不会保留事件对象

removeAttr(); //所有匹配的元素中移除指定的属性。

removeClass(); //从所有匹配的元素中删除全部或者指定的类。

replaceAll();//用匹配的元素替换所有匹配到的元素。
$(".btn1").click(function(){
   $("p").replaceAll("<b>Hello world!</b>");
});

replaceWith(); //方法用指定的 HTML 内容或元素替换被选元素
$(".btn1").click(function(){
   $("p").replaceWith("<b>Hello world!</b>");
});
$(selector).replaceWith(function()); //使用函数来替换

toggleClass(); //从匹配的元素中添加或删除一个类。

unwrap(); // 移除并替换所选元素的父元素

wrap(); //用指定的内容, 把所选元素匹配起来
$(".btn1").click(function(){
   $("p").wrap("<div></div>");
});

wrapAll(); //把所有匹配的元素用指定内容包裹起来, 和wrap()不同的是, wrapAll全部包裹, wrap是, 分别包裹

wrapinner(); //将匹配的元素内容用指定的内容包裹起来

5. 查看元素

attr(); //返回或设置selector的属性
$(selector).attr(attribute, [value]); 
//value可选, 如果传入了value, 则是设置, 否则是获取属性

hasClass(); //检查是否包含某个类

html(); //相当于innerHTML

text(); //相当于innerText

val(); //匹配元素的值

jquery 属性操作

jquery 的css操作

css(); //设置或返回匹配元素的样式属性。

height(); width(); //设置或获取元素的高或宽, 返回number, 并不是字符串

offset(); //返回一个对象, 相对文档的位置
$(".btn1").click(function(){
  x=$("p").offset();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

offsetParent(); // 方法返回最近的祖先定位元素。
$("button").click(function(){
  $("p").offsetParent().css("background-color","red");
});

position(); //返回相对父元素的位置, 相对位置

scrollLeft(); //设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop(); //设置或返回匹配元素相对滚动条顶部的偏移。