jQuery的使用 - 技术栈

[jquery dom操作](#jquery dom操作)

jquery对象：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
        // 点击按钮将输入在输入框中的值弹框显示
        window.onload = function(){
            var input = document.querySelector('input');
            var btn = document.querySelector('button');
            btn.onclick = function(){
                alert(input.value)
            }
        }
        $(function(){
            //成为jquery实例：$()   
            $('button:last').click(function(){
                alert($('input').val())
            })
        })
    </script>
</head>
<body>
    <input type="text">
    <button>确定(js)</button>
    <button>确定(jquery)</button>
</body>
</html>

浏览器运行结果如下：

jquery作为一般函数调用参数:

1.$() 匿名函数入口函数区别

2.css选择器字符串匹配元素

3.dom对象 jquery会把dom对象封装为jquery对象

4.html字符串表示创建html中元素

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
        /**
         * jquery函数被当作一般函数调用 $(params)
         * 1.函数内部参数可以是css选择器字符串 表示匹配元素
         *   $('div') $('.two') $('#three')
         * 2.函数内部参数可以是dom对象 将他封装成jquery对象
         * 3.函数内部参数可以是匿名函数 表示jquery入口函数
         * 4.函数内部可以是html元素字符串 表示创建html元素
        */
       $(function(){
        $('button').click(function(){
            console.log(this,$(this));
            $(this).html('不想被网爆');
            //创建h1标题并追加给body标签
            $('<h1>sb</h1>').appendTo('body')
        })
       })
    </script>
</head>
<body>
    <button>网爆我</button>
</body>
</html>

浏览器运行结果如下：

jquery事件机制

绑定事件：on(function(event){

event---jquery封装的事件对象 data

}) bind() one()一次性事件绑定

解绑事件：off() unbind()

事件类型：click() blur() focus() mouseenter() mousedown()

trigger 模拟事件

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
        /**
         * 1.给元素绑定事件 click(handler)
         * 2.给元素绑定事件 on(事件类型，实际参数，handler(形式参数){})
        */
        $(function () {
            // //绑定事件
            // $('button').on('click', [1, 2, 3, 4], function (event) {
            //     console.log(event, '事件对象', event.data);
            // });
            // //解绑事件  off解绑事件
            // $('button').off('click');


            // //绑定事件 bind方法绑定事件
            // $('button').bind('click', 'terry', function (event) {
            //     console.log(event);
            // });
            // $('button').bind('mouseenter', function (event) {
            //     $(this).css({
            //         backgroundColor:'red'
            //     })
            // });
            // //unbind解绑事件
            // $('button').unbind('click');
            // //一次性解绑所有事件 unbind不加参数
            // $('button').unbind();

            // // $('button').on('click',function(){
            // //     $(this).html('被点击了')
            // // });
            // //事件代理 给父元素绑定事件  on(事件类型，选择器，实际参数，handler)
            // $('body').on('click','button',function(){
            //     $(event.target).html('被点击了')
            // })

            // //一次性事件绑定 one  事件只执行一次
            // $('button').one('click',{name:'larry'},function(event){
            //     console.log(event.data);
            // })

            // //模拟事件 trigger
            // $('button').click(function(event,a,b,c){
            //     console.log('我被点击了',event,a,b,c);
            // });
            // $('button').trigger('click',[1,2,3]);

            // //聚焦事件 focis
            // $('input').focus(function () {
            //     $(this).css({
            //         backgroundColor: 'red'
            //     })
            // })
            // //失焦事件 blur
            // $('input').blur(function () {
            //     $(this).css({
            //         backgroundColor: 'blue'
            //     })
            // })


            $('button').mouseenter(function(){
                $(this).css({
                    backgroundColor:'red'
                })
            });
            $('button').mouseleave(function(){
                $(this).css({
                    backgroundColor:'blue'
                })
            });
            $('button').dblclick(function(){
                console.log('我被双击了');
            });
        })
    </script>
</head>

<body>
    <input type="text">
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
</body>

</html>

浏览器运行结果如下：

jquery dom操作

addClass() 添加类名

removeClass() 移除类名

toggleClass() 切换类名有类名则是移除没有则是添加

clone() 深克隆和浅克隆克隆事件和内容

attr()

removeAttr()

html() 元素的内容包括文本和标签

text() 只获取元素的文本内容

val() 获取输入框值

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <style>
        .active{
            background-color: pink;
        }
    </style>
    <script>
        $(function(){
            //在匹配到的元素后面增加内容 append
            $('div').append('我是新增的内容');
            $('div').append('<h1>一级标题</h1>');

            //appendTo 将前面创建的元素添加给appendTo()中的目标元素
            $('<p>段落标签</p>').appendTo('body');
            $('div').after('<section>块级元素</section>');
            $('div').before('<section>块级元素</section>');
            $('button').click(function(){
                alert('我被点击了')
            });
            //clone 克隆节点  true深克隆(内容事件都可克隆) false浅克隆(事件没有克隆)
            $('button').clone(true).appendTo('body');

            // //添加一个类名 addClass
            // $('#one').addClass('active');
            // //移除一个类名 removeClass
            // $('#one').removeClass('two');
            //切换类名
            // $('div').click(function(){
            //     //toggleClass 切换类名 如果默认有类名则是移除，如果没有则是添加
            //     $(this).toggleClass('active');
            // })
            console.log($('body').text(),'元素文本内容');
            console.log($('body').html(),'识别代码片段');
        })
    </script>
</head>
<body>
    <button>点击我</button>
    <div id="one" class="two" title="我是div的title">我是块级元素</div>
</body>
</html>

浏览器运行结果如下：