目录
4. 设置和获取HTML,文本和值;
4.1 获取html,设置html;
<script type="text/javascript">
$(document).ready(function(){
//设置和获取HTML,文本和值
var l1_html=$("ul li:eq(0)").html();
alert(l1_html);
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("ul li:eq(0)").html("<font color=red>HTML哈哈</font>");
});
</script>
4.2 获取文本,设置文本;
<script type="text/javascript">
$(document).ready(function(){
//获取文本,设置文本
var l1_text=$("ul li:eq(0)").text();
alert(l1_text);
});
</script>
<script type="text/javascript">
$(document).ready(function(){
//获取文本,设置文本
$("ul li:eq(0)").text("丫丫");
});
</script>
4.3 获取值,设置值;
初始页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<style type="text/css">
.lc{
background-color: red;
}
.lc2{
background-color: blue;
}
.lc3{
font-weight: bold;
}
</style>
</head>
<body>
<p>你最喜欢的名人是?</p>
<ul>
<li title="这是乔布斯"><font color="green">乔布斯</font></li>
<li title="这是比尔盖茨" class="lc">比尔盖茨</li>
<li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
</ul>
<input type="text" id="userName"/>
<input type="button" value="获取数据" onclick="getUserName()"/>
<input type="button" value="设置数据" onclick="setUserName()"/>
</body>
</html>
<script type="text/javascript">
function getUserName(){
var userName=$("#userName").val();
alert(userName);
}
function setUserName(){
$("#userName").val("你懂的");
}
</script>
5.遍历结点操作;
5.1 获取所有子节点;
先看看结点下面有几个结点:
<script type="text/javascript">
$(document).ready(function(){
// 遍历节点
var b=$("body").children();
//看body结点下面有几个结点,应该有5个
alert(b.length);
});
</script>
进行遍历:
<script type="text/javascript">
$(document).ready(function(){
// 遍历节点
var u=$("ul").children();
alert(u.length);
for(var i=0;i<u.length;i++){
// alert(u[i].innerHTML);
alert($(u[i]).html());
}
});
</script>
5.2 获取邻近的下一个兄弟结点next();
<script type="text/javascript">
$(document).ready(function(){
var l=$("ul li:eq(1)").next();//获取第二个结点的下一个结点
alert(l.html());
});
</script>
5.3 获取邻近的上一个兄弟结点prev();
<script type="text/javascript">
$(document).ready(function(){
var l=$("ul li:eq(1)").prev();//获取第二个结点的上一个结点
alert(l.html());
});
</script>
6. Jquery操作DOM结点CSS;
6.1 获取DOM结点CSS样式;
新添加一个节点:
<p id="jc" style="color:red">六神</p>
<script type="text/javascript">
$(document).ready(function(){
var l=$("#jc").css("color");
alert(l);
});
</script>
6.2 设置DOM结点CSS样式;
<script type="text/javascript">
$(document).ready(function(){
$("#jc").css("color","yellow");
});
</script>