jquery animate函数,jq中animate怎么用 收藏 0

所有jQuery实现动画的方法的总结

有和同行的朋友和同事经常问实现jQuery动画的一些方法，总是喜欢去翻书或者网上找百度手册，在这里，我总结一下，把所有动画方法一一列举出来：

1、基本动画方法：

hide()，show()，fadeIn()，fadeOut()，slideUp()，slideDown()

2、自定义动画方法：

animate()方法，其语法结构为：animate(params,speed,callback);

3、交互动画方法：

语法结构：

toggle(speed,[callback])

slideToggle(speed,[easing],[callback])

fadeTo(speed,opacity,[callback])

fadeToggle(speed,[easing],[callback])

参数说明：params指一个包含样式属性及值的映射；speed指速度参数，可选的；callback指在动画完成时执行的函数

如果大侠有个人建议，欢迎来留言！

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com

前端面试题《JQuery》

$() 函数是 jQuery() 函数的别称，$()函数用于将任何对象包裹成 jQuery对象，接着被允许调用定义在jQuery对象上的多个不同方法。甚至可以将一个选择器字符串传入$()函数，它会返回一个包含所有匹配的DOM元素数组的jQuery对象。这个问题我已经见过好几次被提及，尽管它非常基础，它经常被用来区分一个开发人员是否了解jQuery。

jQuery支持不同类型的选择器，例如ID选择器、class选择器、标签选择器。鉴于这个问题没提到ID和class，可以用标签选择器来选择所有的div 元素。jQuery代码：$(\”div\”)，这样会返回一个包含所有5个div标签的jQuery 对象。

这对于很多java零基础学jQuery的初学者来说是一个棘手的问题，其实是个简单的问题。$(this) 返回一个jQuery对象，你可以对它调用多个 jQuery方法，比如用text()获取文本，用val()获取值等等。而this代表当前元素，它是JavaScript关键词中的一个，表示上下文中的当前DOM元素。你不能对它调用 jQuery方法，直到它被 $() 函数包裹，例如 $(this)。

除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的jQuery版本, 那么它就不会再去下载它一次，因此今时今日，许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库，网站就能有非常好的展示机会。

方法链是对一个方法返回的结果调用另一个方法，这使得代码简洁明了，同时由于只对DOM进行了一轮查找，性能方面更加出色。

可以用 jQuery方法appendTo()将一个HTML元素添加到DOM树中。这是jQuery提供的众多操控DOM的方法中的一个。可以通过appendTo()方法在指定的DOM元素末尾添加一个现存的元素或者一个新的HTML元素。

（1）get()取得所有匹配的DOM元素集合；

（2）get(index)取得其中一个匹配的元素.index表示取得第几个匹配的元素；

（3）append(content)向每个匹配的元素内部追加内容；

（4）after(content)在每个匹配的元素之后插入内容；

（5）html()/html(var)取得或设置匹配元素的html内容；

（6）find(expr)搜索所有与指定表达式匹配的元素；

（7）bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数；

（8）empty()删除匹配的元素集合中所有的子节点；

（9）hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法；

（10）attr(name)取得第一个匹配元素的属性值。

获取页面的元素；修改页面的外观；改变页面大的内容；响应用户的页面操作；为页面添加动态效果；无需刷新页面，即可以从服务器获取信息；简化常见的javascript任务。

jQuery选择器支持CSS里的选择器，jQuery选择器可用来添加样式和添加相应的行为，CSS中的选择器是只能添加相应的样式。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com