~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function () {
alert($('div').length);//3
alert($('#div1').length);//$()獲取到的都是一個集合 1
})
</script>
</head>
<body>
<div id="div1" class="box box2" miaov="妙味">aaaaaaa</div>
<div></div>
<div></div>
</body>
</html>
~~~
***
利用length判斷是否有元素
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通過length來糾錯，發現頁面中沒有的元素</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
var $span = $('#span1'); //這個span并不存在
console.log($span.length); //0 說明頁面中沒有$span這個元素
$span.html('bbbbb');
})
</script>
</head>
<body>
<div id="div1">aaaaaaa</div>
</body>
</html>
~~~
***
#### 課堂練習--刪除指定顏色方塊
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:100px;
height:100px;
float:left;
margin:10px;
border:1px solid #000;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function () {
var color = '';
$('span').click(function () {
color = $(this).html();
});
$('div').click(function () {
$(this).css('background',color);
});
$('input').click(function () {
$('div[style*=red]').css('background','');
});
})
</script>
</head>
<body>
<span>red</span>
<span>yellow</span>
<span>green</span>
<span>blue</span>
<br>
<input type="button" value="清空紅色">
<br>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
~~~
