                        課程
                    
                        /前端開發
                        
                            /jQuery
                        
                        /jQuery基礎 (一)—樣式篇

if(-1 !== className.indexOf('imooc')){}為什么是-1?。?？？

<!DOCTYPE html>

<html>

<head>

? ? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

? ? <title></title>

? ? <style>

? ? .left,

? ? .right {

? ? ? ? width: 300px;

? ? ? ? height: 120px;

? ? }

? ??

? ? .left div,

? ? .right div {

? ? ? ? width: 100px;

? ? ? ? height: 90px;

? ? ? ? padding: 5px;

? ? ? ? margin: 5px;

? ? ? ? float: left;

? ? ? ? border: 1px solid #ccc;

? ? }

? ? ? ??

? ? .newClass{

? ? ? ? background: #bbffaa;

? ? }

? ? .imoocClass{

? ? ? ? background: red;

? ? }

? ? </style>

? ? <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>

<body>

? ? <h2>.addClss()方法</h2>

? ? <div class="left">

? ? ? ? <div class="aaron">

? ? ? ? ? ? <p>newClass</p>

? ? ? ? </div>

? ? ? ? <div class="aaron">

? ? ? ? ? ? <p>newClass</p>

? ? ? ? </div>

? ? </div>

? ? <div class="right">

? ? ? ? <div class="aa bb imooc">

? ? ? ? ? ? <article>

? ? ? ? ? ? ? ? <p>imoocClass</p>

? ? ? ? ? ? </article>

? ? ? ? </div>

? ? ? ? <div class="bb cc imooc ">

? ? ? ? ? ? <article>

? ? ? ? ? ? ? ? <p>imoocClass</p>

? ? ? ? ? ? </article>

? ? ? ? </div>

? ? </div>

? ? <script type="text/javascript">?

? ? ? ? //class=left下div元素增加一個新的樣式，增加背景顏色

? ? ? ? $('.left div').addClass('newClass')

? ? </script>

? ? <script type="text/javascript">?

? ??

? ? ? ? //通過className(fucntion)方法

? ? ? ? //這個函數返回一個或更多用空格隔開的要增加的樣式名。

? ? ? ? //接收index 參數表示元素在匹配集合中的索引位置和html 參數表示元素上原來的 HTML 內容

? ? ? ? //找到所有的div，然后通過addClass設置顏色，根據返回的className的判斷，

? ? ? ? $("div").addClass(function(index,className) {

? ? ? ? ? ? //找到類名中包含了imooc的元素

? ? ? ? ? ? if(-1 !== className.indexOf('imooc')){

? ? ? ? ? ? ? ? //this指向匹配元素集合中的當前元素

? ? ? ? ? ? ? ? $(this).addClass('imoocClass')

? ? ? ? ? ? }