jQuery操作得到的元素
通过前面的讲解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); ? ? ?弹出某元素距离窗口上沿的偏移量
④获得和设置高度和宽度
函数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(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() ? 很好理解
