jQuery 操作得到的元素详解编程语言

操作属性
1、读取属性
attr(name)
2、修改属性
attr(key,value) 提供值，其中key为属性名，value为属性值
attr(key,fn) 提供函数，其中key为属性名，fn为计算得到属性值的函数
attr(properties)
将一个“名/值”形式的对象设置为所有匹配的元素的属性
参数properties(Map)作为属性的“名/值”对象
3、删除属性
removeAttr(name)

操作样式表
1、添加样式
addClass(class) class为CSS中的样式类别，正如前面所设置的red green等。
2、去除样式类
removeClass(class)
3、交替样式类
toggleClass(class) 如果存在就删除样式类，如果不存在就添加样式类

操作CSS
1、读取CSS
css(name) 调用方式：$(“#content p”.css(“color”));将显示指定段落的RGB值
2、修改CSS
css(key,value) 提供值，其中key为属性名，value为属性值
调用方式： $(“#content p”.css(“color”,”red”));
attr(properties)
将一个“名/值”形式的对象设置为所有匹配的元素的属性
参数properties(Map)作为属性的“名/值”对象
调用方式：

$("#content p#second").css({ 
"color":"white", 
"background":"green" 
});

3、获取元素偏移信息
offset() 返回的对象包括两个整体属性，Object(top,left)
调用方式如下:

var left=$("#content p#second").offset().left;//取得坐标左位置 
var top=$("#content p#second").offset().left;//取得坐标右位置

4、获得和设置高度
height() 返回高度的整型值
调用方式如下：
$(“#content p#second”).height();//返回元素块的高度
取得文档的高度
$(window).height();
设置高度 height(val)
5、获得和设置宽度
获取width();设置width(val)

6、操作页面元素的内容
操作html代码
html();
调用方式$(“div #first”).html();//弹出对话框显示元素内的HTML内容
html(val) 用户设定HTML内容的值

7、操作文本
text(),只显示其中的文本内容
text(val) 设置元素内容的文本

8、操作值
val()获取第一个匹配元素的值
调用方式为：$(“#username”).val();
val(val)
调用方式：
$(“username”).val(“jQuery”);
$(“multiple”).val([“青岛”,”西安”]);
对于多选框的操作是将参数以数组的形式传入

9、查找与筛选元素
过滤筛选元素
filter(expr)
筛选出与指定表达式匹配的元素集合，和整个方法用户缩小匹配的范围，用逗号分隔多个表达式
hasClass(class);
调用方式如下：

$("p").each( 
function(){ 
if(!$(this).hasClass("first")){ 
$(this).css("background-color","green"); 
} 
} 
);

其中each函数用于遍历页面上所有的<p>标签元素
is(expr)函数和hasClass(class)一样，其返回值均为布尔型。就本例而言，
还可以使用另一个jQuery的过滤元素集函数来实现：not(expr)
jQuery过滤元素集函数列表
eq(index)、filter(expr)、filter(fn)、hasClass()、is(expr)、not(expr)
map(callback) callback给每个元素执行的函数，建立一个列表
slice(start,[end]) 选取一个匹配的子集，end可选
查找元素
find(expr) 被用来搜索所有与指定表达式相匹配的元素，常用于查找元素的后代元素
调用方式：$(“form”).find(“#firstname”).addClass(“green”);
如果把上述调用代码改写成：
$(“input”).find(“#firstname”).addClass(“green”);
将不会得到预期结果
next(expr) 用于取得一个匹配的元素集合中每个元素紧邻的后面同辈元素的元素集合，其实现
效果为只有一个元素匹配到。
nextAll(expr) 查找当前元素之后所有的同辈元素，可用于表达式过滤
调用方式为：$(“input#firstname”).nextAll(“#city”).addClass(“green”);
jQuery用于在元素集中查找子元素集以及子元素的函数还有很多，如下面
add(expr)、children([expr])只检查子元素，不检查其所有后代元素
contents()、parent([expr]) 取得一个包含所有匹配元素的唯一父元素
parents([expr]) 取得一个包含所有匹配元素的祖先元素的元素集合
prev([expr]) 用于筛选前一个同辈元素
prev([expr]) 查找当前元素之前所有的同辈元素
sliblings([expr]) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。
可以用可选表达式进行筛选

10、链式操作
将多句jQuery语句用“.”合并成一句，
原来：

$(document).ready(function(){  
$("tr:even").addClass("rose"); 
$("tr:odd").addClass("lightgreen");     
$("tr").mouseover( 
function(){  
$(this).addClass("trhover"); 
} 
);  
$("tr").mouseout( 
function(){  
$(this).removeClass("trhover");  
} 
);

现在：

$(document).ready(function(){  
$("tr:even").addClass("rose"); 
$("tr:odd").addClass("lightgreen");     
$("tr").mouseover( 
function(){  
$(this).addClass("trhover"); 
} 
).mouseout( 
function(){  
$(this).removeClass("trhover");  
} 
);

end()函数将操作数回滚到最近的一个“破坏性”操作数之前，也就是说将匹配的元素列表变为前一次的状态
调用方式：$(“tr#first”).next().end().addClass(“trhover”);

添加当前操作对象到先前对象
andSelf() 将先前所匹配的元素加入到当前元素中
调用方式：$(“tr#first”).next().andSelf().addClass(“trhover”);