本文實(shí)例講述了JQuery樣式操作、click事件以及索引值-選項(xiàng)卡應(yīng)用。分享給大家供大家參考，具體如下：

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站制作、網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),惠陽網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:惠陽等地區(qū)?；蓐栕鼍W(wǎng)站價(jià)格咨詢:18982081108

JQuery的css函數(shù)既能讀屬性值，也能寫屬性值：

  
  
  
  


  
div元素

其實(shí)不光是css函數(shù)，JQuery內(nèi)的其他函數(shù)也是這樣的，如果放值就是寫，如果不放就是讀。

樣式的加減

  
  
  
  
  


div元素

給元素綁定click事件

$('#btn1').click(function)(){
 //內(nèi)部的this指的是原生對(duì)象
 //使用JQuery對(duì)象用$(this)
}

點(diǎn)擊事件，切換樣式

  
  
  
  
  


  
  
div元素

索引值-選項(xiàng)卡

有時(shí)候需要獲得匹配元素相對(duì)于其同胞元素的索引位置，此時(shí)可以用index()方法獲取。

var $li=$('.list li ').eq();
alert($li.index());//彈出

1
2
..............
6

得到索引值

  
  
  
  


  

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
  

選項(xiàng)卡的制作，點(diǎn)擊事件之后，當(dāng)前點(diǎn)擊的事件加上樣式，其他統(tǒng)計(jì)的元素，去掉樣式，關(guān)鍵代碼

$(this).addClass('current').siblings().removeClass('current');
var num=$(this).index();
$div.eq($(this).index()).addClass('active').sibling().removeClass('active');

完整：

  
  
  
  
  


  

    
    
    
  
  

    
選項(xiàng)卡1的內(nèi)容
    
選項(xiàng)卡2的內(nèi)容
    
選項(xiàng)卡3的內(nèi)容
  

JQuery可以使用鏈?zhǔn)秸{(diào)用，在改變選項(xiàng)卡樣式的時(shí)候就用到了。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具 http://tools.jb51.net/code/HtmlJsRun 測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。