《从零开始学习jQuery》:用jQuery操作元素的属性与样式
元素属性和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操作元素属性
attr
在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");
val(),html(),text()
实际上,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
修改CSS类
addClass()
removeClass()
hasClass()
toggleClass()
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);
});
修改CSS样式
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")是无法正常获取其值的,现在,我们来介绍一些常用的属性。
获取常用的属性
宽、高相关关
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
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。参照一张图,会更容易理解些:
位置相关
offset()
position()
scrollTop()
scrollLeft()
在设计一些弹出对象的脚本中,经常需要动态获取弹出坐标并且设置元素的位置.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》:用jQuery操作元素的属性与样式的更多相关文章
- JQuery快速入门-操作元素的属性和样式
我们在学习JavaScript时,详细介绍了DOM对象.从DOM树可以得知,对DOM的操作,主要包括:元素的属性.内容.值.CSS. 一.元素属性的操作 在 jQuery 中,可以对元素的属性执行获取 ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- 使用jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
- jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
- jQuery入门(2)使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- 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> ...
- jQuery学习笔记(4)-设置元素的属性和样式
一.前言 本篇主要讲解如何使用jQuery获取和操作元素的属性和css样式 二."DOM属性"与元素属性 1.运行一下代码 <img src="/images/lo ...
- 从零开始学 Web 之 jQuery(二)获取和操作元素的属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- Eclipse 常用快捷键使用说明
注释快捷键 Ctrl + / 选中代码后快速加//注释, 再次用取消//注释 Ctrl + Shift + / 选中代码后快速加/* */注释 Ctrl + Shift + \ 选中代码后快速取消/* ...
- 电商门户网站商品品类多级联动SpringBoot+Thymeleaf实现
在淘宝.京东等电商网站,其门户网站都有一个商品品类的多级联动,鼠标移动,就显示,因为前端不是我做的,所以不说明前端实现,只介绍后端实现. 搭建部署SpringBoot环境 配置文件配置: 开启了对Th ...
- Ubuntu 16.04安装下HTK--亲测ok
1.首先需要安装一些32位库sudo apt-get install libx11-dev:i386 libx11-dev sudo apt-get install g++-multilib sudo ...
- 关于DB Link
概述 DB Link是一个定义了本地数据库到远程数据库路径的对象,是schema object,它是单向连接 通过DB Link可查询remote数据库的对象及运行其程序 在分布式环境里,DB Lin ...
- HTML5拍照、摄像机功能实战
HTML5拍照.摄像机功能实战 苏格团队 作者:Tomey 开篇 最近在做一个chrome app的云相机应用,应用包括拍照.摄像.保存照片视频.上传文件等等核心功能,其中涉及到很多HTML5对媒体流 ...
- Tomcat添加HTTPS单向认证和双向认证
前言 前一段时间有了解如何配置Tomcat服务为Https单向认证和双向认证,当时也做了一些记录,今天开始写博客,就把以前的记录拿出来整理下,分享给大家.本文没有介绍证书如何生成,会在下一篇博文里介绍 ...
- php安装grpc报No releases available for package解决方法
1.pecl.php.net搜索相应grpc的下载文件,这里找了个stable版本 https://pecl.php.net/get/grpc-1.17.0.tg 2.wge下载+pecl insta ...
- NiftyNet开源平台的使用 -- 配置文件
NiftyNet开源平台的使用 NiftyNet基础架构是使研究人员能够快速开发和分发用于分割.回归.图像生成和表示学习应用程序,或将平台扩展到新的应用程序的深度学习解决方案. 详细介绍请见: ...
- Tomcat他山之石.可以攻玉(一)Server组件
Server组件 Server组件作用: 采用观察者模式,又叫源-收听者的设计模式,提供了可以动态添加.删除的监听器,作用是在Server组件的不同生命周期中完成不同的功能.逻辑: Tomcat容器的 ...
- Java设计模式学习记录-备忘录模式
前言 这次要介绍的是备忘录模式,也是行为模式的一种 .现在人们的智能手机上都会有备忘录这样一个功能,大家也都会用,就是为了记住某件事情,防止以后自己忘记了.那么备忘录模式又是什么样子的呢?是不是和手机 ...