jquery动画

jQuery常用技巧

 ̄綄美尐妖づ 提交于 2019-11-26 09:09:51
Attribute: $(”p”).addClass( css 中定义的样式 类 型); 给某个元素添加样式 $(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值,参数是map $(”img”).attr(”src”,”test.jpg”); 给某个元素添加属性/值 $(”img”).attr(”title”, function() { return this.src }); 给某个元素添加属性/值 $(”元素名称”).html(); 获得该元素内的内容(元素,文本等) $(”元素名称”).html(”<b>new stuff</b>”); 给某元素设置内容 $(”元素名称”).removeAttr(”属性名称”) 给某元素删除指定的属性以及该属性的值 $(”元素名称”).removeClass(”class”) 给某元素删除指定的样式 $(”元素名称”).text(); 获得该元素的文本 $(”元素名称”).text(value); 设置该元素的文本值为value $(”元素名称”).toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式 $(”input元素名称”).val(); 获取input元素的值 $(”input元素名称”).val(value);

Web前端基础(14):jQuery基础(一)

眉间皱痕 提交于 2019-11-25 16:56:06
1. jQuery概述 1.1 为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件。 代码容错性差。 浏览器兼容性问题。 书写很繁琐,代码量多。 代码很乱,各个页面到处都是。 动画效果很难实现。 jQuery的出现,可以解决以上问题。 1.2 什么是jQuery jQuery是一个JavaScript框架。它兼容CSS3,还兼容各种浏览器。文档说明很全,应用详细,成熟插件多。 jQuery2.0及后续版本不再支持IE6/7/8浏览器 核心概念是write less,do more(写的更少,做的更多)。 1.3 jQuery相关资料 关于jQuery的相关资料: 官网: http://jquery.com/ 官网API文档: http://api.jquery.com/ 汉化API文档: http://www.css88.com/jqapi-1.9/ 1.4 jQuery的第一个代码 用原生js来实现下面代码效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px;

Web前端基础(16):jQuery基础(三)

ⅰ亾dé卋堺 提交于 2019-11-25 16:55:16
1. jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的、有规律的效果;同时还提供给我们了自定义动画的功能。 1.1 显示动画 方式一: $("div").show(); 无参数,表示让指定的元素直接显示出来。其实这个方法的底层就是通过 display: block; 实现的。 方式二: $('div').show(3000); 通过控制元素的宽高、透明度、display属性,逐渐显示,2秒后显示完毕。 方式三: $("div").show("slow"); 参数可以是: slow 慢:600ms normal 正常:400ms fast 快:200ms 和方式二类似,也是通过控制元素的宽高、透明度、display属性,逐渐显示。 方式四: //show(毫秒值,回调函数; $("div").show(5000,function () { alert("动画执行完毕!"); }); 动画执行完后,立即执行回调函数。 总结: 上面的四种方式几乎一致:参数可以有两个,第一个是动画的执行时长,第二个是动画结束后执行的回调函数。 1.2 隐藏动画 方式参照上面的show()方法的方式。如下: $(selector).hide(); $(selector).hide(1000); $(selector).hide("slow"); $(selector)