- 浏览: 236737 次
- 性别:
- 来自: 葡萄牙
文章分类
最新评论
-
lightbulb:
...
jQuery中的动画与效果 -
kendezhu:
opportunity 写道 谢谢kendezhu分享,今天正 ...
jQuery 获取和设置select下拉框的值 -
opportunity:
谢谢kendezhu分享,今天正好用上了!
jQuery 获取和设置select下拉框的值
通过前面的讲解jQuery选择器我们已经能够快速而准确的找到我们想要找的元素了,这时我们就得到了这些元素的一个jQuery对象或jQuery对象数组,我们就可以利用jQuery强大的功能来对页面元素进行各种操作了。
1.操作属性
①读取属性
函数是attr(name) 返回值:Object 参数-name:属性名String 如果没相应属性返回undefined
重要的一点是,如果选择了多个元素,该函数只会"理"第一个元素的这个属性值,而忽略其他元素的相同属性,所以尽量应该保证选择的元素的准确性。
②修改属性
函数还是 attr(key,value) 返回值:jQuery 参数-key:属性名String|value:属性值Object
还有种重载attr(key,fn) 返回值:jQuery 参数-key:属性名String|fn:函数名Function 被选元素的这个属性值就是fn函数的返回值
还有种重载attr(properties)可以使用"名/值"形式一下修改多个属性值 返回值:jQuery 参数-properties:名/值数组Map
如 为所有图像设置src和alt属性
$("img").attr({src:"test.jpg",alt:"Test Image"}); 函数参数是一个json对象,名/值对 {名:值,名:值}
重要的一点是,如果选择了多个元素,这些重载的attr会"理"所有元素的这个属性值,即所有被选的元素的这个属性值都会被修改。
③删除属性
函数与读取属性差不多,不多说了 函数是removeAttr(name)
2.操作样式类
①添加样式类
函数addClass(class) 返回值:jQuery 参数-class:类名String
②移除样式类
函数removeClass(class) 返回值:jQuery 参数-class:类名String
以上两种函数,如果要操作多个class 要用空格分开
③交替样式类 返回值:jQuery 参数-class:类名String
函数toggleClass(class)
检查要操作的class如果处于存在状态则移除,如果处于移除状态则添加。
3.操作CSS样式
操作样式类必须要依赖于已经定义好的class,现在来学习直接操作与CSS样式。
①读取CSS样式
函数css(name) 返回值:String 参数-name:类名String
该函数只会"理"第一个匹配元素的这个类的值 即便没有人工设置css类 也会获得系统默认的设置
alert($("div p").css("color")) 弹出p元素的文本的颜色值
②设置CSS类
函数css(name,value) 返回值;jQuery 参数-name:css属性名String|value:css属性值String,Number
函数css(properties) 返回值:jQuery 参数-properties:css名/css值数组Map
以上两函数会"理"所有元素的这个css属性,即所有被选的元素的这个css属性值都会被修改。
$("#id").css({"background-color":"green","color":"white"})
将某元素的背景颜色设置为绿色,前景色设置为白色
③获得元素偏移信息
该函数获得某元素距离窗口左上角的偏移量,返回top与left两个值
函数offset() 返回值:Object{top,left} 此函数只对可见元素有效
alert($("#id").offset().top); 弹出某元素距离窗口上沿的偏移量
补: position()
获取匹配元素相对父元素的偏移( 使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。 使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移。 使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移 )
http://www.jb51.net/article/18340.htm
④获得和设置高度和宽度
函数height() 返回值:Integer 单位:px
如 $(document).height() $(window).height() 分别获取文档和窗口的高度
函数height(val) 返回值:jQuery 参数-val:高度值String,Number
函数width() 返回值:Integer 单位:px
如 $(document).width() $(window).width() 分别获取文档和窗口的宽度
函数width(val) 返回值:jQuery 参数-val:高度值String,Number
以上函数有参数的为Number时单位可以是em 默认是px String时可以加%设置占百分之几
小例子: $("#id").height(200).width("80%") 将某元素高度设为200px 宽度设为占百分之八十
4.操作内容
①操作HTML代码
jQuery中的函数html()和html(val)分别来获取或设置指定元素的HTML代码。这里的HTML代码不包括XML文档,但包括XHTML文档。
html() 返回值:String 取得第一个匹配元素的html内容
补:这个html()方法只会取其内容,比如<div id='test'><p>test</p><div> $("#test").html() 只会是<p>test</p>而不是<div id='test'><p>test</p><div>
html(val) 返回值:String 参数-val:设置html代码String 设置第一个匹配元素的html内容
$("1").html() $("1").html(val) 这个1不要是input等表单元素 应该是div a等元素
②操作文本
text() 返回值:String 返回所有匹配元素里的文本内容(去掉(X)HTML标签)组合起来的字符串
text(val) 返回值:String 参数-val:设置文本String 返回所有匹配元素的文本内容
这俩方法都支持XML文档
③操作值
表单元素如文本框、多选框、下拉框等的值可以使用函数val()、val(val)来操作
val() 返回值:String,Array 取得第一个匹配元素的值
val(val) 返回值:jQuery 参数-val:设置元素值String 设置所有匹配元素的值
5.查找与筛选元素
除了使用选择器对元素进行过滤以外,还可以使用函数在做到
①过滤元素集
filter(expr) 返回值:jQuery 参数-expr:表达式
筛选出与表达式匹配的元素集合。如有多个表达式用逗号隔开
其他过滤元素的函数还有
eq(index) filter(fn) hasClass(class) is(expr) not(expr) map(callback) slice(start,[end])
②在元素集中查找
find(expr) 返回值:jQuery 参数-expr:表达式String
如$("1").find("#dd") 在1的子元素中查找ID为dd的元素 这里以及上面的表达式可以是选择器之类的
next(expr) 返回值:jQuery 参数-expr:表达式String
选择当前元素集合中的每一个元素后面的第一个同级兄弟元素 与$("1+2")选择器不同之处是 next()不需知道其兄弟元素的任何细节
nextAll(expr) 选择当前元素集合中的每一个元素后面的多个同级兄弟元素
以上俩函数还可以通过他们的表达式参数 在这些同级兄弟元素中再过滤掉一些同级兄弟元素 如nextAll("#dd")等(这也是这类函数所共有的特性,他们都可以在本有的元素集中再通过表达式来过滤)
prev(expr) 与next(expr)相反
prevAll(expr) 与nextAll(expr)相反
parent(expr) 选择所有匹配元素集合所共同有的唯一的直接父元素 有时他们共有父元素可能是<body>
parents(expr) 选择所有匹配元素集合的所有父辈元素
children(expr) 选择所有匹配元素集合中每一个元素的直接子元素(不是所有后代元素)
contents() 选择所有匹配元素集合中的所有子节点(包括文本节点)
siblings(expr) 选择所有匹配元素集合中每一个元素的所有同级元素
add(expr) 在已经匹配的元素集合基础上再添加add(表达式)里匹配的元素集合形成新的元素集合 lookhere
6.链式操作
"链式操作"是jQuery中最具特色的功能之一。就是把之前需要分多行书写的代码用“.”连成一行进行书写。如下:
$("tr").mouseover(function(){
$(this).addClass("red");
}).mouseout(function(){
$(this).removeClass("red");
})
当鼠标移到一行时添加一种样式,当鼠标移出该行时移除该样式
对于有些返回值是jQuery对象的函数,还有一些特殊的链式操作来实现一些特殊效果,如下:
①结束当前操作对象
$("1").next().next().end().addClass("red")
如果不加end() 那么添加red样式的是1的next().next() 加了end() 添加red样式的是1的next()
end()能结束它前一个返回jQuery对象的函数的功能
②添加当前操作对象到先前对象
$("1").next().next().andSelf().addClass()
添加red样式的是 1, 1的next(), 1的next().next() 很好理解
发表评论
-
background-position与text-shadow
2012-04-01 09:46 956background-position http://w ... -
EasyUI2
2012-02-15 11:42 2127http://www.jeasyui.com/demo/ind ... -
EasyUI
2011-10-02 16:17 8209http://www.jeasyui.com/ http: ... -
::first-letter ::first-line
2011-08-07 17:37 897CSS的伪元素::first-letter与::first-l ... -
jQuery可视化数据显示
2011-06-24 16:03 1977http://www.oschina.net/project/ ... -
jQuery实例应用(二)
2011-04-21 23:29 9901.标签云 标签云是一种用于分类的tag标签,不过跟一般分类 ... -
jQuery中使用AJAX跨域操作
2011-04-15 16:21 1661浏览器安全模型规定,XMLHttpRequest、框架(Fr ... -
jQuery实例应用(一)
2011-04-14 17:15 2878暂时实现目前jQuery应用, ... -
jQuery学习链接
2011-04-12 13:24 868jQuery入门指南教程 http://www.cnbl ... -
jQuery的核心及工具
2011-04-09 20:17 12121.核心函数 jQuery()函数( ... -
jQuery与Ajax(三)
2011-04-09 14:38 10351.jQuery中的AJAX事件 在jQuery中有两类AJ ... -
jQuery与Ajax(二)
2011-04-07 21:59 16061.jQuery中的AJAX服务器端返回方式 目前支持的数据 ... -
jQuery与Ajax(一)
2011-04-06 16:35 53881.jQuery中的AJAX 使用jQuery在网站中应用A ... -
jQuery中的动画与效果
2011-04-05 11:52 170111.基本效果 匹配元素从 ... -
jQuery中的事件处理
2011-04-04 11:29 34141.页面载入完毕响应事件 所谓页面载入完毕是指DOM元素载入 ... -
jQuery进行DOM操作
2011-03-31 17:32 27301.在元素内部插入DOM元素 ①插入到元素内部原有元素之后 ... -
jQuery选择器
2011-03-27 19:13 1662jQuery的强大,很大程度上得益于它更能全面而又简单易用的选 ... -
客户端Javascript
2010-12-12 13:38 1171更详细参考JavaScript手册 JavaSc ... -
table标签与meta标签
2010-12-10 14:47 1341有关HTML标签的使用请参考DHTML手册 table标签与 ...
相关推荐
Jquery元素操作; 遍历元素;遍历元素:基本语法$(selector).each(function(index,?domEle)?{}); 该方法的参数是一个函数。这个函数将会在遍历时调用 在函数中,index参数是每个元素的索引号 domEle是每个DOM元素的...
第7章 操作得到的元素 第8章 使用jQuery进行DOM操作 第9章 jQuery中的事件处理 第10章 jQuery中的动画与效果 第11章 jQuery与AJAX 第12章 回头重看jQuery——核心及工具 第13章 jQuery增强用户体验 第14章 jQuery中...
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下
通过以上3种的组合,“查询”得到想要操作的元素或者元素集合,作为$()的参数,得到jQuery对象(或者jQuery对象的集合) 第二步是在jQuery对象间的跳转。也就是说,已经得到了一个jQuery对象,但是并不是想要的,那么...
• jQuery 的 action() 执行对元素的操作 示例 $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() - 隐藏所有 class="test" 的段落 $("#test").hide() - 隐藏所有 id="test" 的元素 ...
第二行代码得到class 为container的div元素,第三行代码得到标签下面id为msg的div元素(不过最好别这样写,因为jQuery需要遍历所有的div元素,对于带id的元素,直接用$("#id"))。第四行代码得到context为上下文的table...
得到的是jquery对象,对该对象进行操作的时候使用jquery方法 1.对于上面获得的对象进行遍历 (1).js方法 for(vat i=0;j<obj.length;i++){ obj[i] 来获得对应的某一个元素} (2).jquery方法 $(“#id”).each...
元素的属性中可以包含很多有用的信息,所以如何设置或得到属性中的值,就显得非常重要。 jQuery 的 $.fn.attr 方法可以作为 setter 和 getter 使用,用来设置或获取属性的值。和 $.fn.css 用法类似,$.fn.attr 既可...
这个回调函数得到2个参数: jqXHR (in jQuery 1.4.x, XMLHTTPRequest) 对象和一个描述成功请求类型的字符串("success", "notmodified", "error","timeout", or "parsererror") 。在jQuery 1.5, complete设置可以...
JavaScript基础 文档对象模型(DOM 操作得到的元素 jQuery增强用户体验 jQuery中使用AJAX跨域操作 jQuery键盘操作
操作目标元素实现功能(使目标元素发生变化) 根据这个基本流程,对于上面“更好用”的疑问,我们就有了一个初步的比较具体的答案了:“更好用”指的是“更好的元素选择器”和“更好的功能方法集”。好了,到了这里...
如果你想得到 jQuery对象,可以使用 $(this) 函数。 jQuery 代码: $("img").each(function(){ $(this).toggleClass("example"); }); -----------------------------------------------------------------------...
在 jQuery 1.2中,可以在URL参数中指定一个jQuery选择器,这会过滤返回的HTML文档,只取得文档中匹配选择器的元素。此语法类似于"url #some > selector"。 实例 载入文档的sidebar的导航部分到一个无序列表...
<a>//www.jb51.net</a>现在要得到a标签的属性id。有如下方法: 代码如下: jQuery(“#easy”).click(function() { alert(document.getElementById(“easy”).id); //1 alert(this.id); //2 ...
得到了元素之后就要对其进行操作。一个常见的需求是遍历得到的元素集,对每一个元素进行一个操作。jQuery提供的函数是 each(iterator),其中iterator是一个函数,接受一个整数作为参数,表示第几个元素。看一个简单...
主要介绍了jQuery文本框得到与失去焦点动态改变样式效果,涉及jQuery针对页面表单元素样式的动态操作技巧,需要的朋友可以参考下
而在Jquery中则使用$.map()、$.each()来操作数组: 首先是普通的数组(索引为整数的数组): 代码如下: $.map(arr,fn); 对数组中的每个元素调用fn函数逐个进行处理,fn函数将处理返回最后得到的一个新的数组 var arr...
chrome扩展程序跟踪运行时使用DOM或jQuery API来操作网页上的html dom元素(例如,更改样式,附加事件侦听器)的前端JavaScript。 产品特点 实时跟踪,您在页面上看到的变化就是您得到的代码。 按元素编码,仅列出...
jQuery 的 get(index) 方法允许选择一个实际的 DOM 元素并且对其直接操作,而不是通过 jQuery 函数,尔后可以直接访问 DOM 元素的 tagName 属性。$(this).get(0) 与$(this)[0] 等价。 如以下元素 代码如下: <...
一、选择网页元素jQuery的基本设计和主要用法,就是”选择某个网页元素,然后对其进行某种操作”。这是它区别于其他函数库的根本特点。使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$...