经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
前端之jquery1
来源：cnblogs　　作者：YifChan　　时间：2019/6/10 13:40:04　　对本文有异议

jquery介绍

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。

jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
jquery的口号和愿望 Write Less, Do More（写得少，做得多）

1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载

jquery加载

将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。

  1. <script type="text/javascript">
  3. $(document).ready(function(){
  4.      ......
  5. });
  7. </script>

可以简写为：

  1. <script type="text/javascript">
  3. $(function(){
  4.      ......
  5. });
  7. </script>

 

jquery加载示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  7.     <script type="text/javascript">
  9.         window.onload = function () {
  10.             var oDiv = document.getElementById('div1');
  11.             alert('原生弹出的' + oDiv);
  12.         };
  13.         /*
  14.         
  15.         // ready 比window.onload 要快：
  16.         //原因是，window.onload是等标签加载完后，再渲染完之后才运行，
  17.         // ready是等标签加载完后就运行
  19.         // ready的完整写法：
  20.         $(document).ready(function(){
  21.             var $div = $('#div1');
  22.             alert('jquery弹出的'+$div);
  24.         })
  25.         */
  26.  
  27.         // ready的简写：
  28.         $(function () {
  29.             var $div = $('#div1');
  30.             alert('jquery弹出的' + $div);
  31.         })
  32.     </script>
  33. </head>
  34. <body>
  35. <div id="div1">这是一个div元素</div>
  36. </body>
  37. </html>
jquery加载示例

 

jquery选择器

jquery用法思想一

选择某个网页元素，然后对它进行某种操作

jquery选择器

jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

  1. $(document) //选择整个文档对象
  2. $('li') //选择所有的li元素
  3. $('#myId') //选择id为myId的网页元素
  4. $('.myClass') // 选择class为myClass的元素
  5. $('input[name=first]') // 选择name属性等于first的input元素
  6. $('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素

对选择集进行修饰过滤(类似CSS伪类)

  1. $('#ul1 li:first') //选择id为ul1元素下的第一个li
  2. $('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
  3. $('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
  4. $('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
  5. $('#myForm :input') // 选择表单中的input元素
  6. $('div:visible') //选择可见的div元素

对选择集进行函数过滤

  1. $('div').has('p'); // 选择包含p元素的div元素
  2. $('div').not('.myClass'); //选择class不等于myClass的div元素
  3. $('div').filter('.myClass'); //选择class等于myClass的div元素
  4. $('div').first(); //选择第1个div元素
  5. $('div').eq(5); //选择第6个div元素

选择集转移

  1. $('div').prev('p'); //选择div元素前面的第一个p元素
  2. $('div').next('p'); //选择div元素后面的第一个p元素
  3. $('div').closest('form'); //选择离div最近的那个form父元素
  4. $('div').parent(); //选择div的父元素
  5. $('div').children(); //选择div的所有子元素
  6. $('div').siblings(); //选择div的同级元素
  7. $('div').find('.myClass'); //选择div内的class等于myClass的元素

 

jquery选择器示例1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  7.     <script type="text/javascript">
  8.         $(function () {
  9.             var $div = $('#div1');
  10.             $div.css({'color': 'red'});
  12.             var $div2 = $('.box');
  13.             $div2.css({'color': 'green'});
  14.             
  15.             var $li = $('.list li');
  16.             // 带“-”的样式属性，可以写成驼峰式，也可以写成原始
  17.             $li.css({'background-color': 'pink', 'color': 'red'});
  18.         });
  19.     </script>
  20. </head>
  21.  
  22. <body>
  23. <div id="div1">这是一个div元素</div>
  24. <div class="box">这是第二个div元素</div>
  25. <div class="box">这是第三个div元素</div>
  26.  
  27. <!-- ul.list>li{$}*8 -->
  28. <ul class="list">
  29.     <li>1</li>
  30.     <li>2</li>
  31.     <li>3</li>
  32.     <li>4</li>
  33.     <li>5</li>
  34.     <li>6</li>
  35.     <li>7</li>
  36.     <li>8</li>
  37. </ul>
  38.  
  39. </body>
  40. </html>
jquery选择器示例1

选择器过滤和转移示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  7.     <script type="text/javascript">
  8.         $(function () {
  9.             /*
  10.             var $div = $('div');
  11.             $div.css({'backgroundColor':'gold'});
  12.             */
  13.             
  14.             $('div').css({'backgroundColor': 'gold'});
  15.             $('div').has('p').css({'fontSize': '30px'});
  16.             $('div').eq(4).css({'textIndent': '20px'});
  17.             $('div').eq(4).prev().css({'color': 'red'});
  18.             $('div').find('.tip').css({'fontSize': '30px'});
  19.         })
  20.     </script>
  21. </head>
  22. <body>
  23. <div>1</div>
  24. <div><p>2</p></div>
  25. <div>3</div>
  26. <div>4</div>
  27. <div>5</div>
  28. <div>6</div>
  29. <div>7</div>
  30. <div><span>8</span><span class="tip">9</span></div>
  31. </body>
  32. </html>
选择器过滤和转移示例

判断是否选中元素示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  7.     <script type="text/javascript">
  8.         $(function () {
  9.             $div = $('#div1');
  10.             alert($div.length);
  11.             
  12.             // 没有选中元素，也不会报错，程序正常运行
  13.             $div2 = $('#div2');
  14.             
  15.             alert($div2.length);
  16.             // if($div2.length>0) 通过length属性来判断是否选中了元素
  17.         })
  18.     </script>
  19. </head>
  20. <body>
  21. <div id="div1">div元素</div>
  22.  
  23. </body>
  24. </html>
判断是否选中元素示例

 

jquery样式操作

jquery用法思想二
同一个函数完成取值和赋值

操作行间样式

  1. // 获取div的样式
  2. $("div").css("width");
  3. $("div").css("color");
  5. //设置div的样式
  6. $("div").css("width","30px");
  7. $("div").css("height","30px");
  8. $("div").css({fontSize:"30px",color:"red"});

特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。

操作样式类名

  1. $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
  2. $("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
  3. $("#div1").removeClass("divClass divClass2") //移除多个样式
  4. $("#div1").toggleClass("anotherClass") //重复切换anotherClass样式，有就删除，没有就添加

 

css方法示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  7.     <script type="text/javascript">
  8.         $(function () {
  9.             var $div = $('#box');
  11.             // 读取属性值
  12.             var sTr = $div.css('fontSize');
  13.             alert(sTr);
  15.             // 写属性值
  16.             $div.css({'color': 'red', 'backgroundColor': 'pink', 'fontSize': '20px'});
  17.             
  18.             /*
  19.             原生js无法读取行间没有定义的css属性值
  20.             var oDiv = document.getElementById('box');
  21.             alert(oDiv.style.fontSize);
  22.             */
  23.         })
  24.     </script>
  25. </head>
  26. <body>
  27. <div id="box">div元素</div>
  28. </body>
  29. </html>
css方法示例

样式名操作示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  7.     <script type="text/javascript">
  8.         $(function () {
  9.             var $div = $('.box');
  11.             // 在原来样式名的基础上加上“big”的样式名
  12.             $div.addClass('big');
  14.             // 在原来样式名的基础上去掉“red”的样式名
  15.             $div.removeClass('red');
  16.         })
  17.     </script>
  18.     <style type="text/css">
  19.         .box {
  20.             width: 100px;
  21.             height: 100px;
  22.             background-color: gold;
  23.         }
  24.         .big {
  25.             font-size: 30px;
  26.         }
  27.         .red {
  28.             color: red;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33. <div class="box red">div元素</div>
  34. </body>
  35. </html>
样式名操作示例

 

绑定click事件

给元素绑定click事件，可以用如下方法：

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

 

绑定click事件-toggleclass使用示例

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

 

索引值-选项卡

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

获取元素索引值示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  7.     <script type="text/javascript">
  8.         $(function () {
  9.             var $li = $('.list li');
  11.             //alert($li.length); 弹出 8
  12.             //alert($li.eq(3).index()); 弹出3
  13.             alert($li.filter('.myli').index());
  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>
获取元素索引值示例

选项卡示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .btns input {
  8.             width: 100px;
  9.             height: 40px;
  10.             background-color: #ddd;
  11.             border: 0;
  12.         }
  14.         .btns .current {
  15.             background-color: gold;
  16.         }
  17.         
  18.         .cons div {
  19.             width: 500px;
  20.             height: 300px;
  21.             background-color: gold;
  22.             display: none;
  23.             text-align: center;
  24.             line-height: 300px;
  25.             font-size: 30px;
  26.         }
  28.         .cons .active {
  29.             display: block;
  30.         }
  31.     </style>
  32.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  33.     <script type="text/javascript">
  34.         $(function () {
  35.             var $btn = $('.btns input');
  36.             var $div = $('.cons div');
  38.             $btn.click(function () {
  39.                 // this 指的是原生的this，它表示当前点击的对象，使用jquery的对象需要用$(this)
  40.  
  41.                 // 当前点击的按钮加上current样式后，除了当前，其他的按钮去掉current样式
  42.                 $(this).addClass('current').siblings().removeClass('current');
  44.                 //alert( $(this).index() ; //弹出当前按钮的索引值
  45.                 // 当前点击的按钮对应索引值的div加上active样式，其他的去掉active样式
  46.                 $div.eq($(this).index()).addClass('active').siblings().removeClass('active');
  47.             })
  48.         })
  49.     </script>
  50. </head>
  51. <body>
  52. <div class="btns">
  53.     <input type="button" name="" value="01" class="current">
  54.     <input type="button" name="" value="02">
  55.     <input type="button" name="" value="03">
  56. </div>
  57. <div class="cons">
  58.     <div class="active">选项卡一的内容</div>
  59.     <div>选项卡二的内容</div>
  60.     <div>选项卡三的内容</div>
  61. </div>
  62. </body>
  63. </html>
选项卡示例

 

 

jquery特殊效果

  1. fadeIn() 淡入
  3.     $btn.click(function(){
  4.         $('#div1').fadeIn(1000,'swing',function(){
  5.             alert('done!');
  6.         });
  7.     });
  9. fadeOut() 淡出
  10. fadeToggle() 切换淡入淡出
  11. hide() 隐藏元素
  12. show() 显示元素
  13. toggle() 依次展示或隐藏某个元素
  14. slideDown() 向下展开
  15. slideUp() 向上卷起
  16. slideToggle() 依次展开或卷起某个元素

 

jquery特殊效果示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .box {
  8.             width: 300px;
  9.             height: 300px;
  10.             background-color: gold;
  11.             display: none;
  12.         }
  13.     </style>
  14.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  15.     <script type="text/javascript">
  16.         $(function () {
  17.             $('#btn').click(function () {
  19.                 /*$('.box').fadeIn(1000,function(){
  20.                     alert('动画完了！');
  21.                 });
  22.                 */
  23.  
  24.                 /*$('.box').fadeToggle(1000,function(){
  25.                     alert('动画完了！');
  26.                 });
  27.                 */
  28.  
  29.                 // $('.box').show();
  30.  
  31.                 //$('.box').toggle();
  32.  
  33.                 //$('.box').slideDown();
  35.                 $('.box').slideToggle(1000, function () {
  36.                     alert('动画完了')
  37.                 });
  38.             })
  39.         })
  40.     </script>
  41. </head>
  42.  
  43. <body>
  44. <input type="button" name="" value="动画" id="btn">
  45. <div class="box"></div>
  46. </body>
  47. </html>
jquery特殊效果示例

 

jquery链式调用

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

  1. $('#div1') // id为div1的元素
  2. .children('ul') //该元素下面的ul子元素
  3. .slideDown('fast') //高度从零变到实际高度来显示ul元素
  4. .parent() //跳到ul的父元素，也就是id为div1的元素
  5. .siblings() //跳到div1元素平级的所有兄弟元素
  6. .children('ul') //这些兄弟元素中的ul子元素
  7. .slideUp('fast'); //高度实际高度变换到零来隐藏ul元素

 

链式调用-层级菜单示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>层级菜单</title>
  6.     <style type="text/css">
  7.         body {
  8.             font-family: 'Microsoft Yahei';
  9.         }
  11.         body, ul {
  12.             margin: 0px;
  13.             padding: 0px;
  14.         }
  16.         ul {
  17.             list-style: none;
  18.         }
  19.         
  20.         .menu {
  21.             width: 200px;
  22.             margin: 20px auto 0;
  23.         }
  25.         .menu .level1, .menu li ul a {
  26.             display: block;
  27.             width: 200px;
  28.             height: 30px;
  29.             line-height: 30px;
  30.             text-decoration: none;
  31.             background-color: #3366cc;
  32.             color: #fff;
  33.             font-size: 16px;
  34.             text-indent: 10px;
  35.         }
  37.         .menu .level1 {
  38.             border-bottom: 1px solid #afc6f6;
  39.         }
  41.         .menu li ul a {
  42.             font-size: 14px;
  43.             text-indent: 20px;
  44.             background-color: #7aa1ef;
  45.         }
  47.         .menu li ul li {
  48.             border-bottom: 1px solid #afc6f6;
  49.         }
  51.         .menu li ul {
  52.             display: none;
  53.         }
  55.         .menu li ul.current {
  56.             display: block;
  57.         }
  59.         .menu li ul li a:hover {
  60.             background-color: #f6b544;
  61.         }
  62.     </style>
  63.  
  64.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  65.     <script type="text/javascript">
  66.         $(function () {
  67.             $('.level1').click(function () {
  69.                 //当前点击的元素紧挨的同辈元素向下展开，再跳到此元素的父级(li),再跳到此父级的其他的同辈元素(li),
  70.                 // 选择其他同辈元素(li)的子元素ul，然后将它向上收起。
  71.                 // 通过stop() 可以修正反复点击导致的持续动画的问题
  72.                 $(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp();
  73.             })
  74.         })
  75.     </script>
  76. </head>
  77. <body>
  78. <ul class="menu">
  79.     <li>
  80.         <a href="#" class="level1">水果</a>
  81.         <ul class="current">
  82.             <li><a href="#">苹果</a></li>
  83.             <li><a href="#">梨子</a></li>
  84.             <li><a href="#">葡萄</a></li>
  85.             <li><a href="#">火龙果</a></li>
  86.         </ul>
  87.     </li>
  88.     <li>
  89.         <a href="#" class="level1">海鲜</a>
  90.         <ul>
  91.             <li><a href="#">蛏子</a></li>
  92.             <li><a href="#">扇贝</a></li>
  93.             <li><a href="#">龙虾</a></li>
  94.             <li><a href="#">象拔蚌</a></li>
  95.         </ul>
  96.     </li>
  97.     <li>
  98.         <a href="#" class="level1">肉类</a>
  99.         <ul>
  100.             <li><a href="#">内蒙古羊肉</a></li>
  101.             <li><a href="#">进口牛肉</a></li>
  102.             <li><a href="#">野猪肉</a></li>
  103.         </ul>
  104.     </li>
  105.     <li>
  106.         <a href="#" class="level1">蔬菜</a>
  107.         <ul>
  108.             <li><a href="#">娃娃菜</a></li>
  109.             <li><a href="#">西红柿</a></li>
  110.             <li><a href="#">西芹</a></li>
  111.             <li><a href="#">胡萝卜</a></li>
  112.         </ul>
  113.     </li>
  114.     <li>
  115.         <a href="#" class="level1">速冻</a>
  116.         <ul>
  117.             <li><a href="#">冰淇淋</a></li>
  118.             <li><a href="#">湾仔码头</a></li>
  119.             <li><a href="#">海参</a></li>
  120.             <li><a href="#">牛肉丸</a></li>
  121.         </ul>
  122.     </li>
  123. </ul>
  124. </body>
  125. </html>
链式调用-层级菜单示例

 

 

 

jquery动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

  1. $('#div1').animate({
  2.     width:300,
  3.     height:300
  4. },1000,swing,function(){
  5.     alert('done!');
  6. });

参数可以写成数字表达式：

  1. $('#div1').animate({
  2.     width:'+=100',
  3.     height:300
  4. },1000,swing,function(){
  5.     alert('done!');
  6. });

 

animate动画实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  7.     <script type="text/javascript">
  8.         $(function () {
  9.             $('#btn').click(function () {
  10.                 $('.box').animate({'width': 600}, 1000, function () {
  11.                     $('.box').animate({'height': 400}, 1000, function () {
  12.                         $('.box').animate({'opacity': 0});
  13.                     });
  14.                 });
  15.             });
  17.             $('#btn2').click(function () {
  18.                 $('.box2').stop().animate({'width': '+=100'});
  19.             })
  20.         })
  21.     </script>
  22.     <style type="text/css">
  23.         .box, .box2 {
  24.             width: 100px;
  25.             height: 100px;
  26.             background-color: gold;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31. <input type="button" name="" value="动画" id="btn">
  32. <div class="box"></div>
  33.  
  34. <br/>
  35. <br/>
  36. <input type="button" name="" value="动画" id="btn2">
  37. <div class="box2"></div>
  38. </body>
  39. </html>
animate动画实例

滑动选项卡

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .btns input {
  8.             width: 100px;
  9.             height: 40px;
  10.             background-color: #ddd;
  11.             border: 0;
  12.             outline: none;
  13.         }
  15.         .btns .current {
  16.             background-color: gold;
  17.         }
  19.         .cons {
  20.             width: 500px;
  21.             height: 300px;
  22.             overflow: hidden;
  23.             position: relative;
  24.         }
  26.         .slides {
  27.             width: 1500px;
  28.             height: 300px;
  29.             position: absolute;
  30.             left: 0;
  31.             top: 0;
  32.         }
  34.         .cons .slides div {
  35.             width: 500px;
  36.             height: 300px;
  37.             background-color: gold;
  38.             text-align: center;
  39.             line-height: 300px;
  40.             font-size: 30px;
  41.             float: left;
  42.         }
  44.         .cons .active {
  45.             display: block;
  46.         }
  47.     </style>
  48.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  49.     <script type="text/javascript">
  50.         $(function () {
  51.             var $btn = $('.btns input');
  52.             var $slides = $('.cons .slides');
  54.             $btn.click(function () {
  55.                 // this 指的是原生的this，它表示当前点击的对象，使用jquery的对象需要用$(this)
  56.  
  57.                 // 当前点击的按钮加上current样式后，除了当前，其他的按钮去掉current样式
  58.                 $(this).addClass('current').siblings().removeClass('current');
  59.                 $slides.stop().animate({'left': -500 * $(this).index()});
  60.             })
  61.         })
  62.     </script>
  63. </head>
  64. <body>
  65. <div class="btns">
  66.     <input type="button" name="" value="01" class="current">
  67.     <input type="button" name="" value="02">
  68.     <input type="button" name="" value="03">
  69. </div>
  70. <div class="cons">
  71.     <div class="slides">
  72.         <div>选项卡一的内容</div>
  73.         <div>选项卡二的内容</div>
  74.         <div>选项卡三的内容</div>
  75.     </div>
  76. </div>
  77. </body>
  78. </html>
滑动选项卡

 

 

元素的尺寸、位置和页面滚动事件

1、获取和设置元素的尺寸

  1. width()、height() 获取元素width和height 
  2. innerWidth()、innerHeight() 包括padding的width和height 
  3. outerWidth()、outerHeight() 包括padding和border的width和height 
  4. outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height

2、获取元素相对页面的绝对位置

  1. offse()

3、获取可视区高度

  1. $(window).height();

4、获取页面高度

  1. $(document).height();

5、获取页面滚动距离

  1. $(document).scrollTop(); 
  2. $(document).scrollLeft();

6、页面滚动事件

  1. $(window).scroll(function(){  
  2.     ......  
  3. })

 

获取元素尺寸示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  7.     <script type="text/javascript">
  8.         $(function () {
  9.             var $div = $('.box');
  11.             // 盒子内容的尺寸
  12.             console.log($div.width());
  13.             console.log($div.height());
  14.             
  15.             // 盒子内容加上padding的尺寸
  16.             console.log($div.innerWidth());
  17.             console.log($div.innerHeight());
  18.             
  19.             //盒子的真实尺寸，内容尺寸+padding+border
  20.             console.log($div.outerWidth());
  21.             console.log($div.outerHeight());
  23.             // 盒子的真实尺寸再加上margin
  24.             console.log($div.outerWidth(true));
  25.             console.log($div.outerHeight(true));
  26.         })
  27.     </script>
  28.     <style type="text/css">
  29.         .box {
  30.             width: 300px;
  31.             height: 200px;
  32.             padding: 20px;
  33.             border: 10px solid #000;
  34.             margin: 20px;
  35.             background-color: gold;
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40. <div class="box"></div>
  41. </body>
  42. </html>
获取元素尺寸示例

获取元素绝对位置示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  7.     <script type="text/javascript">
  8.         $(function () {
  9.             var $div = $('.box');
  10.             $div.click(function () {
  11.                 var oPos = $div.offset();
  13.                 document.title = oPos.left + "|" + oPos.top;
  14.             })
  15.             //console.log(oPos);
  16.         })
  17.     </script>
  18. </head>
  19. <style type="text/css">
  20.     .box {
  21.         width: 200px;
  22.         height: 200px;
  23.         background-color: gold;
  24.         margin: 50px auto 0;
  25.     }
  26. </style>
  27. <body>
  28. <div class="box">
  29.  
  30. </div>
  31. </body>
  32. </html>
获取元素绝对位置示例

加入购物车动画示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  8.         .chart {
  9.             width: 150px;
  10.             height: 50px;
  11.             border: 2px solid #000;
  12.             text-align: center;
  13.             line-height: 50px;
  14.             float: right;
  15.             margin-right: 100px;
  16.             margin-top: 50px;
  17.         }
  19.         .chart em {
  20.             font-style: normal;
  21.             color: red;
  22.             font-weight: bold;
  23.         }
  26.         .add {
  27.             width: 100px;
  28.             height: 50px;
  29.             background-color: green;
  30.             border: 0;
  31.             color: #fff;
  32.             float: left;
  33.             margin-top: 300px;
  34.             margin-left: 300px;
  35.         }
  37.         .point {
  38.             width: 16px;
  39.             height: 16px;
  40.             background-color: red;
  41.             position: fixed;
  42.             left: 0;
  43.             top: 0;
  44.             display: none;
  45.             z-index: 9999;
  46.             border-radius: 50%;
  47.         }
  48.  
  49.     </style>
  50.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  51.     <script type="text/javascript">
  52.         $(function () {
  53.             var $chart = $('.chart');
  54.             var $count = $('.chart em');
  55.             var $btn = $('.add');
  56.             var $point = $('.point');
  58.             var $w01 = $btn.outerWidth();
  59.             var $h01 = $btn.outerHeight();
  61.             var $w02 = $chart.outerWidth();
  62.             var $h02 = $chart.outerHeight();
  64.             $btn.click(function () {
  65.                 var oPos01 = $btn.offset();
  66.                 var oPos02 = $chart.offset();
  67.                 $point.css({'left': oPos01.left + parseInt($w01 / 2) - 8, 'top': oPos01.top + parseInt($h01 / 2) - 8});
  68.                 $point.show();
  70.                 $point.stop().animate({
  71.                     'left': oPos02.left + parseInt($w02 / 2) - 8,
  72.                     'top': oPos02.top + parseInt($h02 / 2) - 8
  73.                 }, 800, function () {
  74.                     $point.hide();
  75.                     var iNum = $count.html();
  76.                     $count.html(parseInt(iNum) + 1);
  77.                 });
  78.             })
  79.         });
  80.     </script>
  81. </head>
  82. <body>
  83. <div class="chart">购物车<em>0</em></div>
  84. <input type="button" name="" value="加入购物车" class="add">
  85. <div class="point"></div>
  86. </body>
  87. </html>
加入购物车动画

scrollleft-top-悬浮菜单的使用
可视区尺寸-文档尺寸示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  7.     <script type="text/javascript">
  8.         $(function(){
  9.             console.log('可视区的宽度：'+$(window).width() );
  10.             console.log('可视区的高度：'+$(window).height() );
  11.             console.log('文档的宽度'+$(document).width() );
  12.             console.log('文档的高度：'+$(document).height() );
  13.         })
  14.     </script>
  15. </head>
  16. <body>
  17.     <p>文档内容</p>
  18.     <br />
  19.     <br />
  20.     <br />
  21.     <br />
  22.     <br />
  23.     <br />
  24.     <br />
  25.     <br />
  26.     <br />
  27.     <br />
  28.     <p>文档内容</p>
  29.     ...
  30.     <p>文档内容</p>
  31. </body>
  32. </html>
可视区尺寸-文档尺寸示例

置顶菜单示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         body {
  8.             margin: 0;
  9.         }
  10.         .banner {
  11.             width: 960px;
  12.             height: 200px;
  13.             background-color: cyan;
  14.             margin: 0 auto;
  15.         }
  16.         .menu {
  17.             width: 960px;
  18.             height: 80px;
  19.             background-color: gold;
  20.             margin: 0 auto;
  21.             text-align: center;
  22.             line-height: 80px;
  23.         }
  25.         .menu_back {
  26.             width: 960px;
  27.             height: 80px;
  28.             margin: 0 auto;
  29.             display: none;
  30.         }
  32.         p {
  33.             text-align: center;
  34.             color: red;
  35.         }
  37.         .totop {
  38.             width: 60px;
  39.             height: 60px;
  40.             background-color: #000;
  41.             color: #fff;
  42.             position: fixed;
  43.             right: 20px;
  44.             bottom: 50px;
  45.             line-height: 60px;
  46.             text-align: center;
  47.             font-size: 40px;
  48.             border-radius: 50%;
  49.             cursor: pointer;
  50.             display: none;
  51.         }
  52.     </style>
  53.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  54.     <script type="text/javascript">
  55.         $(function () {
  56.             $menu = $('.menu');
  57.             $menu_back = $('.menu_back');
  58.             $totop = $('.totop');
  60.             $(window).scroll(function () {
  61.                 //console.log('abc');
  62.                 var iNum = $(document).scrollTop();
  63.                 //document.title = iNum;
  64.  
  65.                 if (iNum > 200) {
  66.                     $menu.css({
  67.                         'position': 'fixed',
  68.                         'left': '50%',
  69.                         'top': 0,
  70.                         'marginLeft': -480
  71.                     });
  72.                     $menu_back.show();
  73.                 } else {
  74.                     $menu.css({
  75.                         'position': 'static',
  76.                         'marginLeft': 'auto'
  77.                     });
  78.                     $menu_back.hide();
  79.                 }
  80.                 
  81.                 if (iNum > 400) {
  82.                     $totop.fadeIn();
  83.                 } else {
  84.                     $totop.fadeOut();
  85.                 }
  86.             });
  87.             $totop.click(function () {
  88.                 $('html,body').animate({'scrollTop': 0});
  89.             })
  90.         })
  91.     </script>
  92. </head>
  93. <body>
  94. <div class="banner"></div>
  95. <div class="menu">菜单</div>
  96. <div class="menu_back"></div>
  97. <div class="totop">↑</div>
  98. <p>文档内容</p>
  99. <br/>
  100. <br/>
  101. <br/>
  102. <br/>
  103. <br/>
  104. <br/>
  105. <br/>
  106. <br/>
  107. <br/>
  108. <br/>
  109. <p>文档内容</p>
  110. ...
  111. <p>文档内容</p>
  112. </body>
  113. </html>
置顶菜单示例

原文链接：http://www.cnblogs.com/yifchan/p/html-1-9.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号