jQuery中的DOM操作（二）

三、样式操作

attr()               :获取或设置元素属性
removeAttr()   :删除元素属性
addClass()       :追加样式
removeClass()  :删除class的某个值
hasClass()        :判断某元素中是否含有某个class,如果有，则返回true,否则返回false
toggleClass()    :控制样式的重复切换，如果类名存在则删除它，如果不存在则添加它

$XXX.toggle(function(){
//显示元素
},function(){
//隐藏 元素
})                     :单击鼠标会交替执行显示元素代码和隐藏元素代码两个函数

像attr() 能获取或设置元素的方法 还有html()、text()、height()、width()、val()、css();
attr()

var $para=$("p");               //获取<p>节点
var p_txt=$para.attr("title");  //获取<p>元素节点属性title
$("p").attr({"title":"your title","name":"text"});  /设置title属性的值
$("p").attr({"class":"hight","title":"your title","name":"test"}); //设置class,title,name属性的值

removeAttr()

$("p").removeAttr("title");  //删除<p>元素的属性title

removeClass()

HTML代码：
<p class="high another">test</p>
1.若jQ:
$("p").removeClass("high");
则输出结果：
<p class="another">test</p>
2.若jQ:
$("p").removeClass("high").removeClass("another");
则输出结果：
<p>test</p>

toggleClass()



toggle(function{},function{})：

HTML代码：
<h5 class="head">什么是jQuery?</h5>
<div class="content"> 内容</div>
jQ代码：
$(function(){
var $content = $(this).next();
$("h5.head").toggle(function(){
$('div.content').show();
},function(){
$('div.content').hide();
});
})

四、HTML、文本和值的设置和获取

<p title="选择你最喜欢的水果"><strong>你最喜欢的水果是？</strong></p>

html()

var p_html=$("p").html;  //获取<p>元素的html
alert(p_html);           //alert出的是<strong>你最喜欢的水果是？</strong>

text()

var p_text=$("p").text();//获取<p>元素的文本内容
alert(p_text);           //alert出的是 你最喜欢的水果是？

五、CSS-DOM操作

css()：         读取和设置style对象的各种属性
offset()          :获取元素当前视窗的相对偏移,其返回对象包含两个属性,即top,left
position()       :················相对于最近的一个position样式属性设置为relative或absolute的祖父节点的相对偏移，其返回对象包含两个属性,即top,left
scrollTop()     :获取元素的滚动条距顶端的距离
scrollLeft()     :······································左侧的距离
css()

$("p").css("color");                                        //获取<p>元素的样式颜色
$("p").css("color","red");                                  //获取<p>元素的样式颜色为红色
$("p").css({"font-size":"30px","background":"#888888"});    //同时设置字体大小和背景颜色

4000
注意：$("div").css("height")与$("div").height()的区别
offset()

var offset=$('p').offset();       //获取<p>元素的offset()
var left=offset.left;             //获取左偏移
var top =offset.top;              //获取右偏移

position()

var position=$('p').position();
var left=position.left;
var top =position.top;

scrollTop()和scrollLeft()

var $p=$('p');
var scrollTop=$p.scrollTop();
var scrollLeft=$p.scrollLeft();