浅谈JQuery中的一些知识点
1、用JQuery检查网页上是否有某个对象的方法:
如何判断对象是否存在,jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象),调用text()、html()、click()之类方法的时候其实是对数组中每个DOM对象迭代调用每个方法,因此即使通过id选择的元素不存在也不会报错,如果需要判断指定的id是否存在,应该写:
//通过判断$("#btn1")这个集合中对象的个数来判断是否有对象存在(可行)
if ($("#btn1").length <= 0) {
do something
}
//直接判断是否有DOM对象存在(可行)
if ($("#btn1")[0]) {
do something
}
//下面的写法是错误的,因为判断的直接是集合
if($("#btn1")){
do something
}
2、用JQuery实现全选、全不选、反选
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#allOrNone').click(function () {
//点击“选择状态”,实现全选与全不选
$(':checkbox').attr('checked', $(this).attr('checked'));
});
//当改变了上面选择项的选中状态后,“选择状态”的状态也跟着改变
$(':checkbox[id!=allOrNone]').click(function () {
optionStateChanged();
});
//选项改变抽象的方法
function optionStateChanged() {
var state = true;
$(':checkbox[id!=allOrNone]').each(function () {
if (!$(this).attr('checked')) {
state = false;
return false;
//break; 不可以使用break;
}
});
//如果有一个没有被选中,则将“选择状态”的状态也设置为没有选中状态
$('#allOrNone').attr('checked', state);
}
//反选
$('#chooseReverse').click(function () {
//进行选项的反选工作
$(':checkbox[id!=allOrNone]').each(function () {
$(this).attr('checked', !$(this).attr('checked'));
});
//单独考虑选项改变的操作
optionStateChanged();
});
});
</script>
</head>
<body>
<input type="checkbox" value="1" />足球
<input type="checkbox" value="2" />足球
<input type="checkbox" value="3" />足球
<input type="checkbox" value="4" />足球
<input type="checkbox" value="5" />足球<br />
<input type="checkbox" name="name" value="" id="allOrNone"/>选择状态
<input type="button" name="name" value="反选" id="chooseReverse"/>
</body>
</html>