从零开始学 Web 之 jQuery(三)元素操作,链式编程,动画方法

一、使用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:貌似颜色不能动画。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术墨客

React学习(4)——深入说明JSX与props

我们可以将JSX理解为React.createElement(component, props, ...children)方法的语法糖。JSX的代码:

7720
来自专栏老马寒门IT

04-老马jQuery教程-DOM节点操作及位置和大小

DOM时代我们通过document的createElement方法动态创建标签。创建标签后,动态的给他添加属性。例如代码:

23300
来自专栏Golang语言社区

GO-字符串常用操作

package main import ( "fmt" "strconv" "strings" ) func ma...

38370
来自专栏Unity Shader

Shader初学笔记:简单参数传入随机颜色

float4 vertex : POSITION;

505120
来自专栏老马寒门IT

03-老马jQuery教程-DOM操作(上)

在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索。目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作...

23200
来自专栏Golang语言社区

Go语言创建、初始化数组的各种方式

//数组初始化的各种方式 func arraySliceTest0201() { //创建数组(声明长度) var array...

43270
来自专栏gaoqin31

jQuery源码浅析

如果说php是世界上最好的语言,那么javascript无疑可以称为世界上最飘逸的语言,最近看了下jQuery的源码,实现了一个简陋的jQuery。我觉得要看懂...

24330
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaWeb02-CSS,JS(Java真正的全栈开发)

? css&javascript 一.CSS 1.CSS介绍 CSS 指层叠样式表 (Cascading Style Sheets),用来定义网页的显示效果。...

482150
来自专栏程序员的知识天地

JavaScript学习笔记

【如果大家对程序员,web前端感兴趣,想要学习的,关注一下小编吧。加群:731771211。免费赠送web前端系统的学习资料!!前端学习必备公众号ID:mtbc...

26920
来自专栏Golang语言社区

go语言数组的拷贝

go语言的数组与c语言的数据有一点不太一样的地方,go语言的赋值是值拷贝 package main import "fmt" func main...

42590

扫码关注云+社区

领取腾讯云代金券