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

大家都能看懂的大前端(二)

培训


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


jquery

选择器 $()

使用选择器 选择 dom

使用情景

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

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

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

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

使用选择器 实例 dom

使用情景

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

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

使用"选择器"控制流程

使用情景

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

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

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

事件 event

使用on绑定事件

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

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

使用off解除绑定事件

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

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

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

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

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

常用操作

$.fn / $.prototype 常用操作

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

$ 常用操作

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

问题:遇到不熟悉的函数提供了回调(callback),又不知道会给几个参数怎么办?

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

问题:页面上的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>
  14. </body>
  15. </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>
  11. <script>
  12. // js放置在页面最底部,代码解析到这里时,其上元素皆已经在栈内
  13. $('body').css('background','#000');
  14. </script>
  15. </body>
  16. </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>
  21. </body>
  22. </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>
  12. <script>
  13. var list = [];
  14. $.ajax({
  15. url:'第一个接口',
  16. data:{
  17. list:[1,2,3,4,5]
  18. },
  19. success:function(res){
  20. list = res.data.list;
  21. }
  22. });
  23. $.ajax({
  24. url:'第二个接口',
  25. data:{
  26. newList:list
  27. },
  28. success:function(res){
  29. console.log(res.data.newList);
  30. }
  31. });
  32. </script>
  33. </body>
  34. </html>

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

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

  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>
  12. <script>
  13. var list = [];
  14. $.ajax({
  15. url: '第一个接口',
  16. data: {
  17. list: [1, 2, 3, 4, 5]
  18. },
  19. success: function (res) {
  20. list = res.data.list;
  21. $.ajax({
  22. url: '第二个接口',
  23. data: {
  24. newList: list
  25. },
  26. success: function (res) {
  27. console.log(res.data.newList);
  28. }
  29. });
  30. }
  31. });
  32. </script>
  33. </body>
  34. </html>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注