大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 微信公众号：Web前端之巅
- 博客园：http://www.cnblogs.com/lvonve/
- CSDN：https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
一、使用css操作元素样式
1、常规写法
$("#dv").css("width", "200px");$("#dv").css("height", "100px");$("#dv").css("background", "red");2、链式写法
$("#dv").css("width", "200px").css("height", "100px").css("background", "red");3、键值对写法
var json = {"width":"200px", "height":"100px"; "backgroundColor":"red"};$("#dv").css(json);二、链式编程
1、什么是链式编程？
对象在调用方法后可以继续调用方法，直到天荒地老。
2、语法
对象.方法().方法().方法().......3、条件
链式编程的前提：对象调用方法后的返回值还是当前对象，那么就可以继续调用方法，否则不可以继续调用方法。
4、经验
在 jQuery 中，一般情况下，对象调用方法，如果这个方法是设置某个属性的话（方法有参数是设置属性的值），那么返回值几乎都是当前对象，就可以继续链式编程。
示例：
$("#dv").css("width","10px").val("haha").css("height":"20px");三、使用类样式操作元素样式
1、添加类样式
语法：
$("#dv").addClass("类选择器");如果需要应用多个类样式，可以使用链式编程或者在一个addClass中写两个类选择器，中间用空格隔开。
// 链式编程$("#dv").addClass("类选择器1").addClass("类选择器2");// 或者$("#dv").addClass("类选择器1 类选择器2")2、移除类样式
语法：
// 链式编程$("#dv").removeClass("类选择器1").removeClass("类选择器2");// 或者$("#dv").removeClass("类选择器1 类选择器2")3、判断是否采用类样式
语法：
// 链式编程$("#dv").hasClass("类选择器1").hasClass("类选择器2");// 或者$("#dv").hasClass("类选择器1 类选择器2")4、切换类样式
语法
$("#dv").toggleClass("类选择器");判断是否应用类选择器，如果没应用就添加，应用了就移除。
注意：
1、addClass, removeClass, toggleClass 方法不管有没有参数，返回值都是调用其的对象，都可以链式编程。
2、使用 CSS 方式是不能添加和移除类样式的。
四、动画相关方法
1、第一组
// 参数1：时间（有两种写法：1. 1000ms，2. "normal","slow","fast"）// ???????normal: 相当于400ms，slow：600ms，fast：200ms// 参数2：函数（在动画执行完成之后调用）show(参数1，参数2);hide(参数1，参数2);示例：
<script> ???$("#btn1").click(function () { ???????$("#dv").hide("slow", function () { ???????????alert("hide"); ???????}); ???}); ???$("#btn2").click(function () { ???????$("#dv").show("slow", function () { ???????????alert("show"); ???????}); ???});</script>2、第二组
// 参数和 show hide 一样slideDown() // 显示sildeUp() ??// 隐藏slideToggle(); // 隐藏和显示切换示例：
<script> ???$("#btn1").click(function () { ???????$("#dv").slideUp("slow", function () { ???????????alert("hide"); ???????}); ???}); ???$("#btn2").click(function () { ???????$("#dv").slideDown("slow", function () { ???????????alert("show"); ???????}); ???});</script>3、第三组
// 参数和hide show一样fadeIn(); ?// 显示fadeOut(); // 隐藏fadeToggle(); // 隐藏和显示切换// 参数1：时间// 参数2：需要到达的透明度值（比如：0.2）fadeTo(参数1，参数2)示例：
<script> ???$("#btn1").click(function () { ???????$("#dv").fadeOut("slow", function () { ???????????alert("fadeOut"); ???????}); ???}); ???$("#btn2").click(function () { ???????$("#dv").fadeIn("slow", function () { ???????????alert("fadeIn"); ???????}); ???});</script>4、综合方法
// 一般三个参数// 参数1：css键值对，属性集合// 参数2：时间，单位ms// 参数3：回调函数animate({...}, 1000, function (){...})示例：
<script> ???$("#btn1").click(function () { ???????$("#dv").animate({"width":"100px","height":"50px"}, 3000, function () { ???????????console.log("第一步"); ???????}).animate({"width":"1000px","height":"200px"}, 3000, function () { ???????????console.log("第二步"); ???????}).animate({"width":"300px","height":"150px"}, 3000, function () { ???????????console.log("第三步"); ???????}); ???});</script>PS：貌似颜色不能动画。
从零开始学 Web 之 jQuery（三）元素操作，链式编程，动画方法
原文地址：https://www.cnblogs.com/lvonve/p/9277386.html