VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > JavaScript教程 >
  • WEB前端第四十四课——jQuery框架(二)常用方法

1.css()方法

  用于更改 jq对象的css样式,本方法可读可写,相当于 js中的 style属性

    语法:$("选择器") .css("key", "value");

  css()方法的第二个参数为可选参数,

    如果只有第一个参数,就是读取样式;

    如果有两个参数或JSON样式参数就是设置样式。

  示例,var $w=$("div").css("width");

     console.log(parseInt($w));  //读取 jq对象尺寸的返回值包含单位,使用数字时需要转换。

  注意,书写css属性名时可以使用“驼峰”格式,也可以使用“横杠”格式;

     当css属性的值是以“px”为计量单位的数值时,可以不写px单位,写px时必须加引号!

  特性,jq中css样式的宽度和高度可以直接在原值的基础上累加,示例如下:

     $("div").css("width", "+=400px");  //可以配合监听事件使用

2.show()和hide()

  show(),用于设置元素的显示,相当于 style中的 display:block;

  hide(),用于设置元素的隐藏,相当于 style中的 display:none;

    语法:$("选择器").show(timeValue) || hide(timeValue);

  两种方法都可以设置参数,用于定义显示和隐藏的动画效果时间。

 

  这两种方法可以配合“toggle()”方法使用,可以方便的实现元素的切换,包括显示/隐藏切换和内容切换。

    语法:$("点击元素").toggle(function(){

        $("选择器").show(timeValue);

        $("选择器").html(“textContent”);

       },

       function(){

        $("选择器").hide(timeValue);

       });

    toggle()方法内可以绑定多个事件处理函数,以响应被选元素的轮流的 click事件,

    另外,还可以定义时间和效果参数(字符串),实现动画效果,但toggle()方法在高版本中已取消。

 

  代码示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="jQueryFiles/jquery-1.8.3.js"></script>
</head>
<body>
    <button>显示Div元素</button>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
<script>
    var d1=$(".div1");
    var d2=$(".div2");
    var d3=$(".div3");
    $("button").click(function () {
        d1.css({"width":200,"height":"200px",backgroundColor:"gold"});
        d2.css({"width":200,"height":"200px",backgroundColor:"gray"});
    });
//  给div1添加鼠标进入、离开和点击事件
    var colorArr=["red","yellow","blue","green","orange","indigo","purple","brown"];
    d1.bind({
        mouseenter: function () {
            $(this).animate({
                width:100,height:100,
                "backgroundColor":"hotpink",
                borderRadius:"50%",
            },1000).css({                     //链式声明
                "backgroundColor":"hotpink",
                "border":"2px solid white"
            });   //不支持animate()方法??
        },
        click:function () {
            var i=Math.floor(Math.random()*8);
            $(this).css("backgroundColor",colorArr[i]);     //获取随机背景颜色
        },
        mouseleave:function () {
            $(this).animate({
                "width":200,"height":"200px",
                borderRadius:"0",
            },1000).css({
                backgroundColor:"gold",
            });
            $(this).off("mouseenter");      //去除事件
        }
    });
//  给div2添加鼠标悬停
//    定义hover事件中的 in事件
    d2.hover(function () {
            $(this).animate({
                "width":100,"height":"100px",
            },1000).css({                       //链式声明
                "backgroundColor":"yellowgreen",
                "border""2px solid darkorange",
                "cursor":"pointer",
            });
            d3.css({
                "backgroundColor":"red",
                "width":"100px","height":"100px",
                "borderRadius":"50%",
                "position":"absolute",
                "display":"none",
                "left":d2[0].offsetLeft+d2[0].offsetWidth+1+"px",
                "top":d2[0].offsetTop+2+"px",
            });
    //      在hover的in事件中定义click事件
            $(this).click(function () {     //存在问题:1.连续快速点击后,目标元素会一直移动停不下来?2.点击事件会逐次累加导致多次移动?
                d3.show(2000)                       //动画显示
                    .animate({"left":"+=500px",       //定义left属性的自增效果
                },1000);
                console.log(d3[0].offsetLeft);
                console.log(d3[0].offsetTop);
            });
        },
//      定义hover事件中的out事件
            function () {
                d3.animate({"left":d2[0].offsetLeft+d2[0].offsetWidth+1+"px"},2000);
                d3.hide(1000);      //动画隐藏
            })
</script>
</body>
</html>

3.slideDown()和slideUp()

  slideDown(),表示下拉显示,当元素的 style属性为“display:none”时,才能调用 slideDown()方法;

    语法:$("选择器").slideDown(timeValue);

  slideUp(),表示上滑隐藏,当元素为显示的时候,才能调用 slideUp()方法,

    语法:$("选择器").slideUp(timeValue);

  这两种方法都可以定义“时间”参数,实现动画效果,即使不设置时间参数也会有较短的动画效果。

  注意,两种方法存在一个隐藏的属性“边界”,即下拉开始和上滑结束的位置, 默认是元素的上边框;

     可以通过“定位”的方式来设置 jq对象的边界属性,改变动作开始和结束位置。

  对于连续快速操作导致动画一直执行的现象称作“动画积累”,可以通过“stop()”方法解决这一问题。

    stop(),用于停止所有在指定元素上正在运行的动画,如果队列中有等待执行的动画(并且

        clearQueue没有设为 true),他们将被马上执行。

        语法:$("选择器").stop(true||false);

        参数为true,表示清空队列(立即结束动画),

        默认为false,表示立即完成正在执行的动画,同时重设show和hide原始样式,调用回调函数等

4.fadeIn()和fadeOut()

  这两种方法表示淡入、淡出效果。

  语法:$("选择器").fadeIn(timeValue);

     $("选择器").fadeOut(timeValue);

  注意,fadeIn()的起点和fadeOut()的终点都是“display:none”,而不是“opacity:0”。

     也就是说一个元素如果想实现淡入,一定要设置“display:none”属性,而不是“opacity:0”属性。

  代码示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示&隐藏</title>
    <script src="jQueryFiles/jquery-1.8.3.js"></script>
    <style>
        button{display:block;margin: 0px auto;letter-spacing: 2px;}
        .div1{
            width: 100px;height: 200px;background-color: orangered;
            margin:0px auto;
        }
        .div2{
            width: 100px;height: 300px;border: 1px solid fuchsia;
            margin:0px auto;position: relative;
        }
        .div3{
            width: 100px;height: 200px;background-color: deepskyblue;
            bottom:0px;position: absolute;
        }
    </style>
</head>
<body>
    <button>Div操作</button>
    <div class="div1"></div>
    <div class="div2" style="display: none">
        <div class="div3"></div>
    </div>
<script>
    var $d1=$(".div1");
    var $d2=$(".div2");
    var $d3=$(".div3");
    var $btn=$("button");
    $btn.toggle(function () {
        $d1.hide(3000);     //隐藏元素
        $(this).html("显示Div1");
        $d2.fadeIn(3000);       //淡入元素
    },function () {
        $d1.show(3000);     //显示元素
        $(this).html("隐藏Div1");
        $d2.fadeOut(3000);     //淡出元素
    });
    $d2.hover(function () {
        for (var i=0;i<5;i++){
            $d3.slideUp(1000).slideDown(1000);     //滑出&滑入元素
        }
    },function () {
        $d3.stop();     //立即完成正在执行的动画
    })
</script>
</body>
</html>

  ps:上述示例中的滑入&滑出的“重复动画效果”,可以通过“from…to…”关键字实现。

5.addClass()和removeClass()

  这两种方法用于“追加类”和“移除类”。

  语法:$("选择器").addClass("className");  //追加类名,不改变已有类名

     $("选择器").removeClass("className");  //删除指定类名,不影响其他类名

     ※ className前不需要加“点号”!!!

  ps:可以通过增加和删除类名,操作元素样式。

6.attr()方法

  在原生 js中通过类似如下方式修改元素属性:

    document.getElementById("#pic").src="newUrl";

  在 jQuery中使用 attr()方法“读写”元素的属性值。

    语法:$("选择器").adttr("key", "value");

  当 attr()方法只有一个参数时,表示“读取”元素的属性。

    语法:$("选择器").adttr("property");

7.html()方法

  用于“读写”元素内部的内容,相当于原生 js中的“innerHTML”。

    语法:$("选择器").html("textContent");

  当 html()方法中不写参数时表示“读取”元素的内容。

 出处:https://www.cnblogs.com/husa/p/13682233.html


相关教程