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


Posted in jQuery onMay 14, 2019

本文实例讲述了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.3water.com/code/HtmlJsRun 测试上述代码运行效果。

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

jQuery 相关文章推荐
jquery网页加载进度条的实现
Jun 01 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 #jQuery
JQuery特殊效果和链式调用操作示例
May 13 #jQuery
JQuery的加载和选择器用法简单示例
May 13 #jQuery
JQuery事件委托原理与用法实例分析
May 13 #jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 #jQuery
使vue实现jQuery调用的两种方法
May 12 #jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 #jQuery
You might like
PHP获取网卡地址的代码
2008/04/09 PHP
php利用cookie实现访问次数统计代码
2011/05/19 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
JS删除String里某个字符的方法
2021/01/06 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python编写弹球游戏的实现代码
2018/03/12 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
python如何删除列为空的行
2020/07/17 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
大学生村官工作感言
2014/01/10 职场文书
经理岗位职责
2015/02/02 职场文书
学校运动会简讯
2015/07/20 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
MySQL之DML语言
2021/04/05 MySQL
教你如何用cmd快速登录服务器
2022/06/10 Servers
MySQL池化框架学习接池自定义
2022/07/23 MySQL