JQuery樣式操作、click事件以及索引值-選項(xiàng)卡應(yīng)用示例

更新時(shí)間：2019年05月14日 08:44:52 作者：SpecYue

這篇文章主要介紹了JQuery樣式操作、click事件以及索引值-選項(xiàng)卡應(yīng)用,結(jié)合實(shí)例形式分析了jQuery動(dòng)態(tài)修改css樣式、事件響應(yīng)以及選項(xiàng)卡相關(guān)操作技巧,需要的朋友可以參考下

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>樣式操作</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      var $div=$('#box');
      var sTr=$div.css('fontSize');//讀
      alert(sTr);
      $div.css({backgroundColor:'pink',color:'black',fontSize:'20px'})//寫(xiě)
    });
  </script>
</head>
<body>
  <div id="box">div元素</div>
</body>
</html>

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

樣式的加減

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      var $div=$('.box');
      $div.addClass('big');//加入big類
      $div.removeClass('red');//去除red樣式類
    })
  </script>
  <style type="text/css">
    .box{
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .big{
      font-size: 30px;
    }
    .red{
      color: green;
    }
  </style>
</head>
<body>
<div class="box red">div元素</div>
</body>
</html>

給元素綁定click事件

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      var $btn=$('#btn');
      $btn.click(function () {//綁定事件
        // var $div=$('.box');
        // if(!$div.hasClass('col01')){
        //   alert(1);
        // }
        // $div.addClass('col01');
        //可以簡(jiǎn)化成下面的寫(xiě)法
        $('.box').toggleClass('col01');//切換樣式
      })
    });
  </script>
  <style type="text/css">
    .box{
      width: 200px;
      height: 200px;
      background-color: gold;
    }
    .col01{
      background-color: green;
    }
  </style>
</head>
<body>
  <input type="button" name="" value="切換樣式" id="btn">
  <div class="box">div元素</div>
</body>
</html>

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

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

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

<ul class="list">
<li>1</li>
<li>2</li>
..............
<li>6</li>
</ul>

得到索引值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      var $li=$('.list li');
      // alert($li.length);
      alert($li.eq(3).index());
      var s=$li.filter(".myli").index();
      alert(s);
    })
  </script>
</head>
<body>
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li class="myli">5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
</body>
</html>

選項(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');

完整：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .btns input{
      width: 100px;
      height: 40px;
      background-color: grey;
      border: 0;
    }
    .btns .current{
      background-color: gold;
    }
    .cons div{
      width: 500px;
      height: 300px;
      background-color: gold;
      display: none;/*整體都不顯示了*/
      text-align: center;
      line-height: 300px;
      font-size: 30px;
    }
    .cons .active{
      display: block;
    }
  </style>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      var $btn=$('.btns input');
      var $div=$('.cons div');
      // alert($btn.length);
      // alert($div.length);
      $btn.click(function () {
        // 我點(diǎn)擊哪一個(gè)按鈕，$(this)就指的是誰(shuí),而this
        //指的是原生的，$（this）指的是JQuery的
        // $(this).siblings().removeClass('current');
        // $(this).addClass('current');//可以用鏈?zhǔn)秸{(diào)用
        $(this).addClass('current').siblings().removeClass('current');
        var num=$(this).index();
        $div.eq($(this).index()).addClass('active').sibling().removeClass('active');
      })
    })
  </script>
</head>
<body>
  <div class="btns">
    <input type="button" name="" value="01" class="current">
    <input type="button" name="" value="02">
    <input type="button" name="" value="03">
  </div>
  <div class="cons">
    <div class="active">選項(xiàng)卡1的內(nèi)容</div>
    <div>選項(xiàng)卡2的內(nèi)容</div>
    <div>選項(xiàng)卡3的內(nèi)容</div>
  </div>
</body>
</html>

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àn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

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

您可能感興趣的文章: