通过前面的讲解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() 很好理解
扫一扫
581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
