tongsiying

阅读|运动|自律

0%

第40篇：jquery

发表于 分类于
本文字数： 27k 阅读时长 ≈ 24 分钟

一、jquery介绍

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。

jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

1
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

jquery的口号和愿望 Write Less, Do More（写得少，做得多）

1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载

二、jquery的特点：

1
2
3
1.jQuery 是一个 JavaScript 库。
2.jQuery 极大地简化了 JavaScript 编程。
3.jQuery 很容易学习。

三、查找元素

1. 选择器

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
基本选择器
$("div").css("color","red")
$("*").css("color","red")
$("#p1").css("color","red")

$(".outer").css("color","red")

$(".inner,p,div").css("color","red")


层级选择器
$(".outer p").css("color","red")
$(".outer>p").css("color","red")
$(".outer+p").css("color","red")
$(".outer~p").css("color","red")

基本筛选器
$("li:first").css("color","red")
("li:eq(0)").css("color","red") //序号
$("li:gt(2)").css("color","red") //大于
$("li:even").css("color","red") //偶数
$("li:lt(2)").css("color","red") //小于

属性选择器
$("[alex='sb'][id='p1']").css("color","red")

表单选择器
$("[type='text']").css("width","200px")
$(":text").css("width","400px")

2. 筛选器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
筛选器
$("li").eq(2).css("color","red");
$("li").first().css("color","red");
$("li").last().css("color","red");

查找筛选器
$(".outer").children("p").css("color","red");
$(".outer").find("p").css("color","red");

$("li").eq(2).next().css("color","red");
$("li").eq(2).nextAll().css("color","red");
$("li").eq(2).nextUntil("#end").css("color","red");

$("li").eq(4).prev().css("color","red");
$("li").eq(4).prevAll().css("color","red");
$("li").eq(4).prevUntil("li:eq(0)").css("color","red");

console.log($(".outer .inner p").parent().html())
(".outer .inner p").parents().css("color","red");
(".outer .inner p").parentsUntil("body").css("color","red");

实例：模态对话框

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            height: 1800px;
        }
        .shade{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            opacity: 0.5;
        }
        .model{
            width: 200px;
            height: 200px;
            background-color: bisque;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="content">
    <button onclick="show(this)">show</button>kjdksnakdnaskldsdkldladksladdkaldadkal
</div>
<div class="shade hide"></div>
<div class="model hide">
    <button onclick="cancel(this)">cancel</button>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script>
    function show(self) {
        $(self).parent().siblings().removeClass('hide');
    }
    function cancel(self) {
        // $(self).parent().addClass('hide');
        // $(self).parent().prev().addClass('hide');
        // $(self).parent().parent().children('.model,.shade').addClass('hide');
        $(self).parent().prev().addClass('hide').next().addClass('hide');
    }

</script>
</body>
</html>

实例：层次菜单

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.1.js"></script>
    <style>
        .outer{
            height: 1000px;
            width: 100%;
        }
        .menu{
            float: left;
            background-color: #a47e3c;
            width: 30%;
            height: 500px;
        }
        .content div{
            float: left;
            height: 500px;
            background-color: #0077cc;
            width: 70%;
            display: none;
        }
        .item .title{
            background-color: #4cae4c;
            line-height: 40px;
        }
        .hide{
            display: none;
        }
        .content .active{
            display: block;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this)">菜单一</div>
            <div class="con current">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜单二</div>
            <div class="con next hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜单三</div>
            <div class="con next1 hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>
    </div>
    <div class="content" id="contents">
        <div class="active">tab文字内容一</div>
        <div>tab文字内容二</div>
        <div>tab文字内容三</div>
        <div>tab文字内容四</div>
        <div>tab文字内容五</div>
        <div>tab文字内容六</div>
        <div>tab文字内容七</div>
        <div>tab文字内容八</div>
        <div>tab文字内容九</div>
    </div>

    <script>
        function show(self) {
            $(self).next().slideDown().parent().siblings().children('.con').slideUp();
            // $(self).next().removeClass('hide');
            // $(self).parent().siblings().children('.con').addClass('hide');
            // $('#contents div').eq($(self).parent().index()).addClass('active').siblings().removeClass('active');
        }
        $('.item .current div').click(function () {
            $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
        });

        $('.item .next div').click(function () {
            $('#contents div').eq($(this).index()+3).addClass('active').siblings().removeClass('active');
        });

        $('.item .next1 div').click(function () {
            $('#contents div').eq($(this).index()+6).addClass('active').siblings().removeClass('active');
        });

        // function show1(self) {
        //     $(self).next().removeClass('hide');
        //     $(self).parent().siblings().children('.con').addClass('hide');
        //     $('#contents div').eq($(self).parent().index()+3).addClass('active').siblings().removeClass('active');
        // }
        // function show2(self) {
        //     $(self).next().removeClass('hide');
        //     $(self).parent().siblings().children('.con').addClass('hide');
        //     $('#contents div').eq($(self).parent().index()+6).addClass('active').siblings().removeClass('active');
        // }
    </script>
</div>
</body>
</html>

四、操作元素

1. 属性操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();

--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])

--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])

---------------------------
$("").css("color","red")
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
<script>
    console.log($('.div1').hasClass('fei'));
    console.log($('.div1').attr('con'));
    console.log($('.div1').attr('con','c2'));

    console.log($(':checkbox:first').attr('checked'));
    console.log($(':checkbox:last').attr('checked'));

    console.log($(':checkbox:first').prop('checked'));
    console.log($(':checkbox:last').prop('checked'));

    console.log($('div').prop('con')); //定制属性
    console.log($('div').prop('class')); //固有属性

    console.log($('#id1').html());
    console.log($('#id1').text());
    console.log($('#id1').html('<h1>zhang</h1>'));
    console.log($('#id1').text('<h1>zhang</h1>'));

    console.log($(':text').val()); //必须是固有属性
    console.log($(':text').next().val());
    console.log($(':text').val('789'));

    $('#id1').css({'color':'red','background-color':'blue'});
</script>

2. CSS操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
CSS
        $("").css(name|pro|[,val|fn])
        
    位置
        $("").offset([coordinates])
        $("").position()
        $("").scrollTop([val])
        $("").scrollLeft([val])
        
    尺寸
        $("").height([val|fn])
        $("").width([val|fn])
        $("").innerHeight()
        $("").innerWidth()
        $("").outerHeight([soptions])
        $("").outerWidth([options])
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
        }
        .div1,.div2{
            width: 200px;
            height: 1000px;
        }
        .div1{
            border: 6px solid #ffff00;
            padding: 10px;
            margin:2px;
            background-color: #4cae4c;
        }
        .div2{
            background-color: #0077cc;
        }
        .outer{
            position: relative;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="outer">
<div class="div2"></div>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script>
    //相对于视口的偏移量
    console.log($('.div1').offset().top);
    console.log($('.div1').offset().left);

    console.log($('.div2').offset().top);
    console.log($('.div2').offset().left);
    //相对于已定位父级的偏移量
    console.log($('.div1').position().top);
    console.log($('.div1').position().left);

    console.log($('.div2').position().top);
    console.log($('.div2').position().left);

    // console.log($('body').scrollTop())
    console.log($('.div1').height('300'));
    console.log($('.div1').innerHeight()); //包括padding
    console.log($('.div1').outerHeight()); //包括border和padding
    console.log($('.div1').outerHeight(true)); //包括border和padding和margin

</script>
</body>
</html>

3. 文档处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//创建一个标签对象
    $("<p>")

//内部插入
    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入
    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除
    $("").empty()
    $("").remove([expr])

//复制
    $("").clone([Even[,deepEven]])
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c1">
    <p>ppppp</p>
</div>
<button>add</button>
<script src="js/jquery-3.1.1.js"></script>
<script>
    $('button').click(function () {
        // $('.c1').append('<h1>hello</h1>');
        var $ele = $('<h1></h1>');
        $ele.html('hello world');
        $ele.css('color','red');
        //内部插入
        // $('.c1').append($ele);
        // $ele.appendTo('.c1');
        // $('.c1').prepend($ele);
        // $ele.prependTo('.c1');
        // 外部插入
        // $('.c1').after($ele);
        // $ele.insertAfter('.c1');
        // $('.c1').before($ele);
        //替换
        // $('p').replaceWith($ele);
        //删除与清空
        // $('.c1').empty();
        // $('.c1').remove();
        //复制
        var $ele1 = $(self).clone();
        $('.c1').after($ele1);

    })
</script>
</body>
</html>

克隆练习：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="outer">
    <div class="item">
        <button onclick="add(this)">+</button>
        <input type="text">
    </div>
</div>

<script src="js/jquery-3.1.1.js"></script>
<script>
    function add(self) {
        var $clone = $(self).parent().clone();
        $clone.children('button').text('-').attr('onclick','remove(this)');
        $('.outer').append($clone);
    }
    function remove(self) {
        $(self).parent().remove();
    }
</script>
</body>
</html>

实例：全反选

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<button onclick="selectall()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>
<hr>
<table border="1px;">
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
    </tr>
</table>

<script>
    function selectall() {
        $(':checkbox').each(function () {
            $(this).prop('checked',true);
        })
    }
    function cancel() {
        $(':checkbox').each(function () {
            $(this).prop('checked',false);
        })
    }
    function reverse() {
        $(':checkbox').each(function () {
            $(this).prop('checked',!$(this).prop('checked'));
            // if($(this).prop('checked')==false){
            //     $(this).prop('checked',true);
            // }
            // else{
            //     $(this).prop('checked',false)
            // }
        })
    }
</script>
</body>
</html>

实例：左侧菜单

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.1.js"></script>
    <style>
        .outer{
            height: 1000px;
            width: 100%;
        }
        .menu{
            float: left;
            background-color: #a47e3c;
            width: 30%;
            height: 500px;
        }
        .content div{
            float: left;
            height: 500px;
            background-color: #0077cc;
            width: 70%;
            display: none;
        }
        .item .title{
            background-color: #4cae4c;
            line-height: 40px;
        }
        .hide{
            display: none;
        }
        .content .active{
            display: block;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this)">菜单一</div>
            <div class="con current">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜单二</div>
            <div class="con next hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜单三</div>
            <div class="con next1 hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>
    </div>
    <div class="content" id="contents">
        <div class="active">tab文字内容一</div>
        <div>tab文字内容二</div>
        <div>tab文字内容三</div>
        <div>tab文字内容四</div>
        <div>tab文字内容五</div>
        <div>tab文字内容六</div>
        <div>tab文字内容七</div>
        <div>tab文字内容八</div>
        <div>tab文字内容九</div>
    </div>

    <script>
        function show(self) {
            $(self).next().slideDown().parent().siblings().children('.con').slideUp();
            // $(self).next().removeClass('hide');
            // $(self).parent().siblings().children('.con').addClass('hide');
            // $('#contents div').eq($(self).parent().index()).addClass('active').siblings().removeClass('active');
        }
        $('.item .current div').click(function () {
            $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
        });

        $('.item .next div').click(function () {
            $('#contents div').eq($(this).index()+3).addClass('active').siblings().removeClass('active');
        });

        $('.item .next1 div').click(function () {
            $('#contents div').eq($(this).index()+6).addClass('active').siblings().removeClass('active');
        });

        // function show1(self) {
        //     $(self).next().removeClass('hide');
        //     $(self).parent().siblings().children('.con').addClass('hide');
        //     $('#contents div').eq($(self).parent().index()+3).addClass('active').siblings().removeClass('active');
        // }
        // function show2(self) {
        //     $(self).next().removeClass('hide');
        //     $(self).parent().siblings().children('.con').addClass('hide');
        //     $('#contents div').eq($(self).parent().index()+6).addClass('active').siblings().removeClass('active');
        // }
    </script>
</div>
</body>
</html>

五、事件

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
页面载入
    ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
    $(document).ready(function(){}) -----------> $(function(){})

事件处理
    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

    //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
    //  $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
    //  click事件；

    [selector]参数的好处:
        好处在于.on方法为动态添加的元素也能绑上指定事件；如：

        //$('ul li').on('click', function(){console.log('click');})的绑定方式和
        //$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个
        //li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的

        //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
        //li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件
    
    [data]参数的调用:
             function myHandler(event) {
                alert(event.data.foo);
                }
             $("li").on("click", {foo: "bar"}, myHandler)
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.1.js"></script>
<script>
    //1.页面加载
    // $(document).ready(function () {
    //     $('ul li').html(6);
    // });
    // $(function () {
    //     $('ul li').html(666);
    // });
    //2.事件绑定简写
    $(function () {
        $('li').click(function () {
        alert('666666');
    });
    // $('li').unbind('click');
    // $('ul li').bind('click',function () {
    //     alert('666666');
    // })
    $('button').click(function () {
            var $ele=$('<li>');
            var len=$('ul li').length;
            $ele.html((len+1)*111);
            $('ul').append($ele);
    })

    //3.事件委托
    $('ul').on('click','li',function () {
        alert('666666');
    })
    });
</script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<button>add</button>

</body>
</html>

实例：返回顶部-滑轮滚动监听事件

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <style>

        .div2{
            width: 100%;
            height: 1000px;
        }
        .div1{
            border: 6px solid #ffff00;
            padding: 10px;
            margin:2px;
            width: 40%;
            height: 150px;
            overflow: scroll;
            background-color: #4cae4c;
        }
        .div2{
            background-color: #0077cc;
        }
         .returnTop{
             position: fixed;
             right: 20px;
             bottom: 20px;
             width: 90px;
             height: 50px;
             background-color: gray;
             color: white;
             text-align: center;
             line-height: 50px;
         }
         .hide{
             display: none;
         }

    </style>
</head>
<body>
<div class="div1">
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
</div>
<div class="div2">
    <button onclick="returnTop()">return</button>
</div>
<div class="returnTop hide" onclick="returnTop()">返回顶部</div>
<script src="js/jquery-3.1.1.js"></script>
<script>
    window.onscroll=function () {
        console.log($(window).scrollTop());
        if($(window).scrollTop()>100){
            $('.returnTop').removeClass('hide');
        } else{
            $('.returnTop').addClass('hide');
        }
    };
    // function returnTop() {
    //     // $(window).scrollTop(0);
    //     $('.div1').scrollTop(0);
    // }
    $('.div2 button').click(function () {
        $('.div1').scrollTop(0);
    })

</script>
</body>
</html>

六、动画效果

1. 显示隐藏

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>hello</div>
<button onclick="show()">显示</button>
<button ONCLICK="hide()">隐藏</button>
<button onclick="qiehuan()">切换</button>

<script src="js/jquery-3.1.1.js"></script>
<script>
    function show() {
        $('div').show(1000);
    }

    function hide() {
        $('div').hide(1000,function () {//回调函数：动画效果完成之后会触发
            alert('隐藏了！')
        });
    }
    function qiehuan() {
        $('div').toggle(1000);
    }
</script>
</body>

</html>

2. 滑动

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function(){
     $("#slideDown").click(function(){
         $("#content").slideDown(1000);
     });
      $("#slideUp").click(function(){
         $("#content").slideUp(1000);
     });
      $("#slideToggle").click(function(){
         $("#content").slideToggle(1000);
     })
  });
    </script>
    <style>

        #content{
            text-align: center;
            background-color: lightblue;
            border:solid 1px red;
            display: none;
            padding: 50px;
        }
    </style>
</head>
<body>

    <div id="slideDown">出现</div>
    <div id="slideUp">隐藏</div>
    <div id="slideToggle">toggle</div>

    <div id="content">helloworld</div>

</body>
</html>

3. 淡入淡出

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.1.js"></script>
    <script>
    $(document).ready(function(){
   $("#in").click(function(){
       $("#id1").fadeIn(1000);


   });
    $("#out").click(function(){
       $("#id1").fadeOut(1000);

   });
    $("#toggle").click(function(){
       $("#id1").fadeToggle(1000);


   });
    $("#fadeto").click(function(){
       $("#id1").fadeTo(1000,0.4);

   });
});



    </script>

</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>

</body>
</html>

七、扩展方法

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
<script>
    
$.extend(object)      //为JQuery 添加一个静态方法。
$.fn.extend(object)   //为JQuery实例添加一个方法。


    jQuery.extend({
          min: function(a, b) { return a < b ? a : b; },
          max: function(a, b) { return a > b ? a : b; }
        });
    console.log($.min(3,4));

//-----------------------------------------------------------------------

$.fn.extend({
    "print":function(){
        for (var i=0;i<this.length;i++){
            console.log($(this)[i].innerHTML)
        }

    }
});

$("p").print();
</script>
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>111</p>
<p>222</p>
<p>333</p>
<script src="js/jquery-3.1.1.js"></script>
<script>
    //jquery调用方法
    // $.each(obj,function () {
    //
    // });
    // $('').each(function () {
    //
    // });
    $.extend({
        Myprint:function () {
            console.log('hello')
        }
        });
    $.Myprint();
    jQuery.extend({
          min: function(a, b) { return a < b ? a : b; },
          max: function(a, b) { return a > b ? a : b; }
        });
    console.log($.min(3,4));

    $.fn.extend({
        get_text:function () {
           // for(var i=0;i<this.length;i++){
           //     console.log(this[i].innerHTML)
           // }
           $.each($(this),function (x,y) {
                // console.log(y.innerHTML)
                console.log($(y).html())
            })
        }
    });
    $('p').get_text();
</script>
</body>
</html>

实例：轮播图

猛击下载 轮播图

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<style>
    body{
        background-color: black;
    }
    .main{
        position: relative;
        width: 1000px;
        height: 400px;
        overflow: hidden;
        margin: 100px auto;
    }
    .main ul.img li{
        position: absolute;
        top: 0;
        left: 0;
        list-style: none;
    }

    .main ul li img{
        width: 1000px;
        height: 400px;
    }
    .main .dom{
        position: absolute;
        bottom: 20px;
        left: 340px;
        /*width: 200px;*/
        list-style: none;
    }
    .main .dom li{
        display: inline-block;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: white;
        margin-left: 40px;
        text-align: center;
        line-height: 18px;
        opacity: 90%;
        cursor: pointer;
    }
    .btn{
        display: none;
        background-color: lightgray;
        position: absolute;
        top: 40%;
        width: 30px;
        height: 60px;
        cursor: pointer;
        color: white;
        font-size: 30px;
        text-align: center;
        line-height: 60px;
        opacity: 0.7;
    }
    .left{
        left: 0px;
    }
    .right{
        right: 0px;
    }
    .main:hover .btn{
        display: block;
    }
    .main ul.dom .active{
        background-color: red;
    }
    .hide{
        display: none;
    }
</style>
<body>
<div class="main">
    <ul class="img">
        <li><a href=""><img src="images/beijing3.png" alt=""></a></li>
        <li class="hide"><a href=""><img src="images/beijing2.png" alt=""></a></li>
        <li class="hide"><a href=""><img src="images/beijing1.png" alt=""></a></li>
        <li class="hide"><a href=""><img src="images/xiaomen.png" alt=""></a></li>
    </ul>
    <span class="btn left"><</span>
    <span class="btn right">></span>
    <ul class="dom">
        <!--<li class="active"></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
    </ul>
</div>

<script src="jQuery/js/jquery-3.1.1.js"></script>
<script>

    //通过jquery自动创建按钮标签
    var img_num = $('.img li').length;
    for(var i=0;i<img_num;i++){
        $('.dom').append('<li></li>');
    }
    $('.dom li').eq(0).addClass('active');

    //手动轮播
    var num = 0;
    $('.dom li').mouseover(function () {
        num = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        // $('.img li').eq(index).show().siblings().hide();
        // $('.img li').eq(index).fadeIn(1000).siblings().fadeOut(1000);
        $('.img li').eq(num).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    })

    //自动轮播
    var clock = setInterval(auto_play,3000);
    function auto_play() {
        if (num==img_num-1){
            num=-1;
        }
        num++;
        $('.dom li').eq(num).addClass('active').siblings().removeClass('active');
        $('.img li').eq(num).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    }
    function play_L() {
        if (num==0){
            num=img_num;
        }
        num--;
        $('.dom li').eq(num).addClass('active').siblings().removeClass('active');
        $('.img li').eq(num).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    }

    //鼠标悬浮
    $('.main').hover(function () {
        clearInterval(clock);
    },function () {
        clock = setInterval(auto_play,3000);
    });

    //button加定播
    $('.right').click(auto_play);
    $('.left').click(play_L);

</script>
</body>
</html>
相关文章推荐
赞赏一下吧～