文档章节

转jQuery获取和操作元素的属性和CSS样式

凌枫yong
 凌枫yong
发布于 2016/07/17 13:41
字数 1594
阅读 6
收藏 0

元素属性和Dom属性

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

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

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

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

值得注意的是:

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

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

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

使用jQuery操作元素属性

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

函数名 说明 例子
attr(name) 取得第一个匹配元素的属性值.
$("input").attr("value")
attr(property) 将一个"名/值"形式的对象设置为所有匹配元素的属性
$("input").attr({ value: "txt", title: "text" });
attr(key,value) 所有匹配的元素设置一个属性值
$("input").attr("value","txt");
attr(key,fn) 所有匹配的元素设置一个计算的属性值
$("input").attr("title", function () { return this.value });
removeAttr(name) 所有匹配的元素中删除一个属性
$("input").removeAttr("value");

注意:

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

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

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

$("#txt1").attr("value")
$("#txt1").attr("value", "1234");

$("#dv1").attr("innerHTML", 'this is a div');
$("#dv1").attr("innerHTML");

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

函数名 说明 例子
val() 获取第一个匹配元素的value值
$("#txt1").val()
val(val) 为匹配的元素设置value值
$("#txt1").val("txt1")
html() 获取第一个匹配元素的html内容
$("#dv1").html()
html(val) 设置每一个匹配的元素的html内容
$("#dv1").html("this is a div")
text() 取得所有匹配文本节点的内容,并将其连接起来
$("div").text()
text(val) 将所有匹配元素的置为val
$("div").text("divs")

使用jQuery操作CSS

1.修改CSS类

函数名 说明 例子
addClass(classes) 每个匹配的元素添加指定的类名
$("input").addClass("colorRed borderBlack");
hasClass(class) 判断匹配元素集合中是否至少有一个包含了指定的css类,如果有一个含有指定css类,则返回true
alert($("input").hasClass("borderBlack"));
removeClass([classes]) 从匹配元素中移除所有或指定的css类
$("input").removeClass("colorRed borderBlack");
toggleClass(classes) 如果存在(不存在)就删除(添加)指定类
$("input").toggleClass("colorRed borderBlack");
toggleClass(classes,switch) 当switch是true时,添加类,switch为false时,删除类
$("input").toggleClass("colorRed borderBlack", true);

注意:

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

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

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

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

2.修改CSS样式

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

注意:

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

示例 生成的源码
$("input").css("border-width","5");
<</span>input style="BORDER-RIGHT-WIDTH: 5px; BORDER-TOP-WIDTH: 5px; BORDER-BOTTOM-WIDTH: 5px; BORDER-LEFT-WIDTH: 5px" id="txt1" />

注意:

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

获取常用的属性

1.宽、高相关

函数名 说明 例子
width() 获取第一个匹配元素的宽度,默认为px
$("#txt1").width()
width(val) 为匹配的元素设置宽度值,默认为px
$("#txt1").width(200)
height() 获取第一个匹配元素的高度,默认为px
$("#txt1").height()
height(val) 为匹配的元素设置宽度值,默认为px
$("#txt1").height(20)
innerWidth() 获取第一个匹配元素内部区域宽度(包括padding,不包括border)
$("#txt1").innerWidth()
innerHeight() 获取第一个匹配元素内部区域高度(包括padding,不包括border)
$("#txt1").innerHeight()
outerWidth([margin]) 获取第一个匹配元素外部区域宽度(包括padding,border)
margin为true则包括margin,否则不包括
$("#txt1").outerWidth()
outerHeight([margin]) 获取第一个匹配元素外部区域高度(包括padding,border)
margin为true则包括margin,否则不包括
$("#txt1").outerHeight(true)

注意:

返回的高度、宽度均为数字,不带px

参照一张图,会更容易理解些.

image

2.位置相关

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

函数名 说明 例子
offset() 获取匹配元素在当前窗口的相对偏移
只对可见元素有效
$("#btn").offset().top
$("#btn").offset().left
position() 获取匹配元素相对父元素的偏移
只对可见元素有效
$("#btn").position().top
$("#btn").position().left
scrollTop() 获取匹配元素相对滚动条顶部的偏移
对可见元素和隐藏元素均有效
$("div").scrollTop()
scrollTop(val) 设置垂直滚动条顶部偏移为该值
对可见元素和隐藏元素均有效
$("div").scrollTop(200)
scrollLeft() 获取匹配元素相对滚动条左部的偏移
对可见元素和隐藏元素均有效
$("div").scrollLeft()
scrollLeft(val) 设置水平滚动条左侧的偏移
对可见元素和隐藏元素均有效
$("div").scrollLeft(200)

注意:

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


--选自《从零开始学习jQuery》

本文转载自:http://blog.csdn.net/u011990285/article/details/39677875

共有 人打赏支持
凌枫yong
粉丝 1
博文 65
码字总数 0
作品 0
南昌
私信 提问
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
2018/07/04
0
0
Java程序员从笨鸟到菜鸟之(八十八)跟我学jquery(四)JQuery框架操作元素的属性与样式

在前面几篇博客中,我们初步了解了一下jquery的好处,基本语法,还有一些基本函数,这是学习jquery的基础,在这篇博客中,我们一起来学习一下JQuery框架操作元素的属性与样式,在web开发中,...

长平狐
2012/11/12
23
0
JQuery元素属性和样式操作、以及设置元素和内容

一、JQury元素属性操作 通过JQuery可以对元素本身的属性进行操作,包括获取属性的属性值,设置属性的属性值,并且可以删除属性值(attr()和removeAttr())。 二、JQuery样式操作 元素样式操作...

Red_Ant_hoyl
2018/07/24
0
0
python前端jQuery入门

知识点预习 1.jQuery的加载2.jQuery选择器 3.jQuery的click事件 4.jQuery的样式操作 5.jQuery动画 01- 封闭函数 作用:避免在修改他人代码时出现 方法同名替换的情况想让一个函数直接执行用封...

czbkzmj
2018/12/07
0
0
Python自动化开发学习17-jQuery

jQuery学习之前 jQuery 是 JavaScript 的一个类库,类似 python 中的模块。 jQuery在线手册:http://jquery.cuishifeng.cn/ 官网:http://jquery.com/ 版本选择 目前jQuery有三个大版本:1.x...

骑士救兵
2018/06/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

租房软件隐私保护如同虚设

近日,苏州市民赵先生向江苏新闻广播新闻热线025-84658888反映,他在“安居客”手机应用软件上浏览二手房信息,并且使用该软件自动生成的虚拟号码向当地一家中介公司进行咨询。可电话刚挂不久...

linux-tao
今天
1
0
分布式项目(五)iot-pgsql

书接上回,在Mapping server中,我们已经把数据都整理好了,现在利用postgresql存储历史数据。 iot-pgsql 构建iot-pgsql模块,这里我们写数据库为了性能考虑不在使用mybatis,换成spring jd...

lelinked
今天
4
0
一文分析java基础面试题中易出错考点

前言 这篇文章主要针对的是笔试题中出现的通过查看代码执行结果选择正确答案题材。 正式进入题目内容: 1、(单选题)下面代码的输出结果是什么? public class Base { private Strin...

一看就喷亏的小猿
今天
2
0
cocoapods 用法

cocoapods install pod install 更新本地已经install的仓库 更新所有的仓库 pod update --verbose --no-repo-update 更新制定的仓库 pod update ** --verbose --no-repo-update...

HOrange
今天
3
0
linux下socket编程实现一个服务器连接多个客户端

使用socekt通信一般步骤 1)服务器端:socker()建立套接字,绑定(bind)并监听(listen),用accept()等待客户端连接。 2)客户端:socker()建立套接字,连接(connect)服务器,连接上后...

shzwork
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部