JQuery中DOM操作[续]

10、设置和获取HTML、文本和值示例代码

<p title=”选择你喜欢的水果？”><b>选择你喜欢的水果？</b></p>

<form action=”” method=”post”>

用户输入<input name=”title” id=”myinput” value=”请输入内容” />

</form>

<script language=”javascript”>

var p_html=$(“p”).html();//获取p元素的html代码，注意这里包含了<b></b>

//如果需要重新设置，只需在html函数中加入参数，这个函数类似js中的innerHTML属性

$(“p”).html(“<i>这是新的内容</i>”);

//上面函数带的有html格式，如果只需要更改文字呢？

$(“p”).text(“这里只能填写文字，<b>这里标签里的内容</b>”);

//如果需要获取到用户输入的值比如value，比如常用的，输入框中提示文字

$(“#myinput”).focus(function(){//相当于js中的onfocus方法

var text=$(this).val();

if(text==”请输入内容”){

$(this).val(“”);//获取焦点之后把原来内容清空

}

});

$(“#myinput”).blur(function(){

var text=$(this).val();

if(text==””){

$(this).val(“请输入内容”);

}

});

</script>

11、遍历节点示例代码：

<span><p>你最喜欢的运动是？<b>这是span后代元素内容</b></p></span>

<ul>

<li>篮球</li>

<li>足球</li>

<li>排球</li>

</ul>

<script language=”javascript”>

//获取子元素,这里只是获取子元素和后代元素无关

var $span=$(“span”).children();//获取到的内容是：<p>你最喜欢的运动是？<b>这是span后代元素内容</b></p>

var $p=$(“p”).children();//alert($p[0].innerHTML);获取到的内容是：<b>这是span后代元素内容</b>

var $ul=$(“ul”).children();

//获取同辈元素，span和ul是同辈元素，可用$(“span”).next()获取到ul,同样可以用$(“ul”).prev()获取到span

//想获取所有的同辈siblings()

</script>

12、CSS操作示例代码（这里要注意前面有addClass和removeClass）

<p style=”color:red”>这是要设置的内容</p>

<script language=”javascript”>

var style=$(“p”).css(“color”);//当然这里和attr用法类似

alert(style);//这里获取的是rgb

//位置相关函数offset()是当前元素在当前窗口想对偏移有top和left属性

//position()方法是相对于最近的一个position设置为relative或者absolute的祖父节点偏移也有top和left属性

</script>