源栈培训:前端:JQuery

更多
2019年05月14日 08点45分 作者:叶飞 修改
第一印象
        $(document).ready(function () {           // 起手式
            $("p").click(function () {            // 选择器和事件
                $(this).hide();                   // 常用封装
            })
        });

贡献和特色

十余年来最流行的(没有之一)JavaScript库!
  • 完美解决浏览器兼容问题(cross-browser)
  • 强大的选择器
  • 方便的Ajax调用
  • 常用方法封装(toggle/hide/animate……)
  • 一些新颖独特的语法/书写模式(链式调用)
  • 大量第三方插件(plugin)的支持(JQuery UI, mobile UI, bootstrap, Vue……)


引入JQuery

jquery.min.js:JavaScript压缩

复习:什么是CDN?

注意顺序,首先是JQuery,然后才是基于JQuery的第三方插件


选择器和JQuery对象

通过selector返回的是JQuery对象不是一个DOM元素,而类似于集合:[] 和 get()

ES6的selectQuery其实是借鉴的JQuery selector,但ES6的querySelector()避免了$('')[0]的麻烦

复习:

  • 标签 / 类 / Id:'tagName' / '.className' / '#Id'
  • 属性:含有 / 值等于(不等于/以...开头/结尾)
  • 位置::first / :last / :even / :odd /
  • input::input / :submit / :text ……
  • 组合:, > +~

取不到jquery对象不会报错……

书写惯例:JQuery对象的变量以$开头


遍历

祖先 :parent() / parents() / parentsUntil()

后代 :children() / find()

同胞 :siblings() / next() / prev()

过滤 :first() / last() / eq() / filter() / not()

思考:有了CSS选择器,为什么还需要遍历?


DOM操作

内容属性:text()、html() 以及 val(),注意回调函数

添加元素:apprend() / prepend() / before() / after()

删除元素:remove() / empty()


---------------------


兼容性问题:window.onscroll和document.body.onscroll

$('[href]').filter('[href!=""]')[0]

https://api.jquery.com/parents/ : reverse oder


---------------------


CSS

addClass() / removeClass() / toggleClass()

css()


JQuery效果

hide()/show()/toggle()

淡入淡出:fade...()

滑动:slide

自定义动画:animiate


事件

事件绑定在JQuery对象上,所以可以一次绑定多个DOM元素

ready():保证所有DOM元素加载完毕

on()和off(),以及简写:click()/ change()/keypress()……:

  • 不支持事件捕获
  • event正常使用
  • $(this)更好用


其他方法

静态:$.trim()/$.isNumeric()/……

.data(name):取属性中data-name的值

noConflict()


其他

试着学习阅读源代码


参考

W3School:http://www.w3school.com.cn/jquery/index.asp

JQuery官网:https://api.jquery.com/


作业点评

  • viewport
  • *的调试技巧
  • 用属性用属性
  • 需求文档?
  • 命名规范啊!
  • 测试用例
  • if...else... 整理
  • DOM和JS运算的分离

作业点评

  • function声明放$("document").ready()外面
  • function里面一般不套事件
  • 不要使用带域名的完整路径
  • jquery的attr()

作业点评

  • 数组下标越界
  • 混淆了原生JavaScript和JQuery
源栈 JavaScript JQuery
赞: 0 踩: 0

打赏
已收到打赏的 帮帮币

你的 打赏 非常重要!
为了保证文章的质量,每一篇文章的发布,都已经消耗了作者 1 枚 帮帮币
没有“帮帮币”,作者无法发布新的文章。

全系列阅读
评论 / 0
叶飞的系列文章

源栈培训:ASP.NET全栈开发

飞哥的源栈培训:线上全程直播,免费收看;线下拎包入住,按周计费。本系列收录所有讲义(含视频录播地址)

编程那些事:菜鸟入门

大飞哥倾力之作,面向有意入行IT/开发/编程的初学者,欢迎任何形式的留言建议……

从包工头到程序猿

真实故事,讲述我在家装公司关门之后,如何转行成为一个程序猿的故事。(《折腾》第三卷)

《折腾》(卷一)青涩

时间段:从大学毕业到开始创业。离开青葱校园,涉世之初的那些往事……

《折腾》(卷二)风雨 之(1)工地

我一个完全的门外汉(无论装修还是管理),开始给黎叔装修房子。从踌躅满志,到四处碰壁;从一往直前,到左右为难……

《折腾》(卷二)风雨 之(2)胸怀

作为一个律师,接工程没签合同,被狠狠的坑了一把!年轻人暴烈的想要复仇,黎叔教他一个企业家的胸怀……

《折腾》(卷二)风雨 之(3)渠道

成立了公司,招聘了员工,开始大力的拓展业务,一个接一个的坑,摔倒了又爬起来……

《折腾》(卷二)风雨 之(4)视野

经历残酷现实的磨砺,终于明白:干啥事,都不能闭门造车,人要走出去,开阔视野……

未分类

系统自动生成的未分类系列

一锅大杂烩

从律师到包工头,从码农到写手,读书交友生活创业,各种零零碎碎,乱七八糟……

人人都是程序猿

计算机编程普及课程,视频:https://space.bilibili.com/55410301/#/channel/detail?cid=49491

全部
关键字



帮助

反馈