本文学习如何使用jQuery获取和操作元素的属性和CSS样式.

元素属性和Dom属性

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

<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操作元素属性

在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");
<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

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

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》

使用jQuery操作元素的属性与样式的更多相关文章

  1. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  2. jQuery入门(2)使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

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

    元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...

  4. jQuery操作元素的属性与样式

    本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...

  5. JQuery操作元素的属性与样式及位置 复制代码

    <script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...

  6. JQuery操作元素的属性与样式及位置

    <script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...

  7. jQuar总结10:jQuery操作元素的属性

    jQuery操作元素的属性 1 设置单个属性 //html <div></div> //js $('div').attr('id', 'box'); $('div').attr ...

  8. JQuery快速入门-操作元素的属性和样式

    我们在学习JavaScript时,详细介绍了DOM对象.从DOM树可以得知,对DOM的操作,主要包括:元素的属性.内容.值.CSS. 一.元素属性的操作 在 jQuery 中,可以对元素的属性执行获取 ...

  9. jQuery操作元素的class属性

    今天在做一个菜单折叠插件的时候需要根据页面的url改变其class属性.jQuery操作元素的属性是非常方便的,在此记录一下: 1.给元素添加class属性: addClass(class) (1)添 ...

随机推荐

  1. sqoop 1.4.4-cdh5.1.2快速入门

    一.快速入门 (一)下载安装 1.下载并解压 wget http://archive.cloudera.com/cdh5/cdh/5/sqoop-1.4.4-cdh5.1.2.tar.gz tar - ...

  2. ios app 开发中ipa重新签名步骤介绍-备

    作为一个app应用程序开发者,在app应用程序在苹果商店上架前总需要将安装包安装到ios机器上进行测试,这个时候我们就需要打包in house版本的ipa了,打包in house实际上是一个将ipa应 ...

  3. Linux下使用QQ的几种方式

    Linux下没有官方的QQ聊天应用,对于经常使用QQ与朋友同事沟通交流的小伙伴们来说肯定很不方便,在Linux下可以使用以下几种方法使用QQ:   1.wine qq for linux Ubuntu ...

  4. CentOS安装Nginx,并配置nodejs反向代理

    安装介绍 安装位置:/usr/local/nginx nginx安装包下载地址:http://nginx.org/download/nginx-1.7.11.tar.gz 安装依赖软件 安装nginx ...

  5. PowerShell控制台输出符号+函数参数类型指定+文本内容读取

    There are several ways: Write-Host: Write directly to the console, not included in function/cmdlet o ...

  6. poj2063 Investment(多次完全背包)

    http://poj.org/problem?id=2063 多次完全背包~ #include <stdio.h> #include <string.h> #define MA ...

  7. HAVING 子句 (SQL Server Compact)

    MSDN官方文献 原文地址:http://technet.microsoft.com/zh-cn/library/ms173260.aspx

  8. puppet aix package 之rsync安装

    AIX中使用RPM安装RSync遇到的问题及解决办法 最近在折腾AIX的系统,它里面本来有一个包管理工具叫installp,但是俺不会用,也不知道从那里找包. 幸亏AIX提供了RPM的支持,所以安装软 ...

  9. 大型分布式C++框架《四:netio之请求包中转站 上》

    本来一篇文章就该搞定的.结果要分上下篇了.主要是最近颈椎很不舒服.同时还在做秒杀的需求也挺忙的. 现在不能久坐.看代码的时间变少了.然后还买了两本治疗颈椎的书.在学着,不过感觉没啥用.突然心里好害怕. ...

  10. flume的自定义sink-Kafka

    1.创建一个agent,sink类型需指定为自定义sink        vi /usr/local/flume/conf/agent3.conf        agent3.sources=as1  ...