课程分类

课程介绍
课程目录
用户评论
课程介绍
课程目录
用户评论

你将获得

  • 掌握某些知识点
  • 学会某些技巧(或思路)

教学服务

  • icon

    1v1专属答疑服务

  • icon

    BAT专家面试辅导

讲师介绍

  • 10以上年编程经验,曾主持并参与多个公司大型项目的开发,前端教学课程研发总监,输送大批学生进入国内一线互联网公司。 资深互联网职业规划咨询师 美国4D团队卓越领导力认证讲师与背景管理转换咨询教练 美国DISC行为风格认证讲师与咨询顾问 职业思维导图认证管理师(MMP)

  • 课程详情

    jQuery是现在最流行的JavaScript工具库。 据统计,目前全世界57.3%的网站使用它。也就是说,10个网站里面,有6个使用jQuery。如果只考察使用工具库的网站,这个比例就会上升到惊人的91.7%。

    因此,经常我们看到一些前端招聘会有这么一条要求

    精通 Javascript,jQuery

    熟悉业界常用Javascript脚本库(如prototype、jQuery、YUI、mootools等),熟悉前端工程化本地化开发解决方案

    熟悉jquery和prototype的JavaScript类库;

    熟悉至少一种JS框架或者对JS语言掌握较深;

    大家看到他们的工资都很高,两眼放光,一看自己的工作经验也符合,可是一看到上面这些话,就无奈的关掉网页或者心虚了。

    因为你大部分时间使用jquery是这样的:

    你们公司的项目需要一个轮播图或者选项卡或者一个功能,你不会写,然后直接百度,恰好发现一个jquery插件可以用,你看了下api文档,然后改了几个参数,功能跑通了,然后你开始审查元素,修改样式,然后你想这个等项目完了,我一定好好研究研究,然后就没有然后了,一不小心两年过去了,似乎自己需要的功能都能从网上找到插件,但是一点都不熟悉jquery更不用说精通了,因为你两年的时间都没有尝试懂它,你只是插件的参数修改工,或者代码搬运工。

    有人会说,不是的老师,我尝试着学了,但是

    我想尝试着写一个插件,却发现不会写,看了几篇文章不知道怎么做,看到有人解读jquery源码,终于下定决心好好看看了,结果一打开源代码就懵圈了,根本看不懂,就那么放弃了。或者一个源码解读视频好几十个,几个月过去了,我还是再等等吧。

    这,像不像工作两三年依旧苦恼的你?

    其实深入jquery的难点不在技术本身,可以说jquery的架构非常清晰,入手起来非常简单,而你学习的拦路虎是:

    1.缺少必要的基础知识铺垫,你懂不懂匿名函数自执行,jquery第一句代码你都看不明白为什么人家那么做。2.缺少系列的体系化的教程,你刚尝试着去模拟别人敲的东西,结果一不小心卡住了,却不明白为什么。3.缺少及时的引导,你卡了两个小时,一晚上过去了信心也没了,这时候如果有个人也许几句话就解决了你的问题。4.缺少信心和正确的学习库方式。一提到源码就觉得很高深学不会,只是大神的专利,我还是学会用吧,然后看文档成为了软件使用者而不是软件开发者。

    好,说了这么多我们就看看自己写一个jquery库,有没有你想想的那么难。

    一、选取DOM元素

    jQuery的核心是通过各种选择器,选中DOM元素,可以用querySelectorAll方法模拟这个功能。

    var $ = document.querySelectorAll.bind(document);

    这里需要注意的是,querySelectorAll方法返回的是NodeList对象,它很像数组(有数字索引和length属性),但不是数组,不能使用pop、push等数组特有方法。如果有需要,可以考虑将Nodelist对象转为数组。

    myList = Array.prototype.slice.call(myNodeList);

    二、DOM操作

    DOM本身就具有很丰富的操作方法,可以取代jQuery提供的操作方法。

     尾部追加DOM元素。

    	 // jQuery写法  (parent).append((child));  // DOM写法  parent.appendChild(child)

    头部插入DOM元素。

      // jQuery写法  $(parent).prepend($(child));  // DOM写法  parent.insertBefore(child, parent.childNodes[0])

    删除DOM元素。

      // jQuery写法  $(child).remove()  // DOM写法  child.parentNode.removeChild(child)

    三、事件的监听

    Element.prototype.on = Element.prototype.addEventListener;

    四、类操作

    jQuery的addClass方法,用于为DOM元素添加一个class。

      $('body').addClass('hasJS');

    DOM元素本身有一个可读写的className属性,可以用来操作class。  

    	HTML 5还提供一个classList对象  document.body.classList.add('hasJS');  document.body.classList.remove('hasJS');  document.body.classList.toggle('hasJS');  document.body.classList.contains('hasJS');

    简要的说了一下,自己写jquery库的一些技术解决方案,哪个东西大家看不懂呢?所以并不是你不努力或者学不会,而是你学习方式和学习的内容不妥当,

    通过我一上午的讲解,然后下午已经能够简单的实现一个jquery库了,然后在实际项目中不断完善和实用它,那么你手里也会有一个精巧的jquery库,而且是自己写的,这个时候你还会因为熟悉至少一种JS框架或者对JS语言掌握较深对着好的工作机会望而却步吗?

    给自己一个机会,只要一天,也许你的工作状态和人生会因此而改变,

    微信:leolau2012(加请注明学习)

    期待你的进步。

    温馨提示
    • 请勿私下交易
      请勿在平台外交易。与机构和老师私下交易造成的任何损失及纠纷,腾讯课堂不承担任何责任
    • 听课说明

      1、电脑:访问腾讯课堂官网 ke.qq.com 查看我的课表或下载win/mac客户端听课

      2、手机/平板:下载腾讯课堂APP, 进入学习页面听课