JQueryスタイルアクション、clickイベント、およびインデックス値-タブ適用例

この例では、JQueryスタイルの操作、clickイベント、およびインデックス値タブの適用について説明します.皆さんの参考にしてください.具体的には以下の通りです.
JQueryのcss関数は、属性値を読み取ることも、属性値を書くこともできます.

  
  
  
  
    $(function () {
      var $div=$('#box');
      var sTr=$div.css('fontSize');// 
      alert(sTr);
      $div.css({backgroundColor:'pink',color:'black',fontSize:'20px'})// 
    });
  


  
div  

実はcss関数だけではなく、JQuery内の他の関数もそうですが、値を置くと書くので、置かないと読むことになります.
スタイルの増減

  
  
  
  
    $(function () {
      var $div=$('.box');
      $div.addClass('big');//  big 
      $div.removeClass('red');//  red   
    })
  
  


div  

要素にclickイベントをバインドする

$('#btn1').click(function)(){
 //   this       
 //  JQuery   $(this)
}

イベントをクリックしてスタイルを切り替え

  
  
  
  
    $(function () {
      var $btn=$('#btn');
      $btn.click(function () {//    
        // var $div=$('.box');
        // if(!$div.hasClass('col01')){
        //   alert(1);
        // }
        // $div.addClass('col01');
        //          
        $('.box').toggleClass('col01');//    
      })
    });
  
  


  
  
div  

索引の値-タブ
同胞要素に対する一致する要素のインデックス位置を取得する必要がある場合があります.index()メソッドで取得できます.

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

1

2

..............

6

インデックス値を取得

  
  
  
  
    $(function () {
      var $li=$('.list li');
      // alert($li.length);
      alert($li.eq(3).index());
      var s=$li.filter(".myli").index();
      alert(s);
    })
  


  

1

2

3

4

5

6

7

8

タブの作成、イベントをクリックした後、現在クリックしているイベントにスタイル、その他の統計要素を加え、スタイル、キーコードを削除します.

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

完全:

  
  
  
  
  
    $(function () {
      var $btn=$('.btns input');
      var $div=$('.cons div');
      // alert($btn.length);
      // alert($div.length);
      $btn.click(function () {
        //         ，$(this)     , this
        //      ，$（this）   JQuery 
        // $(this).siblings().removeClass('current');
        // $(this).addClass('current');//       
        $(this).addClass('current').siblings().removeClass('current');
        var num=$(this).index();
        $div.eq($(this).index()).addClass('active').sibling().removeClass('active');
      })
    })
  


  

    
    
    
  
  

    
   1   
    
   2   
    
   3   
  

JQueryはチェーンコールを使用でき、タブスタイルを変更するときに使用します.
興味のある方は、オンラインHTML/CSS/JavaScriptコード実行ツールをご利用いただけますhttp://tools.jb51.net/code/HtmlJsRun上記のコードの実行効果をテストします.
jQueryの関連内容についてもっと興味のある読者は、「jQueryよくある事件の使い方とテクニックの総括」、「jQuery常用プラグインと使い方の総括」、「jQuery操作jsonデータテクニックの総括」、「jQuery拡張テクニックの総括」、「jQueryよくある経典の特効の総括」、「jqueryセレクタの使い方の総括」を参照してください.
本文で述べたことが皆さんのjQueryプログラム設計に役立つことを望んでいます.