在JQuery中根据id获取控件，如果输入id错误是不报错的。
必要时可以通过写判断语句进行判断是否id写错
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery</title>
<style type="text/css">
.warning {
background-color:yellow;
}
</style>
<script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
<script type="text/javascript">
// $(function(){$('#btn').mouseover(function () { alert("鼠标在我上面！"); })})
//这里的id如果错误就不会报错。可以自己写出控制是否报错
$(function () {
var elements = $('#btn');
if (elements.length <= 0) {
alert("报错");
return;
}
elements.mouseover(function () { alert('鼠标在我上面');});
})
</script>
</head>
<body bgcolor="blue">
<input value="点击"type="button" id="btn"/>
</body>
</html>
.next方法用于获取本节点后面第一个同辈的节点。
意思是与本节点在同一层次级别中的下一个节点对应的值
所以说next就是指向下一个。（这里面用到的this是一个dom对象，需要转换成jquery对象）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery</title>
<script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('p').click(function () { alert($(this).next().text()); });
//注意这里this是dom对象，要强制转换成jquery对象
})
</script>
</head>
<body bgcolor="blue">
<p>aa</p>
<p>bb</p>
<div>div</div>
<p>cc</p>
<p>dd</p>
</body>
</html>
nextAll()是指本节点后面所有的，方法中还可以加入参数，用来查找哦后面所有相应参数对应的
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery</title>
<script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('p').click(function () { alert($(this).nextAll().text()); });
//nextAll('div')
//注意这里this是dom对象，要强制转换成jquery对象
})
</script>
</head>
<body bgcolor="blue">
<p>aa</p>
<p>bb</p>
<div>div</div>
<p>cc</p>
<p>dd</p>
</body>
</html>
《注意是隐式迭代》
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery</title>
<script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('p').click(function () { $(this).nextAll('p').css("background","yellow"); });
//nextAll('div')
//注意这里this是dom对象，要强制转换成jquery对象
})
$(function () { $('table td').css("font-size", "60px"); })
$(function () {
$('table td').mouseover(function () {
$('table td').css("color", "red");
$(this).nextAll('td').css("color", "black"); })
})
</script>
</head>
<body bgcolor="blue">
<p>aa</p>
<p>bb</p>
<div>div</div>
<p>cc</p>
<p>dd</p>
<table>
<tr>
<td>★</td>
<td>★</td>
<td>★</td>
<td>★</td>
<td>★</td>
</tr>
</table>
</body>
</html>
siblings()获取所有同辈元素
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery</title>
<script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
<script type="text/javascript">
$(function () { $('table td').css("font-size", "60px"); })
$(function () {
$('td').click(function () {
$(this).css("background", "red");
$(this).siblings("td").css("background","blue");
})
})
</script>
</head>
<body bgcolor="blue">
<table>
<tr>
<td>★</td>
<td>★</td>
<td>★</td>
<td>★</td>
<td>★</td>
</tr>
</table>
</body>
</html>