jQuery(爱前端)

一 jQuery 简介

官网:www.jquery.com

口号:写更少的代码,做更多的事情

jQuery 是一个快速、小型的、特性很多的JS库,它把很多事儿都变得简单。jQuery是免费的、开源的。

jQuery 是 DOM 编程领域的霸主,极大的简化了原生 JavaScript 的 DOM 编程

jQuery 中含有丰富的轮子,完美解决了选择元素难、样式难、动画难、批量操作难等各种兼容问题,

让工程师只需要思考业务,而不必思考细枝末节的兼容问题

 

jQuery有两条版本线:1.X、2.X

 jQuery 2.X 和 1.X 的功能完全一致,API完全一致,但是 2.X 不兼容 IE6、7、8

下载的时候有两个选择:

 

 二 jQuery 整体感知

2.1 选择器

$() 函数就是 jQuery 的核心函数,query 就是选择的意思,也就是说 jQuery的核心招牌功能就是选择元素:

$("#box ul li.haha span").css("background-color","red");

语法: $(“选择器”)

可以用 jQuery来代替,jQuery 是同一个函数: 

jQuery("#box ul li.haha span").css("background-color","red");

2.2 样式

 得到样式(得到计算后的样式):$(".box").css("width");

设置样式: 语法  $(“选择器”).css(JSON);

2.3 动画 

jQuery 内部含有一个运动框架    animate 函数

2.4 批量添加监听、节点关系

 

三 jQuery 

3.1 $() 函数

jQuery 对象不是原生 JS  对象 

$("选择器") 选择出来的东西,是一个类数组对象,是 jQuery 自己的对象,这个 jQuery 对象后面不能跟着原生 JS 的语法:

 $("#box").style.backgroundColor = "red";

因为 .style.backgroundColor 是原生JS语法,$() 原则的对象是 jQuery 对象,不能跟着原生 

 jQuery 对象,转为原生 JS 对象

 

3.2 引号问题

$(‘选择器‘)  

注意引号不能丢!!在jQuery世界中,只有三个东西不能加引号,其他必须加引号:

 

3.3 支持的选择器

jQuery 支持所有的 css2.1 的选择器

也支持部分 css3 的选择器

3.4 筛选器

特别的,eq 可以单独提炼为方法,可以连续打点: 

提炼出来的好处是,可以用变量

 

3.5 css 函数

css 函数可以读样式,可以设样式(所有的数值,不需要单位)

读样式,可以读取计算后样式,写一个参数,是不是驼峰,无所谓,但是必须加引号

 

特别的,还支持 += 写法: 

3.5 animate 函数

有没有缓冲呢,有,jQuery 需要插件来完成,我们日后说。

jQuery 默认不是匀速,是easeInOut

jQuery默认有一个处理机制,叫做动画排队。当一个元素接收到了两个 animate 命令之后,后面的animate会排队

先1000毫秒横着跑,然后1000毫秒竖着跑。动画总时长2000。

如果想让元素斜着跑,就是同时变化 left 和 top,就写在同一个 JSON 里面:

不同的元素,不排队,是同时的

 

3.6 事件监听

jQuery颠覆了我们的行文习惯:

事件名一律不写 on。特别的,鼠标进入改成了 mouseenter,鼠标离开改为了mouseleave。

 

四 序与迭代

4.1 eq() 方法

看结构: 两个并列盒子 .box1 和 .box2 中都有 5 个小盒子 div

想让 .box2 中的第二个盒子背景变绿

$(‘.box2>p:eq(1)‘).css(‘backgroundColor‘,‘green‘);
$(‘p‘).eq(6).css(‘backgroundColor‘,‘green‘);
$(‘.cur‘).eq(2).css(‘backgroundColor‘,‘green‘);
$(‘.box2>.cur‘).eq(0).css(‘backgroundColor‘,‘green‘);

注释不同选择器下对应的下标

$() 函数返回的是一组元素,每个方法比如 css 方法内部都有 for 循环迭代 

 4.2 index() 方法

返回这个元素在亲兄弟中的排名,无视选择器怎么选

$(this).index() 是一个很常见的写法,表示触发这个事件的元素,在自己亲兄弟中的排名

点击上一排 div 中的 p, 下一排对应序号的 p 变色

 

强调一下,是 index() 方法,而不是属性!

 4.3 each()

each() 表示遍历节点,也叫作迭代符合条件的节点

$(‘p‘) 调用 each() 方法,同样的设置,对比 i $(this).index() 效果

4.4 size() 方法 和 length 属性

表示 jQuery 对象中元素的个数

 

五 动画相关

5.1 内置  show() , hide(), toggle()

特别的,如果show()、hide()、toggle()里面有数值,将变为动画

 也可以加回调函数

 

5.2 slideDown(), slideUp, slideToggle()方法

以上分别是:下滑展开,上滑收回,滑动切换

slideDown() 的起点一定是 display:none 换句话说,只有 display:none 的元素,才能够调用 slideDown()

同样的,slideDown、slideUp、slideToggle 里面可以写动画时间回调函数

动画机理:

一个 display:none 的元素,瞬间显示,瞬间高度变为 0,然后 jQuery 自己捕捉原有的 height 设置为动画的终点

下拉菜单: li > a + div

  mouseenter 事件应该添加在 li 上,而不是 a 上,添加在 a 上,则不能选择到下拉框中的内容

  div 的位置应该贴着 li 元素,不能有缝隙,因为缝隙不属于 li 的范围,也会选择不到下拉框中的内容

  如果想要有缝隙,下拉框再套一个盒子,用 padding 表示缝隙

 

$(this).find(‘div‘).slideDown(200); 

5.3 fadeIn(), fadeOut, fadtTo(), fadeToggle() 方法

以上分别是:淡入, 淡出,淡到一定值,淡入淡出切换

 动画机理:

一个 display:none 的元素,瞬间可见,然后瞬间变为 opacity:0,往自己的 opacity 上变。

如果没有设置 opacity,就往1变。

 fadeTo() 有三个参数,第一个参数是动画的时间,第二个参数是要变到的透明度,第三个参数是回调函数 

 fadeTo的起点不一定是 display:none;

 IE6、7、8 兼容,不用关心 filter 这个东西了,jQuery已经帮你写了兼容

 

jQuery 呼吸轮播

图片部分遮盖案例(有文字):

  遮盖元素设置 opacity: 0.5;  文字的透明度也会改变。处理: 文字写到其他元素中

 

5.4 stop()

语法 :stop( 是否清除队列, 是否瞬间完成当前动画 )

如果没有写 true 或者 false,默认是 false

$("div").stop( true ).animate({"left":100},1000);

5.5 finish()

finish()  瞬间完成所有动画队列

$("div").finish();

 

手风琴案例:

ul > li*5 直接用 width 的变化来设置,动画时,最右侧可能会出现空白区域

用定位来做:每个元素鼠标 hover 时 left 到固定位置,其它元素也移动到固定位置

5.6 delay()

delay延迟,可以使用连续打点,必须放在运动语句之前

 

 

 5.7  is(‘:animated‘)

is() 方法表示身份探测,返回 true, false

判断是否在运动中,可以防止动画的积累:

和之前的 stop(),不一样,动画正在进行,立即停止手上的动画,执行新的命令

 

六 节点关系

6.1 原生 JS 中的 nodeType 属性

任何的 HTML 元素,都有nodeType属性,值有1~11,老师为大家精简到了5个:

1    元素节点
3文本节点
8注释节点
9document 节点
10DTD

 

 

 

 

 

6.2 原生 JS 中的节点关系  childNodes 

有兼容性问题,chrome, ie9, ie10... 高级浏览器会把空格换行等看成文本节点

ie 6, 7, 8 不会

document.getElementById(“box”).childNodes.length;  //高级浏览器 9,低级浏览器 4

怎么解决这个差异呢?

其它:

firstChild / lastChild

元素.parentNode

previousSibling / nextSibling

  

 

相关文章