[关闭]
@hotjp 2018-01-20T16:01:25.000000Z 字数 6619 阅读 1188

大家都能看懂的大前端（二）

培训

最后更新日期: 2018-01-20

jquery

选择器 $()

使用选择器 选择 dom

使用情景

将类css语法的字符串放在$()中

示例
  1. // 单元示例
  2. $('div')
  4. // 返回类名为 classname1 的所有元素集合
  5. $('.classname1')
  7. // 返回 id 为 id1 的第一个元素集合
  8. $('#id1')
  10. // 返回 类名为class2的父元素中包含类名为class1的元素集合
  11. $('.class1 .class2')
  13. <div class=".class1">
  14.     <div>
  15.         <div class="class2"></div>
  16.         <div class="class2">
  17.             <div class="class2"></div>
  18.         </div>
  19.     <div>
  20. </div>
  23. // 返回 直接父级节点 直接父级节点 直接父级节点 类名为class的span元素集合
  24. $('.class>span')
  26. // 返回name为value的元素集合
  27. $('[name=value]')
  29. <div name="value">
  30.     <input name="value">
  31.     <input name="value">
  32. </div>
  34. // 同上原理可以
  35. $('[data-name=value]')
  36. <div data-name="value">
  37.     <input data-name="value">
  38.     <input data-name="value">
  39. </div>
  41. // 也有这种操作
  43. // 返回匹配集合第一个
  44. $('div:first')
  46. // 返回匹配集合最后一个
  47. $('div:last')
  49. // 返回匹配集合索引为奇数的集合
  50. $('div:even')
  52. // 返回匹配集合索引为偶数的集合
  53. $('div:odd')

除了上面列出来的还有很多的 操♂作，可自行查阅sizzle的文档

选择器的执行思路是从右向左，$('body div p span')选择器会遍历出所有span之后遍历查找父级为p元素的然后依次直到body，所以就写得短一点，或者增加唯一度较高的classname或者id

使用选择器 实例 dom

使用情景

将需要实例的html字符串放在$()中

示例
  1. // 单元示例
  2. $('<div></div>')
  4. // 错误,非自闭合标签需要完整书写否则有ie8-的兼容问题
  5. $('<div>')
  7. var dialogHtml= '' +
  8.       '<div class="ecGoodsDialog" style="display:none;">' +
  9.       '<div class="ecDialog">' +
  10.       ' <div class="title">生成商品链接 <span>(全程电商平台接口)</span>' +
  11.       '    <a class="close" id="close" href="javascript:;">x</a>' +
  12.       '  </div>' +
  13.       '<input class="baseUrl" id="baseUrl" type="text" placeholder="电商主站根目录地址,不要漏掉最后的斜线,例：http://emall.jerei.com/">' +
  14.       '  <a class="validateUrl" id="validateUrl" href="javascript:;">验证地址</a>' +
  15.       '<hr>' +
  16.       '  <div class="goodsOpt">' +
  17.       '    <input class="baseUrl" id="ecKeyword" type="text" placeholder="要查找的商品名称">' +
  18.       '      <a class="validateUrl sort" href="javascript:;">筛选商品</a>' +
  19.       '      <div class="goodsList">' +
  20.       '        <ul>' +
  21.       '        </ul>' +
  22.       '        <a class="getMore" href="javascript:;">获取更多</a>'+
  23.       '      </div>' +
  24.       '  </div>' +
  25.       '  </div>' +
  26.       '</div>';
  28. // 实例dom
  29. var foo = $(dialogHtml);
  31. foo.on('click','.getMore',function(){alert(点击了获取更多)})
  32. $('body').append(foo);
  34. foo.on('click','.getMore',function(){alert(获取更多)})
  35. foo.find('.validateUrl').on('click',function(){alert(验证)})

使用"选择器"控制流程

使用情景

利用jquery提供的函数缩写完成需求

示例
  1. // 单元示例
  2. $(function(){
  3.     ...
  4. })
  6. // 完整含义
  8. $(document).ready(function(){
  9.     ...
  10. })
  12. // 约等于
  14. window.onload = function(){
  16. }

so,各位自己按需选择咯。某些十分特殊的情况下可能会需要两种混用，不要忘记先后顺序

事件 event

使用on绑定事件

jquery 1.7.0开始引入on方法，低版本可以使用live方法，详细的请自行查阅文档，浏览器内置的常用事件列表可以看看w3school

  1. // 写法
  2. $(...).on([event name],[selector],[callback]);
  3. $(...).on([event name],[callback]);
  5. // 示例
  6. // 事件将在a元素click事件冒泡至#foo时执行
  7. $('#foo').on('click','a',function(){
  8.     ...
  9. });
  11. // 事件将在click #foo时执行
  12. $('#foo').on('click',function(){
  13.     ...
  14. });

使用off解除绑定事件

jquery 1.7.0开始引入off方法，低版本可以使用die方法，详细的请自行查阅文档

  1. // 写法
  2. $(...).off([event],[selector],[callback]);
  3. $(...).off([event],[callback]);
  5. // 示例
  6. // 将解绑#foo元素上对a元素的侦听
  7. $('#foo').off('click','a',function(){
  8.     ...
  9. });
  11. // 将解绑#foo元素上的事件侦听
  12. $('#foo').on('click',function(){
  13.     ...
  14. });

使用on,off控制事件的好处

相对于 $(...).click(); $(...).hover(); 等方式更推荐使用on, off的原因是可控性强，风格一致，容易维护

  1. // 给同一个元素绑定相同事件时可以进行事件命名
  2. $(...).on('click.foo1',function(){});
  3. $(...).on('click.foo2',function(){});
  5. // 在适当的时机可以解除某一个特性事件的绑定
  6. $(...).off('click.foo1');
  8. // 当然也可以一次性全部解绑
  9. $(...).off('click');
  1. // 来点刺激的，绑定自定义事件
  2. $('body').on('randomEvent',function(event,callback){
  3.     console.log('执行自定义事件')
  5.     callback(Math.random())
  6. })
  8. $('body').trigger('randomEvent',function(num){
  9.     console.log(num)
  10. })
  12. // 计算body的面积（参数传递的示例）
  13. $('body').on('area',function(event,num1,num2,callback){
  14.     console.log('元素的面积是：')
  15.     callback(num1 * num2)
  16. })
  17. $('body').on('click',function(){
  18.     $('body').trigger('area',[$(this).width(),$(this).height(),function(area){
  19.         console.log(area)
  20.     }])
  21. })

常用操作

$.fn / $.prototype 常用操作

  1. // 获取某个表单元素的value值
  2. $(...).val()
  4. // 获取某个标签元素的文本,过滤掉标签
  5. $(...).text();
  7. // 获取某个元素内的html字符串
  8. $(...).html();
  10. // 将一段html字符串追加到页面中，触发dom渲染
  11. $(...).html(htmlStr)
  13. // 在元素内部最后追加
  14. $(...).append(htmlStr);
  16. // 在元素内部最前面追加
  17. $(...).prepend(htmlStr);
  19. // 在元素前面追加
  20. $(...).before(htmlStr);
  22. // 在元素后面追加
  23. $(...).after(htmlStr);
  25. // 增加classname
  26. $(...).addClass(str);
  28. // 删除classname
  29. $(...).removeClass(str);
  31. // 遍历jquery对象
  32. $(...).each(callback);

$ 常用操作

  1. // 合并对象b到a里
  2. $.extend(a,b);
  4. // 合并对象a、b赋值给c
  5. var c = $.extend({},a,b);
  7. // 去除字符串前后空格
  8. $.trim('    abc    ');
  10. // xhr请求
  11. $.ajax(options);
  13. // 遍历对象
  14. // 
  15. $.each(obj,[callback]);

问题：遇到不熟悉的函数提供了回调（callback）,又不知道会给几个参数怎么办？

  1. function(){
  2.     console.log(arguments);
  4.     // 看arguments结构比较迷茫？试试这个，将arguments伪数组转成数组就可以直观的看到收到的参数啦
  5.     console.log([].slice.call(arguments))
  6. }

问题：页面上的js不执行

问题多见于在jsp或者ftl页面中使用include等方法拆分模板后

页面最终

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <script src="./js/jquery-1.11.0.js"></script>
  9.   <script>
  10.     $('body').css('background','#000');
  11.   </script>
  12. </head>
  13. <body>
  15. </body>
  16. </html>

文档是自上而下解析，所以我们的$('body')在代码执行时尚不存在

解决方法是我们的开发思路也保持单线程或者巧妙地利用‘回调’

1.在元素存在的时候操作元素

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <script src="./js/jquery-1.11.0.js"></script>
  9. </head>
  10. <body>
  13.     <script>
  14.     // js放置在页面最底部，代码解析到这里时，其上元素皆已经在栈内
  15.         $('body').css('background','#000');
  16.     </script>
  17. </body>
  18. </html>

2.利用回调

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <script src="./js/jquery-1.11.0.js"></script>
  9.   <script>
  10.     //   1.jquery的dom载入完成的回调（时机好,可多次使用）
  11.     $(function(){
  12.         $('body').css('background','#000');
  13.     });
  14.     //   2.原生的页面载入完成的事件（时机晚，不能重复声明）
  15.     window.onload = function(){
  16.         $('body').css('background','#000');
  17.     };
  18.   </script>
  19. </head>
  20. <body>
  23. </body>
  24. </html>

问题：两个需要从后台获取数据的接口数据需要相互使用

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <script src="./js/jquery-1.11.0.js"></script>
  9.   <script src="./js/fakeAjax.js"></script>
  10. </head>
  11. <body>
  13.   <script>
  14.     var list = [];
  15.     $.ajax({
  16.       url:'第一个接口',
  17.       data:{
  18.         list:[1,2,3,4,5]
  19.       },
  20.       success:function(res){
  21.         list = res.data.list;
  22.       }
  23.     });
  24.     $.ajax({
  25.       url:'第二个接口',
  26.       data:{
  27.         newList:list
  28.       },
  29.       success:function(res){
  30.         console.log(res.data.newList);
  31.       }
  32.     });
  33.   </script>
  34. </body>
  35. </html>

第二个接口需要第一个接口返回的list数据，两个并行的异步函数使得功能难以实现的时候有一个解决方案

将数据的依赖关系搞清楚，b需要a，那就让a先返回结果在执行b，让b放置在a的回调中

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <script src="./js/jquery-1.11.0.js"></script>
  10.   <script src="./js/fakeAjax.js"></script>
  11. </head>
  13. <body>
  15.   <script>
  16.     var list = [];
  17.     $.ajax({
  18.       url: '第一个接口',
  19.       data: {
  20.         list: [1, 2, 3, 4, 5]
  21.       },
  22.       success: function (res) {
  23.         list = res.data.list;
  24.         $.ajax({
  25.           url: '第二个接口',
  26.           data: {
  27.             newList: list
  28.           },
  29.           success: function (res) {
  30.             console.log(res.data.newList);
  31.           }
  32.         });
  33.       }
  34.     });
  36.   </script>
  37. </body>
  39. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注