学习jQeury的整理

当勉强能够写静态页面的时候,我便很着急地直接学习DOM了,那时甚至都不知道Javascript的基础语法。《DOM编程艺术》用了几页简单介绍了一下JS,我一看,这不跟C++很像吗?(后来知道真相的我眼泪掉下来,一个巨大的坑)。反正就是直接用上getElementById这些了,然而每次获取一个节点都需要写老长一段代码,当时就想代码就不能短一点吗? <!--more--> 直到开始学习jQuery的时候,才发现这!简!直!酷!炫!顾名思义,jQuery的查找方法非常强大。下面是学习的时候做的一点笔记,主要是关于前面的基础知识,至于Ajax和Jquery插件我打算单独写篇文章。总结的并不完善,参考jquery官方文档

1. 脑图笔记

jquery学习笔记

2. 锋利的jquery学习笔记

层次选择器中+ ~比较少用的原因

使用$(".one").next("div")代替$(".one + div"); 使用$(".one").nextAll("div")代替$(".one ~ div")

注意选择器中空格是使用

有空格 在后代中寻找 无空格 在同类中筛选

filter()与find()

filter()相当于把一长串过滤选择器的条件单独作为其参数了,结果是一样的,即对指定对象集合进行过滤,过滤的是当前对象 find()是在指定对象集合下进行查找,寻找的是子元素

is()方法的使用

是判断调用该方法的对象是否符合其参数(一个筛选器),如果如何返回true,多用做判断语句中

区分部分过滤选择器索引值

eq(),gt(),lt(),even(),odd()等方法的索引值从0开始 nth-child()索引值从1开始

区分删除节点的三种方法

remove(),删除调用对象及其所有子对象,所有事件/附加数据消失,返回该对象,可通过传参选择删除对象 detach(),同上,但保留事件及附加数据 empty()并非删除元素,而是清空该元素。

children()、next()和prev()

children()只返回第一代子元素节点,而不会考虑其他后代节点及非元素节点。 next()与prev()方法返回的只是紧邻的那一个元素节点

几个关于位置坐标的方法

offset()返回left和top相对于当前视窗的偏移 position()相对于最近的定位祖先的偏移,这两个方法都有自己的属性left和top crollTop()/scrollLeft()滚动条顶端及左端距离

合成事件hover和toggle

hover事件模拟鼠标移入及移出 toggle模拟鼠标点击并按顺序执行事件处理函数

event.which()

事件为鼠标时 1:鼠标左边/2:中键/3:右键 事件为键盘时 按键的名称

动画回调函数的作用

将不能进入动画队列的方法放入回调函数,形成队列的伪效果。

stop()方法及其两个参数

无参数:只会停止当前正在执行的动画任务 第一个参数:true清空包括正在执行的与尚未执行的全部动画队列 第二个参数:使正在执行的动画直接达到结束时刻的状态,通常用于后一个动画需要基于前一个动画的末状态时才使用,注意的是只是针对于当前执行的动画末状态而非整个动画队列的末状态

stop()与is(":animated")

stop常用于解决光标移入移出得过快导致的动画效果与光标动作不一致“问题! is("animated")常用于”连续点击上/下一张按钮,只响应用户第一次点击动作“时使用。

attr()与prop()的区别

只添加属性名该属性就生效则使用prop(); 值存在true/false的属性应该使用prop(); 官方的说法是:如果设置的是disabled和checked这些属性应该使用prop方法,否则在某些浏览器下会出现BUG

3. 最后

众多前辈都说到,jQuery只是一个库,并不能完全依赖,归根结底还是要回到JS上面,因此我打算研究一下jQuery的源码,可是现在的JS功底烂的一塌糊涂,加油吧。目前能做的就是谨遵教诲,用好jQuery。

《计算机科学导论》读书笔记 HTML标签