li[1].css("color","blue"); // 問題:li是個(gè)數(shù)組,為什么這里加上[i]會(huì)沒有效果?換成index也不行,為什么呢?
<!DOCTYPE html>
<html>
<head>
? ? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
? ? <title></title>
? ? <style>
? ? .left {
? ? ? ? width: auto;
? ? ? ? height: 150px;
? ? }
? ??
? ? .left div {
? ? ? ? width: 150px;
? ? ? ? height: 120px;
? ? ? ? padding: 5px;
? ? ? ? margin: 5px;
? ? ? ? float: left;
? ? ? ? background: #bbffaa;
? ? ? ? border: 1px solid #ccc;
? ? }
? ? </style>
? ? <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
? ? <h2>each方法</h2>
? ? <div class="left first-div">
? ? ? ? <div class="div">
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>list item 1</li>
? ? ? ? ? ? ? ? <li>list item 2</li>
? ? ? ? ? ? ? ? <li>list item 3</li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? ? ? <div class="div">
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>list item 4</li>
? ? ? ? ? ? ? ? <li>list item 5</li>
? ? ? ? ? ? ? ? <li>list item 6</li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? </div>
? ? <br/>
? ? <button>點(diǎn)擊:each方法遍歷元素</button>
? ? <button>點(diǎn)擊:each方法回調(diào)判斷</button>
? ? <script type="text/javascript">
? ? $("button:first").click(function() {
? ? ? ? //遍歷所有的li
? ? ? ? //修改每個(gè)li內(nèi)的字體顏色
? ? ? ??
? ? ? ? $("li").each(function(index, element) {
? ? ? ? ? ? $(this).css('color','red')
? ? ? ? })
? ? })
? ? </script>
? ? <script type="text/javascript">
? ? $("button:last").click(function() {
? ? ? ? //遍歷所有的li
? ? ? ? //修改偶數(shù)li內(nèi)的字體顏色
? ? ? ? var li=$("li");
? ? ? ? li.each(function(index,element){
? ? ? ? ? ??
? ? ? ? ? ? if(index%2){
? ? ? ? ? ? ? ? li[1].css("color","blue");
? ? ? ? ? ? // 問題:li是個(gè)數(shù)組,為什么這里加上[i]會(huì)沒有效果?換成index也不行,為什么呢?
? ? ? ? ? ? }
? ? ? ? });
? ? ? ? //在javascript中0代表false,非0代表true
? ? ? ? // $("li").each(function(index, element) {
? ? ? ? // ? ? if (index % 2) {
? ? ? ? // ? ? ? ? $(this).css('color','blue')
? ? ? ? // ? ? }
? ? ? ? // });
? ? })?
? ? </script>
</body>
</html>
2016-12-17
console.log(li[1]);
輸出的是三個(gè)標(biāo)簽內(nèi)容,不是dom對(duì)象
不妨把li[1]改為eq(1)
console.log(li.eq(1));
打印的是,是可以操作dom元素的
2016-12-19
jquery對(duì)象是一個(gè)類似數(shù)組的對(duì)象,可以通過[index]的方法得到相應(yīng)的DOM對(duì)象
var lis = $('li'); ?//這是jq對(duì)象
var li = lis[0]; ?//這是DOM對(duì)象
你寫的li[1].css這是DOM對(duì)象用jquery的方法,當(dāng)然不行啦
li.eq[index]這才是jq的方法。
剛開始學(xué)很容易二者的一些方法記混淆,多用就好啦