jQuery知识点

最新推荐文章于 2023-04-12 08:27:48 发布

依墨~

最新推荐文章于 2023-04-12 08:27:48 发布

阅读量333

点赞数 1

文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_62073591/article/details/126323592

版权

本文介绍了jQuery中的一些核心知识点，包括可见性过滤选择器的使用，设置多个CSS属性，替换和复制节点的方法，以及jQuery事件的分类。通过示例展示了如何使用`:hidden`和`:visible`选择器进行元素的显示和隐藏，以及`replaceWith()`和`replaceAll()`方法替换节点，`clone()`方法复制元素。同时，文章讲解了`on`方法统一的事件绑定，以及`show()`, `hide()`, `toggle()`, `fadeIn()`, `fadeOut()`, `slideToggle()`等动画效果的使用。" 134722039,666285,网狐源码游戏数据库一键配置指南,"['游戏开发', '数据库管理']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.可见性过滤选择器的使用

根据元素是否显示来选择

（1）:hidden:匹配所有的不可见元素

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

一般都是和一种类型的元素搭配使用

$('div:visible).hide(4000);把显示的div用4秒钟隐藏掉。

$('div:hidden').show('slow');把隐藏的div慢慢地显示出来。

<script src="./js/jquery-3.6.0.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
background-color: rebeccapurple;
margin-bottom: 10px;
}
#div0{
width: 100px;
height: 100px;
background-color: green;
display: none;
}
</style>
<body>
<div></div>
<div></div>
<div id="div0"></div>
<input type="button" value="隐藏" id="btn1">
<input type="button" value="显示" id="btn2">
<script>
$(function(){
$("#btn1").click(function(){
$("div:visible").hide(1000)
})

$("#btn2").click(function(){
$("div:hidden").show(1000)
})
})
</script>
</body>

2.设置多个css属性

<script src="./js/jquery-3.6.0.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 10px;
}
</style>
<body>
<div>这是一个div</div>
<script>
$(function(){
$("div").click(function(){
//设置多个css样式
//第一种:{"属性名":"属性值","属性名":"属性值",...}
$(this).css({
"color":"white",
"font-size":"20px"
})

//第二种：使用链接式写法实现
$(this).css("color","white").css("font- size","20px")
})
})
</script>
</body>

4.JQuery替换节点

replaceWith()和replaceAll()用于替换某个节点

replaceWith()方法把被选元素替换为新的内容

$("#btn9").click(function(){
//$(选择器).replaceWith(替换的内容):内容替换
$("ul li").eq(1).replaceWith("<li><a href='#'>西瓜</a></li>")
})

replaceAll()：将内容替换到目标元素上把被选元素替换为新的html

$("#btn10").click(function(){
//$(content).replaceAll(selector):将内容替换到目标元素上
$("<li><a href='#'>西瓜</a></li>").replaceAll("ul li:eq(1)")
})

5.jQuery复制节点

clone()：方法生成被选元素的副本，包含子节点、文本和属性

语法：$(selectot).clone():复制元素

//如下代码是将复制元素替换到目标元素上
$("ul li:eq(2)").clone().replaceAll("ul li:eq(1)")

6.jQuery事件的分类

鼠标事件

鼠标事件是当用户在文档卜移动或单未鼠标时而产牛的事件,常用鼠标事件有:

方法	描述	执行时机
click()	触发或将函数绑定到指定元素的click事件	单击鼠标时
dblclick()	触发或将函数绑定到指定元素的dblclick事件	双击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouseover事件	鼠标移过时
mouseout(）	触发或将函数绑定到指定元素的mouseout事件	鼠标移出时
hover()	当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);/当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)	鼠标移入移出

6.1 on绑定事件

jQuery1.7之后,jQuery用on统一了所有事件的处理方法。
最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

6.2 on注册事件语法

                第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
                第二个参数: selector，执行事件的后代元素（可选)，如果没有后代元素，那么事件将有自己执行
                第三个参数:data，传递给处理函数的数据，事件触发的时候通过event.data来使用(不常使用)
                第四个参数:handler，事件处理函数
                $(selector).on(events[,selector][,data],handler)

6.3 on注册简单事件

//表示给$(selector)绑定事件，并且由自己触发,不支持动态绑定。
$(selector) .on( "click",functionO 科);

6.4 on注册委托事件

//表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件,支持动态绑定
$(selector).on("click","span",function(){})

关于事件绑定的方法

（1）普通的绑定事件方法

<style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
</style>
<body>
    <div>这是一个div</div>
    <input type="button" value="添加" id="btn1">
    <script>
        $(function(){
            //第一种绑定事件方法
            $("div").click(function(){
                $(this).css("color","red")
            })
            $("div").mouseover(function(){
                $(this).css("background-color","yellow")
            })
            $("div").mouseout(function(){
                $(this).css("background-color","blue")
            })
    </script>
</body>

（2）bind绑定事件的方法

<style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
</style>
<body>
    <div>这是一个div</div>
    <input type="button" value="添加" id="btn1">
    <script>
        $(function(){
            //bind(事件类型,事件处理函数)
            $("div").bind("click",function(){
                $(this).css("color","red")
            })
            $("div").bind("mouseover",function(){
                $(this).css("background-color","yellow")
            })
            $("div").bind("mouseout",function(){
                $(this).css("background-color","blue")
            })
    </script>
</body>

（3）on一次绑定多个事件

<style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
</style>
<body>
    <div>这是一个div</div>
    <input type="button" value="添加" id="btn1">
    <script>
        $(function(){
           $("div").on({
                "click":function(){
                    $(this).css("color","red")
                },
                "mouseover":function(){
                    $(this).css("background-color","yellow")
                },
                "mouseout":function(){
                    $(this).css("background-color","blue")
                }
            })
            $("#btn1").click(function(){
                $("body").append("<div>这是新增的</div>")
            })
            //第三种情况 on进行绑定事件时可以实现动态绑定
            $("body").on('mouseover',"div", function(){
                $(this).css("background-color","yellow")
            })
            $("body").on('mouseout',"div", function(){
                $(this).css("background-color","blue")
            })
    </script>
</body>

7.事件解绑

unbind方式（不用）与bind对应

        S(selector).unbind(;//解绑所有的事件
        $(selector).unbind("c1ick");//解绑指定的事件

undelegate方式（不用）与delegate对应

        $( selector ).undelegateO;//解绑所有的delegate事件
        $( selector).undelegate( "click”);//解绑所有的c1ick事件

off方式（推荐）与on对应

        //解绑匹配元素的所有事件
        $(selector).offO;
        //解绑匹配元素的所有c1ick事件
        $(selector).off("click");

8.键盘事件

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: absolute;
            left: 0;
        }
    </style>
<body>
    <div>点击A B C D</div>
    <script>
        $(function(){
            var x =0
            $(document).on("keydown",function(event){
                switch (event.keyCode) {
                    case 65:
                        $("div").css("background-color","red")
                        break;
                    case 66:
                        $("div").css("background-color","green")
                        break;
                    case 67:
                        $("div").css("background-color","yellow")
                        break;
                    case 68:
                        $("div").css("background-color","blue")
                        break;
                    case 39:
                        x+=10
                        $("div").css("left", x + "px")
                        break;
                    default:
                        break;
                }
            })
        })
    </script>
</body>

9.动画

9.1显示隐藏

show():显示隐藏的元素.

参数有slow表示慢慢的,fast表示快点,normal表示中间速度.还可以设置具体的时间数.

参数单位是毫秒。

                $('div').show('s1ow " );

hide0;隐藏显示的元素.参数和show一样。

                $( 'div"5.hide( 'slow');

toggle(): hide()和show()方法之间的切换

                S('div').toggle("slow');

9.2 淡入淡出

fadeln0把显示的元素通过慢慢变淡隐藏起来。

                $( 'div').fadein('slow ');

fadeOut(把隐藏的元素慢慢显示出来。

他们的参数和show/hide一样.

参数1是速度(fast,normal,slow或者写一个时间数,单位毫秒)参数2是透明度.值是一个0-1的数字.

        S('div').fadeout();

fadeToggle()在淡入和淡出之间切换,如果事显示就淡入,如果是隐藏就是淡出。

        S('div' ).fadeToggle();

9.3 滑动

slideUp():把元素使用往上收的方式隐藏起来,参数也是三个单词或者写时间数。

        $('div').s1ideup('slow');//表示把div缓慢的收起来

slideDown():把元素使用向下展开的方式显示出来,参数同上,把div缓慢的显示出来。

        $('div').slideDown('slow')

slideToggle():在向上卷和向下卷之间切换,如果是显示的,就卷上去隐藏,如果是隐藏的就向下卷显示。

        $('div').s1ideToggle('s1ow ');

4.2animate自定义动画

animate()方法用于创建自定义动画。

语法: $(selector).animate(iparams} , speed,ca1lback);

必需的params参数定义形成动画的CSS属性。

可选的speed参数规定效果的时长。它可以取以下值:"slow"、"fast"或毫秒。

可选的callback参数是动画完成后所执行的函数名称。