1.jQuery樣式操作

1.1 設置或者修改樣式，操作的是style屬性。

單樣式語法: jQuery對象.css(‘屬性名‘, ‘屬性值‘)

//html
<div id="box"></div>

//js
$("#box").css("background","gray");//將背景色修改為灰色

//js代碼運行完畢的結果
<div id="box" style="background: gray"></div>

設置多個樣式:

//html
<div id="box"></div>

//js
$("#one").css({

    
 
"background":"gray",

    "width":"400px",

    "height":"200px"

});

//js執行完畢的結果
<div id="box" style="background:gray; width:400px; height:200px"></div>

2 獲取行內樣式

//html
<div id="box" style="background: gray width:100px"></div>

$("#box").css("background-color"); //返回的是 rgb(128, 128, 128) --> gray
 

$("#box").css("width"); //返回100px

2.1 操作class樣式方式

//html
<div id="box" ></div>

//js
$(‘#box‘).addClass(‘one‘);

//執行完之後的結果
<div id="box" class="one"></div>

如果想要同時添加多個

//如果想要同時添加多個
//html
<div id="box" ></div>

//js
$(‘#box‘).addClass(‘two three‘);

//結果
<div id="box" class="two three"></div>

2.2 移除所有樣式類

-1 如果不傳參數,那麽會移除所有的類名

//html
<div id="box" class="one two three"></div>

//js
$(‘#box‘).removeClass();

//執行完畢的結果
<div id="#box" class></div>

-2 如果傳入參數,刪除指定的類名

//html
<div id="box" class="one two three"></div>

//js
$(‘#box‘).removeClass(‘one‘);

//執行完畢的結果
<div id="#box" class="two three"></div>

//======================================================================================

//如果想同時刪除多個類名
//html
<div id="box" class="one two three"></div>
//js
$(‘#box‘).removeClass(‘one three‘);
//結果
<div id="#box" class="two"></div>

-3 判斷是否有樣式類

//html
<div id="box" class="one"></div>

//js
$(‘#box‘).hasClass(‘one‘); //返回 true
$(‘#box‘).hasClass(‘two‘); //返回 false

-4 切換樣式類

如果有這個類名，則移除該樣式，如果沒有，添加該類名。

//html
<div id="box"></div>

//js
$(‘#box‘).toggleClass(‘one‘);

//執行完的結果
<div id="box" class="one"></div>

//此時再執行一次toggleClass(‘one‘);
$(‘#box‘).toggleClass(‘one‘);

//執行完的結果
<div id="box" class></div>

3 jQuery中的隱式叠代: jQuery內部會幫我們遍歷DOM對象,然後給每一個DOM對象實現具體的操作.

jQuary教程3: jQuery語法1