Java程序员从笨鸟到菜鸟之(八十八)跟我学jquery(四)JQuery框架操作元素的属性与样式
在前面几篇博客中,我们初步了解了一下jQuery的好处,基本语法,还有一些基本函数,这是学习jquery的基础,在这篇博客中,我们一起来学习一下JQuery框架操作元素的属性与样式,在web开发中,修改页面元素的属性和样式是我们需要常用的功能。所以掌握好这个知识点,对于我们在web开发中也是一个非常有力的利剑。好,下面我们就具体来看一下:
首先来看一下两个概念的区别:
元素属性和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操作DOM属性
因为 JQuery都是针对包装集进行操作,所以在JQuery中没有包装操作“DOM属性”的函数。但是JQuery提供了each()函数用于遍历 JQuery包装集,其中的this指针指向当前的DOM对象,我们可以应用这一点配合原生javascript来操作元素的DOM属性:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <script src="jquery-1.4.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $.each($('img'),function(index) {
- alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);
- this.alt = "这里改变了!";
- alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);
- });
- })
- </script>
- </head>
- <body>
- <img src="pipa_92.jpg" id="phpfuns1" alt="塞上曲" class="test" />
- <img src="pipa_92.jpg" id="phpfuns2" alt="琵琶语" class="test" />
- </body>
- </html>
$.each()函数的解析:上例代码中的$.each()中第一个参数为数组或者对象,第二个是回调函数,这个回调函数可以存在两个参数,第一个参数是数组或者对象的索引,第二个参数是数组或者对象的值。
JQuery操作元素属性
JQuery提供了属性attr()包装集函数,能够同时操作包装集中所有元素的属性,我们依旧通过实例来了解如何使用JQuery操作元素属性:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <script src="jquery-1.4.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- alert($('#phpfuns1').attr('alt'));//获取id为phpfuns1的alt属性
- $('#phpfuns1').attr('alt','已经修改了!')//设置选定元素的单个属性值
- $('#phpfuns2').attr({'alt':'修改alt属性','name':'hello'})//设置选定元素的多个属性值
- $('#phpfuns3').attr('title',function(){//将回调函数计算出的值赋给元素属性
- return this.src;
- })
- $('#phpfuns1').removeAttr('alt');//移除元素的属性值
- })
- </script>
- </head>
- <body>
- <img src="pipa_92.jpg" id="phpfuns1" alt="塞上曲" class="test" />
- <img src="pipa_92.jpg" id="phpfuns2" alt="琵琶语" class="test" />
- <img src="pipa_92.jpg" id="phpfuns3" alt="昭君出塞" class="test" />
- </body>
- </html>
上面的实例中包含了attr()包装集函数的各种用法。打开Firebug,可以看到代码运行的结果。
在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属性是不会被删除掉的,只是被改变其值而已
实际上,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类或者直接修改元素的样式来操作CSS样式。
1,JQuery修改CSS类
一个元素可以应用多个css类,但是不幸的是在DOM属性中是用一个以空格分割的字符串存储的,而不是数组。所以如果在原始javascript时代我们想对元素添加或者删除多个属性时,都要自己操作字符串,而JQuery改变了这一切。
下面进入实例,看一下JQuery是如何操作CSS类的:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <script src="jquery-1.4.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $('#phpfuns1').addClass('test');//添加类名
- $('#phpfuns2').removeClass('test2');//删除类名,保留class属性
- if($('#phpfuns1').hasClass('test')){//判断包装集中是否至少有一个元素应用了指定的CSS类
- alert('111111111');
- }
- })
- </script>
- </head>
- <body>
- <img src="pipa_92.jpg" id="phpfuns1" alt="塞上曲" />
- <img src="pipa_92.jpg" id="phpfuns2" alt="琵琶语" class="test2" />
- </body>
- </html>
使用上面的方法,我们可以将元素的CSS类像集合一样修改,再也不必手工解析字符串。
注意:addClass( class ) 和removeClass( [classes] ) 的参数可以一次传入多个css类,用空格分割,比如:
$("#btnAdd").bind("click", function(event) { $("p").addClass("colorRed borderBlue"); });
removeClass方法的参数可选,如果不传入参数则移除全部CSS类:
$("p").removeClass()
2,JQuery修改CSS样式
同样当我们想要修改元素的具体某一个CSS样式,即修改元素属性"style"时,JQuery也提供了相应的方法,下面我们通过实例来看一下如何使用JQuery修改CSS样式:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <script src="jquery-1.4.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $('p').css('color','red');//设置单一的css属性
- $('div').css({'width':'100px','background-color':'green','height':'20px'});//设置复合的css属性
- alert($('p').css('color'));//获取第一个匹配元素的样式属性
- })
- </script>
- </head>
- <body>
- <p>这是phpfuns.com的一个JQuery测试</p>
- <div></div>
- </body>
- </html>
总结修改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); |
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"); |
最后附上一些获取常用的属性的方法:
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) |
$("#txt1").outerWidth() |
outerHeight([margin]) |
获取第一个匹配元素外部区域高度(包括padding,border) |
$("#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方法是相对于父元素的偏移
要特别注意区分attr()和css(),比如说:
$comment_text.css("background-color","white");
$comment_text.attr("disabled",false);
from: http://blog.csdn.net/csh624366188/article/details/7706484
Java程序员从笨鸟到菜鸟之(八十八)跟我学jquery(四)JQuery框架操作元素的属性与样式相关推荐
- Java程序员从笨鸟到菜鸟之(十)枚举,泛型详解
一:首先从枚举开始说起 枚举类型是JDK5.0的新特征.Sun引进了一个全新的关键字enum来定义一个枚举类.下面就是一个典型枚举类型的定义: public enum Color{ RED,BLUE, ...
- Java程序员从笨鸟到菜鸟之(九十)跟我学jquery(六)jquery中事件详解
由于jQuery本身就是web客户端的有力帮手,所以事件对于它来说就显得尤为重要了,事件是脚本编程的灵魂. 所以此内容也是jQuery学习的重点. 在传统的JavaScript中,注册一个事件也是非常 ...
- Java程序员从笨鸟到菜鸟全部博客目录
本文来自:曹胜欢博客专栏.转载请注明出处:http://blog.csdn.NET/csh624366188 欢迎关注微信账号:java那些事:csh624366188.每天一篇java相关的文章 大 ...
- Java程序员从笨鸟到菜鸟之(序言)+全部链接
http://blog.csdn.net/csh624366188 大学上了一年半,接触java也一年半了,虽然中间也有其他东西的学习,但是还是以java为主路线,想想这一年半,除去前半年几乎全玩了, ...
- Java程序员由笨鸟到菜鸟 电子版书正式发布 欢迎大家下载
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 欢迎关注 ...
- Java程序员从笨鸟到菜鸟之——总结和声明
前段时间经过大约二十天的时间把javaSE的内容总结了一下,最近由于个人原因和一些乱七八糟的事情,一直没在更新,首先感谢那些一如既往支持我的朋友.最近不知道为什么,一直很懒,做东西也一直是效率很低,生 ...
- Java程序员从笨鸟到菜鸟之(五)java开发常用类(包装,数字处理集合等)(下)...
本文来自:曹胜欢博客专栏.转载请注明出处:http://blog.csdn.net/csh624366188 写在前面:由于前天项目老师建设局的项目快到验收阶段,所以,前天晚上通宵,昨天睡了大半天, ...
- Java程序员从笨鸟到菜鸟之(一百零九)一步一步学习webservice(三)开发第一个基于XFire的webservice
在日常开发中,常用的webservice引擎主要有Axis,axis2,Xfire以及cxf(Xfire的升级版).现在只有axis2和cxf官方有更新.今天我们先以一个比较老的引擎为例.来讲诉一下w ...
- Java程序员从笨鸟到菜鸟之(一百零八)一步一步学习webservice(二)webservice基本原理
本来这第二篇打算讲解"开发第一个基于XFire的webservice"的内容来着.但是想想.开发实例只是局限于了会用的层面上.如果想真正的理解webservice还是需要挖掘其原理 ...
- Java程序员从笨鸟到菜鸟之(五)java开发常用类(包装,数字处理集合等)(下)
写在前面:由于前天项目老师建设局的项目快到验收阶段,所以,前天晚上通宵,昨天睡了大半天,下午我们宿舍聚会,所以时间有点耽误,希望大家见谅 上接: Java程序员从笨鸟到菜鸟之(四)java开发常用类( ...
最新文章
- 【Unity技巧】制作一个简单的NPC
- Spring-AOP 通过配置文件实现 环绕增强
- JavaScript事件与jQuery方法
- c语言清除html标签的方法,去除HTML代码中所有标签的两种方法
- 杜教筛--51nod1239 欧拉函数之和
- centos6安装mysql并远程连接_阿里云服务器上安装redis并实现远程连接
- Java BIO编程
- 2021最新基于会话推荐系统长文综述
- python约瑟夫环_Python语言之如何实现约瑟夫环问题
- python根据题库答案自动答题器_python实现百万答题自动百度搜索答案
- 在文华财经赢顺云W6和赢顺云手机随身行中如何导入需要的指标
- 计算机应用基础数制试题及答案,计算机应用基础试题及答案1
- 修改android设备型号
- 三个优秀的Android图表开源控件
- mouseover 和 mouseenter
- 智方8000系汽车配件进销存管理系统 v8.28 bt
- Cernet_IPv6机考
- 外包php技术,php外包
- PhotoShop 初级使用教程——以网易云海报设计为例
- scale-free
热门文章
- 数学建模学习笔记——微分方程建模
- 【联邦学习】FATE 集群部署 step1
- 【项目实战】基于python的 p2p 贷后指标全自动日报制作
- 借由AI招聘软件,这位CEO 48h 内从4000名求职者中锁定那一位
- java面向对象思想如何理解
- Xgboost调参小结
- java filter 返回错误消息_利用java filter 实现业务异常拦截 跳转到错误信息提示页面...
- Java - String源码解析及常见面试问题
- MySQL-性能优化_影响MySQL性能的因素分析及解决方案
- 白话Elasticsearch12-深度探秘搜索技术之基于multi_match + best fields语法实现dis_max+tie_breaker