02.jquery常见方法010-jq02课堂笔记

1、目录jQuery 框架1目录2一、复习上次课的内容3二、序与迭代82.1 eq()方法82.2 index()方法92.3 each()92.4 size()方法和 length 属性112.5 get()方法11三、动画相关方法123.1 内置 show()、hide()、toggle()方法123.2 slideDown()、slideUp()、slideToggle()方法错误!未定义书签。3.3 fadeIn()、fadeOut()、fadeTo()、fadeToggle()方法错误!未定义书签。3.4 stop()错误!未定义书签。3.5 finish()错误!未定义书签。3.6 d

2、elay()错误!未定义书签。3.7 is(:animated)错误!未定义书签。四、节点关系错误!未定义书签。4.1原生 JS 中 nodeType 属性错误!未定义书签。4.2原生 JS 中的节点关系-childNodes错误!未定义书签。4.3原生 JS 中的节点关系-parentNode错误!未定义书签。4.4 previousSibling、nextSibling错误!未定义书签。一、复习上次课的内容$函数一定要加引号，只有没有引号。$(“#box”)是 jQuery 对象，而不是 JS 原生对象。加0就能转为原生对象这里补充一点，jQuery 选择的如果是很多元素，那么0转化的是一

3、个元素。1、2、3$函数和 jQuery 是同名函数，选择器和筛选器选择器 css2.1 支持，也支持部分 css3 的选择器。筛选器，写在引号里面，用:当做筛选的功能符。1$(div:)2$(div:last)1jQuery(#box);$(#box)0.styackgroundColor = red;$(#box)1.styackgroundColor = red;$(#box)2.styackgroundColor = red;1$(#box)0.styackgroundColor = red;1$(this)2$()3$(window)1$(#box).css(background-c

4、olor,red);先解决大家一个疑惑：工作的时候用原生 JavaScript 写效果，还是 jQuery？这是一个伪命题，原生 JS 开发效果，也会用一些简化编程。关心的上层业务，而不是底层的一些苟且（比如浏览器兼容、获得计算样式啥的）。所以，你会发现，即使用原生 JS 写效果，也编写了 putedStyle()、animate()函数，已经相当于把 JS 的纯底层的复杂性“”掉了。所以公司如果因为各种理由不用 jQuery（比如觉得 jQuery 尺寸大，影响页面速度），那么一定也会使用 JS，或者其他类似 jQuery的东西。你会发现 jQuery 没有为简化业务，轮播图该写逻辑还是写逻

5、辑，只不过一些事情方便了。所以，赶紧好好学习 jQuery，好好学习原生，好好学习逻辑，好好学习具体业务。特别的 eq 能单独提炼为方法：1$(div).eq(3).css(background,red);3$(div:eq(0)4$(div:lt(4)5$(div:gt(3)$(div:odd)$(div:even)css()方法css 函数用来、设置元素的 css 样式。可以计算后的样式的。的时候一个参数，就是 k设置的时候：可以用 JSON 来简化：特别的，可以有+=写法：animate()方法对象打点调用 animate 方法，就能让这个对象运动：你要记住这个事情，background

6、-color 是不能渐变的。页面上如果想要使用 background-color 的过渡效果，慢慢从红色变为蓝色，必须使用 css3。jQuery 中提供了非常牛逼的动画队列功能，相同元素的 animate()方累积1$(div).animate(width:600,1000);$(div:odd).animate(json,1000,function()$(this).css(background-color,red)3);1$(this).css(width,+=10px);var json = background-color : red,3width : 40,4height : 60

7、567$(div:odd).css(json);1$(div:eq(2).css(background-color,red);2$(div:eq(2).css(width,40px);3$(div:eq(2).css(height,60);1$(div:eq(5).css(width)不同元素的动画是同时进行的：此时没有 on 的1$(div:even).click(function()2$(this).animate(width:600,2000);3);1$(div:eq(0).animate(width:600,1000);2$(div:eq(1).animate(height:600,

8、1000);2$(div).animate(height:200,1000);有一个高度来看 jQuery，就是你一定要悟出来一个事儿：jQuery 中所有的东西，都是批量的。并且不用写 for 循环语句：凭什么它这么牛逼。$()函数返回的是一组元素，每个方法比如 css 方法内部都有 for 循环迭代。说白了，不是没有 for 循环只不过for 循环隐藏到 css()方法里面了、隐藏到 animate()方法里面了、隐藏到了 click()方法里了。1$(div).css(background,red);/设置样式是批量的2$(div).animate(width:300,4000); /设

9、置动画是批量的3$(div).click(function();/设置事件是批量的二、序与迭代2.1 eq()方法来看下面的结构，两个 div 中各自有 4 个p，让其中一个 p 变红：现在想选择 box2 里面的 1 号下标的 p：$()函数将返回一个对象队列，用 eq 来精确选择这个序列中的某个元素。到底 eq 几是这个元素呢？仰赖$()的序列是什么。1$(.box2 p).eq(1)2$(p).eq(5)3$(.teshu).eq(3)4$(.box2 .teshu).eq(1)125红1011122.2 index()方法返回这个元素在亲兄弟中的排名，无视选择器怎么选。$(this).

10、index()是一个很常见的写法，表示触发这个事件的元素，在自己亲兄弟中的排名：对应：点击 box1 里面的 p，让对应的 box2 里面的 p 变红：最后强调一下，是 index()方法，而不是属性！2.3 each()each()表示遍历节点，也叫作迭代符合条件的节点。each()语句就好比派出一个侦察兵，挨家挨户去敲门，敲开门之后做什么事情，写在 function()里面，这里面的$(this)表示敲开门的这家。1$(p).each(function(i)2$(this).animate(width:50 * i,1000);3);/事件要给 box1 中的所有 p，$(.box1 p)

11、.click(function()/有变化的是 box2 中对应的 p$(.box2 p).eq($(this).index().css(background-color,red);5);$(.teshu).click(function()alert($(this).index();3)$(“p”)选择了页面上的所有的 p，现在想分别为这个 p 设置不同的动画终点。那么 each 语句就很好用，会依次遍历所有的 p，$(this)表示你现在正在遍历的 p。2.4 size()方法和 length 属性jQuery 对象中元素的个数。前面$()的元素页面上一共有几个，length、size()返

12、回的都是同一个数值，就是个数。2.5 get()方法get()方法和 eq()方法基本一致，都仰赖$()的序列。eq()返回的是 jQuery 对象，而 get()返回的是原生 JS 对象。jQuery 对象后面要跟着 jQuery 方法，原生对象后面要跟着原生属性、方法：等价于：等价于：1$(p).eq(2)0.innerHTML = ;1$(p).get(2).innerHTML = ;1$(p).eq(2).html();1$(p).length2$(p).size()三、动画相关方法昨天学习了 animate()方法，很好用，继续深入学习的动画相关方法。3.1 内置 show()、hide()、toggle()方法show()显示、hide()隐藏、toggle()切换特别的，如果 show()、hide()、toggle()里面有数值，将变为动画：此时 display:none;的元素，将从左上角展开。动画机理：这个 display:none;的元素会变为显示的，然后瞬间将宽度、高度、opacity 设为 0，然后展开。甚至可以加回调函数：原来如此！语法就是表示这个参数可选。1$(d