大家好,这里是「 从零开始学 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:貌似颜色不能动画。