《从零开始学习jQuery》:用jQuery操作元素的属性与样式

前端之家收集整理的这篇文章主要介绍了《从零开始学习jQuery》:用jQuery操作元素的属性与样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

元素属性和Dom属性简介

对于下面这样一个标签元素:

  1. <img id='img' src="1.jpg" alt='1' class="imgs"></img>

我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性

元素属性和Dom属性只是在我们对其进行不同解析时的不同称呼。

值得注意的是:

1.元素被解析成Dom时,元素属性和Dom属性并不一定是原来的名称

例如,img的class属性,在表现为元素属性时是class;在表现为Dom属性时,属性名为className。

2.在JavaScript中,我们可以直接获取或设置Dom属性

使用jQuery操作元素属性

attr

在jQuery中,提供了attr函数来操作元素属性,具体如下:

  1. attr(name) 取得第一个匹配元素的属性值.
  2. $("input").attr("value")
  3. attr(property) 将一个"名/值"形式的对象设置为所有匹配元素的属性
  4. $("input").attr({ value: "txt",title: "text" });
  5. attr(key,value) 为所有匹配的元素设置一个属性
  6. $("input").attr("value","txt");
  7. attr(key,fn) 为所有匹配的元素设置一个计算的属性
  8. $("input").attr("title",function () { return this.value });
  9. removeAttr(name) 从所有匹配的元素中删除一个属性
  10. $("input").removeAttr("value");

注意:

1.如果要设置对象的class属性时,必须使用className作为属性名。

2.我们可以使用removeAttr删除元素属性,但其对应的Dom属性是不会被删除掉的,只是被改变其值而已。

根据上面的几个函数,我们可以这样使用来获取dom的value值和innerHTML值:

  1. $("#txt1").attr("value")
  2. $("#txt1").attr("value","1234");
  3. $("#dv1").attr("innerHTML",'this is a div');
  4. $("#dv1").attr("innerHTML");

val(),html(),text()

实际上,jQuery提供了更简单的方法来访问value,innerHTML,具体函数如下:

  1. val() 获取第一个匹配元素的value
  2. $("#txt1").val()
  3. val(val) 为匹配的元素设置value
  4. $("#txt1").val("txt1")
  5. html() 获取第一个匹配元素的html内容
  6. $("#dv1").html()
  7. html(val) 设置每一个匹配的元素的html内容
  8. $("#dv1").html("this is a div")
  9. text() 取得所有匹配文本节点的内容,并将其连接起来
  10. $("div").text()
  11. text(val) 将所有匹配元素的置为val
  12. $("div").text("divs")

使用jQuery操作CSS

修改CSS类

addClass()
removeClass()
hasClass()
toggleClass()

  1. addClass(classes) 为每个匹配的元素添加指定的类名
  2. $("input").addClass("colorRed borderBlack");
  3. hasClass(class) 判断匹配元素集合中是否至少有一个包含了指定的css类,如果有一个含有指定css类,则返回true
  4. alert($("input").hasClass("borderBlack"));
  5. removeClass([classes]) 从匹配元素中移除所有或指定的css
  6. $("input").removeClass("colorRed borderBlack");
  7. toggleClass(classes) 如果存在(不存在)就删除(添加)指定类
  8. $("input").toggleClass("colorRed borderBlack");
  9. toggleClass(classes,switch) switchtrue时,添加类,switchfalse时,删除
  10. $("input").toggleClass("colorRed borderBlack",1)">true);

注意:

1.addClass、removeClass、toggleClass均可添加多个类,多个类之间用空格隔开。

2.removeClass方法的参数可选,如果有参数,则删除指定class,如果无参数,则删除匹配元素的所有class。

3.在调用toggleClass(classes,switch)时,我们可以有更多的用法,例如:

  1. //每当按钮被点击三次时,添加样式
  2. var i = 0;
  3. $("#btn").click(function () {
  4. $("input").toggleClass("colorRed borderBlack",1)">true);
  5. });

修改CSS样式

css()

  1. css(name) 访问第一个匹配元素的样式属性
  2. $("input").css("color")
  3. css(properties) 把一个"名/值"对设置给所有匹配元素的样式属性
  4. $("input").css({border:"solid 3px silver",color:"red"})
  5. css(name,value) 为匹配的元素设置同一个样式属性,如果是数字,将自动转换为像素值
  6. $("input").css("border-width","5");

注意:

对于样式值为数字的代码示例及结果:

  1. $("input").css("border-width","5");
  2. <input style="BORDER-RIGHT-WIDTH: 5px;
  3. BORDER-TOP-WIDTH: 5px;
  4. BORDER-BOTTOM-WIDTH: 5px;
  5. BORDER-LEFT-WIDTH: 5px"
  6. id="txt1" />

注意:对于一些常用的属性,例如width,height之类,使用attr("width")和css("width")是无法正常获取其值的,现在,我们来介绍一些常用的属性

获取常用的属性

宽、高相关关

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

  1. width() 获取第一个匹配元素的宽度,默认为px
  2. $("#txt1").width()
  3. width(val) 为匹配的元素设置宽度值,默认为px
  4. $("#txt1").width(200)
  5. height() 获取第一个匹配元素的高度,1)">).height()
  6. height(val) 为匹配的元素设置宽度值,默认为px
  7. $("#txt1").height(20)
  8. innerWidth() 获取第一个匹配元素内部区域宽度(包括padding,不包括border)
  9. $("#txt1").innerWidth()
  10. innerHeight() 获取第一个匹配元素内部区域高度(包括padding,1)">).innerHeight()
  11. outerWidth([margin]) 获取第一个匹配元素外部区域宽度(包括padding,border)
  12. margin为true则包括margin,否则不包括
  13. $("#txt1").outerWidth()
  14. outerHeight([margin]) 获取第一个匹配元素外部区域高度(包括padding,否则不包括
  15. $("#txt1").outerHeight(true)

注意:返回的高度、宽度均为数字,不带px。参照一张图,会更容易理解些:

位置相关

offset()
position()
scrollTop()
scrollLeft()

在设计一些弹出对象的脚本中,经常需要动态获取弹出坐标并且设置元素的位置.jQuery为我们提供了位置相关的各个函数.

  1. offset() 获取匹配元素在当前窗口的相对偏移
  2. 只对可见元素有效
  3. $("#btn").offset().top
  4. $("#btn").offset().left
  5. position() 获取匹配元素相对父元素的偏移
  6. 只对可见元素有效
  7. $("#btn").position().top
  8. $("#btn").position().left
  9. scrollTop() 获取匹配元素相对滚动条顶部的偏移
  10. 对可见元素和隐藏元素均有效
  11. $("div").scrollTop()
  12. scrollTop(val) 设置垂直滚动条顶部偏移为该值
  13. 对可见元素和隐藏元素均有效
  14. $("div").scrollTop(200)
  15. scrollLeft() 获取匹配元素相对滚动条左部的偏移
  16. 对可见元素和隐藏元素均有效
  17. $("div").scrollLeft()
  18. scrollLeft(val) 设置水平滚动条左侧的偏移
  19. 对可见元素和隐藏元素均有效
  20. $("div").scrollLeft(200)

注意:offset方法是相对于当前窗口的相对偏移,而position方法是相对于父元素的偏移

选自《从零开始学习jQuery》

猜你在找的jQuery相关文章