首页 博客列表 精选博客 每日焦点 关于我
JQuery样式操作、click事件以及索引值-选项卡应用示例
发布日期：2021-05-10 07:22:42 浏览次数：18 分类：原创文章

本文共 4023 字，大约阅读时间需要 13 分钟。

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

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

 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>样式操作</title>
  6. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(function () {
  9. var $div=$('#box');
  10. var sTr=$div.css('fontSize');//读
  11. alert(sTr);
  12. $div.css({backgroundColor:'pink',color:'black',fontSize:'20px'})//写
  13. });
  14. </script>
  15. </head>
  16. <body>
  17. <div id="box">div元素</div>
  18. </body>
  19. </html>
  20.  

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

样式的加减

 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(function () {
  9. var $div=$('.box');
  10. $div.addClass('big');//加入big类
  11. $div.removeClass('red');//去除red样式类
  12. })
  13. </script>
  14. <style type="text/css">
  15. .box{
  16. width: 100px;
  17. height: 100px;
  18. background-color: red;
  19. }
  20. .big{
  21. font-size: 30px;
  22. }
  23. .red{
  24. color: green;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div class="box red">div元素</div>
  30. </body>
  31. </html>
  32.  

给元素绑定click事件

 
  1. $('#btn1').click(function)(){
  2. //内部的this指的是原生对象
  3. //使用JQuery对象用$(this)
  4. }
  5.  

点击事件，切换样式

 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(function () {
  9. var $btn=$('#btn');
  10. $btn.click(function () {//绑定事件
  11. // var $div=$('.box');
  12. // if(!$div.hasClass('col01')){
  13. // alert(1);
  14. // }
  15. // $div.addClass('col01');
  16. //可以简化成下面的写法
  17. $('.box').toggleClass('col01');//切换样式
  18. })
  19. });
  20. </script>
  21. <style type="text/css">
  22. .box{
  23. width: 200px;
  24. height: 200px;
  25. background-color: gold;
  26. }
  27. .col01{
  28. background-color: green;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <input type="button" name="" value="切换样式" id="btn">
  34. <div class="box">div元素</div>
  35. </body>
  36. </html>
  37.  

索引值-选项卡

有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取。

 
  1. var $li=$('.list li ').eq();
  2. alert($li.index());//弹出
  3.  
 
  1. <ul class="list">
  2. <li>1</li>
  3. <li>2</li>
  4. ..............
  5. <li>6</li>
  6. </ul>
  7.  

得到索引值

 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(function () {
  9. var $li=$('.list li');
  10. // alert($li.length);
  11. alert($li.eq(3).index());
  12. var s=$li.filter(".myli").index();
  13. alert(s);
  14. })
  15. </script>
  16. </head>
  17. <body>
  18. <ul class="list">
  19. <li>1</li>
  20. <li>2</li>
  21. <li>3</li>
  22. <li>4</li>
  23. <li class="myli">5</li>
  24. <li>6</li>
  25. <li>7</li>
  26. <li>8</li>
  27. </ul>
  28. </body>
  29. </html>
  30.  

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

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

完整：

 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style type="text/css">
  7. .btns input{
  8. width: 100px;
  9. height: 40px;
  10. background-color: grey;
  11. border: 0;
  12. }
  13. .btns .current{
  14. background-color: gold;
  15. }
  16. .cons div{
  17. width: 500px;
  18. height: 300px;
  19. background-color: gold;
  20. display: none;/*整体都不显示了*/
  21. text-align: center;
  22. line-height: 300px;
  23. font-size: 30px;
  24. }
  25. .cons .active{
  26. display: block;
  27. }
  28. </style>
  29. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  30. <script type="text/javascript">
  31. $(function () {
  32. var $btn=$('.btns input');
  33. var $div=$('.cons div');
  34. // alert($btn.length);
  35. // alert($div.length);
  36. $btn.click(function () {
  37. // 我点击哪一个按钮，$(this)就指的是谁,而this
  38. //指的是原生的，$（this）指的是JQuery的
  39. // $(this).siblings().removeClass('current');
  40. // $(this).addClass('current');//可以用链式调用
  41. $(this).addClass('current').siblings().removeClass('current');
  42. var num=$(this).index();
  43. $div.eq($(this).index()).addClass('active').sibling().removeClass('active');
  44. })
  45. })
  46. </script>
  47. </head>
  48. <body>
  49. <div class="btns">
  50. <input type="button" name="" value="01" class="current">
  51. <input type="button" name="" value="02">
  52. <input type="button" name="" value="03">
  53. </div>
  54. <div class="cons">
  55. <div class="active">选项卡1的内容</div>
  56. <div>选项卡2的内容</div>
  57. <div>选项卡3的内容</div>
  58. </div>
  59. </body>
  60. </html>
  61.  

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

上一篇：js常用设计模式
下一篇：jquery+css实现Tab栏切换的代码实例

发表评论

最新留言

第一次来，支持一个
[***.219.124.196]2025年04月18日 06时46分18秒

关于作者

    喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！

推荐文章

docker容器命令 2021-05-10
CentOS7使用keepalive实现nginx的高可用 2021-05-10
Centos7.4下mysql5.6开启ssl 2021-05-10
Installing ESXi - fatal error 6 (Buffer too small) 2021-05-10
oracle查看字符集后修改oracle服务端和客户端字符集的步骤 2021-05-10
Oracle闪回查询总结 2021-05-10
NAT端口复用型 2021-05-10
android中自定义标题栏左边距问题 2021-05-10
c学习-28 2021-05-10
Linux环境编程--03 文件IO 2021-05-10
使用C语言获取文件夹地址的方法收藏 2021-05-10
微盟实习 2021-05-10
HDU——3374 String Problem （最大最小表示法+循环节+kmp） 2021-05-10
文件读写（java） 2021-05-10
Markdown中Latex常见数学符号 2021-05-10
求1-n中x（0-9）的个数 2021-05-10
char与varchar的区别 2021-05-10
Java——Static class 2021-05-10
uni app 小程序中的引用的iconfont图标后预览不出页面的问题 2021-05-10
都说 TCP 是面向连接的，怎样才算是一个连接呢？ 2021-05-10
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 460832381 位访客
访问时间: 2025-04-29 22:51:06 访问IP: 3.133.83.94     Copyright © 2020 - 2025 css8.cn 京ICP备2021015314号-1 手机版