jQuery的基础操作（二）

大聪明码农徐

于 2022-02-22 21:02:08 发布

阅读量540

点赞数 1

分类专栏： jQuery基础文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_45799465/article/details/123075793

版权

jQuery基础专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一、jQuery事件绑定语法

jQuery伪数组支持的语法形式

$().事件类型(事件处理函数)

jQuery伪数组不支持的语法形式

$().on( 事件类型 , 事件处理函数 )

代码展示：

<!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>
</head>
<body>
    <button>点我一下</button>
    <input type="text">
    <script src="./jquery.min.js"></script>
    <script>
        // 支持的语法方式
        $('button').click(function(){
            console.log(6666)
        })
        // 不支持的方式
        $('input').on('input',function(){
            console.log('正在输入');
        })
    </script>
</body>
</html>

二、jQuery的事件委托

$().on( 事件类型 , '判断条件' , 事件处理函数 )

给标签中包含的后代标签进行判断
符合判断条件的标签添加事件处理函数

条件是 html,css 支持的所有语法形式
jQuery获取标签对象的语法形式

代码展示：

<!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>
</head>
<body>
    <div class="box">
    <div>我是div标签</div>
    <p>我是p标签</p>
    <h1><span>我是h1里的span标签</span></h1>
    </div>
    <script src="./jquery.min.js"></script>
    <script>
        // 事件委托  $().on( 事件类型 , '判断条件' , 事件处理函数 )
        $('.box').on("click",'div',() => console.log(1111));

        $('.box').on("click",'p',() => console.log(2222));
        
        $('.box').on("click",'h1>span',() => console.log(333));

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

三、jQuery的特殊语法类型

$().hover( 参数1 , 参数2 );

参数1 鼠标移入的事件处理函数
参数2 鼠标移出的事件处理函数
绑定的事件类型是
mouseenter 和 mouseleave

<body>
    <div>
        <span></span>
    </div>
    <script src="./jquery.min.js"></script>
    <script>
        // $().hover( 参数1 , 参数2 );
        $('div').hover(()=>console.log('鼠标移入了'),() =>console.log('鼠标移出了'))
    </script>
</body>

这里注意里面的子元素不会执行该事件。

$().one( 事件类型 , 事件处理函数 );

绑定的事件类型和事件处理函数只会触发执行一次

    <script>
        $('div').one('click',() =>console.log('点我干嘛'))
    </script>

$().trigger( 事件类型 );

事件的发布
标签指定事件类型的事件处理函数
会直接重复执行一次

    <script>
        $('div').one('click',() =>console.log('大聪明点我干嘛'))
        $('p').one('click',() =>console.log('码农徐点我干嘛'))
        // // 直接执行 指定事件类型的所有事件处理函数
        // // 直接将click 事件类型 绑定的所有事件处理函数 都 执行一次
        // // 不用 点击触发 直接执行
        $('div').trigger('click');
    </script>

$(window).ready( function(){} )
$( function(){} ) jQuery的加载事件

当 html所有标签加载完毕才会执行定义的函数程序

例如 img标签加载完毕 jQuery加载事件就会触发执行

window.addEventListener( 'load' , function(){})
js 的加载事件

当 html所有标签和标签内容加载完毕才会执行定义的函数程序

例如 img标签和图片内容都加载完毕 window加载事件才会触发执行

代码展示：

<body>
    <script src="./jquery.min.js"></script>
    <script>
        // 在 html代码之前 执行 js jQuery程序 
        // 正常情况下 不能获取 html标签对象
        console.log( document.querySelector('div') );
        console.log( $('div') );

        // 使用 js jQuery 的 加载事件 
        // 可以 让 js jQuery程序 在 html代码执行之后 执行
        // 也就是 js jQuery程序 虽然定义在 html代码之前 
        // 但是 会在html代码之后 执行 
        // 即使 提前定义 js jQuery程序 也可以正常获取 标签对象
        window.addEventListener( 'load' , function(){
            // 虽然定义在 html标签之前 但是 会在 html代码执行结束之后 再执行
            console.log( document.querySelector('div') );
        }) 

        $(window).ready( function(){
            console.log($('div'));
        })

        $(function(){
            console.log($('div'));
        })


    </script>
    <div>
        <span></span>
    </div>
    <img src="https://tse1-mm.cn.bing.net/th/id/R-C.f6e5c4b00db64498b0399718be518b77?rik=Dij8YhDHOoeyQg&riu=http%3a%2f%2fwww.pp3.cn%2fuploads%2fallimg%2f2020_09%2f1-20091P91444-1.jpg&ehk=y69EnYHAcza6aKYdzshiNy68OD5iBEp4p9AGBZdpP3o%3d&risl=&pid=ImgRaw&r=0" alt="">
    
</body>

可以清楚的看到最后一行div输出是在图片加载完成以后。

四、 jQuery的事件删除

$().off()
删除所有类型的所有事件处理函数

$().off( 事件类型 )
删除指定事件类型的所有事件处理函数

$().off( 事件类型 , 事件处理函数 )
删除指定事件类型的指定事件处理函数
只能删除绑定的函数名称

代码展示：

<body>
    <div>
        <span></span>
    </div>
    <script src="./jquery.min.js"></script>

    <script>
        $('div').click(fun);
        function fun(){
            console.log("大聪明点我干啥");
        }
        $('div').hover(()=>console.log('鼠标移入了'),() =>console.log('鼠标移出了'))
        // 删除所有事件类型
        $('div').off();
        // 删除指定事件类型
        $('div').off("click");
        // 删除 指定 事件类型的 指定 事件处理函数
        $('div').off("click",fun);
    </script>
</body>

五、jQuery的节点操作

子级节点的添加

父级的结束位置写入新的子级节点
$(父级标签).append( 节点标签 )
节点标签.appendTo( $(父级标签) )

父级的起始位置写入新的子级节点
$(父级标签).prepend( 节点标签 )
节点标签.prependTo( $(父级标签) )

同级节点的添加

同级标签之前写入
$(同级标签).before( 节点标签 )
节点标签.insertBefore( $(同级标签) )

同级标签之后写入
$(同级标签).after( 节点标签 )
节点标签.insertAfter( $(同级标签) )

节点删除

$().empty()
删除节点内容

$().remove()
删除节点本身

代码展示

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script src="./jquery.min.js"></script>
    <script>
        // 父级结束位置
        $('<span>我是span标签</span>').appendTo($('ul'));
        // 父级开始位置
        ($('ul')).prepend($('<p>我是p标签</p>'));
        // 同级之后写入
        ($('ul')).before($('<div>你好我是div</div>'));
        // 同级之前写入
        $('<h1>你好我是h1</h1>').insertAfter($('ul'));
        // 删除ul里面的内容
        // $('ul').empty();
        // 删除整个ul节点
        // $('ul').remove();
    </script>
</body>

大聪明码农徐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery的基础操作（二）

一、jQuery事件绑定语法jQuery伪数组支持的语法形式$().事件类型(事件处理函数)jQuery伪数组不支持的语法形式$().on( 事件类型 , 事件处理函数 )代码展示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&.
复制链接

扫一扫