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插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
JQuery实现图片轮播效果
May 08 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jquery实现简单每周轮换的日历
Sep 10 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
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
Javascript 日期处理之时区问题
2009/10/08 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
python numpy数组复制使用实例解析
2020/01/10 Python
Django admin组件的使用
2020/10/24 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
毕业生求职简历的自我评价
2013/10/23 职场文书
施工资料员岗位职责
2014/01/06 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
学校运动会霸气口号
2014/06/07 职场文书
社区志愿者活动方案
2014/08/18 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
维稳承诺书
2015/01/20 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android