[关闭]
@fantaghiro 2014-11-04T10:21:35.000000Z 字数 92854 阅读 2636

妙味课堂 - jQuery集训营

学习笔记 妙味课堂 jQuery 在进行

2014年10月10日第一堂课

选择元素

$() ★★★★★

css() ★★★★★

JQ的$()选择符和CSS()

  1. //document.getElementById('div1').style.background = 'red';
  2. //document.getElementsByTagName('div')[0].style.background = 'red';
  3. //document.getElementsByClassName('box')[0].style.background = 'red';
  4. //JQ选择元素的风格跟CSS风格特别类似
  5. //$('#div1').css('background', 'red');
  6. //$('div').css('background', 'red);
  7. //$('.box').css('background', 'red);

省略原生的循环操作

JQ省略循环

  1. <ul>
  2.     <li>1111</li>
  3.     <li>1111</li>
  4.     <li>1111</li>
  5.     <li>1111</li>
  6. </ul>
  1. var aLi = document.getElementsByTagName('li');
  2. /*
  3. for(){
  4.     aLi[i].style...
  5. }
  6. */
  7. //$('li').css('background', 'red'); //JQ省略原生当中的循环的操作
  8. jQuery('li').css('background', 'red'); //$ == jQuery 一个大名一个小名

$ == jQuery

JQ方法函数化

JQ方法函数化

  1. <div id="div1" class="box">aaaa</div>
  1. /*
  2. var oDiv = document.getElementById('div1');
  3. oDiv.onclick = function(){
  4.     alert(oDiv.innerHTML);
  5. };
  6. */
  7. var oDiv = $('#div1');
  8. oDiv.click(function(){
  9.     alert(oDiv.html());
  10. });
  11. ---------
  12. //JQ源码中存在对应函数，面向对象的函数，jQuery对象下面的方法
  13. function $(selector){
  14. }
  15. function click(fn){
  16. }
  17. function html(){
  18. }

事件 click()

内容 html()

JS与JQ的关系

  1. var oDiv = $('#div1');
  2. oDiv.click(function(){
  3.     //alert(oDiv.html()); //纯JQ写法 没有问题
  4.     //alert(document.getElementById('div1').innerHTML); //纯JS写法 没有问题
  5.     //alert(oDiv.innerHTML); //错误写法，无法执行，因为JS和JQ混写了
  6.     //alert(document.getElementById('div1').html()); //错误写法，无法执行，因为混写了
  7.     //this ？ 原生还是JQ的？ //函数中返回的this都是原生的
  8.     alert(this.innerHTML); //可以这样写
  9.     alert($(this).html()); //也可以这样写 要获得jq对象的this，要用$()括起来
  10. })

例子：选择颜色填充方块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>选择颜色填充方块</title>
  6.     <style>
  7.         div { width: 100px; height: 100px; border: 1px solid #000; float: left; margin: 10px; }
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10. </head>
  11. <body>
  12.     <span>red</span>
  13.     <span>yellow</span>
  14.     <span>green</span>
  15.     <span>blue</span>
  16.     <br>
  17.     <div></div>
  18.     <div></div>
  19.     <div></div>
  20.     <div></div>
  21.     <script>
  22.         var color = '';
  23.         $('span').click(function(){
  24.             color = $(this).html()
  25.         });
  26.         $('div').click(function(){
  27.             $(this).css('background', color);
  28.         });
  29.     </script>
  30. </body>
  31. </html>

取值与赋值的关系

取值与赋值的关系

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>取值与赋值的关系</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7. </head>
  8. <body>
  9.     <div id="div1" class="box">aaaaa</div>
  10.     <script>
  11.         // oDiv.innerHTML; //获取
  12.         // oDiv.innerHTML = 'bbbbb'; //赋值
  13.         //$('#div1').html(); //获取
  14.         //$('#div1').html('bbbbbb'); //赋值
  15.         $('#div1').css('color', 'red'); //赋值
  16.         alert($('#div1').css('color')); //获取div的color属性的属性值
  17.     </script>
  18. </body>
  19. </html>

属性 attr()

值 val()

attr()和val()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>取值与赋值的关系</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7. </head>
  8. <body>
  9.     <div id="div1" class="box" miaov="miaov">aaaaa</div>
  10.     <input type="text" value="123">
  11.     <input type="text" value="456">
  12.     <script>
  13.         //操作属性attr()
  14.         $('#div1').attr('class', 'box2'); //用attr改class属性
  15.         $('#div1').attr('title', 'hello'); //添加原本没有的属性
  16.         alert($('#div1').attr('class')); //获取属性值
  17.         alert($('#div1').attr('miaov')); //也可以获取自定义的属性
  18.         //val()
  19.         //alert($('input').val()); //获取
  20.         //$('input').val('7777'); //针对多个input的value值进行设置
  21.         alert($('input').val()); // 针对集合进行获取操作，只获取第一个
  22.     </script>
  23. </body>
  24. </html>

多元素取值

强大的$()

加载

属性选择

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>加载和通配符选择</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             //$('input[value]').css('background', 'red'); //input有value属性的才背景变红
  10.             //$('input[value=123]').css('background', 'red'); //value必须等于123的input才背景变红
  11.             //$('input[value^=123]').css('background', 'red'); //value以123为起始的input元素
  12.             //$('input[value$=444]').css('background', 'red'); //value以123为结束的input元素
  13.             //$('input[value*=3]').css('background', 'red'); //value中有3的input元素
  14.             $('div[class="box box2"]).css('color', 'red'); //这种情况下，box box2必须要用引号引起来
  15.         });
  16.     </script>
  17. </head>
  18. <body>
  19.     <div id="div1" class="box box2" miaov="妙味">aaaaaa</div>
  20.     <input type="text" value="123_444">
  21.     <input type="text" value="123_555">
  22.     <input type="text" value="777_888">
  23. </body>
  24. </html>

用$(function(){});来加载

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>加载</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         /*
  9.         window.onload = function(){
  10.         };
  11.         */
  12.         $(function(){
  13.         });
  14.     </script>
  15. </head>
  16. <body>
  17.     ...
  18. </body>
  19. </html>

JQ的链式操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>链式操作</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             /*
  10.             var oDiv = $('#div1');
  11.             oDiv.html('bbbbb');
  12.             oDiv.css('color', 'red');
  13.             oDiv.click(function(){
  14.                 alert(123);
  15.             });
  16.             */
  17.             $('#div1').html('bbbbb').css('color', 'red').click(function(){alert(123)});
  18.         })
  19.     </script>
  20. </head>
  21. <body>
  22.     <div id="div1">aaaaaaa</div>
  23. </body>
  24. </html>

JQ实战小技巧

命名规范

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>链式操作</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             var $div = $('#div1');
  10.             var oSpan = document.getElementById('span1');
  11.             $div.html('bbbbb');
  12.             $div.css('color', 'red');
  13.             $div.click(function(){
  14.                 alert(123);
  15.             });
  16.         })
  17.     </script>
  18. </head>
  19. <body>
  20.     <div id="div1">aaaaaaa</div>
  21. </body>
  22. </html>

容错处理

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>容错处理</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             //var oSpan = document.getElementById('span1');
  10.             //oSpan.innerHTML = 'bbbbb'; //这个oSpan在页面中不存在，原生的js会报错
  11.             var $span = $('#span1'); //这个span并不存在
  12.             $span.html('bbbbb'); //但是如果用JQ写就不会报错
  13.         })
  14.     </script>
  15. </head>
  16. <body>
  17.     <div id="div1">aaaaaaa</div>
  18. </body>
  19. </html>

集合的长度

size() ★

length ★★★★★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>集合的长度</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             //alert($('div').size()); //3 用size()获取集合的长度
  10.             //alert($('div').length); //3 注意没有括号，获得集合的长度
  11.             alert($('#div1').length); //1 用$()获取到的都是元素的集合
  12.         })
  13.     </script>
  14. </head>
  15. <body>
  16.     <div id="div1" class="box box2" miaov="妙味">aaaaaaa</div>
  17.     <div></div>
  18.     <div></div>
  19. </body>
  20. </html>

JQ实战小技巧

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>通过length来纠错，发现页面中没有的元素</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             var $span = $('#span1'); //这个span并不存在
  10.             console.log($span.length); //0 说明页面中没有$span这个元素
  11.             $span.html('bbbbb'); 
  12.         })
  13.     </script>
  14. </head>
  15. <body>
  16.     <div id="div1">aaaaaaa</div>
  17. </body>
  18. </html>

删除指定颜色方块的背景颜色

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>删除指定颜色的方块</title>
  6.     <style>
  7.         div { width: 100px; height: 100px; border: 1px solid #000; float: left; margin: 10px; }
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10. </head>
  11. <body>
  12.     <span>red</span>
  13.     <span>yellow</span>
  14.     <span>green</span>
  15.     <span>blue</span>
  16.     <br>
  17.     <input type="button" value="清空红色">
  18.     <br>
  19.     <div></div>
  20.     <div></div>
  21.     <div></div>
  22.     <div></div>
  23.     <script>
  24.         var color = '';
  25.         $('span').click(function(){
  26.             color = $(this).html();
  27.         });
  28.         $('div').click(function(){
  29.             $(this).css('background', color);
  30.         });
  31.         $('input').click(function(){
  32.             $('div[style*=red]').css('background', '');
  33.         });
  34.     </script>
  35. </body>
  36. </html>

class的操作

addClass() ★★★

removeClass() ★★★

toggleClass() ★★★

class操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>class的操作</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             $('#div1').addClass('box2 box4'); //添加多个class，可以用空格隔开；重复的class不会添加进去（JQ自动去重了）
  10.             $('#div1').removeClass('box2 box4'); //找到的class会被删掉，没有找到的class被JQ自动忽略了
  11.             $('#div1').toggleClass('box3'); //如果没有该class，就自动加上；如果有了，就自动删去
  12.         })
  13.     </script>
  14. </head>
  15. <body>
  16.     <div id="div1" class="box box2" miaov="妙味">aaaaaa</div>
  17. </body>
  18. </html>

显示隐藏

show() / hide() ★★★★★

show()、hide()方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>class的操作</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             var bBtn = true;
  10.             $('input').click(function(){
  11.                 if(bBtn){
  12.                     $('div').hide();
  13.                 } else {
  14.                     $('div').show();
  15.                 }
  16.                 bBtn = !bBtn;
  17.             });
  18.         })
  19.     </script>
  20. </head>
  21. <body>
  22.     <input type="button" value="点击">
  23.     <div>div</div>
  24. </body>
  25. </html>

show()、hide()方法与css()的区别

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>class的操作</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             var bBtn = true;
  10.             $('input').click(function(){
  11.                 if(bBtn){
  12.                     //$('div').hide();
  13.                     $('span').css('display', 'none');
  14.                 } else {
  15.                     //$('div').show();
  16.                     $('span').css('display', 'block'); //这里会出现问题，面对行内元素，应将block改为inline。但是如果用show()和hide()，则不需要进行这方面的相应更改
  17.                 }
  18.                 bBtn = !bBtn;
  19.             });
  20.         })
  21.     </script>
  22. </head>
  23. <body>
  24.     <input type="button" value="点击">
  25.     <br>
  26.     <span>span</span>
  27.     <span>span</span>
  28.     <span>span</span>
  29. </body>
  30. </html>

点击弹出菜单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>点击弹出菜单</title>
  6.     <style>
  7.         ul { display: none; }
  8.         .box { display: block; }
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         $(function(){
  13.             $('input').click(function(){
  14.                 $('ul').toggleClass('box');
  15.             });
  16.         })
  17.     </script>
  18. </head>
  19. <body>
  20.     <input type="button" value="点击">
  21.     <ul>
  22.         <li>1111</li>
  23.         <li>2222</li>
  24.         <li>3333</li>
  25.         <li>4444</li>
  26.     </ul>
  27. </body>
  28. </html>

节点的选择

prev() next() ★★★★★

prevAll() nextAll() ★★★

siblings() ★★★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>节点的选择</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             //$('span').next().css('background', 'red'); //p, h1
  10.             //$('span').prev().css('background', 'red'); //div, p
  11.             //$('p').nextAll().css('background', 'red'); //p标签下面的所有标签
  12.             //$('p').prevAll().css('background', 'red'); //p标签之前的所有标签
  13.             //$('p').siblings().css('background', 'red'); //找p标签所有的兄弟节点
  14.             //参数筛选功能
  15.             //$('p').siblings('h2').css('background', 'red'); //找p标签所有的兄弟节点中的h2节点
  16.             //$('span').next('h1').css('background', 'red'); 
  17.             //$('span').next('h2').css('background', 'red'); //两个span的下一个都没有h2的，所以就没有
  18.         });
  19.     </script>
  20. </head>
  21. <body>
  22.     <div>div</div>
  23.     <span>span</span>
  24.     <p>p</p>
  25.     <span>span</span>
  26.     <h1>h1</h1>
  27.     <h2>h2</h2>
  28.     <h2>h2</h2>
  29.     <h3>h3</h3>
  30.     <em>em</em>
  31. </body>
  32. </html>

JQ实战小技巧

点击弹出菜单（2）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>点击弹出菜单</title>
  6.     <style>
  7.         ul { display: none; }
  8.         .box { display: block; }
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         $(function(){
  13.             $('input[type=button]').click(function(){
  14.                 //$(this).next().toggleClass('box');
  15.                 $(this).nextAll('ul').toggleClass('box');
  16.             });
  17.         })
  18.     </script>
  19. </head>
  20. <body>
  21.     <input type="button" value="点击">
  22.     <input type="hidden">
  23.     <ul>
  24.         <li>1111</li>
  25.         <li>2222</li>
  26.         <li>3333</li>
  27.         <li>4444</li>
  28.     </ul>
  29. </body>
  30. </html>

下标

eq() ★★★★★

eq()的操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>下标eq()的操作</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             $('li').eq(1).css('background', 'red'); 
  10.         })
  11.     </script>
  12. </head>
  13. <body>
  14.     <ul>
  15.         <li>1111</li>
  16.         <li>2222</li>
  17.         <li>3333</li>
  18.         <li>4444</li>
  19.     </ul>
  20. </body>
  21. </html>

2014年10月12日第二堂课

节点的选择

first() ★★★

last() ★★★

slice() ★

children() ★★★

find() ★★★★★

节点的选择

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>节点的选择</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         // eq(0) == first();
  9.         $(function(){
  10.             // $('li').first().css('background', 'red'); //选择第一个
  11.             // $('li').last().css('background', 'red'); //选择最后一个
  12.             // $('li').slice(1, 3).css('background', 'red'); //得到的其实是从eq(1)开始到eq(2)结束
  13.             // $('li').slice(1).css('background', 'red'); //如果在slice里面只写起始位置不写结束位置，那么就是从起始位置开始，一直到最后一个元素
  14.             //$('ul').children().css('background', 'red'); //找到ul的所有子节点，但是孙子节点是找不到的
  15.             // $('ul').children('div').css('background', 'red'); //children()可以过滤筛选
  16.             // $('ul').find('p').css('background', 'red'); //可以用find找ul之下的所有节点中匹配的节点，find查找的范围比children更加广泛
  17.         })
  18.     </script>
  19. </head>
  20. <body>
  21.     <ul>
  22.         <li>
  23.             1111
  24.             <p>pppp</p>
  25.         </li>
  26.         <li>1111</li>
  27.         <li>1111</li>
  28.         <li>1111</li>
  29.         <div>div</div>
  30.     </ul>
  31. </body>
  32. </html>

JQ实战小技巧

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>节点的选择</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             // $('ul p').css('background', 'red');
  10.             $('ul').find('p').css('background', 'red'); //用下面这种find的方式性能会更高一些
  11.         })
  12.     </script>
  13. </head>
  14. <body>
  15.     <ul>
  16.         <li>
  17.             1111
  18.             <p>pppp</p>
  19.         </li>
  20.         <li>1111</li>
  21.         <li>1111</li>
  22.         <li>1111</li>
  23.         <div>div</div>
  24.     </ul>
  25. </body>
  26. </html>

节点的选择

parent() ★★★

parents() ★

closest() ★★★★★

parent()和parents()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>节点的选择</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             // $('#div2').parent().css('border', '1px solid red'); //parent()找父级
  10.             //parents() 获取当前元素的所有祖先节点
  11.             // $('#div2').parents().css('border', '1px solid red'); //div1, body, html都加上了边框
  12.             // $('#div2').parents('body').css('border', '1px solid red'); //parents()也有筛选的功能
  13.         })
  14.     </script>
  15. </head>
  16. <body>
  17.     <div id="div1">aaa
  18.         <div id="div2">bbb</div>
  19.     </div>
  20. </body>
  21. </html>

closest()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>节点的选择</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.     //closest()：找指定的一个最近的祖先元素（包括自身）（该函数必须加参数）；它只能选择到一个唯一的元素
  9.         $(function(){
  10.             // $('#div2').closest().css('border', '1px solid red'); //这样写不对，因为closest函数没有参数
  11.             $('#div2').closest('.box').css('border', '1px solid red'); //只加在了div1上
  12.             //如果给div2添加上class为box，那么上面的语句找到的就是div2了
  13.         })
  14.     </script>
  15. </head>
  16. <body class="box">
  17.     <div id="div1" class="box">aaa
  18.         <div id="div2">bbb</div>
  19.     </div>
  20. </body>
  21. </html>

点击查找指定节点

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>节点的选择</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             //点击span，让其对应的li变红
  10.             $('span').click(function(){
  11.                 $(this).closest('li').css('background', 'red');
  12.             });
  13.         })
  14.     </script>
  15. </head>
  16. <body>
  17.     <ul>
  18.         <li><div>aaa <span>span</span><div></li>
  19.         <li><div>aaa <span>span</span><div></li>
  20.         <li><div>aaa <span>span</span><div></li>
  21.         <li><div>aaa <span>span</span><div></li>
  22.     </ul>
  23. </body>
  24. </html>

节点的操作

创建节点

添加节点

创建节点

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>节点的操作</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             // document.createElement('div');
  10.             // $('<div>'); //这样就创建了一个div标签
  11.             /*
  12.             var oDiv = document.createElemenet('div');
  13.             oDiv.innerHTML = 'hello';
  14.             oDiv.id = 'div1';
  15.             */
  16.             // $('<div id="div1">hello</div>'); //直接创建了一个具备多种设置的div标签
  17.         })
  18.     </script>
  19. </head>
  20. <body>  
  21. </body>
  22. </html>

append()、prepend()、before()、after()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>节点的操作</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             //append()：把元素添加到指定的节点的里面的最后
  10.             var $li = $('<li>hello</li>');
  11.             // $('ul').append($li);
  12.             //prepend()：把元素添加到指定的节点的里面的最前面  
  13.             // $('ul').prepend($li);
  14.             //before()：把元素添加到指定的节点的前面
  15.             // $('ul').before($li);
  16.             //after()：把元素添加到指定的节点的后面
  17.             $('ul').after($li);
  18.         })
  19.     </script>
  20. </head>
  21. <body>
  22.     <ul>
  23.         <li><div>aaa <span>span</span></div></li>
  24.         <li><div>aaa <span>span</span></div></li>
  25.         <li><div>aaa <span>span</span></div></li>
  26.     </ul>   
  27. </body>
  28. </html>

appendTo()、prependTo()、insertBefore()、insertAfter()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>节点的操作</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             var $li = $('<li>hello</li>')
  10.             //$('ul').append($li);
  11.             //$li.appendTo($('ul'));
  12.             $li.prependTo($('ul'));
  13.         })
  14.     </script>
  15. </head>
  16. <body>
  17.     <ul>
  18.         <li><div>aaa <span>span</span></div></li>
  19.         <li><div>aaa <span>span</span></div></li>
  20.         <li><div>aaa <span>span</span></div></li>
  21.     </ul>   
  22. </body>
  23. </html>

两种写法的区别，会影响到链式操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>节点的操作</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             var $li = $('<li>hello</li>')
  10.             //$('ul').append($li).css('background', 'red'); //整个ul背景变红
  11.             $li.appendTo($('ul')).css('background', 'red'); //仅指定li背景变红
  12.         })
  13.     </script>
  14. </head>
  15. <body>
  16.     <ul>
  17.         <li><div>aaa <span>span</span></div></li>
  18.         <li><div>aaa <span>span</span></div></li>
  19.         <li><div>aaa <span>span</span></div></li>
  20.     </ul>   
  21. </body>
  22. </html>

节点的操作

remove() ★★★★★

remove()操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>删除元素</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             //原生的删除元素的方式
  10.             //document.body.removeChild(oDiv);
  11.             //jQuery的方法
  12.             $('div').remove();
  13.         })
  14.     </script>
  15. </head>
  16. <body>
  17.     <div>div</div>
  18. </body>
  19. </html>

clone() ★★★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>删除元素</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             //$('div').appendTo($('span')); //默认是剪切操作
  10.             $('div').click(function(){
  11.                 alert(123);
  12.             });
  13.             var $div = $('div').clone();
  14.             $div.appendTo($('span')); //克隆过来的div默认没有原来div的click事件。
  15.             //clone()默认是克隆元素结构，而不克隆行为事件。
  16.             //clone(true)，参数true就是可以复制之前的操作行为
  17.         })
  18.     </script>
  19. </head>
  20. <body>
  21.     <div>div</div>
  22.     <span>span</span>
  23. </body>
  24. </html>

例子：节点的上移下移

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>删除元素</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             $('input[value="上移"]').click(function(){
  10.                 var $nowLi = $(this).closest('li');
  11.                 var $prevLi = $nowLi.prev();
  12.                 if($prevLi.length == 0){
  13.                     alert('到头了');
  14.                 } else {
  15.                     $nowLi.insertBefore($prevLi);
  16.                 }
  17.             });
  18.             $('input[value="下移"]').click(function(){
  19.                 var $nowLi = $(this).closest('li');
  20.                 var $nextLi = $nowLi.next();
  21.                 if($nextLi.length == 0){
  22.                     alert('到尾了');
  23.                 } else {
  24.                     $nowLi.insertAfter($nextLi);
  25.                 }
  26.             });
  27.         })
  28.     </script>
  29. </head>
  30. <body>
  31.     <ul>
  32.         <li>1.<input type="button" value="上移"><input type="button" value="下移"></li>
  33.         <li>2.<input type="button" value="上移"><input type="button" value="下移"></li>
  34.         <li>3.<input type="button" value="上移"><input type="button" value="下移"></li>
  35.         <li>4.<input type="button" value="上移"><input type="button" value="下移"></li>
  36.         <li>5.<input type="button" value="上移"><input type="button" value="下移"></li> 
  37.     </ul>
  38. </body>
  39. </html>

JQ中的索引

index() ★★★★★

兄弟中的排行

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>删除元素</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             alert($('#div1').index());
  10.             //index()：索引值，代表的就是当前元素在所有兄弟节点中排第几。如果不添加参数，索引值与标签类型是无关的。
  11.         })
  12.     </script>
  13. </head>
  14. <body>
  15.     <div></div>
  16.     <p>p</p>
  17.     <div id="div1">div</div>
  18.     <div>div</div>
  19. </body>
  20. </html>

注意事项

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>索引</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             alert($('#span1').index()); //弹出0
  10.         })
  11.     </script>
  12. </head>
  13. <body>
  14.     <div><span>span</span></div>
  15.     <div><span id="span1">span</span></div>
  16.     <div><span>span</span></div>
  17. </body>
  18. </html>

筛选后的排行

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>索引</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             alert($('#span1').index('span')); //2 
  10.             //添加了参数span，现在的index就与div没有关系了，而是看#span1在所有span中的排行
  11.             //第二种写法也可以
  12.             alert($('span').index($('#span1')));
  13.             //代表在所有span获取之后进行排行，看#span1排行老几
  14.         })
  15.     </script>
  16. </head>
  17. <body>
  18.     <div><span>span</span></div>
  19.     <span>span</span>
  20.     <div><span id="span1">span</span></div>
  21.     <div><span>span</span></div>
  22. </body>
  23. </html>

选项卡

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>删除元素</title>
  6.     <style>
  7.         #div1 div {width: 200px; height: 200px; border: 1px #000 solid; display: none;}
  8.         .active {background: red;}
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         $(function(){
  13.             $('#div1').find('input').click(function(){
  14.                 /*
  15.                 $('#div1').find('input').attr('class', '');
  16.                 $(this).attr('class', 'active');
  17.                 $('#div1').find('div').css('display', 'none');
  18.                 $('#div1').find('div').eq($(this).index('input')).css('display', 'block');
  19.                 */
  20.                 $(this).attr('class', 'active').siblings('input').attr('class', '');
  21.                 $('#div1').find('div').eq($(this).index('input')).css('display', 'block').siblings('div').css('display', 'none');
  22.             })
  23.         })
  24.     </script>
  25. </head>
  26. <body>
  27.     <div id="div1">
  28.         <input type="button" value="1" class="active">
  29.         <input type="button" value="2">
  30.         <input type="button" value="3">
  31.         <div style="display: block;">111</div>
  32.         <div>222</div>
  33.         <div>333</div>
  34.     </div>
  35. </body>
  36. </html>

JQ中的遍历

each() ★★★★★

回调函数的两个参数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>删除元素</title>
  6.     <style>
  7.         #div1 div {width: 200px; height: 200px; border: 1px #000 solid; display: none;}
  8.         .active {background: red;}
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         $(function(){
  13.             //each() => for
  14.             //$('li').html('hello'); //相同操作的，不用each就可以
  15.             /*
  16.             $('li').each(function(i, elem){
  17.                 alert(i);
  18.             });
  19.             //each中的第一个形参i就是for循环中的i
  20.             */
  21.             /*
  22.             $('li').each(function(i, elem){
  23.                 //elem.style.background = 'red'; 
  24.                 $(elem).css('background', 'red');
  25.             });
  26.             //each中的第二个参数elem就是每个元素
  27.             //elem返回的是原生的元素，要转成jQuery对象要用$()括起来
  28.             */
  29.         })
  30.     </script>
  31. </head>
  32. <body>
  33.     <ul>
  34.         <li></li>
  35.         <li></li>
  36.         <li></li>
  37.         <li></li>
  38.     </ul>
  39. </body>
  40. </html>

each的回调函数中this的指向

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>删除元素</title>
  6.     <style>
  7.         #div1 div {width: 200px; height: 200px; border: 1px #000 solid; display: none;}
  8.         .active {background: red;}
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         $(function(){
  13.             $('li').each(function(i, elem){
  14.                 //this == elem jQuery中的each循环中的this与elem是一回事；而且这个this也是原生的
  15.                 $(this).html(i);
  16.             });
  17.         })
  18.     </script>
  19. </head>
  20. <body>
  21.     <ul>
  22.         <li></li>
  23.         <li></li>
  24.         <li></li>
  25.         <li></li>
  26.     </ul>
  27. </body>
  28. </html>

each()循环中用return false跳出循环

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>删除元素</title>
  6.     <style>
  7.         #div1 div {width: 200px; height: 200px; border: 1px #000 solid; display: none;}
  8.         .active {background: red;}
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         $(function(){
  13.             $('li').each(function(i, elem){
  14.                 //原生跳出循环用break
  15.                 //jQuery中跳出循环用return false;
  16.                 $(this).html(i);
  17.                 if(i == 2){
  18.                     return false;
  19.                 }
  20.             });
  21.         })
  22.     </script>
  23. </head>
  24. <body>
  25.     <ul>
  26.         <li></li>
  27.         <li></li>
  28.         <li></li>
  29.         <li></li>
  30.     </ul>
  31. </body>
  32. </html>

JQ包装对象

wrap() ★★★

wrapAll() ★

wrapInner() ★

unwrap() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>删除元素</title>
  6.     <style>
  7.         #div1 div {width: 200px; height: 200px; border: 1px #000 solid; display: none;}
  8.         .active {background: red;}
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         //wrap(): 包装
  13.         //wrapAll(): 整体包装
  14.         //wrapInner(): 内部包装
  15.         //unwrap(): 删除包装，相当于删除父节点   
  16.         $(function(){
  17.            //$('span').wrap('<div>'); //注意这里要加尖括号
  18.            // $('span').wrapAll('<div>'); //如果span之间夹着其他标签，用wrapAll()方法，就会把这些杂的标签挑到外面来，把剩下的span标签都给包起来
  19.             // $('span').wrapInner('<div>'); //在span标签里面去包
  20.             //$('span').unwrap(); 删除父级指的是父级标签，但body是不能删掉的
  21.         })
  22.     </script>
  23. </head>
  24. <body>
  25.     <span>span</span>
  26.     <p>p</p>
  27.     <span>span</span>
  28.     <span>span</span>
  29.     <div><span>span</span></div>
  30. </body>
  31. </html>

例子：管理员与普通用户状态控制

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>删除元素</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             $('input').click(function(){
  10.                 if($(this).val()=='管理员'){
  11.                     $('#span1').wrap('<a href="#"></a>')
  12.                 } else if($(this).val()=='普通用户') {
  13.                     $('#span1').unwrap();
  14.                 }
  15.             })         
  16.         })
  17.     </script>
  18. </head>
  19. <body>
  20.     <input type="radio" value="管理员" name="user" checked>管理员
  21.     <input type="radio" value="普通用户" name="user">普通用户
  22.     <br>
  23.     <a href="#"><span id="span1">编辑此处</span></a>
  24. </body>
  25. </html>

JQ转原生JS

get() ★★★★★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>删除元素</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         //get(): 把JQ转成原生JS，默认情况获取的是一个原生的集合，那么可以通过参数来找到集合中的指定项
  9.         $(function(){
  10.             alert($('div').eq(0).html()); //eq()后面接的是jQuery的写法
  11.             alert($('div').get(0).innerHTML); // get()后面跟的是原生的写法。注意要给get()里面加参数           
  12.         })
  13.     </script>
  14. </head>
  15. <body>
  16.     <div>aaaaa</div>
  17. </body>
  18. </html>

获取内容的高度

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>获取内容的高度</title>
  6.     <style>
  7.         * {margin: 0; padding: 0;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             //获取内容的高度
  13.             //alert($('#t1').height()); //100 获取到的是textarea的高度
  14.             alert($('#t1').get(0).scrollHeight); //获取内部内容高度：jQuery没有提供方法，因此只能转成原生后用scrollHeight来获取
  15.         })         
  16.     </script>
  17. </head>
  18. <body>
  19.     <textarea id="t1" style="height: 100px;">
  20.         adlfj
  21.         adf
  22.         adf
  23.         ga
  24.         eg
  25.         d
  26.         gbsh
  27.         fdg
  28.         fgzfbh
  29.         g
  30.         hdgh\x\gn\fgh\
  31.         df
  32.         fb
  33.         xcb
  34.         sfh
  35.     </textarea>
  36. </body>
  37. </html>

元素之间的比较

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>删除元素</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             $('input[value="上移"]').click(function(){
  10.                 var $nowLi = $(this).closest('li');
  11.                 var $prevLi = $nowLi.prev();
  12.                 //if($nowLi == $nowLi.parent().children().eq(0)){ //元素之间的比较不能用两个JQ对象进行
  13.                 //console.log([] == []); //false
  14.                 //console.log({} == {}); //false
  15.                 if($nowLi.get(0) == $nowLi.parent().children().eq(0).get(0)){
  16.                 //if($prevLi.length == 0){
  17.                     alert('到头了');
  18.                 } else {
  19.                     $nowLi.insertBefore($prevLi);
  20.                 }
  21.             });
  22.             $('input[value="下移"]').click(function(){
  23.                 var $nowLi = $(this).closest('li');
  24.                 var $nextLi = $nowLi.next();
  25.                 if($nextLi.length == 0){
  26.                     alert('到尾了');
  27.                 } else {
  28.                     $nowLi.insertAfter($nextLi);
  29.                 }
  30.             });
  31.         })
  32.     </script>
  33. </head>
  34. <body>
  35.     <ul>
  36.         <li>1.<input type="button" value="上移"><input type="button" value="下移"></li>
  37.         <li>2.<input type="button" value="上移"><input type="button" value="下移"></li>
  38.         <li>3.<input type="button" value="上移"><input type="button" value="下移"></li>
  39.         <li>4.<input type="button" value="上移"><input type="button" value="下移"></li>
  40.         <li>5.<input type="button" value="上移"><input type="button" value="下移"></li> 
  41.     </ul>
  42. </body>
  43. </html>

本课练习

2014年10月16日第三堂课

元素的尺寸

width() height() ★★★★★

innerWidth() innerHeight() ★★★★★

outerWidth() outerHeight() ★★★★★

元素尺寸的获取

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>元素的尺寸的获取</title>
  6.     <style>
  7.         #div1 {width: 100px; height: 100px; background: red; padding: 10px; border: 1px solid #000;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             alert($('#div1').width()); //100 不带单位
  13.             //width() => width
  14.             alert($('#div1').innerWidth()); //120
  15.             //innerWidth() => width + padding 
  16.             alert($('#div1').outerWidth()); //122
  17.             //outerWidth() => width + padding + border
  18.             alert($('#div1').outerWidth(true)); //132
  19.             //outerWidth(true) => width + padding + border + margin
  20.         })
  21.     </script>
  22. </head>
  23. <body>
  24.     <div id="div1">div</div>
  25. </body>
  26. </html>
  27. ``
  29. **元素尺寸的设置**
  31. ``` html
  32. <!DOCTYPE html>
  33. <html lang="en">
  34. <head>
  35.     <meta charset="UTF-8">
  36.     <title>元素的尺寸的设置</title>
  37.     <style>
  38.         #div1 {width: 100px; height: 100px; background: red; padding: 10px; border: 1px solid #000; margin: 5px;}
  39.     </style>
  40.     <script src="jquery-1.11.1.js"></script>
  41.     <script>
  42.         $(function(){
  43.             //$('#div1').width(200); //设置了style中的width
  44.             //$('#div1').innerWidth(200); //padding左右是20；然后总共是200，那么style中的width就是180 => width: 200 - padding
  45.             //$('#div1').outerWidth(200); //padding左右是20；border左右是2；总共200，那么width就是178 => width: 200 - padding - border
  46.             $('#div1').outerWidth(200, true);
  47.             //width: 200 - padding - border - margin为168
  48.         })
  49.     </script>
  50. </head>
  51. <body>
  52.     <div id="div1">div</div>
  53. </body>
  54. </html>
  57. <div class="md-section-divider"></div>

与原生JS获取尺寸的区别

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>元素的尺寸的设置</title>
  6.     <style>
  7.         #div1 {width: 100px; height: 100px; background: red; display: none; }
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             alert($('#div1').get(0).offsetWidth); //0 原生的JS是获取不到隐藏元素的尺寸的
  13.             alert($('#div1').width()); //100 JQ是可以获取隐藏元素的尺寸的
  14.         })
  15.     </script>
  16. </head>
  17. <body>
  18.     <div id="div1">div</div>
  19. </body>
  20. </html>
  23. <div class="md-section-divider"></div>

实战小技巧

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>可视区的尺寸</title>
  6.     <style>
  7.         body {margin: 0; padding: 0;}
  8.         #div1 {width: 100px; height: 100px; background: red; display: none; }
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         $(function(){
  13.             alert($(window).height()); //可视区的高
  14.             alert($(document).height()); //页面的高 
  15.             //如果没有给body清margin和padding，得到的是2016；如果清掉了，得到的就是2000
  16.         })
  17.     </script>
  18. </head>
  19. <body style="height: 2000px;">
  20.     <div id="div1">div</div>
  21. </body>
  22. </html>
  25. <div class="md-section-divider"></div>

滚动距离

scrollTop() ★★★★★

scrollLeft() ★

滚动距离

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>可视区的尺寸</title>
  6.     <style>
  7.         body {margin: 0; padding: 0;}
  8.         #div1 {width: 100px; height: 100px; background: red; display: none; }
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         $(function(){
  13.             $(document).click(function(){
  14.                 //alert($(document).scrollTop()); //获取滚动距离
  15.                 //当滚动条滚到最底部的时候 $(document).scrollTop() == $(document).height() - $(window).height()
  16.                 $(document).scrollTop(300); //设置滚动距离
  17.             })
  18.         })
  19.     </script>
  20. </head>
  21. <body style="height: 2000px;">
  22.     <div id="div1">div</div>
  23. </body>
  24. </html>
  27. <div class="md-section-divider"></div>

元素距离

offset() ★★★★★

position() ★★★

offset()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>到达页面的距离：offset()</title>
  6.     <style>
  7.         body {margin: 0; padding: 0;}
  8.         #div1 {width: 200px; height: 200px; background: red; margin: 200px; position: relative; }
  9.         #div2 {width: 100px; height: 100px; margin: 50px; background: yellow;}
  10.     </style>
  11.     <script src="jquery-1.11.1.js"></script>
  12.     <script>
  13.         $(function(){
  14.             //offset()的距离值都是相对于整个页面的
  15.             alert($('#div1').offset().left); //元素距离整个页面左边的距离是offset().left，top就是距离整个页面上边的距离。注意left和top后面都不加括号。
  16.             alert($('#div2').offset().left); //不论怎样嵌套，定位父级是谁，都是到达页面边缘的距离。这个与原生的offsetLeft和offsetTop不同。原生的相对于定位的祖先节点的距离。
  17.         })
  18.     </script>
  19. </head>
  20. <body style="height: 2000px;">
  21.     <div id="div1">
  22.         <div id="div2"></div>
  23.     </div>
  24. </body>
  25. </html>
  28. <div class="md-section-divider"></div>

position

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>到达页面的距离：offset()</title>
  6.     <style>
  7.         body {margin: 0; padding: 0;}
  8.         #div1 {width: 200px; height: 200px; background: red; margin: 200px; position: relative; }
  9.         #div2 {width: 100px; height: 100px; margin: 50px; background: yellow;}
  10.     </style>
  11.     <script src="jquery-1.11.1.js"></script>
  12.     <script>
  13.         $(function(){
  14.             alert($('#div2').position().left); //0
  15.             //position()就是到有定位的祖先节点的距离
  16.             //position()方法默认是不认margin值的。所以上面的代码弹出0
  17.         })
  18.     </script>
  19. </head>
  20. <body style="height: 2000px;">
  21.     <div id="div1">
  22.         <div id="div2"></div>
  23.     </div>
  24. </body>
  25. </html>
  28. <div class="md-section-divider"></div>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>到达定位祖先元素的距离position()</title>
  6.     <style>
  7.         body {margin: 0; padding: 0;}
  8.         #div1 {width: 200px; height: 200px; background: red; margin: 200px; position: relative; }
  9.         #div2 {width: 100px; height: 100px; position: relative; left: 50px; background: yellow;}
  10.     </style>
  11.     <script src="jquery-1.11.1.js"></script>
  12.     <script>
  13.         $(function(){
  14.             alert($('#div2').position().left); //50
  15.             //position()就是到有定位的祖先节点的距离
  16.         })
  17.     </script>
  18. </head>
  19. <body style="height: 2000px;">
  20.     <div id="div1">
  21.         <div id="div2"></div>
  22.     </div>
  23. </body>
  24. </html>
  27. <div class="md-section-divider"></div>

实战小技巧

计算出到有定位的祖先节点的距离

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {margin: 0; padding: 0;}
  8.         #div1 {width: 200px; height: 200px; background: red; margin: 200px; position: relative; }
  9.         #div2 {width: 100px; height: 100px; margin: 50px; background: yellow;}
  10.     </style>
  11.     <script src="jquery-1.11.1.js"></script>
  12.     <script>
  13.         $(function(){
  14.             alert($('#div2').offset().left - $('#div2').offsetParent().offset().left); //50
  15.             //通过计算的方法获得到达有定位的祖先元素的距离，不管是不是由margin产生的，因此规避了position()不认margin的问题                 
  16.         })
  17.     </script>
  18. </head>
  19. <body style="height: 2000px;">
  20.     <div id="div1">
  21.         <div id="div2"></div>
  22.     </div>
  23. </body>
  24. </html>
  27. <div class="md-section-divider"></div>

懒加载图片

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {margin: 0; padding: 0;}
  8.         div {margin-top: 300px; width: 470px; height: 150px; border: 1px #000 solid;}
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         $(function(){
  13.             toChange();
  14.             $(window).scroll(toChange);
  15.             function toChange(){
  16.                 $('img').each(function(i, elem){
  17.                     if($(elem).offset().top < $(window).height() + $(document).scrollTop()){ //如果图片进入了可视区
  18.                         $(elem).attr('src', $(elem).attr('_src'));
  19.                     }
  20.                 });
  21.             }       
  22.         })
  23.     </script>
  24. </head>
  25. <body>
  26.     <div><img _src="img/1.jpg" alt=""></div>
  27.     <div><img _src="img/2.jpg" alt=""></div>
  28.     <div><img _src="img/3.jpg" alt=""></div>
  29.     <div><img _src="img/4.jpg" alt=""></div>
  30.     <div><img _src="img/5.jpg" alt=""></div>
  31.     <div><img _src="img/6.jpg" alt=""></div>
  32. </body>
  33. </html>
  36. <div class="md-section-divider"></div>

JQ的事件

on() ★★★★★

off() ★★★★★

用on()的形式绑定事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery中的事件</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.     //在JQ中的事件操作都是绑定的形式
  9.         $(function(){
  10.             //原生中有的事件都可以像下面这么用（去掉on）
  11.             //$('#div1').click(function(){alert(123);});
  12.             //$('#div1').mouseover(function(){alert(123);});
  13.             //$('#div1').mousedown(function(){alert(123);});
  14.             //$('#div1').scroll(function(){alert(123);})
  15.             //$('#div1').on('click', function(){alert(123);}) //这就相当于$('#div1').click(function(){alert(123);})
  16.             //$('#div1').on('click mouseover', function(){alert(123);}); //通过空格分隔多个事件名称，可以同时绑定
  17.         })
  18.     </script>
  19. </head>
  20. <body style="height: 2000px;">
  21.     <div id="div1">aaaaaa</div>
  22. </body>
  23. </html>
  26. <div class="md-section-divider"></div>

用off()取消事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery中的事件</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.     //无论是用on()还是用click()形式绑定的事件，都是用off()取消的
  9.         $(function(){
  10.             /*
  11.             $('#div1').on('click mouseover', function(){
  12.                 alert(123);
  13.                 $(this).off(); //删除所有的事件操作
  14.             })
  15.             */
  16.             $('#div1').on('click mouseover', function(){
  17.                 alert(123);
  18.                 $(this).off('mouseover'); //取消指定的事件
  19.             })
  20.         })
  21.     </script>
  22. </head>
  23. <body style="height: 2000px;">
  24.     <div id="div1">aaaaaa</div>
  25. </body>
  26. </html>
  29. <div class="md-section-divider"></div>

Event对象 ★★★★★

pageX, pageY

which

target

stopPropagation()

preventDefault()

return false

pageX和pageY；clientX和clientY

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery中的event事件对象</title>
  6.     <style>
  7.         #div1 {margin: 200px;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             $('#div1').click(function(ev){
  13.                 alert(ev.pageY); //鼠标的y坐标
  14.                 //ev.pageX和ev.pageY始终是相对于整个页面的
  15.                 alert(ev.clientY); //鼠标的y坐标
  16.                 //ev.clientX和ev.clientY始终是相对于可视区的
  17.             })
  18.         })
  19.     </script>
  20. </head>
  21. <body style="height: 2000px;">
  22.     <div id="div1">aaaaaa</div>
  23. </body>
  24. </html>
  27. <div class="md-section-divider"></div>

which键盘键值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery中的event事件对象</title>
  6.     <style>
  7.         #div1 {margin: 200px;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         //ev.which是键盘的键值
  12.         $(function(){
  13.             $(document).keydown(function(ev){
  14.                 alert(ev.which); //页面上按下按键，弹出键盘键值
  15.                 //alert(ev.keyCode); //也可以弹出键盘键值
  16.                 //alert(ev.ctrlKey); //可以检测是否ctrl键是按下的
  17.             })
  18.         })
  19.     </script>
  20. </head>
  21. <body style="height: 2000px;">
  22.     <div id="div1">aaaaaa</div>
  23. </body>
  24. </html>
  27. <div class="md-section-divider"></div>

ev.target事件源

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery中的event事件对象</title>
  6.     <style>
  7.         #div1 {margin: 200px;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         //ev.target 当前目标元素，也就是事件源
  12.         $(function(){
  13.             $(document).click(function(ev){
  14.                 //alert(this); //这个this总是指向document
  15.                 alert(ev.target); //如果点击到a上，那么弹出的就是#div1这个元素
  16.             })
  17.         })
  18.     </script>
  19. </head>
  20. <body style="height: 2000px;">
  21.     <div id="div1">aaaaaa</div>
  22. </body>
  23. </html>
  26. <div class="md-section-divider"></div>

ev.stopPropagation() 阻止冒泡

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery中的event事件对象</title>
  6.     <style>
  7.         #div1 {margin: 200px;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         //stopPropagation()：阻止冒泡
  12.         $(function(){
  13.             $(document).click(function(){
  14.                 alert(123);
  15.             })
  16.             $('#div1').click(function(ev){
  17.                 ev.stopPropagation(); //阻止了#div1的事件冒泡，那么点击#div1就不会再弹出123了
  18.             })
  19.         })
  20.     </script>
  21. </head>
  22. <body style="height: 2000px;">
  23.     <div id="div1">aaaaaa</div>
  24. </body>
  25. </html>
  28. <div class="md-section-divider"></div>

ev.preventDefault() 阻止默认事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery中的event事件对象</title>
  6.     <style>
  7.         #div1 {margin: 200px;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         //ev.preventDefault()：阻止默认事件
  12.         $(function(){
  13.             $(document).contextmenu(function(ev){ //点击右键就不会弹出默认右键菜单了
  14.                 ev.preventDefault();
  15.             })
  16.         })
  17.     </script>
  18. </head>
  19. <body style="height: 2000px;">
  20.     <div id="div1">aaaaaa</div>
  21. </body>
  22. </html>
  25. <div class="md-section-divider"></div>

return false 既阻止默认事件又阻止冒泡

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery中的event事件对象</title>
  6.     <style>
  7.         #div1 {margin: 200px;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         //在事件函数中写return false代表：既阻止默认事件又阻止冒泡
  12.         $(function(){
  13.             $(document).contextmenu(function(ev){
  14.                 //代码
  15.                 return false;
  16.             })
  17.         })
  18.     </script>
  19. </head>
  20. <body style="height: 2000px;">
  21.     <div id="div1">aaaaaa</div>
  22. </body>
  23. </html>
  26. <div class="md-section-divider"></div>

JQ实战小技巧

多次添加on的处理方式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>多次添加on的处理方式</title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             /*
  12.             //以下这种形式，如果多次点击#div1后再点击#span1，会发现1会弹出多次，这是因为通过多次点击#div1，使得#span1多次调用了click事件
  13.             $('#div1').click(function(){
  14.                 $('#span1').click(function(){
  15.                     alert(1);
  16.                 })
  17.             })
  18.             */
  19.             //解决以上问题的方法
  20.             $('#div1').click(function(){
  21.                 $('#span1').off('click').click(function(){
  22.                     alert(1);
  23.                 })
  24.             })
  25.         })
  26.     </script>
  27. </head>
  28. <body style="height: 2000px;">
  29.     <div id="div1">aaaaaa</div>
  30.     <span id="span1">span</span>
  31. </body>
  32. </html>
  35. <div class="md-section-divider"></div>

用jQuery实现拖拽效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>用JQ实现拖拽</title>
  6.     <style>
  7.         * {margin: 0; padding: 0;}
  8.         #div1 {width: 100px; height: 100px; background: red; position: absolute; left: 100px; top: 100px;}
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         $(function(){
  13.             var disX = 0;
  14.             var disY = 0;
  15.             var $div = $('#div1');
  16.             $div.on('mousedown', function(ev){
  17.                 disX = ev.pageX - $(this).offset().left;
  18.                 disY = ev.pageY - $(this).offset().top;
  19.                 $(document).on('mousemove', function(ev){
  20.                     $div.css('left', ev.pageX - disX);
  21.                     $div.css('top', ev.pageY - disY);
  22.                 })
  23.                 $(document).on('mouseup', function(){
  24.                     $(this).off();
  25.                 })
  26.                 return false;
  27.             })      
  28.         })
  29.     </script>
  30. </head>
  31. <body style="height: 2000px;">
  32.     <div id="div1">div</div>
  33. </body>
  34. </html>
  37. <div class="md-section-divider"></div>

delegate() ★★★★★

事件委托

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件委托</title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             /* 普通写法，click加到li身上
  12.             $('li').on('click', function(){
  13.                 $(this).css('background', 'red');
  14.             })
  15.             */
  16.             //事件委托的写法
  17.             //click加到了ul身上
  18.             $('ul').delegate('li', 'click', function(ev){
  19.                 $(this).css('background', 'red'); //this指向触发的li
  20.                 $(ev.delegateTarget).css('background', 'green'); //这时候的ev.delegateTarget指向的就是$('ul')
  21.             })
  22.             //事件委托的好处：
  23.             //1. 性能更好
  24.             //2. 对后续添加的元素，可以直接拥有一些操作行为
  25.             //3. 事件委托的时间函数中的this指向的是委托的元素 要想找到是谁进行委托的，那个元素是哪个，可以用ev.delegateTarget来找到。
  26.             $('#input1').click(function(){
  27.                 var $li = $('<li>hello</li>');
  28.                 $('ul').append($li);
  29.             })
  30.             //后来添加的li照样有click事件，这是通过事件委托实现的。如果用普通写法，新添加的li是没有click事件的。
  31.         })
  32.     </script>
  33. </head>
  34. <body style="height: 2000px;">
  35.     <input id="input1" type="button" value="添加">
  36.     <ul>
  37.         <li>11111</li>
  38.         <li>11111</li>
  39.         <li>11111</li>
  40.         <li>11111</li>
  41.         <li>11111</li>
  42.     </ul>
  43. </body>
  44. </html>
  47. <div class="md-section-divider"></div>

undelegate() ★★★

undelegate() 取消委托

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>取消委托</title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             $('ul').delegate('li', 'click', function(ev){
  12.                 $(this).css('background', 'red'); //this指向触发的li
  13.                 $(ev.delegateTarget).undelegate(); //注意取消委托的时候，是要在delegateTarget上取消，而不是在this上取消
  14.             })
  15.             $('#input1').click(function(){
  16.                 var $li = $('<li>hello</li>');
  17.                 $('ul').append($li);
  18.             })
  19.         })
  20.     </script>
  21. </head>
  22. <body style="height: 2000px;">
  23.     <input id="input1" type="button" value="添加">
  24.     <ul>
  25.         <li>11111</li>
  26.         <li>11111</li>
  27.         <li>11111</li>
  28.         <li>11111</li>
  29.         <li>11111</li>
  30.     </ul>
  31. </body>
  32. </html>
  35. <div class="md-section-divider"></div>

trigger() ★★★★★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件的命名空间</title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         // trigger(): 主动触发
  11.         $(function(){
  12.             $('ul').delegate('li', 'click', function(){
  13.                 $(this).css('background', 'red'); //this指向触发的li
  14.             })
  15.             $('#input1').click(function(){
  16.                 var $li = $('<li>'+ $('#input2').val() +'</li>');
  17.                 $('ul').append($li);
  18.             })
  19.             $('#input2').keydown(function(ev){
  20.                 if(ev.which == 13){
  21.                     $('#input1').trigger('click'); //点击回车的时候，就主动触发#input1的click事件
  22.                     //$('#input1').click();  这种写法就相当于上面的那种写法
  23.                 }
  24.             })
  25.         })
  26.     </script>
  27. </head>
  28. <body style="height: 2000px;">
  29.     <input id="input1" type="button" value="添加"><input id="input2" type="text">
  30.     <ul>
  31.         <li>11111</li>
  32.         <li>11111</li>
  33.         <li>11111</li>
  34.         <li>11111</li>
  35.         <li>11111</li>
  36.     </ul>
  37. </body>
  38. </html>
  41. <div class="md-section-divider"></div>

事件的命名空间

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件的命名空间</title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             $('div').on('click', function(){
  12.                 alert(1);
  13.             })
  14.             $('div').on('click.abc', function(){ //注意，这里click后面有个.abc 这就是命名空间
  15.                 alert(2);
  16.             })
  17.             $('div').trigger('click.abc'); //只主动触发div上命名空间为abc的click事件
  18.         })
  19.     </script>
  20. </head>
  21. <body style="height: 2000px;">
  22.     <div>div</div>
  23. </body>
  24. </html>
  27. <div class="md-section-divider"></div>

事件的命名空间2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件的命名空间</title>
  6.     <style>
  7.         * {margin: 0; padding: 0;}
  8.         #div1 {width: 100px; height: 100px; background: red; position: absolute; left: 100px; top: 100px;}
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         $(function(){
  13.             var disX = 0;
  14.             var disY = 0;
  15.             var $div = $('#div1');
  16.             $div.on('mousedown', function(ev){
  17.                 disX = ev.pageX - $(this).offset().left;
  18.                 disY = ev.pageY - $(this).offset().top;
  19.                 $(document).on('mousemove.drag', function(ev){
  20.                     $div.css('left', ev.pageX - disX);
  21.                     $div.css('top', ev.pageY - disY);
  22.                 })
  23.                 $(document).on('mouseup.drag', function(){
  24.                     //$(this).off('mousemove.drag').off('mouseup.drag'); //这种写法和下面的写法都可以
  25.                     $(this).off('.drag');
  26.                     //注意：off()中可以只添加命名空间，但是trigger()中的命名空间前面必须要添加事件名才行
  27.                 })
  28.                 return false;
  29.             })      
  30.         })
  31.     </script>
  32. </head>
  33. <body style="height: 2000px;">
  34.     <div id="div1">div</div>
  35. </body>
  36. </html>
  39. <div class="md-section-divider"></div>

工具方法

$.type() ★★★★★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>$.type()</title>
  6.     <style>
  7.         * {margin: 0; padding: 0;}
  8.         #div1 {width: 100px; height: 100px; background: red; position: absolute; left: 100px; top: 100px;}
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.     //$().css() $().html() $().click(); //这些方法都是针对JQ对象的，针对原生是不能调用这些方法的
  13.     //$.XXX() $.YYY() $.ZZZ(); //这些方法前面只有一个$ 这些就是工具方法：既可以给JQ对象用，也可以给原生JS用
  14.     //比如：$.XXX($('div'))和$.XXX(oDiv) 这两种写法都可以
  15.         $(function(){
  16.             // $.type(): 查看变量的类型
  17.             /*
  18.             var a = 'hello';
  19.             alert(typeof a); //string
  20.             alert($.type(a)); //string
  21.             */
  22.             /*
  23.             var a = [1, 2, 3];
  24.             alert(typeof a); //object
  25.             alert($.type(a)); //array
  26.             */
  27.             /*
  28.             var a = new Date;
  29.             alert(typeof a); //object
  30.             alert($.type(a)); //date
  31.             */
  32.             /*
  33.             var a = null;
  34.             alert(typeof a); //object
  35.             alert($.type(a)); //null
  36.             */
  37.             var a = {};
  38.             alert(typeof a); //object
  39.             alert($.type(a)); //object
  40.         })
  41.     </script>
  42. </head>
  43. <body style="height: 2000px;">
  44.     <div id="div1">div</div>
  45. </body>
  46. </html>
  49. <div class="md-section-divider"></div>

$.isFunction() ★★★

$.isNumeric() ★★★

$.isArray() ★★★

$.isWindow() ★★★

$.isEmptyObject() ★★★

$.isPlainObject() ★★★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         * {margin: 0; padding: 0;}
  8.         #div1 {width: 100px; height: 100px; background: red; position: absolute; left: 100px; top: 100px;}
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         $(function(){
  13.             /*
  14.             var a = function(){};
  15.             alert($.isFunction(a)); //true
  16.             */
  17.             /*
  18.             var a = 123;
  19.             alert($.isNumeric(a)); //true
  20.             var b = '123';
  21.             alert($.isNumeric(b)); //true
  22.             */
  23.             /*
  24.             var a = [];
  25.             alert($.isArray(a)); //true
  26.             */
  27.             /*
  28.             var a = window;
  29.             alert($.isWindow(a)); //true
  30.             */
  31.             /*
  32.             var a = {};
  33.             alert($.isEmptyObject(a)); //true
  34.             var b = {'a': '1'};
  35.             alert($.isEmptyObject(b)); //false
  36.             var c = [];
  37.             alert($.isEmptyObject(c)); //true
  38.             */
  39.             //plain object 对象自变量：{}或new Object出来的
  40.             var a = {};
  41.             alert($.isPlainObject(a)); //true
  42.             var b = {'a': '1'};
  43.             alert($.isPlainObject(b)); //true
  44.             var c = new Object;
  45.             alert($.isPlainObject(c)); //true
  46.             var d = new Date;
  47.             alert($.isPlainObject(d)); //false
  48.             var e = [];
  49.             alert($.isPlainObject(e)); //false
  50.         })
  51.     </script>
  52. </head>
  53. <body style="height: 2000px;">
  54.     <div id="div1">div</div>
  55. </body>
  56. </html>
  59. <div class="md-section-divider"></div>

$.extend() ★★★★★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>$.extend() 对象的拷贝</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             /*
  10.             var a = {
  11.                 name: 'hello'
  12.             };
  13.             var b = a;
  14.             b.name = 'hi';
  15.             alert(a.name); //hi 对象引用，b.name更改后，a也收到了影响。因为a、b在同一个指针上
  16.             */
  17.             /* $.extend进行浅拷贝
  18.             var a = {
  19.                 name: 'hello'
  20.             };
  21.             var b = {};
  22.             $.extend(b, a, {age: 20}); //把从第二个参数开始，把后面所有的都像第一个参数进行拷贝
  23.             console.log(b);
  24.             b.name = 'hi';
  25.             alert(a.name); //a没有受到影响
  26.             */
  27.             /* $.extend默认是浅拷贝
  28.             var a = {
  29.                 name: {age: 20}
  30.             };
  31.             var b = {};
  32.             $.extend(b, a); 
  33.             b.name.age = 30;
  34.             alert(a.name.age); //30 a又受到了影响，因为$.extend()默认为浅拷贝，就是指拷贝一层
  35.             */
  36.             //通过添加参数true实现$.extend的深拷贝
  37.             var a = {
  38.                 name: {age: 20}
  39.             };
  40.             var b = {};
  41.             $.extend(true, b, a); //通过添加参数true实现深拷贝
  42.             b.name.age = 30;
  43.             alert(a.name.age); //20 深拷贝就是指不管多少层，都不会影响到之前的对象
  44.         });
  45.     </script>
  46. </head>
  47. <body>
  48. </body>
  49. </html>
  52. <div class="md-section-divider"></div>

$.proxy() ★★★

$.proxy()改变this指向的用法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>$.proxy改变this指向</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             // $.proxy(): 改this指向
  10.             function show(){
  11.                 alert(this);
  12.             }
  13.             //show(); //this是指向window的
  14.             //show.call(document); //让this指向document
  15.             //以下是通过$.proxy()方法来改变this指向
  16.             $.proxy(show, document); //让show函数中的this指向document，只改变指向，并没有调用
  17.             $.proxy(show, document)(); //后面加一对小括号才算是调用了，这时候弹出的就是document
  18.         });
  19.     </script>
  20. </head>
  21. <body>
  22. </body>
  23. </html>
  26. <div class="md-section-divider"></div>

用$.proxy()传参的用法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>$.proxy改变this指向</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             function show(n1, n2){
  10.                 alert(n1);
  11.                 alert(n2);
  12.                 alert(this);
  13.             }
  14.             $.proxy(show, document)(3, 4); //后面加一对小括号才算是调用了，这时候弹出的就是document
  15.             //也可以写成如下形式：
  16.             $.proxy(show, document, 3, 4)();
  17.             //也可以写成如下形式：
  18.             $.proxy(show, document, 3)(4);
  19.         });
  20.     </script>
  21. </head>
  22. <body>
  23. </body>
  24. </html>
  27. <div class="md-section-divider"></div>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>$.proxy改变this指向</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             function show(n1, n2){
  10.                 alert(n1);
  11.                 alert(n2);
  12.                 alert(this);
  13.             }
  14.             //$(document).on('click', $.proxy(show, window)(3,4)); //这样写show函数就直接调用了，所以要写成下面的形式
  15.             $(document).on('click', $.proxy(show, window, 3, 4));
  16.         });
  17.     </script>
  18. </head>
  19. <body>
  20. </body>
  21. </html>
  24. <div class="md-section-divider"></div>

JQ实战小技巧

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>$.proxy改变this指向</title>
  6.     <style>
  7.         #div1 {width: 100px; height: 100px; border: 1px solid #000; }
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             $('#div1').on('click', function(){
  13.                 /*
  14.                 setTimeout(function(){
  15.                     //$(this).css('background', 'red'); 这样写肯定是有错误的，因为this指向的是window
  16.                 }, 1000);
  17.                 */
  18.                 //以下是一种比较简单的改变this指向的方法
  19.                  var This = this;
  20.                  setTimeout(function(){
  21.                     $(This).css('background', 'red');
  22.                  }, 1000);
  23.             })
  24.         });
  25.     </script>
  26. </head>
  27. <body>
  28.     <div id="div1"></div>
  29. </body>
  30. </html>
  33. <div class="md-section-divider"></div>

本课练习

2014年10月19日第四堂课

JQ中的运动

show(), hide(), toggle() ★★★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #div1 {width: 200px; height: 200px; background: red;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         //normal: 400毫秒
  12.         //fast：200
  13.         //slow: 600
  14.         //也可以写成事件形式（默认单位是毫秒）
  15.         //不写参数没有动画效果
  16.         $(function(){
  17.             var bBtn = true;
  18.             $('#input1').click(function(){
  19.                 /*
  20.                 if(bBtn){
  21.                     $('#div1').hide('fast');
  22.                 } else {
  23.                     $('#div1').show(1000);
  24.                 }
  25.                 bBtn = !bBtn;
  26.                 */
  27.                 $('#div1').toggle('normal'); //toggle是show和hide的合体操作，不写参数就没有动画效果
  28.             })
  29.         });
  30.     </script>
  31. </head>
  32. <body>
  33.     <input type="button" value="点击" id="input1">
  34.     <div id="div1"></div>
  35. </body>
  36. </html>
  39. <div class="md-section-divider"></div>

fadeIn(), fadeOut(), fadeToggle() ★★★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #div1 {width: 200px; height: 200px; background: red;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         //fadeIn和fadeOut有默认时间：400毫秒
  12.         $(function(){
  13.             var bBtn = true;
  14.             $('#input1').click(function(){
  15.                 /*
  16.                 if(bBtn){
  17.                     $('#div1').fadeOut('fast');
  18.                 } else {
  19.                     $('#div1').fadeIn(1000);
  20.                 }
  21.                 bBtn = !bBtn;
  22.                 */
  23.                 $('#div1').fadeToggle('normal');
  24.             })
  25.         });
  26.     </script>
  27. </head>
  28. <body>
  29.     <input type="button" value="点击" id="input1">
  30.     <div id="div1"></div>
  31. </body>
  32. </html>
  35. <div class="md-section-divider"></div>

slideDown(), slideUp(), slideToggle() ★★★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #div1 {width: 200px; height: 200px; background: red;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         //slideIn和slideOut有默认时间：400毫秒
  12.         $(function(){
  13.             var bBtn = true;
  14.             $('#input1').click(function(){
  15.                 if(bBtn){
  16.                     $('#div1').slideUp('fast');
  17.                 } else {
  18.                     $('#div1').slideDown(1000);
  19.                 }
  20.                 bBtn = !bBtn;
  21.                 //$('#div1').slideToggle('normal'); 
  22.             })
  23.         });
  24.     </script>
  25. </head>
  26. <body>
  27.     <input type="button" value="点击" id="input1">
  28.     <div id="div1"></div>
  29. </body>
  30. </html>
  33. <div class="md-section-divider"></div>

animate() ★★★★★

参数的作用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>animate()方法</title>
  6.     <style>
  7.         #div1, #div2 {width: 200px; height: 200px; background: red; margin-bottom: 20px;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         //animate:
  12.         //第一个参数：对象 {} 设置样式属性和值（目标点）
  13.         //第二个参数：时间（毫秒）默认是400毫秒
  14.         //第三个参数：运动形式 只有两种 swing(默认：缓冲 慢-快-慢)和linear(匀速的)
  15.         //第四个参数：结束运动时候的回调函数
  16.         $(function(){
  17.             $('#input1').click(function(){
  18.                 $('#div1').animate({
  19.                     width: 400, //数值和带单位的字符串都可以
  20.                 }, 1000, 'swing', function(){
  21.                     alert(123);
  22.                 });
  23.                 $('#div2').animate({
  24.                     width: 400, //数值和带单位的字符串都可以
  25.                 }, 1000, 'linear');
  26.             });
  27.         });
  28.     </script>
  29. </head>
  30. <body>
  31.     <input type="button" value="点击" id="input1">
  32.     <div id="div1"></div>
  33.     <div id="div2"></div>
  34. </body>
  35. </html>
  38. <div class="md-section-divider"></div>

数值的运算操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>animate()方法</title>
  6.     <style>
  7.         #div1, #div2 {width: 200px; height: 200px; background: red; margin-bottom: 20px;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             $('#input1').click(function(){
  13.                 $('#div1').animate({
  14.                     width: '+=100' //每次的初始值加上100 
  15.                 }, 1000, 'swing');
  16.             });
  17.         });
  18.     </script>
  19. </head>
  20. <body>
  21.     <input type="button" value="点击" id="input1">
  22.     <div id="div1"></div>
  23. </body>
  24. </html>
  27. <div class="md-section-divider"></div>

配置参数step的作用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>animate()方法</title>
  6.     <style>
  7.         #div1, #div2 {width: 200px; height: 200px; background: red; margin-bottom: 20px;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         //配置参数，在animate函数中写两个json
  12.         //第一个json中配置原来的第一个参数：设置样式属性和目标值
  13.         //第二个json是配置原来的第二到第四个参数：时间(duration)、运动形式(easing)和回调函数(complete)，还有一个比较有用的就是step
  14.         $(function(){
  15.             $('#input1').click(function(){
  16.                 $('#div1').animate({
  17.                     width: 300
  18.                 }, {
  19.                     duration: 1000, 
  20.                     easing: 'linear',
  21.                     complete: function(){
  22.                         //alert(123);
  23.                     },
  24.                     step: function(a, b){ //能够监测定时器的每一次变化
  25.                         //console.log(a);
  26.                         //console.log(b);
  27.                         console.log(b.pos); //b.pos就是运动过程当中的比例值（0~1）
  28.                     }
  29.                 });
  30.             });
  31.         });
  32.     </script>
  33. </head>
  34. <body>
  35.     <input type="button" value="点击" id="input1">
  36.     <div id="div1"></div>
  37. </body>
  38. </html>
  41. <div class="md-section-divider"></div>

巧用配置参数step

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>animate()方法</title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             $('#input1').click(function(){
  12.                 $('#div1').animate({
  13.                     num: "move" //只要这里面有设置的东西，就可以利用后面的step，这里只是用来占位的，可以不起作用
  14.                 }, {
  15.                     duration: 2000, 
  16.                     easing: 'linear',
  17.                     complete: function(){
  18.                         //alert(123);
  19.                     },
  20.                     step: function(a, b){ 
  21.                         $('#div1').html(parseInt(b.pos * 27382667));
  22.                     }
  23.                 });
  24.             });
  25.         });
  26.     </script>
  27. </head>
  28. <body>
  29.     <input type="button" value="点击" id="input1">
  30.     <div id="div1">0</div> //用2秒让div中从数字0运动到27382667
  31. </body>
  32. </html>
  35. <div class="md-section-divider"></div>

animate()中的队列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>运动的队列概念</title>
  6.     <style>
  7.         #div1 {width: 200px; height: 200px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             $('#input1').click(function(){
  13.                 /*              
  14.                 $('#div1').animate({width: 300}, 1000);
  15.                 $('#div1').animate({height: 300}, 1000);
  16.                 $('#div1').animate({left: 300}, 1000);
  17.                 //上面三句话并不是同时运行的，而是第一个运动完成之后进行下一个运动 它们构成一个队列
  18.                 alert(123); //这一句在一开始就会执行
  19.                 */
  20.                 //链式调用
  21.                 $('#div1').animate({width: 300}, 1000).animate({height: 300}, 1000).animate({left: 300}, 1000);
  22.             });
  23.         });
  24.     </script>
  25. </head>
  26. <body>
  27.     <input type="button" value="点击" id="input1">
  28.     <div id="div1"></div>
  29. </body>
  30. </html>
  33. <div class="md-section-divider"></div>

delay()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>delay()延迟运动</title>
  6.     <style>
  7.         #div1 {width: 200px; height: 200px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             $('#input1').click(function(){
  13.                 $('#div1').animate({width: 300}, 1000).delay(1000).animate({height: 300}, 1000).delay(1000).animate({left: 300}, 1000);
  14.             });
  15.         });
  16.     </script>
  17. </head>
  18. <body>
  19.     <input type="button" value="点击" id="input1">
  20.     <div id="div1"></div>
  21. </body>
  22. </html>
  25. <div class="md-section-divider"></div>

stop()和finish()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>delay()延迟运动</title>
  6.     <style>
  7.         #div1 {width: 200px; height: 200px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             $('#input1').click(function(){
  13.                 $('#div1').animate({width: 300}, 1000).animate({height: 300}, 1000);
  14.             });
  15.             $('#input2').click(function(){
  16.                 //$('#div1').stop(); //默认情况下只会停止当前运动，对后续运动没有影响
  17.                 //$('#div1').stop(true); //添第一个参数true，可以停止所有运动
  18.                 //$('#div1').stop(true, true); //添加第二个参数：可以停止到当前运动指定的目标点
  19.                 $('#div1').finish(); //让这个对象的所有运动全部立即完成
  20.             })
  21.         });
  22.     </script>
  23. </head>
  24. <body>
  25.     <input type="button" value="点击" id="input1">
  26.     <input type="button" value="停止运动" id="input2">
  27.     <div id="div1"></div>
  28. </body>
  29. </html>
  32. <div class="md-section-divider"></div>

运动的队列问题

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>运动的队列问题</title>
  6.     <style>
  7.         #div1 {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             //stop(): 清空队列的行为
  13.             /*
  14.             //下面代码问题，鼠标快速移入移出，会出现问题，队列变得很长
  15.             $('#div1').mouseover(function(){
  16.                 $(this).animate({width: 200, height: 200})
  17.             }).mouseout(function(){
  18.                 $(this).animate({width: 100, height: 100})
  19.             });
  20.             */
  21.             //可以利用stop()来在往队列里添加运动之前，先清空一下队列
  22.             $('#div1').mouseover(function(){
  23.                 $(this).stop().animate({width: 200, height: 200})
  24.             }).mouseout(function(){
  25.                 $(this).stop().animate({width: 100, height: 100})
  26.             });
  27.         });
  28.     </script>
  29. </head>
  30. <body>
  31.     <input type="button" value="点击" id="input1">
  32.     <input type="button" value="停止运动" id="input2">
  33.     <div id="div1"></div>
  34. </body>
  35. </html>
  38. <div class="md-section-divider"></div>

工具方法

$.parseJSON() ★★★★★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             //$.parseJSON: 把JSON类型的字符串转换成真正的JSON数据
  12.             var a = '{"name":"hello", "age": "20"}';
  13.             var json = $.parseJSON(a); //只能针对JSON类型的字符串（安全性比较好），必须是严格的JSON（都要写双引号，不加双引号解析不了）
  14.             console.log(json);
  15.             console.log(json.name);
  16.         });
  17.     </script>
  18. </head>
  19. <body>
  20. </body>
  21. </html>
  24. <div class="md-section-divider"></div>

$.parseHTML() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             //$.parseHTML：转化html形式的字符串，转成DOM节点，然后把这些DOM节点放到数组当中
  12.             var a = '<div>div</div><span>span</span>';
  13.             var arr = $.parseHTML(a); 
  14.             console.log(arr);
  15.             arr[1].innerHTML = 'hello';
  16.             $('body').append(arr[1]);
  17.         });
  18.     </script>
  19. </head>
  20. <body>
  21. </body>
  22. </html>
  25. <div class="md-section-divider"></div>

$.parseXML() ★

$.isXMLDoc() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             //$.parseXML:　把XML形式的字符串转成真正的XML节点
  12.             //$.isXMLDoc: 判断是否是xml document
  13.             var a = '<?xml version="1.0" encoding="utf-8"?><hello>nihao</hello>'; //注意这里一定要写xml的头信息
  14.             var xmlDoc = $.parseXML(a); //返回的就是xml的document元素
  15.             console.log(xmlDoc);
  16.             console.log($(xmlDoc).find('hello').html());
  17.             console.log($.isXMLDoc(xmlDoc));
  18.             var b = document;
  19.             console.log($.isXMLDoc(b));
  20.         });
  21.     </script>
  22. </head>
  23. <body>
  24. </body>
  25. </html>
  28. <div class="md-section-divider"></div>

$.ajax() ★★★★★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>ajax</title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             $('#input1').on('input', function(){
  12.                 //console.log(1);
  13.                 $.ajax({
  14.                     url: 'user.php', //不写data数据，通过在url中添加'user.php?user='+ $(this).val() 也可以以get的方式传输数据
  15.                     type: 'post', //默认的type为get方式，还有一种提交方式是post方式
  16.                     data: {user: $(this).val()}, //可以写成json，也可以写成拼接字符串 'user='+ $(this).val()
  17.                     dataType: 'json', //这里可以设置返回数据转化成什么类型。这里写了类型，在success里面就不需要再解析。有json、html和xml
  18.                     success: function(data){ //返回1的时候可以注册；返回0的时候不可以注册
  19.                         //var dataJson = $.parseJSON(data); //如果没有写dataType的话，这里要把返回的data先解析成想要的形式
  20.                         if(data == 1){
  21.                             $('#div1').html('可以注册');
  22.                         } else if(data == 0){
  23.                             $('#div1').html('已经注册过了，不能注册');
  24.                         }
  25.                     },
  26.                     error: function(err){ //请求不成功的时候走error这里
  27.                         console.log(err); //404 500以上服务器错误
  28.                     }
  29.                     async: false//操作是否异步。默认情况下ajax都是异步操作。如果async为false，即为同步的。同步形势下，ajax执行完毕之后，ajax后面的console.log(123);才会执行
  30.                 });
  31.                 console.log(123);
  32.             })
  33.         });
  34.     </script>
  35. </head>
  36. <form action="reg.php">
  37.     <input type="text" name="user" id="input1">
  38.     <input type="submit" value="注册">
  39. </form>
  40. <div id="div1"></div>
  41. <body>
  42. </body>
  43. </html>
  46. <div class="md-section-divider"></div>

用ajax实现选项卡-简略版不安全

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style>
  9. <div class="md-section-divider"></div>
  11. #div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
  12. .active{ background:red;}
  13. </style>
  14. <script src="jquery-1.11.1.js"></script>
  15. <script>
  16. $(function(){
  17.     $('#div1').find('input').click(function(){
  18.         var index = $(this).index();
  19.         $('#div1').find('input').attr('class','');
  20.         $('#div1').find('div').css('display','none');
  21.         $(this).attr('class','active');
  22.         $('#div1').find('div').eq( index ).css('display','block');
  23.         loadData(index,function(data){
  24.             $('#div1').find('div').eq(index).html(data);   
  25.         });
  26.     });
  27.     loadData(0,function(data){
  28.         $('#div1').find('div').eq(0).html(data);   
  29.     });
  30.     function loadData(num,fn){
  31.         $.ajax({
  32.             url : 'data.php?num=' + num,
  33.             success : function(data){
  34.                 fn(data);
  35.             }
  36.         });
  37.     }
  38. });
  39. </script>
  40. </head>
  41. <body>
  42. <div id="div1">
  43.     <input class="active" type="button" value="1" />
  44.     <input type="button" value="2" />
  45.     <input type="button" value="3" />
  46.     <div style="display:block">正在加载...</div>
  47.     <div>正在加载...</div>
  48.     <div>正在加载...</div>
  49. </div>
  50. </body>
  51. </html>
  54. <div class="md-section-divider"></div>

$.get() ★★★★★

$.post() ★★★★★

  1. //第一个参数url，第二个是data，第三个是回调函数，第四个函数是datatype。基本上$.post()也是这种写法。如果获取失败了，可以调用error()这个方法。
  2. $.get('user3.php', {name: "hello"}, function(data){
  3.     console.log(data);
  4. }, 'json').error(function(err){
  5.     console.log(err);
  6. });
  9. <div class="md-section-divider"></div>

JQ插件

$.browser()

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>用$.browser()插件判断浏览器地址</title>
  5.     <script src="jquery-1.11.1.js"></script>
  6.     <script src="http://jquery.thewikies.com/browser/jquery.browser.min.js"></script>
  7.     <script>
  8.         alert($.browser.name); //浏览器名称
  9.         alert($.browser.version); //浏览器版本
  10.         alert($.layout.name); //浏览器内核
  11.         alert($.os.name); //操作系统
  12.     </script>
  13. </head>
  14. <body>
  15. </body>
  16. </html>
  19. <div class="md-section-divider"></div>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>用$.browser()插件判断浏览器地址</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script src="jquery.cookie.js"></script>
  8.     <script>
  9.         //$.cookie('name', 'hello'); //不设置过期时间的话，cookie都是临时存储的
  10.         $.cookie('name', 'hello', {expires: 7}); //设置了cookie的过期时间为7天
  11.         alert($.cookie('name'));
  12.     </script>
  13. </head>
  14. <body>
  15. </body>
  16. </html>
  19. <div class="md-section-divider"></div>

e-calendar

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>用$.browser()插件判断浏览器地址</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script src="http://demo.jq22.com/e-calendar-master/js/jquery.e-calendar.js"></script>
  8.     <link rel="stylesheet" href="http://demo.jq22.com/e-calendar-master/css/jquery.e-calendar.css">
  9.     <script>
  10.         $(document).ready(function(){
  11.             $('#calendar').eCalendar({
  12.                 weekDays: ['日', '一', '二', '三', '四', '五', '六'],
  13.                 textArrows: {previous: '-', next: '+'}
  14.             });
  15.         })
  16.     </script>
  17. </head>
  18. <body>
  19.     <h3>Hello World e-calendar!</h3>
  20.     <div id="calendar"></div>
  21. </body>
  22. </html>
  25. <div class="md-section-divider"></div>

UI组件

jQuery UI

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery UI</title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script src="jquery-ui.min.js"></script>
  8.     <link rel="stylesheet" href="jquery-ui.min.css">
  9.     <style>
  10.         #div1 { width: 100px; height: 100px; background: red; position: absolute;}
  11.     </style>
  12.     <script>
  13.         $(function(){
  14.             #('#div1').draggable({ //配置参数
  15.                 cursor: 'move',
  16.                 axis: 'x',
  17.                 handle: 'p',
  18.                 start: function(){ //设置自定义事件
  19.                     $(this).css('background', 'blue')
  20.                 }
  21.             });
  22.             $('input').click(function(){
  23.                 $('#div1').draggable('destroy'); //destroy方法，点击input之后，就不能拖拽了
  24.             })
  25.             //自定义事件还可以这样调用：
  26.             /*
  27.             $('#div1').on('dragstart', function(){ //这样写一般自定义事件前面要加上名字，这里不只写start，而是写个dragstart
  28.                 $(this).css('background', 'blue');
  29.             })
  30.             */
  31.             $('#div1').find('p').addClass('active', 1000); //这个addClass也是jQuery UI中的特效
  32.         })
  33.     </script>
  34. </head>
  35. <body>
  36.     <div id="div1">
  37.         <p>aaaaaaa</p>
  38.     </div>
  39.     <input type="button" value="点击">
  40. </body>
  41. </html>
  44. <div class="md-section-divider"></div>

jQuery EasyUI

本课练习

2014年10月24日第五堂课 课后练习讲解（略）

2014年10月26日第六堂课

清空内容

html("")

empty() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             $('#div1').empty();
  10.         })
  11.     </script>
  12. </head>
  13. <body>
  14.     <div id="div1">div<span>span</span></div>
  15. </body>
  16. </html>
  19. <div class="md-section-divider"></div>

删除节点

remove()

detach() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             $('#div1').click(function(){
  10.                 alert(123);
  11.             })
  12.             /*
  13.             var $div = $('#div1').remove(); //remove()函数返回的就是被删的元素
  14.             $('body').append($div);
  15.             //通过remove()删除再添加回来，只保留结构不保留操作行为
  16.             */
  17.             //detach()删除元素，但是保留之前元素的操作行为
  18.             var $div = $('#div1').detach();
  19.             $('body').append($div);
  20.         })
  21.     </script>
  22. </head>
  23. <body>
  24.     <div id="div1">div</div>
  25.     <hr>
  26. </body>
  27. </html>
  30. <div class="md-section-divider"></div>
  32. ````
  34. ###获取文本
  36. ####text() ★
  38. - 获取文本的特点
  40. ``` html
  41. <!DOCTYPE html>
  42. <html lang="en">
  43. <head>
  44.     <meta charset="UTF-8">
  45.     <title></title>
  46.     <script src="jquery-1.11.1.js"></script>
  47.     <script>
  48.         $(function(){
  49.             /*
  50.             alert($('#div1').html()); //div<span>span</span>
  51.             alert($('#div1').text()); //divspan text()只获取文本
  52.             */
  53.             //$('#div1').html('<h1>标题</h1>');
  54.             //$('#div1').text('<h1>标题</h1>'); <h1>会当成文本打印在页面上
  55.             alert($('div').text()); //text()可以获取一个集合所有文本节点的内容，这是与其他方法不同的
  56.         })
  57.     </script>
  58. </head>
  59. <body>
  60.     <div id="div1">div<span>span</span></div>
  61.     <div>div2</div>
  62.     <div>div3</div>
  63.     <hr>
  64. </body>
  65. </html>
  68. <div class="md-section-divider"></div>

替换节点

replaceWith() ★

replaceAll() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             //用div替换span
  10.             $('#span1').replaceWith($('#div1')); //原本的div1移到了span1的位置，而原本的span1不存在了
  11.             //与replaceWith()对应的是replaceAll()。上面的写法也相当于如下：
  12.             //$('#div1').replaceAll($('#span1'))
  13.         })
  14.     </script>
  15. </head>
  16. <body>
  17.     <div id="div1">div</div>
  18.     <hr>
  19.     <span id="span1">span</span>
  20. </body>
  21. </html>
  24. <div class="md-section-divider"></div>

事件扩展

hover() ★★★

hover()方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #div1 {width: 100px; height: 100px; background: red;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             //hover()方法的两个参数是两个函数，第一个是mouseenter的操作；第二个是mouseleave的操作
  13.             $('#div1').hover(function(){
  14.                 $(this).css('background', 'blue');
  15.             }, function(){
  16.                 $(this).css('background', 'red');
  17.             });
  18.         })
  19.     </script>
  20. </head>
  21. <body>
  22.     <div id="div1">div</div>
  23. </body>
  24. </html>
  27. <div class="md-section-divider"></div>

over和enter、out和leave的区别

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #div1 {width: 200px; height: 200px; background: red; position: relative;}
  8.         #div2 {width: 100px; height: 100px; background: blue; position: absolute; top: -100px; left: 0;}
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         $(function(){
  13.             /*
  14.             //以下这种写法，鼠标移到蓝方块上再离开，会造成多次运动
  15.             $('#div1').mouseover(function(){
  16.                 $('#div2').animate({top: 0});
  17.             });
  18.             $('#div1').mouseout(function(){
  19.                 $('#div2').animate({top: -100});
  20.             });
  21.             */
  22.             /*
  23.             //每次先清掉队列的处理方式也不是很理想
  24.             $('#div1').mouseover(function(){
  25.                 $('#div2').stop().animate({top: 0});
  26.             });
  27.             $('#div1').mouseout(function(){
  28.                 $('#div2').stop().animate({top: -100});
  29.             });
  30.             */
  31.             //mouseenter和mouseleave会让子元素不影响父元素
  32.             $('#div1').mouseenter(function(){
  33.                 $('#div2').animate({top: 0});
  34.             });
  35.             $('#div1').mouseleave(function(){
  36.                 $('#div2').animate({top: -100});
  37.             });
  38.         })
  39.     </script>
  40. </head>
  41. <body>
  42.     <div id="div1">
  43.         <div id="div2"></div>
  44.     </div>
  45. </body>
  46. </html>
  49. <div class="md-section-divider"></div>

focusin() ★

focusout() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #div1 {width: 200px; height: 200px; background: red; position: relative;}
  8.         #div2 {width: 100px; height: 100px; background: blue; position: absolute; top: -100px; left: 0;}
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         $(function(){
  13.             //focus和blur不支持冒泡，只能加给能够获取光标的元素
  14.             /* div是没有focus事件的，点击input也不可能冒泡到div上来
  15.             $('#div1').on('focus', function(){
  16.                 alert(123);
  17.             })
  18.             */
  19.             //focusin和focusout这两个事件支持冒泡
  20.             //下面代码，点击input的时候，就会冒泡到div上执行代码
  21.             $('#div1').on('focusin', function(){
  22.                 alert(123);
  23.             })
  24.         })
  25.     </script>
  26. </head>
  27. <body>
  28.     <div id="div1">
  29.         <input type="text">
  30.     </div>
  31. </body>
  32. </html>
  35. <div class="md-section-divider"></div>

one() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #div1 {width: 200px; height: 200px; background: red; position: relative;}
  8.         #div2 {width: 100px; height: 100px; background: blue; position: absolute; top: -100px; left: 0;}
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         $(function(){
  13.             //one()事件，只能触发一次
  14.             $('#div1').one('focusin', function(){
  15.                 alert(123);
  16.             })
  17.             /*
  18.             //如果不用one，也可以实现只触发一次，可以写成下面的形式：
  19.             $('#div1').on('focusin', function(){
  20.                 alert(123);
  21.                 $('#div1').off('focusin');
  22.             })
  23.             */
  24.         })
  25.     </script>
  26. </head>
  27. <body>
  28.     <div id="div1">
  29.         <input type="text">
  30.     </div>
  31. </body>
  32. </html>
  35. <div class="md-section-divider"></div>

on() ★★★★★

源码分析几大参数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #div1 {width: 200px; height: 200px; background: red; position: relative;}
  8.         #div2 {width: 100px; height: 100px; background: blue; position: absolute; top: -100px; left: 0;}
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         $(function(){
  13.             //on()有五个参数，有一个是专门针对one()方法内部使用的
  14.             $('#div1').on('click', {name: 'hello'}, function(ev){
  15.                 console.log(ev.data.name); //ev.data就对应着on()的json参数
  16.             })
  17.             $('#div1').on('click', 'span', {name: 'hello'}, function(){
  18.                 alert(123); //在on()中添加了一个元素的话，就与事件委托是一样的，相当于筛选条件。
  19.             })
  20.             /*
  21.             //上面那种写法就相当于：
  22.             $('#div1').delegate('span', 'click', function(){
  23.                 alert(123);
  24.             })
  25.             */
  26.         })
  27.     </script>
  28. </head>
  29. <body>
  30.     <div id="div1">
  31.         <span>span</span>
  32.     </div>
  33. </body>
  34. </html>
  37. <div class="md-section-divider"></div>

转成原生的event对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #div1 {width: 200px; height: 200px; background: red; position: relative;}
  8.         #div2 {width: 100px; height: 100px; background: blue; position: absolute; top: -100px; left: 0;}
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         $(function(){
  13.             //jQuery中的ev不是原生的event对象
  14.             //要获得原生的event对象用originalEvent
  15.             $('#div1').on('touchstart', function(ev){ //touchstart是移动端的触摸的一个事件
  16.                  alert(ev.changedTouches); //jQuery中这样写，弹出的是undefined，因为jQuery中的event对象是找不到这个事件对象的属性的
  17.                  alert(ev.originalEvent.changedTouches); //转换成原生的event对象就可以找到这个值了
  18.             })
  19.         })
  20.     </script>
  21. </head>
  22. <body>
  23.     <div id="div1">
  24.         <span>span</span>
  25.     </div>
  26. </body>
  27. </html>
  30. <div class="md-section-divider"></div>

自定义事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>自定义事件</title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             //实现在图片上滚轮向下，图片缩小；滚轮向上，图片放大
  12.             $('#img1').on('zoomIn', function(){ //缩小
  13.                 $(this).css('width', '100');
  14.             });
  15.             $('#img1').on('zoomOut', function(){ //放大
  16.                 $(this).css('width', '500');
  17.             });
  18.             //$('#img1').trigger('zoomIn'); //自定义事件的触发是通过trigger来做
  19.             $('#img1').on('DOMMouseScroll',function(ev){
  20.                 //alert(ev.originalEvent.detail); //向下滚大于0；向上滚小于0
  21.                 if(ev.originalEvent.detail > 0){
  22.                     $(this).trigger('zoomIn');
  23.                 }
  24.                 else{
  25.                     $(this).trigger('zoomOut');
  26.                 }
  27.             });
  28.         })
  29.     </script>
  30. </head>
  31. <body>
  32.     <img src="001.jpg" id="img1">
  33. </body>
  34. </html>
  37. <div class="md-section-divider"></div>

triggerHandler() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>自定义事件</title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             //trigger() 可以触发事件的默认行为
  12.             //triggerHandler() 不会触发事件自带的默认行为，只会出发自定义的操作
  13.             $('#input1').on('focus', function(){
  14.                 this.style.background = 'red';
  15.             })
  16.             $('#input2').on('click', function(){
  17.                 //$('#input1').trigger('focus'); //#input1自动获取光标
  18.                 $('#input1').triggerHandler('focus'); //#input1没有自动获取光标
  19.             })
  20.         })
  21.     </script>
  22. </head>
  23. <body>
  24.     <input type="text" id="input1">
  25.     <input type="button" id="input2" value="点击">
  26. </body>
  27. </html>
  30. <div class="md-section-divider"></div>

event对象

stopImmediatePropagation()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>自定义事件</title>
  6.     <style>
  7.         #div1 {width: 100px; height: 100px; background: red;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             $('#div1').on('click', function(){
  13.                 alert(123);
  14.             })
  15.             $('#span1').on('click', function(ev){
  16.                 //ev.stopPropagation(); //只会阻止父级
  17.                 ev.stopImmediatePropagation(); //除了阻止父级，还会阻止本身的事件操作
  18.                 //注意，要阻止的本身的事件操作要写到这句话下面才可以
  19.             })
  20.             $('#span1').on('click', function(){
  21.                 alert(456);
  22.             })
  23.         })
  24.     </script>
  25. </head>
  26. <body>
  27.     <div id="div1">
  28.         <span id="span1">span</span>
  29.     </div>
  30. </body>
  31. </html>
  34. <div class="md-section-divider"></div>

鼠标的键值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>自定义事件</title>
  6.     <style>
  7.         #div1 {width: 100px; height: 100px; background: red;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             $('#span1').on('mousedown', function(ev){
  13.                 //alert(ev.which); //点击鼠标左键弹1、滚轮弹2、右键弹3
  14.                 //要获得鼠标的键值，要用mousedown或mouseup事件来，而不能用click，因为click不仅是由鼠标来触发的
  15.             })
  16.         })
  17.     </script>
  18. </head>
  19. <body>
  20.     <div id="div1">
  21.         <span id="span1">span</span>
  22.     </div>
  23. </body>
  24. </html>
  27. <div class="md-section-divider"></div>

ready()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>自定义事件</title>
  6.     <style>
  7.         #div1 {width: 100px; height: 100px; background: red;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         /*
  12.         $(function(){
  13.         })
  14.         */
  15.          //上面这种写法就相当于：
  16.          /*
  17.          $(document).ready(function(){
  18.          })
  19.          */
  20.          /*
  21.         $(function(){
  22.             //等DOM加载完就执行 有图片加载的时候，需要获取img的宽、高等数据要小心
  23.         })
  24.         和
  25.         $(window).load(function(){
  26.             //等整个页面加载完才执行 
  27.         })
  28.         */
  29.         $(function(){ //可以通过img的load方法来解决
  30.             $('img').load(function(){
  31.                 alert($('img').width());
  32.             });
  33.         })
  34.     </script>
  35. </head>
  36. <body>
  37.     <img src="1.png" alt="">
  38. </body>
  39. </html>
  42. <div class="md-section-divider"></div>

JQ的截至操作

nextUntil() ★

prevUntil() ★

parentsUntil() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>自定义事件</title>
  6.     <style>
  7.         #div1 {width: 100px; height: 100px; background: red;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             //$('#span1').parents().css('border', '1px solid blue');
  13.             $('#span1').parentsUntil('body').css('border', '1px solid blue'); //找到body就不再找了，而且body也不包括
  14.             //nextUntil() 下面兄弟节点的截止位置
  15.             //prevUntil() 上面兄弟节点的截止位置
  16.         })
  17.     </script>
  18. </head>
  19. <body>
  20.     <div id="div1">
  21.         <p>
  22.             <span id="span1">span</span>
  23.         </p>
  24.     </div>
  25. </body>
  26. </html>
  29. <div class="md-section-divider"></div>

数据缓存

data() ★★★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>自定义事件</title>
  6.     <style>
  7.         #div1 {width: 100px; height: 100px; background: red;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             //data() 数据缓存两个参数
  13.             $('#div1').data('name', 'hello'); //设置缓存数据到元素身上
  14.             alert($('#div1').data('name')); //获取缓存数据
  15.             //data() 把数据存在了一个大的集合中，放到了jQuery库的源码当中，并没有直接把数据存在元素身上，而是间接设置上去的。这种写法可以防止内存泄露。要想在元素身上缓存大量数据，用data()
  16.             /*
  17.             $('#div1').attr('name', 'hello'); 
  18.             alert($('#div1').attr('name')); 
  19.             */
  20.             //attr是通过在元素身上添加自定义属性和自带属性，是直接往DOM某个元素本身身上设置
  21.             //prop()与attr()略有不同：attr是通过原生的setAttribute和getAttribute来进行添加和设置的；而prop()是根据原生的点“.”或中括号“[]”来进行设置的。
  22.             //oDiv.index = i; 或 oDiv['index'] = i; 这都是用prop()设置的
  23.         })
  24.     </script>
  25. </head>
  26. <body>
  27.     <div id="div1">
  28.         aaaaaa
  29.     </div>
  30. </body>
  31. </html>
  34. <div class="md-section-divider"></div>

attr()和prop()的选择

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>自定义事件</title>
  6.     <style>
  7.         #div1 {width: 100px; height: 100px; background: red;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             /*
  13.             //原生的方法
  14.             var aInput = document.getElementsByTagName('input');
  15.             aInput[0].onclick = function(){
  16.                 for(var i=1; i<aInput.length; i++){
  17.                     aInput[i].checked = true;
  18.                 }
  19.             }
  20.             */
  21.             var bBtn = true;
  22.             /*用attr设置出现了问题
  23.             $('input[type=button]').click(function(){
  24.                 if(bBtn){
  25.                     $('input[type=checkbox]').attr('checked', true);
  26.                 } else {
  27.                     $('input[type=checkbox]').attr('checked', false);
  28.                 }
  29.                 bBtn = !bBtn;
  30.             });
  31.             */
  32.             //用prop就没有问题。attr和prop的选择，可以参考原生的做法。如果原生是用.或[]设置的，那么jQuery来写就考虑用prop()的方法
  33.             $('input[type=button]').click(function(){
  34.                 if(bBtn){
  35.                     $('input[type=checkbox]').prop('checked', true);
  36.                 } else {
  37.                     $('input[type=checkbox]').prop('checked', false);
  38.                 }
  39.                 bBtn = !bBtn;
  40.             });
  41.         })
  42.     </script>
  43. </head>
  44. <body>
  45.     <input type="button" value="全选">
  46.     <input type="checkbox">
  47.     <input type="checkbox">
  48.     <input type="checkbox">
  49. </body>
  50. </html>
  53. <div class="md-section-divider"></div>

JSON形式的设置

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>json写法</title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             //css()的json写法
  12.             $('div').css({
  13.                 width: '100px',
  14.                 height: '100px',
  15.                 background: 'red'
  16.             });
  17.             /*
  18.             //on()的json写法
  19.             $('div').on({
  20.                 click: function(){},
  21.                 mouseover: function(){}
  22.             })
  23.             */
  24.         })
  25.     </script>
  26. </head>
  27. <body>
  28.     <div></div>
  29. </body>
  30. </html>
  33. <div class="md-section-divider"></div>

回调形式的设置

addClass()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>回调形式</title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             $('div').addClass(function(i, oldClass){
  12.                 console.log(i); //当前div的索引值
  13.                 console.log(oldClass); //div之前的class
  14.                 //上面的代码执行完毕，在控制台打印出来的就是：
  15.                 //0
  16.                 //box div1
  17.                 //1
  18.                 //(空字符串)
  19.                 //2
  20.                 //(空字符串)
  21.                 return 'box'+(i+1); //可以利用addClass()的回调，给三个div分别添加class：box1、box2和box3。注意此处的return
  22.             });
  23.         })
  24.     </script>
  25. </head>
  26. <body>
  27.     <div class="box div1">div</div>
  28.     <div>div</div>
  29.     <div>div</div>
  30. </body>
  31. </html>
  34. <div class="md-section-divider"></div>

工具方法

$.merge() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             var a = [1, 2, 3];
  12.             var b = [4, 5, 6];
  13.             var c = $.merge(a, b); //$.merge只能是两个参数
  14.             console.log(c); //[1, 2, 3, 4, 5, 6]
  15.         })
  16.     </script>
  17. </head>
  18. <body>
  19. </body>
  20. </html>
  23. <div class="md-section-divider"></div>

$.map() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             //$.map(数组，回调)
  12.             var arr = ['a', 'b', 'c'];
  13.             arr = $.map(arr, function(val, i){
  14.                 console.log(val); //值
  15.                 console.log(i); //索引
  16.                 return val + i //数组就变成['a0', 'b1', 'c2']
  17.                 //return 'hello' //数组变成['hello', 'hello', 'hello']
  18.             })
  19.             console.log(arr);
  20.         })
  21.     </script>
  22. </head>
  23. <body>
  24. </body>
  25. </html>
  28. <div class="md-section-divider"></div>

$.grep() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             var arr = [1, 5, 3, 8, 2];
  12.             arr = $.grep(arr, function(val, i){
  13.                 return val > 4; //返回值大于4的数 为真就保留，为假就剔除
  14.             })
  15.             console.log(arr); //[5, 8]
  16.         })
  17.     </script>
  18. </head>
  19. <body>
  20. </body>
  21. </html>
  24. <div class="md-section-divider"></div>

$.unique() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             //$.unique() 针对dom节点的去重方法，对数组不起作用
  12.             var aDiv = $('div').get(); //要转成原生
  13.             var arr = [];
  14.             for(var i=0; i<aDiv.length; i++){
  15.                 arr.push(aDiv[i]);
  16.             }
  17.             for(var i=0; i<aDiv.length; i++){
  18.                 arr.push(aDiv[i]);
  19.             } //循环了两次，因此arr里面出现了一些重复的
  20.             arr = $.unique(arr); //去掉了重复的
  21.             console.log(arr); 
  22.         })
  23.     </script>
  24. </head>
  25. <body>
  26.     <div class="box">div</div>
  27.     <div>div</div>
  28.     <div>div</div>
  29. </body>
  30. </html>
  33. <div class="md-section-divider"></div>

$.inArray() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             //$.inArray() 类似于indexOf()的作用
  12.             var arr = ['a', 'b', 'c', 'd'];
  13.             console.log($.inArray('b', arr)); //'b'在arr中的位置是1，如果没有出现过的就返回-1
  14.         })
  15.     </script>
  16. </head>
  17. <body>
  18.     <div class="box">div</div>
  19.     <div>div</div>
  20.     <div>div</div>
  21. </body>
  22. </html>
  25. <div class="md-section-divider"></div>

$.makeArray() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             //$.makeArray() 把不是数组的转成数组
  12.             var aDiv = document.getElementsByTagName('div');
  13.             //aDiv.push() //会报错，因为aDiv不是数组
  14.             aDiv = $.makeArray(aDiv);
  15.             aDiv.push(); //这次就不报错了
  16.             console.log(aDiv);
  17.             var aString = 'hello';
  18.             aString = $.makeArray(aString);
  19.             console.log(aString);
  20.         })
  21.     </script>
  22. </head>
  23. <body>
  24.     <div class="box">div</div>
  25.     <div>div</div>
  26.     <div>div</div>
  27. </body>
  28. </html>
  31. <div class="md-section-divider"></div>

$.trim() ★★★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             var str = '    hello   ';
  12.             alert('(' + str + ')');
  13.             alert('(' + $.trim(str) + ')');
  14.         })
  15.     </script>
  16. </head>
  17. <body>
  18.     <div class="box">div</div>
  19.     <div>div</div>
  20.     <div>div</div>
  21. </body>
  22. </html>
  25. <div class="md-section-divider"></div>

ajax扩展

辅助

$.param() ★★★
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             //'key = value$key=value$key=value' ajax中通过这种形式传到后台
  12.             var obj = {"name": "hello", "age": "20"};
  13.             obj = $.param(obj); //自动转成上述字符串
  14.             console.log(obj); 
  15.             /*
  16.             $.ajax({
  17.                 data: {"name": "hello", "age": "20"} //后台会自动转成上面拼接的形式
  18.             });
  19.             */
  20.         })
  21.     </script>
  22. </head>
  23. <body>
  24.     <div class="box">div</div>
  25.     <div>div</div>
  26.     <div>div</div>
  27. </body>
  28. </html>
  31. <div class="md-section-divider"></div>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             var obj = [{name: 'hello', value: '20'}]; //注意这里加了中括号
  12.             obj = $.param(obj);
  13.             console.log(obj); //hello=20 name和value对应，这里就合成了一个整体
  14.             var obj1 = [{name: 'hello', age: '20'}]; //注意这里加了中括号
  15.             obj1 = $.param(obj1);
  16.             console.log(obj1); //hello= 因为这里name和age无法对应，所以得不到hello=20
  17.         })
  18.     </script>
  19. </head>
  20. <body>
  21.     <form action="">
  22.         <input type="text" name="a" value="1">
  23.         <input type="text" name="b" value="2">
  24.         <input type="text" name="c" value="3">
  25.     </form>
  26. </body>
  27. </html>
  30. <div class="md-section-divider"></div>
serialize() ★★★
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             //serialize()是针对form表单的实例方法
  12.             var a = $('form').serialize(); //注意：一定是针对form中的name和value的形式
  13.             console.log(a); //a就处理为字符串："a=1&b=2&c=3"
  14.             $.ajax({
  15.                 data: a //通过以上操作，在调用ajax的时候就可以直接调用这个a了
  16.             })
  17.         })
  18.     </script>
  19. </head>
  20. <body>
  21.     <form action="">
  22.         <input type="text" name="a" value="1">
  23.         <input type="text" name="b" value="2">
  24.         <input type="text" name="c" value="3">
  25.     </form>
  26. </body>
  27. </html>
  30. <div class="md-section-divider"></div>
serializeArray() ★★★
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             //serializeArray()是针对form表单中的name和value的实例方法
  12.             var a = $('form').serializeArray();
  13.             console.log(a); //a就处理成[{name="a", value="1"}, {name="b", value="2"}, {name="c", value="3"}]
  14.         })
  15.     </script>
  16. </head>
  17. <body>
  18.     <form action="">
  19.         <input type="text" name="a" value="1">
  20.         <input type="text" name="b" value="2">
  21.         <input type="text" name="c" value="3">
  22.     </form>
  23. </body>
  24. </html>
  27. <div class="md-section-divider"></div>

快捷方法

load() ★
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             //load() 给元素里面添加东西
  12.             //$('#div1').load('data.html', function(){}); //回调函数是加载后出发的函数，data.html的内容会直接被添加到指定的元素里面
  13.             $('#div1').load('data.html .box', function(){}); //该函数还有筛选功能，在地址后面加个空格加上.box，那么在data.html中的.box的内容才能被加到div中来
  14.         })
  15.     </script>
  16. </head>
  17. <body>
  18.     <div id="div1"></div>
  19. </body>
  20. </html>
  23. <div class="md-section-divider"></div>
$.getScript() ★
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             // $.getScript() 动态请求js文件
  12.             $('#div1').click(function(){
  13.                 $.getScript('data.js', function(){});  //去动态加载data.js文件 文件加载完就会执行里面的代码。data.js加载完成之后，执行回调函数
  14.             })
  15.         })
  16.     </script>
  17. </head>
  18. <body>
  19.     <div id="div1">aaaa</div>
  20. </body>
  21. </html>
  24. <div class="md-section-divider"></div>
$.getJSON ★
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             // $.getJson() 动态请求json或JsonP
  12.             //直接用$.getJSON，我们就不需要再通过设置dataType: json了
  13.             $.getJSON('data.php', function(data){
  14.                 console.log(data);
  15.             }); //data.php返给我们的是一个json格式
  16.         })
  17.     </script>
  18. </head>
  19. <body>
  20.     <div id="div1">aaaa</div>
  21. </body>
  22. </html>
  25. <div class="md-section-divider"></div>

jsonp的形式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             // $.getJson() 动态请求json或JsonP
  12.             //直接用$.getJSON，我们就不需要再通过设置dataType: json了
  13.             $.getJSON('data.php', function(data){
  14.                 console.log(data);
  15.             }); //data.php返给我们的是一个json格式
  16.             //针对JSONP
  17.             $.getJSON('data.php?callback=?', function(data){ //data.php返回的是jsonp的形式，我们就可以后面添上callback=? 注意其中callback是key值，而问号?是value值。一旦用getJSON时，一定要是用callback=?的。如果给callback指定了名称，那么返回的是字符串形式，并不是json形式，在getJSON里面就解析不了，所以就只能走error。所以在$.getJSON()里面给callback命名是没有意义的，一定要是用?才可以自动解析
  18.                 console.log(data);
  19.             }).error(function(err){
  20.                 console.log(err);
  21.             });
  22.             $.ajax({ //在使用ajax的时候，可以给callback自定义名称，例如下面定义了“show”
  23.                 url:'data.php?callback=show',
  24.                 success: function(data){
  25.                     //返回的数据就是一个类似"show({name: 'hello'})"的字符串，然后再后续处理进行使用
  26.                 }
  27.             })
  28.             //另外如果在$.ajax()中设置了datatype为'jsonp'，那么在url的地方是不需要加callback的，因为它会自动添加好
  29.         })
  30.     </script>
  31. </head>
  32. <body>
  33.     <div id="div1">aaaa</div>
  34. </body>
  35. </html>
  38. <div class="md-section-divider"></div>

默认配置

$.ajaxSetup() ★
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             //如果有很多ajax，那么可以利用$.ajaxSetup()来进行默认设置
  12.             $.ajaxSetup({
  13.                 type: 'POST' //那么所有的ajax传输类型都改为post了
  14.             });
  15.         })
  16.     </script>
  17. </head>
  18. <body>
  19.     <div id="div1">aaaa</div>
  20. </body>
  21. </html>
  24. <div class="md-section-divider"></div>

全局事件

属性 ★

ajax参考：

2014年10月29日第七堂课

防止库之间冲突 $.noConflict() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         var J = $.noConflict();
  9.         var $ = 123;
  10.         //后面就可以用J代替$或者jQuery来直接用了
  11.         J().css();
  12.         J.trim();
  13.     </script>
  14. </head>
  15. <body>
  16. </body>
  17. </html>
  20. <div class="md-section-divider"></div>

遍历 $.each() ★★★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             //$().each() 只能针对jQuery的集合
  10.             //$.each() 工具方法，可以针对原生的集合，还针对数组和json都可以
  11.             var arr = ['a', 'b', 'c'];
  12.             var obj = {'name': 'hello', 'age': '20'}
  13.             $.each(arr, function(i, val){
  14.                 console.log(i);
  15.                 console.log(val);
  16.             })
  17.             $.each(obj, function(i, val){
  18.                 console.log(i);
  19.                 console.log(val);
  20.             })
  21.         })
  22.     </script>
  23. </head>
  24. <body>
  25.     <div></div>
  26.     <div></div>
  27.     <div></div>
  28. </body>
  29. </html>
  32. <div class="md-section-divider"></div>

后退链式操作 end() ★

后退添加链式操作 addBack() ★

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             //end() 回到上一级
  10.             //$('div').next().css('background', 'red').end().css('color', 'blue');
  11.             //addBack() 不仅返回上一层，还会包含自己本身
  12.             //$('div').next().css('background', 'red').addBack().css('color', 'blue');
  13.             //add() 添加到集合中
  14.             $('div').add('span').css('background', 'red').addBack().css('color', 'blue');
  15.         })
  16.     </script>
  17. </head>
  18. <body>
  19.     <div>div</div>
  20.     <span>span</span>
  21. </body>
  22. </html>
  25. <div class="md-section-divider"></div>

JQ中的队列 ★

.queue().dequeue()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             //$.queue() 三个参数：队列添加到哪个元素身上；队列的名字；第三个参数是一个函数
  10.             //$.dequeue() 两个参数：元素和队列名字
  11.             //JQ中的队列，存储的都是函数
  12.             //JQ的队列，当进行出队的操作的时候，会自动执行相应的函数
  13.             function a(){
  14.                 alert(1);
  15.             }
  16.             function b(){
  17.                 alert(2);
  18.             }
  19.             function c(){
  20.                 alert(3);
  21.             }
  22.             $.queue(document, 'miaov', a);
  23.             $.queue(document, 'miaov', b);
  24.             $.queue(document, 'miaov', c);
  25.             $.dequeue(document, 'miaov'); //弹1
  26.             $.dequeue(document, 'miaov'); //弹2
  27.             $.dequeue(document, 'miaov'); //弹3
  28.         })
  29.     </script>
  30. </head>
  31. <body>
  32.     <div>div</div>
  33.     <span>span</span>
  34. </body>
  35. </html>
  38. <div class="md-section-divider"></div>

queue() dequeue()

基本使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             function a(){
  10.                 alert(1);
  11.             }
  12.             function b(){
  13.                 alert(2);
  14.             }
  15.             function c(){
  16.                 alert(3);
  17.             }
  18.             $(document).queue('miaov', a);
  19.             $(document).queue('miaov', b);
  20.             $(document).queue('miaov', c);
  21.             $(document).dequeue('miaov'); //弹1
  22.             $(document).dequeue('miaov'); //弹2
  23.         })
  24.     </script>
  25. </head>
  26. <body>
  27.     <div>div</div>
  28.     <span>span</span>
  29. </body>
  30. </html>
  33. <div class="md-section-divider"></div>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         //JQ中，animate的队列名称是'fx'
  12.         $(function(){
  13.             function a(){
  14.                 $('div').css('background', 'blue');
  15.                 $('div').dequeue('fx'); //如果不写这句话的话，队列就卡在这里了，没法往下执行了
  16.             }
  17.             $('div').animate({width: 200});
  18.             $('div').queue('fx', a);
  19.             $('div').animate({height: 200});
  20.             $('div').animate({left: 200});
  21.         })  
  22.     </script>
  23. </head>
  24. <body>
  25.     <div>div</div>
  26. </body>
  27. </html>
  30. <div class="md-section-divider"></div>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         //JQ中，animate的队列名称是'fx'
  12.         $(function(){
  13.             $('div').animate({width: 200});
  14.             //$('div').delay(2000); 下面的操作就相当于这一句的操作
  15.             $('div').queue('fx', function(){
  16.                 setTimeout(function(){
  17.                     $('div').dequeue();
  18.                 }, 2000)
  19.             })
  20.             $('div').animate({height: 200});
  21.             $('div').animate({left: 200});
  22.         })  
  23.     </script>
  24. </head>
  25. <body>
  26.     <div>div</div>
  27. </body>
  28. </html>
  31. <div class="md-section-divider"></div>

JQ中的回调对象 ★

$.Callbacks()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             function a(){
  13.                 alert(1);
  14.             }
  15.             function b(){
  16.                 alert(2);
  17.             }
  18.             function c(){
  19.                 alert(3);
  20.             }
  21.             var cb = $.Callbacks(); //回调对象
  22.             cb.add(a); //a添加到回调对象的集合里面
  23.             cb.fire(); //fire就是触发 弹出1
  24.             cb.add(b); 
  25.             cb.fire(); //弹出1和2
  26.             cb.add(c);
  27.             cb.remove(b);
  28.             cb.fire(); //弹出1和3
  29.         })  
  30.     </script>
  31. </head>
  32. <body>
  33. </body>
  34. </html>
  37. <div class="md-section-divider"></div>

用回调对象来解决作用域的问题

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             var cb = $.Callbacks();
  12.             function a(){
  13.                 alert(1);
  14.             }
  15.             (function(){
  16.                 function b(){
  17.                     alert(2);
  18.                 }
  19.                 cb.add(a);
  20.                 cb.add(b);
  21.             })();
  22.             //a(); //弹1
  23.             //b(); //b这个函数是找不到的，因为作用域里面没它
  24.             cb.fire(); //弹1、2
  25.         })  
  26.     </script>
  27. </head>
  28. <body>
  29. </body>
  30. </html>
  33. <div class="md-section-divider"></div>

once

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             function a(){
  13.                 alert(1);
  14.             }
  15.             function b(){
  16.                 alert(2);
  17.             }
  18.             function c(){
  19.                 alert(3);
  20.             }
  21.             //参数 once：只能触发一次
  22.             var cb = $.Callbacks('once');
  23.             cb.add(a);
  24.             cb.add(b);
  25.             cb.fire(); //弹1、2
  26.             cb.fire(); //因为添加了参数once，所以前面触发过一次之后，这里不再触发
  27.         })  
  28.     </script>
  29. </head>
  30. <body>
  31. </body>
  32. </html>
  35. <div class="md-section-divider"></div>

memory

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             function a(){
  13.                 alert(1);
  14.             }
  15.             function b(){
  16.                 alert(2);
  17.             }
  18.             function c(){
  19.                 alert(3);
  20.             }
  21.             //参数 memory：不管前后添加的都一起出发
  22.             var cb = $.Callbacks('memory');
  23.             cb.add(a);
  24.             cb.add(b);
  25.             cb.fire(); //弹1、2、3，因为参数memory，让触发时不管前面后面add的都触发
  26.             cb.add(c); 
  27.         })  
  28.     </script>
  29. </head>
  30. <body>
  31. </body>
  32. </html>
  35. <div class="md-section-divider"></div>

unique

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             function a(){
  13.                 alert(1);
  14.             }
  15.             function b(){
  16.                 alert(2);
  17.             }
  18.             function c(){
  19.                 alert(3);
  20.             }
  21.             //参数 unique：去重功能
  22.             var cb = $.Callbacks('unique');
  23.             cb.add(a);
  24.             cb.add(a);
  25.             cb.add(a);
  26.             cb.add(b);
  27.             cb.fire(); //弹1、2，而不是弹1,1,1,2
  28.         })  
  29.     </script>
  30. </head>
  31. <body>
  32. </body>
  33. </html>
  36. <div class="md-section-divider"></div>

stopOnFalse

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             function a(){
  13.                 alert(1);
  14.             }
  15.             function b(){
  16.                 alert(2);
  17.                 return false;
  18.             }
  19.             function c(){
  20.                 alert(3);
  21.             }
  22.             //参数 unique：去重功能
  23.             var cb = $.Callbacks('stopOnFalse');
  24.             cb.add(a);
  25.             cb.add(a);
  26.             cb.add(b);
  27.             cb.add(c);
  28.             cb.fire(); //弹1,1,2 不谈3，因为在b里面碰到了false就不继续执行后面的函数c了
  29.         })  
  30.     </script>
  31. </head>
  32. <body>
  33. </body>
  34. </html>
  37. <div class="md-section-divider"></div>

参数的组合使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             function a(){
  13.                 alert(1);
  14.             }
  15.             function b(){
  16.                 alert(2);
  17.                 return false;
  18.             }
  19.             function c(){
  20.                 alert(3);
  21.             }
  22.             //回调对象的参数可以组合使用
  23.             var cb = $.Callbacks('once memory');
  24.             cb.add(a);
  25.             cb.add(a);
  26.             cb.add(b);
  27.             cb.fire(); //弹1,1,2,3   
  28.             cb.add(c);
  29.             cb.fire(); //什么也不弹
  30.         })  
  31.     </script>
  32. </head>
  33. <body>
  34. </body>
  35. </html>
  38. <div class="md-section-divider"></div>

JQ中的延迟对象 ★★★

$.Deferred()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             /*
  13.             setTimeout(function(){
  14.                 alert(1);
  15.             }, 1000);
  16.             alert(2);
  17.             */
  18.             /*
  19.             setTimeout(function(){
  20.                 alert(1);
  21.                 alert(2);
  22.             }, 1000);
  23.             */
  24.             /*
  25.             var cb = $.Callbacks();
  26.             setTimeout(function(){
  27.                 alert(1);
  28.                 cb.fire();
  29.             }, 1000);
  30.             cb.add(function(){
  31.                 alert(2);
  32.             })
  33.             */
  34.             //可以看出，用上面的cb和下面的dfd是非常相像的
  35.             //一秒钟之后先弹1，再弹2
  36.             //resolve对应done
  37.             //reject对应fail
  38.             var dfd = $.Deferred();
  39.             setTimeout(function(){
  40.                 alert(1);
  41.                 //dfd.resolve(); //解决
  42.                 dfd.reject(); //未解决
  43.             }, 1000);
  44.             //dfd.done(function(){ //成功
  45.             dfd.fail(function(){ //失败
  46.                 alert(2);
  47.             })
  48.         })  
  49.     </script>
  50. </head>
  51. <body>
  52. </body>
  53. </html>
  56. <div class="md-section-divider"></div>

延迟对象在ajax中的应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             /*
  13.             $.ajax({
  14.                 url: 'xxx.php',
  15.                 success: function(){
  16.                 },
  17.                 error: function(){
  18.                 }
  19.             });
  20.             */
  21.             $.ajax('xxx.php').done(function(){}).fail(function(){}); //这一句与上面的写法是一回
  22.         })  
  23.     </script>
  24. </head>
  25. <body>
  26. </body>
  27. </html>
  30. <div class="md-section-divider"></div>

延迟对象的状态会被保持住

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             function a(){
  13.                 alert(1);
  14.             }
  15.             //点击第一次，延迟两秒钟弹；以后再点就立即弹
  16.             /*
  17.             var bBtn = true;
  18.             $('input').click(function(){
  19.                 if(bBtn){
  20.                     bBtn = false;
  21.                     setTimeout(a, 2000);
  22.                 } else {
  23.                     a();
  24.                 }
  25.             })
  26.             */
  27.             //用延迟对象来做
  28.             //第一次执行click的时候，a函数加到了延迟对象里面，然后延迟两秒钟，见到resolve之后，done里面的函数执行
  29.             //第二次再点击的时候，因为前面dfd的状态已经变成resolve解决了，所以就可以直接执行done了
  30.             //延迟对象的状态会保持住
  31.             var dfd = $.Deferred();
  32.             $('input').click(function(){
  33.                 setTimeout(function(){
  34.                     dfd.resolve();
  35.                 }, 2000);
  36.                 dfd.done(a);
  37.             })
  38.         })  
  39.     </script>
  40. </head>
  41. <body>
  42. <input type="button" value="点击">
  43. </body>
  44. </html>
  47. <div class="md-section-divider"></div>

$.when

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             /*
  13.             //xxx获取成功做一件事、yyy获取成功做一件事
  14.             $.ajax('xxx.php').done(function(){});
  15.             $.ajax('yyy.php').done(function(){});
  16.             */
  17.             //等xxx和yyy都成功之后，再进行一个回调处理
  18.             $.when($.ajax('xxx.php'), $.ajax('yyy.php')).done(function(){});
  19.             //注意$.ajax('xxx.php')这种形式，返回的就是一个延迟对象
  20.         })  
  21.     </script>
  22. </head>
  23. <body>
  24. <input type="button" value="点击">
  25. </body>
  26. </html>
  29. <div class="md-section-divider"></div>

JQ源码架构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>ajax</title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             $('div').css('background', 'red'); //对象.css(...)
  12.             $('div').html(); //对象.html();
  13.             //var arr = new Array();
  14.             //arr.push();
  15.             //arr.sort();
  16.         //----------源码中----------
  17.             function $(selector){
  18.                 return new Jquery();
  19.             }
  20.             function Jquery(selector){ //构造函数
  21.                 //selector -> 获取相对应的元素
  22.                 //this == $('div') //等价的
  23.                 /*
  24.                 this = { //this中存储的元素都是原生的
  25.                     0: div1,
  26.                     1: div2,
  27.                     2: div3,
  28.                     length: 3
  29.                 }
  30.                 */
  31.             }
  32.             Jquery.prototype.css = function(attr, value){ //attr -> background; value -> red
  33.                 for(var i=0; i<this.length; i++){
  34.                     this[i].style[attr] = value;
  35.                 }
  36.             }
  37.             Jquery.prototype.html = function(){
  38.             }
  39.         });
  40.     </script>
  41. </head>
  42. <body>
  43.     <div>div1</div>
  44.     <div>div2</div>
  45.     <div>div3</div>
  46. </body>
  47. </html>
  50. <div class="md-section-divider"></div>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>ajax</title>
  6.     <style>
  7.     </style>
  8.     <script src="jquery-1.11.1.js"></script>
  9.     <script>
  10.         $(function(){
  11.             //$('div').css('background', 'red');
  12.             $('div')[1].style.background = 'red'; //理解了原生，就知道通过这种方式就可以找到div2了
  13.             $('div').get(1).style.background = 'red'; //这个get就相当于上面的这种写法
  14.             /*
  15.             $('div').length //.length其实是$('div')这个jquery对象的json中的一个属性
  16.             $('div')就是下面这样一个json
  17.             {
  18.                 0: div1,
  19.                 1: div2,
  20.                 2: div3,
  21.                 length: 3
  22.             }
  23.             */
  24.         });
  25.     </script>
  26. </head>
  27. <body>
  28.     <div>div1</div>
  29.     <div>div2</div>
  30.     <div>div3</div>
  31. </body>
  32. </html>
  35. <div class="md-section-divider"></div>

实例方法和静态方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         //工具方法如：
  12.         $.trim();
  13.         $.type();
  14.         //以上这些都是直接将方法挂载到$上，而$在源码中是一个函数，方法挂载在函数上也是可以的，因为函数也是对象。
  15.         //----------源码中----------
  16.             function $(selector){
  17.                 return new Jquery();
  18.             }
  19.             //下面两行是工具方法的扩展。面向对象当中，对函数扩展的方法叫作“静态方法”
  20.             $.trim = function(){};
  21.             $.type = function(){};
  22.             function Jquery(selector){ 
  23.             }
  24.             //面向对象当中，在原型prototype上的方法叫做“实例方法”
  25.             Jquery.prototype.css = function(attr, value){ 
  26.             }
  27.             Jquery.prototype.html = function(){
  28.             }
  29.         });
  30.     </script>
  31. </head>
  32. <body>
  33. </body>
  34. </html>
  37. <div class="md-section-divider"></div>

JQ插件编写 ★★★

.extend()与.fn.extend()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $.extend(a); //在$.extend()里面只写一个参数的时候，就是说这个a要往jQuery源码本身身上添加 工具方法（静态方法）
  12.         $.fn.extend(); //JQ方法（实例方法）
  13.         //----------源码中----------
  14.             function $(selector){
  15.                 return new Jquery();
  16.             }
  17.             $.trim = function(){};
  18.             $.type = function(){};
  19.             //上面两行的写法与下面这个$.extend的写法是一回事
  20.             $.extend({
  21.                 trim: function(){},
  22.                 type: function(){}
  23.             })
  24.             function Jquery(selector){ 
  25.             }
  26.             Jquery.prototype.css = function(attr, value){ 
  27.             }
  28.             Jquery.prototype.html = function(){
  29.             }
  30.             //上面两个加载prototype上的实例方法也可以通过下面的$.fn.extend()来实现，两者是一回事
  31.             $.fn.extend({
  32.                 css: function(){},
  33.                 html: function(){}
  34.             })
  35.         });
  36.     </script>
  37. </head>
  38. <body>
  39. </body>
  40. </html>
  43. <div class="md-section-divider"></div>

扩展工具方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             //$.trim是去掉左右空格，现在扩展一个只去左边空格的方法
  13.             $.extend({
  14.                 leftTrim: function(str){
  15.                     //this : 工具方法中 this与$等价
  16.                     return str.replace(/^\s+/g,'');
  17.                 }
  18.             });
  19.             var str = '   hello  ';
  20.             alert('(' + $.leftTrim(str) + ')');
  21.         })
  22.     </script>
  23. </head>
  24. <body>
  25. </body>
  26. </html>
  29. <div class="md-section-divider"></div>

扩展实例方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script src="jquery-1.11.1.js"></script>
  10.     <script>
  11.         $(function(){
  12.             //$('div').size(); 自己实现以下这个size()的功能
  13.             $.fn.extend({
  14.                 size2: function(){
  15.                     //实例方法中：this 相当于调用这个方法的 $('div')
  16.                     return this.length;
  17.                 }
  18.             });
  19.             //extend方法可以扩展多个方法，如果只扩展一个实例方法，也可以写成这样：$.fn.size2 = function(){};
  20.             alert($('div').size2());
  21.         })
  22.     </script>
  23. </head>
  24. <body>
  25.     <div>div1</div>
  26.     <div>div2</div>
  27.     <div>div3</div>
  28. </body>
  29. </html>
  32. <div class="md-section-divider"></div>

选项卡插件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>编写选项卡的插件</title>
  6.     <style>
  7.         #tab div {width: 200px; height: 200px; border: 1px #000 solid; display: none;}
  8.         #tab .active {background: red;}
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         //自定义事件：
  13.         //自定义一个切换前的事件和切换后的事件beforeChange和afterChange
  14.         $(function(){
  15.             //$('#tab').tabs();
  16.             $('#tab').tabs({
  17.                 heads: ['体育', '娱乐', '新闻', '视频'],
  18.                 bodies: ['体育1111', '娱乐123123', '新闻ffff', '视频fffggg'],
  19.                 events: 'mouseover'
  20.             });
  21.             $('#tab').on('beforeChange', function(){
  22.                 alert($('#tab').find('div:visible').html());
  23.             }); //把切换前的div内容弹出来
  24.             $('#tab').on('afterChange', function(){
  25.                 alert($('#tab').find('div:visible').html());
  26.             }); //把切换后的div内容弹出来
  27.         });
  28.         (function($){
  29.             var defaults = {
  30.                 heads: ['1', '2', '3'],
  31.                 bodies: ['1111111', '2222222', '3333333'],
  32.                 events: 'click'
  33.             };
  34.             var settings = {};
  35.             var $parent = null;
  36.             function fnTab(options){
  37.                 $parent = this; //$parent就是#tabs
  38.                 settings = $.extend(settings, defaults, options); //有配置走配置，没配置走默认
  39.                 create();
  40.                 bind();
  41.             }
  42.             function create(){ //创建布局
  43.                 for(var i=0; i<settings.heads.length; i++){
  44.                     var $input = $('<input type="button" value="' + settings.heads[i] + '">');
  45.                     if(i == 0){
  46.                         $input.attr('class', 'active');
  47.                     }
  48.                     $parent.append($input);
  49.                 }
  50.                 for(var i=0; i<settings.bodies.length; i++){
  51.                     var $div = $('<div>' + settings.bodies[i] + '</div>');
  52.                     if(i == 0){
  53.                         $div.css('display', 'block');
  54.                     }
  55.                     $parent.append($div);
  56.                 }
  57.             }
  58.             function bind(){
  59.                 $parent.find('input').on(settings.events, function(){
  60.                     //这里就是改变前beforeChange
  61.                     $parent.trigger('beforeChange');
  62.                     $parent.find('input').attr('class', '');
  63.                     $(this).attr('class', 'active');
  64.                     $parent.find('div').css('display', 'none');
  65.                     $parent.find('div').eq($(this).index()).css('display', 'block');
  66.                     //这里就是改变后的afterChange
  67.                     $parent.trigger('afterChange');
  68.                 })
  69.             }
  70.             $.fn.extend({
  71.                 tabs: fnTab
  72.             })
  73.         })(jQuery);
  74.     </script>
  75. </head>
  76. <body>
  77.     <div id="tab">
  78.         <!-- <input class="active" type="button" value="1">
  79.         <input type="button" value="2">
  80.         <input type="button" value="3">
  81.         <div style="display: block">1111111</div>
  82.         <div>2222222</div>
  83.         <div>3333333</div> -->
  84.     </div>
  85. </body>
  86. </html>

2014年11月1日第八堂课

Sizzle选择器 ★★★

筛选方法 ★

filter()

not()

has()

JQ中的调试 ★

JQ中的模版引擎 ★

单元测试Qunit ★

jQuery Mobile ★

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注