一.JQuery介绍

1.介绍

(1)概念

jQuery 是一个 JavaScript 库，也是一个JS文件。 JQ中封装实现了很多方法，让使用变得更加简单不再像js那样需要使用大量的方法调用。但JQ也只是实现了一些方法，还有些没有实现，因此能够使用JQ是实现的，JS都能做，但是能够用JS做的，JQ不一定能够实现

(2)理念

JQ总的来说，体现了：write less， do more。简单来说，就是代码量少，功能强大。

(3)特性

1、丰富的强大的语法（CSS选择器），来查询文档元素

2、高效的查询方法，用来找到与CSS选择器匹配的文档元素集

3、一套有用的方法，用来操作选中的元素

4、强大的函数式编程技巧，用来批量操作元素集，而不是每次只操作单个

5、简介的语言用法（链式用法），用来表示一系列顺序操作。

2.jq库

(1)官网

官网地址：https://jquery.com/

国内翻译参考：http://jquery.cuishifeng.cn/

前端资源查找：https://www.bootcdn.cn/

(2)标准版本

JQuery完整版本，包含注释等，学习时可以参考，建议学习使用

下载地址：https://cdn.bootcss.com/jquery/3.4.1/jquery.js

(3)压缩版

压缩版去除了不必要的注释和空格，变量名等内部标识符也替换成更短的名字

下载地址：https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js

3.引用jq库

<!--引用jq的库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!--<script src="../JS/jq1.js"></script>-->
<script type="text/javascript">
    //在script书写js和jq的代码
    $(function () {
        alert(1111)
    })
</script>
1
2
3
4
5
6
7
8
9

在JQ中，$()是最重要的方法，可以传递CSS选择器、Element、Document或者Window对象、HTML文本字符串、函数、字符串等对象

注意：JQ的API只对自己开放，JQ不能用js的API，js也不能用JQ的API

二.JQuery获取元素

<div class="box">圣美</div>

<!--引用jq的库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<script type="text/javascript">
    //js获取元素
    // obox = document.querySelector('.box')
//jq获取元素,css如何获取元素，jq就怎么获取
	$box = $('.box')
	console.log($box)
</script>
1
2
3
4
5
6
7
8
9
10
11
12

1.jq修改标签内容

html()

$box = $('.box')
// $box.innerText = '小千'  //不可以使用js的方法去引用jq对象
$box.text('小千')  //修改文本内容
console.log($box.text());   //jq获取文本内容
1
2
3
4

text()

$box = $('.box')
// $box.innerHTML =  '小千'  //不可以使用js的方法去引用jq对象
$box.html('<h1>小千</h1>')  //修改标签内容
console.log($box.html());  //jq获取标签
1
2
3
4

val()

<input type="text">
<button>单击</button>
<!--引用jq的库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">

    inp = document.querySelector('input')
    btn = document.querySelector('button')

    btn.onclick = function () {
        console.log($(inp).val());  //jq获取表单值
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

jq与js对比

<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
</ul>

<!--引用jq的库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<script type="text/javascript">

    //修改所有无序列表下li的内容
    //js实现
    // obox = document.querySelectorAll('ul li')
    // obox[0].innerText = 'python'
    // obox[1].innerText = 'python'
    // obox[2].innerText = 'python'
    // obox[3].innerText = 'python'

    // jq实现  一次性操控所有元素
    $li = $('ul li')
    // $li.text('python')
    // console.log($li.text());
    //eq(索引)选取指定元素操控
    $li.eq(1).text('python')
</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

2.jq与js对象相互转换

//js对象
box =  document.querySelector('.box')

//js转jq对象  -->直接将js对象丢入$()内
box1 = $(box)
console.log(box1.text())  //可以
1
2
3
4
5
6

js—>jq

// $li = $('ul li')[1]  //直接使用索引转换
$li = $('ul li').get(0)   //get选取索引
console.log($li.innerText)	//可以
1
2
3

jq—>特定的jq

$li = $('ul li').eq(1)    //eq选取索引，jq特定
console.log($li.innerText)	//不可以
1
2

each()遍历

each内部可以使用js方法，也可以用jq的形式

$('ul li').each(function (i) {
    // console.log($('ul li').eq(i).text())
    
    //this表示当前遍历的元素,js对象
    // console.log(this.innerText);

    //js转jq再去获取文本内容
    console.log($(this).text());
})
1
2
3
4
5
6
7
8
9

三.JQuery操作HTML属性

1.attr属性操作

<div id="box">
    <span class="sp1"></span>
    <span class="sp2"></span>
    <span class="sp3"></span>
</div>
<!--引用jq的库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">

    //attr属性操作
    console.log($('#box').attr('id'));  //获取属性值

	//获取属性值是默认输出第一个【0】
    // console.log($('span').attr('class'));  //sp1
    // console.log($('span').eq(1).attr('class'));  //sp2

    //有则改，无则增
    $('#box').attr('class','box')  //添加属性值
    $('span').attr('class','box')  //修改属性值

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

removeAttr删除属性

$('#box').removeAttr('id')
$('span').removeAttr('class')
1
2

2.class属性操作

addClass添加属性值

$('#box').addClass('box')  //添加class属性值
$('#box').addClass('box1')  //添加class属性值,只添加不修改
1
2

removeClass删除属性值

$('#box').removeClass('box1')
1

toggleClass无则增，有则删

$('#box').toggleClass('box')  //增
$('#box').toggleClass('box1')  //增
$('#box').toggleClass('box1')  //删
1
2
3

四.JQuery操作CSS样式

//更改一个样式
// $('#box').css('height','400px')

//更改多个样式 {键：值}
$('#box').css({
    'width':'400px',
    'height':'400px',
    'backgroundColor':'blue'

})
1
2
3
4
5
6
7
8
9
10

五.JQuery事件

1.click 单击事件

$('#box').click(function () {
    alert('圣美')
})
1
2
3

2.dbclick 双击事件

$('#box2').dblclick(function () {
    $('#box2').text('圣美0')
})
1
2
3

3.hover 移入移出

$('#box3').hover(function () {
    $('#box3').text('子冧');  //移入函数
},function () {
    $('#box3').text('圣美');   //移出函数
})
1
2
3
4
5

4.移入mouseenter移出mouseleave

$('#box3').mouseenter(function () {
    $('#box3').text('子冧');  //移入函数
})

$('#box3').mouseleave(function () {
    $('#box3').text('圣美');  //移出函数
})
1
2
3
4
5
6
7

5.on 绑定事件

//on 绑定单个事件
// $('div').on('click',function () {
//     $(this).text('圣美')
//     $(this).css('color','red')
// })

 //on 绑定多个事件
$('div').on({
    'click':function () {  //单击
        $(this).text('圣美')
    },
    'mouseenter':function () {  //移入
        $(this).text('子')
    },
    'mouseleave':function () {  //移除
        $(this).text('冧')
    }

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

6.off 移除事件

$('div').click(function () {
    // $('div').off('click')  //移除单个事件
    $('div').off()  //移除所有事件
})
1
2
3
4

六.JQuery动画

show 显示

hide 隐藏

toggle 自动显示隐藏

fadeIn 淡入

fadeOut 淡出

fadeTo(1000, 0.1) 自动淡入淡出，可以把透明度设置一个值，时间参数不能省略

slideDown 向上收缩

slideUp 向下隐藏

slideToggle 自动向上隐藏和向下显示

<div id="box" style="width: 200px;height: 200px;background: pink;"></div>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button>
<button id="btn3">淡入</button>
<button id="btn4">淡出</button>
<button id="btn5">向上</button>
<button id="btn6">向下</button>

<!--引用jq的库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">
    //元素隐藏和显示
    $('#btn1').click(function () {
        $('#box').hide(1000)  //隐藏  毫秒时间
        // $('#box').toggle(1000)  //自动隐藏和显示
    })

    $('#btn2').click(function () {
        $('#box').show(1000)  //显示  毫秒时间
        // $('#box').toggle(1000)  //自动隐藏和显示
    })

    //淡入淡出
    $('#btn3').click(function () {
        // $('#box').fadeIn(2000)  //淡入  毫秒时间
        $('#box').fadeTo(2000,0.3)  //淡入和淡出  毫秒时间   透明度

    })

    $('#btn4').click(function () {
        // $('#box').fadeOut(2000)  //淡出  毫秒时间
        $('#box').fadeTo(2000,0.8)  //淡入和淡出  毫秒时间   透明度
    })

    //元素的缩放
     $('#btn5').click(function () {
        // $('#box').slideUp(2000)  //向上隐藏  毫秒时间
        $('#box').slideToggle(2000)  //向上隐藏和向下显示  毫秒时间
    })

    $('#btn6').click(function () {
        // $('#box').slideDown(2000)  //向下显示  毫秒时间   透明度
        $('#box').slideToggle(2000)  //向上隐藏和向下显示  毫秒时间
    })

</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

animate 自定义动画

<button id="btn1">展示动画</button>
<button id="btn2">暂停动画</button>
<div id="box" style="width: 200px;height: 200px;background: pink;position: absolute;"></div>

<!--引用jq的库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">

    // animate 自定义动画
    $('#btn1').click(function () {
        $('#box').animate({
            'width':'400px',
            'height':'400px',
            //让块移动（默认静态定位） 定位：绝对、相对、固定
            "left":"+=250px",  //可以累加
            // "top":"+=250px",  //可以累加

            //透明度
            "opacity":"0.5",

        },2000).delay(4000)   //delay 动画延迟一段时间

    })

    //stop 暂停动画
    $('#btn2').click(function () {
        $('#box').stop()
    })

</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