2020-JQuery学习

最新推荐文章于 2020-12-22 20:54:02 发布

Seven_night♛

最新推荐文章于 2020-12-22 20:54:02 发布

阅读量84

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/seve_nnight/article/details/108749075

版权

$.trim( ) 去除字符串两端的空格

<script>
       var str = "   jjj    ";
       console.log("----"+str+"-----");
       var res = $.trim(str);
       console.log(res);
    </script>

控制台显示：

$.isWindow();

作用：判断传入的对象是否是window对象

返回值：true/false

$.isArray();

作用：判断传入的对象是否是真数组

返回值：true/false

$.isFunction();

作用：判断传入的对象是否是一个函数

返回值：true/false

tip：$.isFunction(jQuery) 返回值为true，JQuery本质上也是一个函数

<script>
        var arr = [1,3,5,7,9];
        var obj = {0:1,1:3,2:5,3:7,4:10,length:5}
        $.each(arr, function(index,value){
            console.log(index,value);
        })
        $.each(obj, function(index,value){
            console.log(index,value);
        })
    </script>

$.each(obj ,function(index,value)){

} 遍历数组

JQuery中的each静态方法和nap静态方法的区别：

each静态方法默认的返回值就是：遍历谁就返回谁

map静态方法默认的返回值是一个空数组

each静态方法不支持在回调函数中对遍历的数组进行处理

mp静态方法可以在回调函数中通过return对遍历的数组进行处理，然后生成一个新的数组返回

$.holdReady(true/false)

作用：暂停或者恢复ready事件

内容选择器

$("div:contains('John')")

匹配包含给定文本的元素

$("div:has(p)").addClass("test");

给所有包含 p 元素的 div 元素添加一个 text 类

attr(name|properties|key,value|fn)

获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。

<span class="span1" name="qwe"></span>
    <span class="span2" name="rrrr"></span>
    <script>
       var div = $("div:empty");
       console.log(div);
       var div2 = $("div:parent")
       console.log(div2);
       var span = $("span").attr("class")
       console.log(span);
       $('span').attr('class','box');
       $('span').attr('abc','detf');
       $('span').removeAttr('class');
       $('span').removeAttr('class name')
    </script>

prop(name|properties|key,value|fn)

概述

获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。

选中复选框为true，没选中为false

$("input[type='checkbox']").prop("checked");

官方推荐在操作属性节点时，具有true 和 false 两个属性节点，如checked，selected或者disabled使用prop（），其他使用attr()

<body>
    <div> </div>
    <button>添加类</button>
    <button>删除类</button>
    <button>切换类</button>
    <script>
       $(function(){
           var btn1 = $("button").eq(0);
           btn1.on("click",function(){
               console.log(123);
               $("div").addClass("class1")
           })
           var btn2 = $("button").eq(1).on("click",function(){
               $("div").removeClass("class1")
           })
           var btn3 = $("button").eq(2).on("click",function(){
               $("div").toggleClass("class2")
           })

       })
    </script>
</body>

addClass 添加类 removeClass 删除类 toggleClass 切换类可以添加和删除多个，用空格隔开即可

事件

<script>
        $(function(){
            $(".btn1").click(function(){
            alert("btn1");
        });
            $(".btn1").click(function(){
                alert("再谈一次，btn1")
            });
            $(".btn1").mouseleave(function(){
                alert("鼠标离开")
            });
            $(".btn2").on("click",function(){
                alert("我是btn2");
            });
            $(".btn2").on("mouseleave",function(){
                alert("我离开btn2了");
            })
        })
        
    </script>

$(".btn1").off();
            // off() 移除所有事件
$(".btn1").off("click");  移除所有点击事件
$(".btn1").off("click",test1); 移除test1函数 的点击事件

阻止默认行为

$(".btn2").on("click",function(event){
                event.preventDefault();
            });

或者
return false;

自动触发事件

$(".btn1").trigger("click");
trigger会触发事件冒泡
$(".btn1").triggerHandler("click");
triggerHandler 不会触发事件冒泡

事件委托 delegate

<script>
        $(function(){
        //    $("ul>li").click(function(){
        //        console.log($(this).html());
        //    });
           $("button").click(function(){
               $("ul").append("<li>我是新增的li</li>")
           });
           $("ul").delegate("li","click",function(){
            console.log($(this).html());
           })
        })

    </script>

鼠标移入移出事件

$(".father").mouseover(function(){
                console.log("father mouseover");
            });
            $(".father").mouseout(function(){
                console.log("father mouseout");
            });
事件冒泡

$(".father").mouseleave(function(){
                    console.log("father mouseleave");
                });
                $(".father").mouseenter(function(){
                    console.log("father mouserenter");
                })
不事件冒泡

$(".father").hover(function(){
                console.log("father 移入移出");
            })
鼠标移入移出事件 和mouseover ➕ mouseleave 效果相同

Seven_night♛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-JQuery学习

$.trim( ) 去除字符串两端的空格<script> var str = " jjj "; console.log("----"+str+"-----"); var res = $.trim(str); console.log(res); </script>控制台显示：
复制链接

扫一扫