对内容的操作
捕获 获得内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
设置 添加新内容
text("新内容") - 设置所选元素的文本内容
html("新内容") - 设置所选元素的内容(包括 HTML 标记)
val("新内容") - 设置表单字段的值
添加新内容的同时,通过回调函数,拿到旧的内容和当前元素的下标
对元素的操作
添加元素 添加新的 HTML 内容 append() - 在被选元素的内部结尾插入内容 prepend() - 在被选元素的内部开头插入内容 after() - 在被选元素外部之后插入内容 before() - 在被选元素外部之前插入内容
$(".cun3").append("<div class ='shouji'><img src='"+dom+"'/></div>");
删除元素 remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除其子元素
比如$("p").empty()和$("p").html(""),都是把<p>abcd</p>中的文本移除,留下 了<p></p>,仍保留其在dom中所占的位置。
但是html("")会造成内存泄漏,empty()会释放内存,感兴趣的朋友可以用html(""),empty("")分别测试,用chrome的任务管理器检测内存使用。
而$("p").remove()则是把其从dom中删除,什么都不留,既不会保留其所占的位置。
属性操作
获取属性 attr() 方法用于获取属性值。 $("button").click(function(){alert($("#runoob").attr("href"));});
对于 HTML 元素本身就带有的固有属性,在处理时,使用 prop 方法。
对于 HTML 元素我们自己自定义的 DOM 属性,在处理时,使用 attr 方法
添加新属性的同时,通过回调函数,拿到旧的属性和当前元素的下边
删除属性
removeAttr() 从所有匹配的元素中移除指定的属性。$("img").removeAttr("src");
class类的操作
addClass() 向匹配的元素添加指定的类名。
hasClass() 检查匹配的元素是否拥有指定的类。
removeClass() 从所有匹配的元素中删除全部或者指定的类。
toggleClass() 从匹配的元素中添加或删除一个类。
addClass(“className”)方法是用来给指定元素增加类名,也就是说给指定的元素追加样式;
. removeClass(“className”)方法是用来给指定的元素移除类名,也就是说给指定元素移除样式;
.toggleClass(“className”)方法是用来给脂定的元素增加或移除类名(如果元素的类名存在就移除,如果不存在就增加),也就是说用来给指定的元素进行样式切换(如果元素存在样式则去掉,如果不存在则加上样式)。**
例子
$("selector").toggleClass("className");
等同于
if($("selector").hasClass("className")){
$(this).removeClass("className");
} else {
$(this).addClass("className");
}
也等同于
$("selector").hasClass('className') ? $("selector").removeClass('className') : $("selector").addClass('className');
尺寸 height()设置或返回元素的高度(不包括内边距、边框或外边距) width()设置或返回元素的宽度(不包括内边距、边框或外边距)
$("#box").height("500px").width("500px");
innerHeight()获取第一个匹配元素内部区域高度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。
nnerWidth()获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效
outerHeight([options]) 获取第一个匹配元素外部高度(默认包括补白和边框)。此方法对可见和隐藏元素均有效。 options设置为 true 时,计算边距在内。
outerWidth([options])获取第一个匹配元素外部宽度(默认包括补白和边框)。此方法对可见和隐藏元素均有效。options设置为 true 时,计算边距在内。
css操作
设置样式 单个样式 $("p").css("background-color","yellow"); 多个样式$("p").css({"background-color":"yellow","font-size":"200%"});
offset([coordinates]) 获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
position() 获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
scrollTop([val])获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。val设定垂直滚动条值 设置相对滚动条顶部的偏移
scrollLeft([val])获取匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。val设定水平滚动条值 设置相对滚动条左侧的偏移
innerHeight()获取第一个匹配元素内部区域高度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。
innerWidth()获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效