jQuery基础、选择器、属性、元素的筛选、自定义动画、对象访问、事件处理、动画

鸣鲷有柒

已于 2022-12-03 10:03:54 修改

阅读量488

点赞数 1

文章标签： jquery javascript 前端

于 2022-11-08 22:02:16 首次发布

本文链接：https://blog.csdn.net/m0_74343097/article/details/127752047

版权

一、jQuery基础

1. 简介：是一个对JavaScript进行了封装的库，简化了用户使用javascript

2. 特点：写的少、做的多

3. 使用方法：

（1）在页面中引入jQuery库：引入外部的js文件

1）使用script标签，使用本地的iquery文件。将jQuery下载下来，然后导入项目中，使用script标签进行引用。

    <script src="./js/jquery-3.4.1.js"></script>

2）使用CDN加速器，引用网络文件（网络必须畅通）使用远程CDN资源库在线引入，避免了文件下载。

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

（2）’$’：是jQuery的全局对象，代表jQuery

（3）$(function(){ })：jQuery代码的入口函数。原始的写法：

$(document).ready(function(){ }) —— window.onload

简写为：

$(function(){ })

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<style>
    #box{
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>
    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <br>
    <div id="box"></div>
    <script>
        $(document).ready(function(){})
        // document.querySelector('#hide').addEventListener('click',function(){
        //     document.querySelector('#box').style.display = 'none'
        // })
        // 可以将$换成jQuery
        $(function(){
            // 隐藏 hide()
            $('#hide').click(function(){
                $('#box').hide(2000)//hide(2000)过渡时间为2秒
            })
            // 显示 show()
            $('#show').click(function(){
                $('#box').show(2000)//show(2000)过渡时间为2秒
            })
        })
    </script>
</body>

二、jQuery的选择器

是jQuery的灵魂

1. 基本选择器

（1）id选择器：$(‘#id’)

（2）类选择器：$(‘.class’)

（3）标签名选择器：$(‘标签名’)

（4）通配符选择器：$(‘*’)

$('.content *').css('background', 'red');

（5）并集选择器：$(‘#id ，.class’)

$('p,button').css('background', 'red');

（6）交集选择器：$(‘#id . .class’)

$('p.red').css('background', 'red');

强调：css()函数的作用：是jQuery中用于设置元素CSS样式的函数

a、css(‘样式属性名’,’属性值’) ：设置单个样式

b、css({属性名1:属性值1，属性名2:属性值2……})

eq(index)：匹配一个给定索引值的元素。页面中元素的索引值从0开始

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <p id="one">八百里秦川</p>
 
    <p>钟楼</p>
    <p>鼓楼</p>
    <p>回民街</p>
 
    <h1>会计</h1>
    <h2>出纳</h2>
    <script>
        // $(function(){
        //     $('#one').css('background-color','red')
        // })
        $(function(){
            $('p').css({'backgroundColor':'yellow','color':'pink'})
 
            // 改变第一个p背景色和字体颜色
            $('p').eq(0).css({'backgroundColor':'red','color':'black'})
            // 改变最后一个p的字体颜色
            $('p').eq(2).css({'color':'skyblue'})
 
            // 改变所有<h1>
            $('h1').css({'backgroundColor':'blue'})
        })
    </script>
</body>

2. 过滤选择器：是通过特定的过滤规则来筛选出所需的 DOM 元素。以”：“开头

2.1 基本过滤选择器

（1）:first —— 选择第一个元素

（2）:last —— 选择最后一个元素

（3）:not(selector) ——- 去除所有与给定选择器相匹配的元素

（4）:even ——- 匹配所有索引值为偶数的元素，从索引0 开始计数

（5）:odd ——- 匹配所有索引值为奇数的元素，从索引0 开始计数

（6）:eq(index) —- 匹配一个给定下标所有值的元素

（7）:gt(index) ——- 匹配所有大于给定索引值的元素

（8）:lt(index) —— 匹配所有小于给定索引值的元素

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <ul>
        <li>春</li>
        <li>夏</li>
        <li id="n1">秋</li>
        <li>冬</li>
    </ul>
    <script>
        $(function(){
            // 第一个
            $('li:first').css('color','red')
            // 最后一个
            $('li:last').css('fontSize','30px')
            // 除id='n1'之外的其他元素文字都为蓝色
            $('li:not(#n1)').css('color','blue')
            // 匹配索引为偶数的元素
            $('li:even').css('fontSize','50px')
            // 匹配索引为奇数的元素
            $('li:odd').css({'fontSize':'10px','color':'purple'})
        })
    </script>
</body>

2.2 内容过滤选择器

（1）:contains(text) ——- 匹配包含给定文本的元素

（2）:empty —— 匹配所有不包含子元素或者文本的空元素

（3）:has(selector) ——- 匹配含有选择器所匹配的元素的元素

（4）:parent —— 匹配含有子元素或者文本的元素

            // 包含
            $("div:contains('hello')").css('color','blue')
            // 空
            $(function(){
            console.log($('td:empty'))
            })
            // 含有选择器所匹配的元素的元素
            $('li:has(#key)').css('backgroundColor','red')

val() ： jQuery的函数，若不带参数表示获取input标签的value属性值

val(参数)：带上参数，就是将参数值赋给input标签的value属性

            // val()获取
            let str = $('input:hidden').val()
            console.log(str)//VIP
            
            $('#in').val('天空')

2.3 可见性选择器

（1）:hidden ———— 匹配所有不可见元素，或者type为hidden的元素。不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 ()和 visible:hidden 之类的元素

（2）:visibale ————— 匹配所有的可见元素

2.4 属性过滤选择器

（1）[attribute]：匹配包含给定属性的元素

（2）[attribute=value]：匹配给定的属性是某个特定值的元素

（3）[attribute!=value]：匹配所有不含有指定的属性，或者属性不等于特定值的元素。

（4）[attribute^=value]：匹配给定的属性是以某些值开始的元素

（5）[attribute$=value]：匹配给定的属性是以某些值结尾的元素

（6）[attribute*=value]：匹配给定的属性是以包含某些值的元素

<input type="hidden" value="VIP">
    <br><br>
    <input type="text" id="in" disabled>
    <br><br>
    <div class="d1">华山</div>
    <div title="one">泰山</div>
    <div class="d1">恒山</div>
    <div title="two">黄山</div>
    <div class="d1">衡山</div>
    <p title="abc-123">黄鹤楼</p>
    <p title="abc456">岳阳楼</p>
    <p title="aaef">鹳雀楼</p>
    <p title="axafff">滕王阁</p>
    <script>
        $(function(){
            let st = $('input:hidden').val()   
            console.log(st)
            $('#in').val('果果')
            $('div[class]').css('color','blue') //匹配含有class属性的div
            $('div[title=one]').css('fontSize','25px')
            $('p[title!=aaef]').css('color','red') //匹配title属性值不是aaef的元素
            $('p[title^=abc]').css('color','blue') //匹配title属性值以abc开头的
            $('p[title$=ef]').css('fontSize','35px')
        })
    </script>

3. 子元素选择器：索引值从1开始

（1）:first-child ——- 匹配第一个子元素

（2）:last-child ——- 匹配最后一个子元素

（3）:nth-child

1）:nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素

2）:nth-child(2): 能选取每个父元素下的索引值为 2 的元素

3）:nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素

 <ul>
        <li>宋江</li>
        <li>李逵</li>
        <li>晁盖</li>
        <li>柴绍</li>
        <li>武松</li>
        <li>林冲</li>
    </ul>
    <script>
        $(function(){
            $('li:first-child').css('color','blue')
            $('li:last-child').css('color','red')
            $('li:nth-child(odd)').css('fontSize','20px')
            $('li:nth-child(3n)').css('fontSize','35px')
        })
    </script>

4. 表单选择器

（1）:text —- 单行文本框

（2）:password —— 密码框

<body>
        用户名：<input type="text">
        密码：<input type="password">
        <script>
            $(function(){
                $('input:text').css({'color':'red','fontSize':'45px'})
                $('input:password').css('fontSize','5px')
            })
        </script>
    </body>>

5. 表单状态选择器

（1）：focus 表单获取焦点

（2）：checked 表单选中

（3）：disabled 表单禁用

（4）：selected 表单列表项选中

console.log($(':focus')[0]);
console.log($(':checked')[0]);
console.log($(':disabled')[0]);
console.log($(':selected')[0]);

三、jQuery的属性

操作标签的属性

1. 操作属性：

（1）attr(name)：获取属性值。参数name是属性名

<p id="content" title="我是段落标题">我是段落</p>
console.log($('#content').attr('title'));

（2）attr(key,fn)：修改属性值。

参数key：代表元素的属性名

参数fn：是一个函数，将该函数的返回值作为key属性的值

<p id="content" title="我是段落标题">我是段落</p>
$('#content').attr('title', '我是attr修改后的段落标题');

（3）attr(key,value)：修改属性值。将value的值赋给key

（4）removeAttr(name)：删除指定的属性

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <a href="https://www.bilibili.com">B站</a>
    <button id="btn">修改</button>
    <img src="./img/meiyanyang.jpg" alt="图片加载……" width="200">
    <button id="img">切换图片</button>
    <button id="delete">删除</button>
    <script>
        $(function(){
            // 1.修改网站
            // 选择按钮,绑定click事件
            $('#btn').click(function(){
                // 修改a的href属性
                // $('a').attr('href','http://www.hao123.com')
                $('a').attr('href',function(){
                    return 'http://www.hao123.com'
                })
            })
            // 2.切换图片
            $('#img').click(function(){
                $('img').attr({src:'./img/chou.jpg',alt:'哈哈哈',width:'300'})
            })
            // 3.删除
            $('#delete').click(function(){
                $('img').removeAttr('alt')
            })
        })
    </script>
</body>

2. 操作样式

（1）css(key,value) 、 css({‘属性名1’:’属性值1’，’属性名2’:’属性值2’})

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        display: none;
    }
</style>

<body>
    <button id="btn">单击显示，双击隐藏</button>
    <br><br>
    <div></div>
    <script src="./jquery-3.4.1.js"></script>
    <script>
        $(function () {
            $('#btn').click(function () {//单击事件
                $('div').css('display', 'block')
                $('div').html('<h2>hahaha</h2>')
            })
            $('#btn').dblclick(function(){//双击事件
                $('div').css('display', 'none')
            })
            console.log($('button').text())
        })
    </script>
</body>

（2）addClass(class|fn)：为匹配的元素添加指定的类名

（3）removeClass([class|fn])：从所有匹配的元素中删除全部或者指定的类

参数可以是类名，也可以是函数（将函数的返回值作为类名）

（4）toggleClass(class|fn)：如果所匹配的元素存在某个类就删除，不存在就添加。

（5）hasClass()：确定任何一个匹配元素是否有被分配给定的样式类

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<style>
    .success{
        color: yellowgreen;
    }
    .fail{
        color: red;
    }
    div{
        width: 200px;
        height: 200px;
        background-color: plum;
    }
    .app{
        background-color: red;
    }
</style>
<body>
    用户名：<input type="text" id="user"><span id="msg"></span>
<br><br>
<div></div>
    <script>
        $(function(){
            $('#user').blur(function(){
                let v = $('#user').val()
                if ('admin' === v) {
                    $("#msg").removeClass('fail')
                    $('#msg').html('true')
                    $('#msg').addClass('success')
                }else{
                    $("#msg").removeClass('success')
                    $('#msg').html('error')
                    $('#msg').addClass('fail')
                }
            })
            $('div').click(function(){
                $('div').toggleClass('app')
            })
        })
    </script>
</body>

.beauty {
    font-weight: bold;
    font-size: 18px;
    color: coral;
}
<p class="beauty"></p>
console.log($('p').hasClass('beauty'));

3. 操作元素的宽度和高度

（1）width()：获取元素的宽度

（2）width(value)：设置元素的宽度

（3）height()：获取元素的高度

（4）height(value)：设置元素的高度

4. 操作元素的内容

（1）html()：获取匹配元素的内容（底层使用的元素innerHTML属性）

（2）html(val)：设置匹配元素的内容（可以识别标签）

<body>
    <div id="dt">
        <h2>愿望</h2>
    </div>
    <script src="./js/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            console.log($('#dt').html())
            $('#dt').html('<h1>嘟嘟</h1>')
        })
    </script>
</body>

（3）text()：获取匹配元素的文本（底层使用的元素innerText属性）

（4）text(val)：设置匹配元素的文本（不能识别标签）

5. 操作值

（1）val()：获取匹配元素的value属性值

（2）val(args)：设置匹配元素的value属性值

6. 查找

（1）add():

（2）find(exp):搜索所有与指定表达式匹配的元素。

（3）first():获取第一个元素

（4）last():获取最后一个元素

（5）hasClass(class):检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是 is("." + class)。

<body>
    <p>hello kitty<span>55</span></p>
    
    <button id="btn">添加元素</button>
 
    <div class="d1" style="width: 100px;height:100px;background:red"></div>
    <br>
    <div class="d2" style="width: 100px;height:100px;background:yellowgreen"></div>
    <script>
        $(function(){
            $('#btn').click(function(){
                let t = $('p').find('span')
                console.log(t)
                console.log($('li').first())
 
                if ($('div').hasClass('d1')) {
                    $('.d1').css('backgroundColor','pink')
                }
            })
        })
    </script>
</body>

强调：在jQuery代码中使用this的方法 ——- $(this) 代表当前的元素

四、jQuery元素的筛选

1. children()：获取所有的子元素

2. find(exp)：查找与给定表达式匹配的元素

3. next(exp)：获取匹配元素的紧邻的同辈元素

4. nextAll(exp)：查找匹配元素的所有同辈元素

5. parent(exp)：取得一个包含着所有匹配元素的唯一父元素的元素集合。

6. parents(exp)：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）

7. prev([expr])：获取匹配元素的紧邻的上一个同辈元素

8. prevAll([expr])：获取匹配元素之前的所有同辈元素

9. siblings([expr])：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

<body>
    <div>
        <p>11111</p>
        <p>22222</p>
        <p>33333</p>
        <span>00000</span>
    </div>
    <script>
        $(function(){
            // 输出div下的所有子元素
            let ele = $('div').children()
            console.log(ele)
            // 查找div下的span
            let sp = $('div').find('span')
            console.log(sp)
            console.log(sp.html())
            // 
            let t = $('div').siblings()
            console.log(t)
 
        })
    </script>
</body>

五、jQuery的自定义动画

animate(params,[speed],[easing],[fn])

params：一组包含作为动画属性和终值的样式属性和及其值的集合

speed：三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

练习：创建一个div，默认div宽高100px，背景颜色为黑色，先让div宽度变为200px，再让div高度变为200px

.box {
    width: 100px;
    height: 100px;
    background: black;
}
<button>自定义动画</button>
<div class="box"></div>
$('.box')
.animate({
    width: '200'
})
.animate({
    height: '200',
});

六、jQuery的对象访问

index([selector|element])：获取页面元素的索引值。索引值从0开始

七、jQuery的事件处理

1. 事件绑定：

bind(type,[data],fn)：给匹配元素的事件绑定事件处理程序

参数type：事件类型

参数data：作为event.data传递事件处理程序的数据对象

参数fn：事件处理程序

2. 模拟鼠标悬停事件：当鼠标悬停到目标对象上方、离开目标对象时触发

hover(over,out)

参数over：是一个函数，鼠标悬停到目标对象上方时触发

参数out：是一个函数，鼠标离开目标对象时触发

强调：在jQuery的应用中如果某个对象同时会触发mouseove、mouseout事件，建议使用hover模拟鼠标悬停事件

3. one(type,[data],fn)：为匹配的元素绑定一个一次性的事件处理函数

<style>
    div{
        background-color: pink;
        width: 400px;
        height: 400px;
    }
</style>
<body>
    <button id="btn">事件绑定</button>
    <br>
    <img src="./img/chou.jpg" alt="" width="200">
    <div></div>
    <script src="./js/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            // $('#btn').bind('click',function(e){
            //     alert(e)
            // })
            $('#btn').one('click',function(){
                alert('一次性的事件处理程序')
            })
            // $('img').bind('mouseover',function(){
            //     $(this).attr('src','./img/meiyanyang.jpg')
            // })
            // 当鼠标悬停到img上方时执行第一个函数，鼠标离开时执行第二个函数
            $('img').hover(function(){
                $(this).attr('src','./img/meiyanyang.jpg')
            },function(){
                $(this).attr('src','./img/chou.jpg')
            })
            // 当鼠标悬停到div上方时执行第一个函数，当鼠标离开时执行第二个函数
            $('div').hover(function(){
                $(this).css('backgroundColor','red')
            },function(){
                $(this).css('backgroundColor','skyblue')
            })
 
        })
    </script>
</body>

4. unbind(type,[data|fn]])：bind()的反向操作，从每一个匹配的元素中删除绑定的事件。如果没有参数，则删除所有绑定的事件。

5. on(events,[selector],[data],fn)：在选择元素上绑定一个或多个事件的事件处理函数

参数events：一个或多个用空格分隔的事件类型

6. off(events,[selector],[fn])：在选择元素上移除一个或多个事件的事件处理函数。

7. 事件类型：

（1）click：鼠标单击

（2）blur：失去焦点

（3）focus：获得焦点

（4）change：当元素的值发生改变时，会发生 change 事件。

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<body>
    <div></div>
    <button id="btn">反绑定(删除所有事件)</button>
    <button id="btn_one">反绑定(删除某个事件)</button>
    <script src="./js/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            $('div').bind('click',function(){
                alert('单击')
            })
            $('div').bind('dblclick',function(){
                alert('双击')
            })
            // 删除所有绑定的事件
            $('#btn').click(function(){
                $('div').unbind()
            })
            // 删除指定的事件
            // $('#btn_one').click(function(){
            //     $('div').unbind('click')
            // })
            $('#btn_one').on('click',function(){
                $('div').unbind('click')
            })
            
        })
    </script>
</body>

八、jQuery的动画

1. 显示 / 隐藏：

show() ：显示

hide()：隐藏

toggle(speed)：交替显示和隐藏，若匹配的元素显示了就隐藏，若隐藏了就显示

<style>
    #ddd{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<body>
    <div id="ddd"></div>
    <button id="btn_show">显示</button>
    <button id="btn_hide">隐藏</button>
    <button id="btn_jt">交替</button>

    <script src="./jquery-3.4.1.js"></script>
 <script>
       $(function(){
        $('#btn_hide').click(function(){
            $('#ddd').hide(2000)
        })
        $('#btn_show').click(function(){
            $('#ddd').show(2000)
        })
        $('#btn_jt').click(function(){
            $('#ddd').toggle(2000)
        })
       })
 </script>
</body>

2. 向上收缩 / 向下展开：通过高度变化来显示和隐藏元素

slideUp([speed,[easing],[fn]])：向上收缩

slideDown([speed],[easing],[fn])：向下展开

slideToggle([speed],[easing],[fn])：交替收缩、展开

<body>
    <img src="./img/like02.jpg" alt="" width="200">
    <br>
    <button id="up">向上收缩</button>
    <button id="down">向下展开</button>
    <button id="toggle">交替</button>
    <script src="./js/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            // 向上收缩
            $('#up').click(function(){
                $('img').slideUp(2000)
            })
            // 向下展开
            $('#down').click(function(){
                $('img').slideDown(1000)
            })
            // 交替
            $('#toggle').click(function(){
                $('img').slideToggle(1000)
            })
        })
    </script>
</body>

3. 淡入淡出：通过改变透明度来显示和隐藏元素

fadeIn([speed],[easing],[fn])：通过不透明度的变化来实现所有匹配元素的淡入效果。

fadeOut([speed],[easing],[fn])：通过不透明度的变化来实现所有匹配元素的淡出效果。

fadeToggle([speed,[easing],[fn]])：交替实现元素的淡入和淡出

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: red;
        display: none;
    }
</style>
<body>
    <div></div>
    <br>
    <button id="fadein">淡入</button>
    <button id="fadeout">淡出</button>
    <button id="toggle">交替</button>
    <script src="./js/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            // 淡入
            $('#fadein').click(function(){
                $('div').fadeIn(2000)
            })
            // 淡出
            $('#fadeout').click(function(){
                $('div').fadeOut(2000)
            })
            // 交替
            $('#toggle').click(function(){
                $('div').fadeToggle(2000)
            })
        })
    </script>
</body>

https://www.jq22.com/chm/jquery/index.html