JQuery样式操作、click事件以及索引值-选项卡应用示例

本文实例讲述了JQuery样式操作、click事件以及索引值-选项卡应用。分享给大家供大家参考，具体如下：

JQuery的css函数既能读属性值，也能写属性值：

<!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'})//写
    });
  </script>
</head>
<body>
  <div id="box">div元素</div>
</body>
</html>

其实不光是css函数，JQuery内的其他函数也是这样的，如果放值就是写，如果不放就是读。

样式的加减

<!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)(){
 //内部的this指的是原生对象
 //使用JQuery对象用$(this)
}

点击事件，切换样式

<!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');
        //可以简化成下面的写法
        $('.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>

索引值-选项卡

有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用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>

选项卡的制作，点击事件之后，当前点击的事件加上样式，其他统计的元素，去掉样式，关键代码

$(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 () {
        // 我点击哪一个按钮，$(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');
      })
    })
  </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">选项卡1的内容</div>
    <div>选项卡2的内容</div>
    <div>选项卡3的内容</div>
  </div>
</body>
</html>

JQuery可以使用链式调用，在改变选项卡样式的时候就用到了。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • JQuery给元素绑定click事件多次执行的解决方法

    原绑定方法: 复制代码 代码如下: $("#sdfsd").on("mouseout",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: 复制代码 代码如下: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑

  • JQuery Tab选项卡效果代码改进版

    介绍的是基于JQuery实现的一个选项卡效果,重点体现在HTML里没有内联事件处理程序,而是定义在js文件里,做到行为与结构的分离.在实际应用过程中,只 要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID. 在这里,我又做了部分的修改,增加了选项卡可自动切换功能,以及选项卡点击相应还是鼠标放上后相应的参数,同时依然支持多次调用. 现在,我把代码贴上,与众博友共享 这是js脚本 复制代码 代码如下: /* jque

  • jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

    jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

    本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果.分享给大家供大家参考.具体如下: 这里汇总了几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写,另外还加入了圆角,都是参考以前学习的知识写的.期间使用了jquery-1.6.2.min.js框架库. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n

  • jQuery实现选项卡切换效果简单演示

    jQuery实现选项卡切换效果简单演示

    本文实例讲述了jQuery实现选项卡切换效果简单演示代码.分享给大家供大家参考.具体如下: 运行效果图如下 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选项卡</title> <link type="text/css" rel="stylesheet" href="c

  • JQuery调用绑定click事件的3种写法

    第一种方式: $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello World click"); }); 第二种方式: $('#clickmebind').bind("click", function(){ alert("Hello World bind"); }); 第三种方式: $('#clickmeon').on('click

  • jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)

    jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)

    本文实例分析了jQuery常用样式操作.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .high { font-weight: bold; /

  • JQueryDOM之样式操作

    设置样式和获取样式 class 也是节点元素的属性,因此获取class 和设置class 都可以使用attr()方法来完成 追加样式 直接使用attr()方法设置class属性,会将原来的class属性替换掉 如果在添加新的样式时,还需要保留原有样式,可以使用addClass()方法 注意:当一个节点元素包含了多个class样式时,将按照以下方式进行处理: 如果给一个元素添加了多个 class 值, 那么就相当于合并了它们的样式 如果有不同的 class 设定了同一样式属性, 则后者覆盖前者 移

  • jQuery实现获取及设置CSS样式操作详解

    jQuery实现获取及设置CSS样式操作详解

    本文实例讲述了jQuery实现获取及设置CSS样式操作.分享给大家供大家参考,具体如下: addClass():向被选元素添加一个或多个类 removeClass():从被选元素删除一个或多个类 toggleClass():对被选元素进行添加/删除类的切换操作 css():设置或返回被选元素的一个或多个样式属性 样式表实例: .important{ font-weight:bold; font-size:xx-large; } .blue{ color:blue; } addClass() <!

  • jQuery之选项卡的简单实现

    jQuery实现选项卡功能.首先将界面搭建好. 有导航头tab_menu,还有内容tab_box. 要实现的效果就是,点击后,将相应的内容显示出来,其他内容隐藏掉. 同时为了展现选中状态,为选中的项添加背景,以示区别. 这一次,我自己写了代码,先看html部分: 复制代码 代码如下: <div class="tab">    <div class="tab_menu">        <ul>            <li

  • Jquery为DIV添加click事件的简单实例

    今天在做一个抽奖活动时小编要做一个抽奖没有中奖之后直接弹出一个提示,然后再给div添加一个事件了,下面我们来看这个例子的做法. html <a href="javascript:void(0);" id="click_ms" > <img src="img/bbg_08.jpg" border="0" > </a> jquery事件 $('#click_ms').click(function

  • jQuery中click事件的定义和用法

    本文实例讲述了jQuery中click事件的定义和用法.分享给大家供大家参考.具体分析如下: 当鼠标指针在匹配元素上方,然后按下并松开鼠标左键或者调用click()方法都会触发click事件. click()方法也可以绑定事件处理方法. 语法结构一: 触发click事件. 复制代码 代码如下: $(selector).click() 语法结构二: 为click事件绑定事件处理方法. 复制代码 代码如下: $(selector).click(data,function) 参数列表: 参数 描述 d

随机推荐