FØund404
0%

认识jQuery

发表于 更新于 分类于

认识jQuery

DOM对象和jQuery对象

获取方法

1. DOM对象:用原生js获取过来的对象就是DOM对象

img

2.关于jQuery对象:用jQuery方式获取

获取过来的对象是jQuery对象。本质: 通过**$**把DOM元素进行了包装

img

3. 关于jQuery对象只能使用jQuery 方法

DOM对象则使用原生的JavaScirpt属性和方法

img

相互转换

1. DOM 对象转换为 jQuery 对象

使用$包裹就会改变

img

2. 让jQuery 转换为 DOM 对象

  • $(‘video’)[0]
  • $(‘video’).get(0)

img

使用jQuery选择器

层级选择器

img

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery-min.js"></script>
    <style>

    </style>
</head>

<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ol>
        <li>我是ol的</li>
        <li>我是ol的</li>
        <li>我是ol的</li>
        <li>我是ol的</li>
    </ol>
    <ul>
        <li>我是ul的</li>
        <li>我是ul的</li>
        <li>我是ul的</li>
        <li>我是ul的</li>
    </ul>
    <script>
        $(function() {
            $('.nav')
            console.log($('.nav'));
            $('ul li')
            console.log($('ul li'));
        })
    </script>
</body>

</html>

筛选选择器

img

  • 获取第一个li元素

​ $(‘ul li:first’).css(‘color’, ‘red’);

  • 获取最后一个li元素

​ $(‘ul li:last’).css(‘color’, ‘red’);

  • 获取第三个li元素

​ $(‘ul li:eq(2)’).css(‘color’, ‘blue’);

  • 获取奇数li元素

​ $(‘ul li:odd’).css(‘background’, ‘gray’);

  • 获取偶数li元素

​ $(‘ul li:even’).css(‘background’, ‘pink’);

关于jQuery’父,子,兄’选择

1.父 $(‘.son’).parent();

img

2.子 $(‘.nav’).children(‘p’)

(1) 亲儿子 children( ) 类似于子代选择器 ul>li

​ $(‘.nav’).children(‘p’).css(‘color’, ‘red’);

(2) 可以选择所有后代 包括儿子孙子find( ) 类似于后代选择器

​ $(‘.nav’).find(‘p’).css(‘background’, ‘gray’);

img

3.兄

(1)siblings( ) 除了自身元素之外的所有亲兄弟

​ $(‘ol .item’).siblings(‘li’).css(‘color’, ‘red’);

(2)nextAll( ) 当前元素之后所有同辈元素

​ $(‘ol .item’).nextAll(‘li’).css(‘background’, ‘gray’);

(3)prevAll( ) 当前元素之前所有同辈元素

​ $(‘ol .item’).prevAll(‘li’).css(‘background’, ‘gray’);

img

(4)eq 第几个元素

​ $(‘ol li:eq(2)’).css(‘font-weight’, ‘900’)

(5)利用选择方法的方式选择 推荐此方法

​ $(‘ul li’).eq(2).css(‘color’, ‘red’);

img

关于jQuery隐式迭代

img

jQuery对元素集合的操作不需要再利用for循环

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery-min.js"></script>
    <style>

    </style>
</head>

<body>
    <div>演示文本</div>
    <div>演示文本</div>
    <div>演示文本</div>
    <div>演示文本</div>
    <ul>
        <li>相同操作</li>
        <li>相同操作</li>
        <li>相同操作</li>
    </ul>
    <script>
        // 1.获取四个div元素
        $('div'); // 伪数组形式储存
        console.log($('div'));

        // 2.给四个div设置背景颜色 jQuery不能使用style方法
        $('div').css('background', 'pink');

        // 3.隐式迭代
        // 遍历内部的DOM元素(伪数组形式储存)的过程叫做隐式迭代
        $('ul li').css('color', 'red');
    </script>
</body>

</html>

排他思想案例

img

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery-min.js"></script>
    <style></style>
</head>

<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() {
            // 1.隐式迭代,给所有按钮绑定点击事件
            $('button').click(function() {
                // 2.当前元素变化背景颜色
                $(this).css('background', 'pink');
                // 3.其余兄弟去掉背景颜色 隐式迭代
                $(this).siblings('button').css('background', '');
            });
        })
    </script>
</body>

</html>

淘宝精品服饰案例 index()获取数组索引方法

img

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery-min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .wrapper {
            width: 250px;
            height: 250px;
            background-color: aqua;
            margin: 0px auto;
        }
        
        .wrapper ul {
            float: left;
            display: block;
            height: 100%;
            width: 50px;
            background-color: aquamarine;
        }
        
        .wrapper ul li {
            height: 33.3%;
        }
        
        .wrapper ul li :hover {
            background-color: gray;
            color: white;
        }
        
        .wrapper ul li a {
            width: 100%;
            height: 100%;
            display: block;
            text-decoration: none;
            font-size: 30px;
            line-height: 83px;
            text-align: center;
        }
        
        #content {
            float: right;
            margin-top: 30px;
        }
        
        #content div:not(:first-child) {
            display: none;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <ul id="left">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ul>
        <div id="content">
            <div>
                <a href="#"><img src="../../img/图片/cs (1).webp" width="200" height="200"></a>
            </div>
            <div>
                <a href="#"><img src="../../img/图片/cs (2).webp" width="200" height="200"></a>
            </div>
            <div>
                <a href="#"><img src="../../img/图片/cs (3).webp" width="200" height="200"></a>
            </div>
        </div>
    </div>
    <script>
        $(function() {
            // 1.鼠标经过li
            $('#left li').mouseover(function() {
                // 2.得到当前li的索引号
                var index = $(this).index();
                // 3.让右侧盒子相应索引号盒子显示
                // $('#content div').eq(index).show();
                // 4.让其余的图片(就是其他的兄弟)隐藏
                // $('#content div').eq(index).siblings().hide();
                // 链式编程
                $('#content div').eq(index).show().siblings().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
<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() {
            // 1.隐式迭代,给所有按钮绑定点击事件
            $('button').click(function() {
                // 2.当前元素变化背景颜色
                // $(this).css('background', 'pink');
                // 3.其余兄弟去掉背景颜色 隐式迭代
                // $(this).siblings('button').css('background', '');

                // 链式编程
                $(this).css('color', 'red').siblings('button').css('color', '');

            });
        })
    </script>
</body>

修改css样式

通过.css({})方法修改

  1. 修改样式逗号隔开,引号引入,当值为数字可以不加引号

    1
    $('div').css('width', '300px');

  2. 以对象的形式修改可以不加引号

    • 数字可以不用加引号
    • 组合属性采取驼峰命名法
    • 值不为数字就需要加引号
1
2
3
4
5
6
7
8
$('div').css({
    // 数字可以不用加引号
    width: 400,
    height: 400,
    // 组合属性采取驼峰命名法
    // 值不为数字就需要加引号
    backgroundColor: 'red'
});

设置类名方法

1.添加类 addClass()

1
2
3
$('div').click(function() {
	$(this).addClass('current');
});

2.删除类 removeClass()

1
2
3
$('div').click(function() {
	$(this).removeClass('current');
});

3.切换类 toggleClass()

1
2
3
$('div').click(function() {
	$(this).toggleClass('current');
})

使用jQuery的动态效果

显示与隐藏

  • show([时间]，[function(){}]) 显示
  • hide([时间]，[function(){}]) 隐藏
  • toggle([时间]，[function(){}]) 切换
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function() {
    // 显示
    $('button').eq(0).click(function() {
        $('div').show(1000, function() {
            alert(1);
        });
    })

    //隐藏
    $('button').eq(1).click(function() {
        $('div').hide(1000, function() {
            alert(1);
        });
    })

    //切换
    $('button').eq(2).click(function() {
        $('div').toggle(1000);
    })
})

滑动

  • slideDown([时间]，[function(){}]);
  • slideUp([时间]，[function(){}]);
  • slideToggle([时间]，[function(){}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function() {
    $('button').eq(0).click(function() {
        // 下滑动 slideDown()
        $('div').slideDown(100);
    })
    $('button').eq(1).click(function() {
        // 上滑动 slideUp()
        $('div').slideUp(500);
    })
    $('button').eq(2).click(function() {
        // 滑动切换 slideToggle()
        $('div').slideToggle(500);
    })
})

渐入渐出

  • fadeIn([时间]，[function(){}]);
  • fadeOut([时间]，[function(){}]);
  • fadeToggle([时间]，[function(){}]);
  • fadeTo([时间]，[透明度]，[function(){}]);

自定义动画

  • animate([{ css属性 }]，[时间]);
1
2
3
4
5
6
7
8
9
10
$(function() {
    $('button').click(function() {
        $('div').animate({
            left: 200,
            top: 200,
            opacity: 0.5,
            width: 500,
        }, 200);
    })
})

停止排队

在编写动画相关的事件触发时，会遇到一个bug，当多次触发事件时，事件会发生累积堆叠。造成鬼畜。通过stop()可以解决此bug

  • mouseover 鼠标经过
  • mouseout 鼠标离开
  • hover 就是鼠标经过离开的复合写法
    • 事件切换hover如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数

stop()方法必须写在动画前面

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
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery-min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        
        .nav {
            width: 600px;
            height: 50px;
            margin: 0 auto;
            /* background-color: gray; */
        }
        
        .nav>li {
            height: 100%;
            width: 150px;
            float: left;
            font-size: 28px;
            background-color: gray;
        }
        
        .nav>li>a {
            display: block;
            height: 100%;
            width: 150px;
            /* background-color: aquamarine; */
            /* border: 1px solid gray; */
            line-height: 50px;
            text-align: center;
            color: white;
            font-weight: 900;
        }
        
        .nav>li li {
            height: 50px;
            background-color: gray;
            text-align: center;
            border: 1px solid gray;
        }
        
        .nav>li li a {
            color: white;
        }
        
        .nav li ul {
            display: none;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
            // mouseover鼠标经过
            // $('.nav>li').mouseover(function() {
            //     // $(this) jQuery 当前元素 this不加引号
            //     // show() 显示元素
            //     $(this).children('ul').slideDown(200);
            // })

            // // 鼠标离开
            // $('.nav>li').mouseout(function() {
            //     // hide() 隐藏元素
            //     $(this).children('ul').slideUp(200);
            // })

            // 写法1.事件切换 hover 就是鼠标经过离开的复合写法
            //$('.nav>li').hover(function() {
             //   $(this).children('ul').slideDown(200);
            //}, function() {
               // $(this).children('ul').slideUp(200);
           // })

            // 写法2.事件切换hover如果只写一个函数
            //   那么鼠标经过和鼠标离开都会触发这个函数
             $('.nav>li').hover(function() {
                 // stop()方法必须写在动画前面
                 $(this).children('ul').stop().slideToggle(200);
             })
        })
    </script>
</body>

</html>

使用jQuery的属性操作

1.element.prop(‘属性名’)获取元素固有属性值

element.prop(‘属性名’，{值})

不仅可以获取元素固有属性值，也可以设置元素固有属性值

2.元素自定义属性attr()

element.attr(‘属性名’，{值})

3.数据缓存data()

这个里面的数据是存放在元素的内存里 不会显示在标签上

element.data(‘属性名’，{值});

这个方法获取data-index h5自定义属性 第一个不用写data- 而且返回的是数字型

使用jQuery更改文本内容

1.获取设置元素内容 html()

相当于原生innerHTML

.html({值});

2.获取设置元素文本内容 text()

相当于原生 innerText

.text({值});

3.获取设置表单值 val()

.val({值});

关于jQuery遍历方法

1.each() 方法遍历元素

each( function([index，domEle]){} )

  • 回调函数第一个参数一定是索引号 可以自己指定index索引号名称
  • 回调函数第二个参数一定是DOM元素
1
2
3
4
5
6
7
8
9
10
11
12
13
var sum = 0;
var arr = ['red', 'green', 'blue'];
$('div').each(function(index, domEle) {
    // 回调函数第一个参数一定是索引号 可以自己指定index索引号名称
    // console.log(index);
    // 回调函数第二个参数一定是DOM元素
    // console.log(domEle);
    // domEle.css('color'); dom对象没有css方法
    // $(domEle)转换为jQuery对象
    $(domEle).css('color', arr[index]);

})

2.$.each() 方法遍历元素

主要用于遍历数据,处理数据

1
2
3
4
5
6

$.each($('div'), function(i, ele) {
    console.log(i);
    console.log(ele);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 遍历数组
 $.each(arr, function(i, ele) {
     console.log(i);
     console.log(ele);
 })
// 遍历对象
$.each({
    name: 'andy',
    age: 18
}, function(i, ele) {
    console.log(i); // 输出: name age 属性名
    console.log(ele); // 输出: andy 18 属性值
})

使用jQuery创建添加删除元素

1.创建元素

var li = $('<li>我是后来li</li>');

2.添加元素

内部添加

在指定元素内部添加新元素

  • $(‘ul’).prepend(li); 内部添加且放到内容最前面
  • $(‘ul’).append(li); 内部添加且放到内容最后面

外部添加

在指定元素的上面或者下面添加新的元素

  • $(‘.test’).after(div); 放到后面

  • $(‘.test’).before(div); 放到前面

3.删除元素

删除指定元素或者其子元素

  • $(‘ul’).remove(); 可以删除匹配的元素 自杀
    • 删除自身以及自己的子元素
  • $(‘ul’).empty(); 可以删除匹配元素的子节点 孩子删除
    • 只删除自己的子元素
  • $(‘ul’).html(‘ ‘); 可以删除匹配元素的子节点 孩子删除 同上
    • 同上

关于jQuery尺寸方法

（ ） 为空返回原始大小
（数值） 含有值就改变

  • width() / height()

    • 获取设置元素 width和height大小

  • innerWidth() / innerHeight()

    • 获取设置元素width和height + padding 大小

  • outerWidth() / outerHeight()

    • 获取设 置元素width和height + padding + border大小

  • outerwidth(true) / outerHeight(true)

    • 获取设置width和height + padding + border + margin

关于jQuery位置和被卷去方法

位置属性

1.获取/设置距离文档的位置(偏移) offset

1
2
3
4
5
6
7
8
9
         // 获取👇
console.log($('.son').offset());
         console.log($('.son').offset().top);

// 设置👇
         // $('.son').offset({
         //     top: 200,
         //     left: 200,
         // });

2.获取(不能设置)距离带有定位父级位置(偏移) position 如果没有带有定位的父级，则以文档为准

1
console.log($('.son').position());

被卷去的部分

  • 被卷去的头部scrollTop( )

  • 被卷去的左侧scrollLeft( )

事件处理on()/off()

on()

on绑定多个事件

对一个元素绑定事件需要点多次，非常繁琐，使用on（）方法就可以对一个元素进行多个事件绑定，非常银杏化。

1
2
3
4
5
6
7
8
9
10
11
$('div').on({
    mouseenter: function() {
        $(this).css('background', 'skyblue');
    },
    click: function() {
        $(this).css('background', 'black');
    },
    mouseleave: function() {
        $(this).css('background', 'pink');
    }
});

on可以实现事件委托(委派)

1
2
3
4
$('ul').on('click', 'li', function() {
    alert(11);
});
// click 是绑定在ul身上的,但是触发的对象是ul里面的li

on可以给未来动态创建的元素绑定事件

1
2
3
4
5
$('ol').on('click', 'li', function() {
    alert(11);
})
var li = $("<li>我是后来创建的</li>");
$('ol').append(li);
  • 因为li是后来创建的,用原始方法绑定事件无法触发
  • 可以通过on给父级ol绑定事件,这样后来生成的li就有了click事件

off()

1.事件绑定off

off()

1
2
3
//$('div').off(); //这个是解除了div身上的所有事件
$('div').off('click'); //只接触点击事件 
$('ul').off('click', 'li'); //事件委托解除

2.只触发一次时间

one()

1
2
3
$('p').one('click', function() {
        alert(22);
})

自动触发

1.元素.click()

$('div').click();

2.元素.trigger(‘事件’)

$('div').trigger('click');

3.元素.triggerHandler(‘事件’)

不会触发元素默认行为

比如说，如果点击元素表单，则不会触发表单的光标

关于jQuery事件对象

1
2
3
4
5
6
7
8
9
10
11
$(function() {
    $(document).on('click', function() {
        console.log('点击了document');
    });
    $('div').on('click', function(event) {
        // console.log(event);
        console.log('点击了div');
        // event.stopPropagation()停止冒泡
        event.stopPropagation();
    });
})

使用jQuery对象拷贝

1. 浅拷贝

把原来对象里面的复杂数据类型地址拷贝给目标对象

$.extend([拷贝的对象],[被拷贝的对象]);

1
2
3
4
5
6
7
var targetObj = {};
var obj = {
    id: 1,
    name: 'andy',
};
$.extend(targetObj, obj);
console.log(targetObj);

如果被拷贝的对象中有相同的属性值：

如果原先有属性 那么拷贝的属性就会

1
2
3
4
5
6
7
8
9
var targetObj = {
    id: 0
};
var obj = {
    id: 1,
    name: 'andy',
};
$.extend(targetObj, obj);
console.log(targetObj); //覆盖掉原先的数据

2.深拷贝

$.extend(true，[拷贝的对象]，[被拷贝的对象]);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var targetObj = {
              id: 0,
              msg: {
                  sex: '男',
              }
          };
          var obj = {
              id: 1,
              name: 'andy',
              msg: { //拷贝的只是地址
                  age: 18,
              }
          };
          $.extend(true, targetObj, obj);
          console.log(targetObj);
          targetObj.msg.age = 20; //修改也不会有影响
          console.log(targetObj); //msg:{sex:'男',age:20}
          console.log(obj);

多库共存

其实$()是jQuery自己封装的一个函数方法，可以通过 var suibian = jQuery.noConflict();来改变$符号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function() {
    // 自己封装的$函数 类比为其他库的$
    function $(ele) {
        return document.querySelector(ele);
    };
    console.log($('div'));
    // 1.改用jQuery不用$
    jQuery.each();

    // 2.自己定义一个变量 suibian('div') = $('div')
    var suibian = jQuery.noConflict();
    suibian('span');
    console.log(suibian('span'));
})