使用jQuery操作元素的属性与样式
本文学习如何使用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().leftposition() 获取匹配元素相对父元素的偏移
只对可见元素有效 $("#btn").position().top
$("#btn").position().leftscrollTop() 获取匹配元素相对滚动条顶部的偏移
对可见元素和隐藏元素均有效 $("div").scrollTop()scrollTop(val) 设置垂直滚动条顶部偏移为该值
对可见元素和隐藏元素均有效 $("div").scrollTop(200)scrollLeft() 获取匹配元素相对滚动条左部的偏移
对可见元素和隐藏元素均有效 $("div").scrollLeft()scrollLeft(val) 设置水平滚动条左侧的偏移
对可见元素和隐藏元素均有效 $("div").scrollLeft(200)
注意:
offset方法是相对于当前窗口的相对偏移,而position方法是相对于父元素的偏移
--选自《从零开始学习jQuery》
使用jQuery操作元素的属性与样式的更多相关文章
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- jQuery入门(2)使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- 《从零开始学习jQuery》:用jQuery操作元素的属性与样式
元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...
- jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
- JQuery操作元素的属性与样式及位置 复制代码
<script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...
- JQuery操作元素的属性与样式及位置
<script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...
- jQuar总结10:jQuery操作元素的属性
jQuery操作元素的属性 1 设置单个属性 //html <div></div> //js $('div').attr('id', 'box'); $('div').attr ...
- JQuery快速入门-操作元素的属性和样式
我们在学习JavaScript时,详细介绍了DOM对象.从DOM树可以得知,对DOM的操作,主要包括:元素的属性.内容.值.CSS. 一.元素属性的操作 在 jQuery 中,可以对元素的属性执行获取 ...
- jQuery操作元素的class属性
今天在做一个菜单折叠插件的时候需要根据页面的url改变其class属性.jQuery操作元素的属性是非常方便的,在此记录一下: 1.给元素添加class属性: addClass(class) (1)添 ...
随机推荐
- 2014年企业改善IT风险管理的5个办法
进入新的一年,企业面对数据泄密事故.日益复杂的攻击和对其控制的持续监管,现在是时候重新审视其风险管理战略了.虽然每个企业都是独特的,风险管理专家认为有些风险管理办法值得企业关注.下面我们列出了5个风险 ...
- jquery读取后台代码
前台代码: <script type="text/javascript"> $(function () { $("#btn") ...
- C# 配置文件读取与修改(转)
C# 配置文件读取与修改 配置文件在很多情况下都使用到, 配置文件分为两种 一种是应用程序的配置文件, 一种是web的配置文件. 两种配置文件最大的区别是web的配置文件更新之后会实时更新, 应用 ...
- 关于Zend Framework 2中 Zend\Session的使用
一直迷惑于zend\Session的使用,这个是Zend\Session的官方教程的中文版,http://zend-framework-2.yangfan.co/blog/556. 其中最重要的是关于 ...
- C++中复制构造函数与重载赋值操作符
我们都知道,在C++中建立一个类,这个类中肯定会包括构造函数.析构函数.复制构造函数和重载赋值操作:即使在你没有明确定义的情况下,编译器也会给你生成这样的四个函数.例如以下类: class CTe ...
- Python自动化运维之3、函数、lambda、递归
一.函数 函数的基础概念: 函数是python为了代码最大程度地重用和最小化代码冗余而提供的基本结构 函数是一种设计工具,它能让程序员将复杂的系统分解为可管理的部件 函数用于将相关功能打包并参数化 在 ...
- 父Prefab与子prefab问题
PrefabRevolution 原文:http://framebunker.com/blog/poor-mans-nested-prefabs/ (溜还是老外溜啊) 有些时候需要在Prefab里 ...
- ural 1572 Yekaterinozavodsk Great Well
#include <cstdio> #include <cstring> #include <cmath> #include <algorithm> # ...
- IBM Cognos 10 启动报错
报错信息: 15:35:02, 'LogService', 'StartService', 'Success'. 15:35:03, CAF input validation enabled. 15: ...
- jquery+css实现菜单收缩效果并适应多种浏览器与移动平台
效果 出现 css部分 .content-wrapper{ -webkit-transition: -webkit-transform .3s ease-in-out, margin .3s ease ...