Jquery学习(2)-jquery方法

最新推荐文章于 2021-04-23 21:39:54 发布

敏儿啦

最新推荐文章于 2021-04-23 21:39:54 发布

阅读量206

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/xiaomin_er/article/details/106251227

版权

Jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. filter not has

filter 过滤对已经获取到的网页元素进行过滤
not filter的反义词
has 拥有，直接判定子节点中是否有符合条件的元素

    <script>
        $(function(){
            // $("div").css("backgroundColor","orange");
            // $("div").filter(".box").css("backgroundColor","orange");
            // $("div").not(".box").css("backgroundColor","orange");
            $("div").has(".box").css("backgroundColor","orange");
        })
    </script>

    <div  class='box'>div1</div>
    <div>div2<strong class='box'></strong></div>

2.prev next

prev 查找当前兄弟节点中的上一个节点
next 查找当前兄弟节点中的下一个节点

    <script>
         $(function(){
             $("h3").prev().css("backgroundColor",'red');
             $("h3").next().css("backgroundColor","blue");
         })
    </script>
    
    <h2>h2</h2>
    <p>pp</p>
    <h3>h3</h3>
    <em>em</em>
    <div>div</div>

3.find

find 查找子节点

4.index eq

index() 获取当前节点在兄弟节点中的下标
eq(下标) 通过下标获取指定的元素节点

5.attr

attr 设置和修改行间属性

    <script>
        /* attr 设置和修改行间属性 */
        $(function(){
           /*  alert($("#div1").attr("id"));
            alert($("#div1").attr("title"));
            alert($("#div1").attr("class")); */

            //设置属性值
           /*  $("#div1").attr("title","world");
            $("#div1").attr("class","box2"); */

            //一次性修改多条属性
            $("#div1").attr({
                title:"world",
                class:"xxx",
                yyy:"zzz"
            })
        })
    </script>

    <div id="div1" title='hello' class='box'></div>

选项卡

    <script src="../JS/jquery-1.11.3.js"></script>
    <style>
        #div1 button{width: 100px;height: 30px;background-color: gray;font-size: 16px;color:white}
        #div1 div{width:350px ;height: 350px;background-color: gray;border: 1px solid black;display: none;}
        #div1 .active{background-color: orange;color: blue;}
    </style>
    <script>
        $(function(){
            var aBtns=$("#div1").find("button");
            var aDivs=$("#div1").find("div");

            //给按钮添加点击事件
            aBtns.click(function(){
                aBtns.attr("class",'');
                aDivs.css("display",'none');

                $(this).attr("class","active");
                aDivs.eq($(this).index()).css("display",'block');
            })
        })
    </script>

    <div id="div1">
        <button class="active">HTML5</button>
        <button>JavaScript</button>
        <button>JQuery</button>
        <div style="display: block;">
            HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4... </div>
        <div>
            JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中... </div>
        <div>
            jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的... </div>
    </div>

6.addClass() removeClass()

    <script>
        /* 
            addClass()
            removeClass()
            [注]操作class属性
         */
         $(function(){
             $("#div1").addClass("box3 box2");
             $("#div1").removeClass("box2");
         })
    </script>
<body>
    <div id="div1" class='box1 box2'></div>
</body>

7.width() innerWidth() outerWidth()

    <style>
        #div1{width: 100px;height: 100px;background-color: red;border: 1px solid black;padding: 8px;margin: 8px;}
    </style>
    <script>
        // width() innerWidth() outWidth()
        // height() innerHeight() outerHeight()
        // offsetWidth  width+border+padding
        $(function(){
            // alert($("#div1").css("width")); //"100px" 字符串
            alert($("#div1").width()); //width 100
            alert($("#div1").innerWidth()); //width+padding
            alert($("#div1").outerWidth()); //width+border+padding
            alert($("#div1").outerWidth(true));//width+border+padding+margin
        })
    </script>
<body>
    <div id="div1"></div>
</body>

8.节点操作

insertBefore() before()
insertAfter() after()
appendTo()插入到子节点的末尾 appendChild(类似JS的方法)
append()
prependTo()插入到子节点的首位 prepend()
remove
左边和右边方法不同之处在于主体不同，做链式操作添加的样式主题不同

    <script>
         $(function(){
             //找到span节点插入到div的前面
             $("span").insertBefore($("div")).css("backgroundColor",'red');
            // $("div").insertAfter($("span"));

            // 找到span节点，插入到div节点的子节点的末尾
            // $("span").appendTo($("div"));
            // $("span").prependTo($("div"));
            // $("div").remove();
            
            //div节点前面是span
            // $("div").before($("span")).css("backgroundColor",'red');
         })
    </script>
<body>
    <div id="div1"><em>em</em>div文本</div>
    <span>span</span>
</body>

节点操作的方法
[注]下述所有的方法的参数都是选择器。
siblings() 用来除当前节点外，所有的兄弟节点
nextAll() prevAll() 当前节点往下/上的所有兄弟节点
parensUntil() 直到父节点 nextUntil() prevUntil() 直到什么为止

    <script src="../JS/jquery-1.11.3.js"></script>
    <script>
         $(function(){
            //  $("#p1").siblings("h2").css("backgroundColor",'blue');
            // $("#p1").nextAll('h3').css("backgroundColor",'red');
            // $("#p1").nextUntil("strong").css("backgroundColor",'orange');
            // $("#p1").prevUntil("h1").css("backgroundColor",'orange');
            $("#p1").parentsUntil("html").css("backgroundColor",'orange');
         })
    </script>
<body>
    <div id="div1">
        <h1>h1</h1>
        <h2>h2</h2>
        <p id='p1'>p</p>
        <h3>h3</h3>
        <strong>strong</strong>
        <h6>h6</h6>
        <h2>h2</h2>
    </div>
</body>在这里插入代码片

9.on 和 off

    <style>
        #div1{width: 100px;height: 100px;background-color: red;}
    </style>
    <script>
        /* 
            $().click(function(){

            })

            on和off方法
         */
/*          $(function(){
             $("#div1").click(function(){
                 alert(1);
             })

             $("#div1").click(function(){
                 alert(2);
             })
         }) */
         $(function(){
             //1.给一个事件添加一个函数
            /*  $("#div1").on("click",function(){
                 alert("hello");
             }) */
             //2 同时给多个事件添加一个函数,多个事件空格隔开
             /* var i=0;
             $("#div1").on("click mouseover",function(){
                $(this).html(i++);
             }) */

             //3.给不同的事件添加不同的函数
             $("#div1").on({
                 click:function(){
                     alert("click");
                 },
                 mouseover:function(){
                     $(this).css("backgroundColor","yellow");
                 },
                 mouseout:function(){
                     $(this).css("backgroundColor","blue");
                 }
             })
             
             $("#div1").click(show);
             function show(){
                 alert("hello world");
             }

             //4.事件委托
            //  第二个参数，是触发对象的选择器
             $("ul").on("click","li",function(){
                 $(this).css("backgroundColor","yellow");
             })

             var i=4;
             $("#btn1").click(function(){
                 //新增li节点
                 $(`<li>${i++}</li>`).appendTo($("ul"));
             })

             $("#cancel").click(function(){
                //  $("#div1").off(); //取消所有事件上的所有函数
                // $("#div1").off("click"); //取消某一个事件下的所有函数
                $("#div1").off("click",show); //取消某一个事件下指定的函数
             })
         })
    </script>

    <div id="div1"></div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <button id='btn1'>增加节点</button>
    <button id='cancel'>取消事件</button>

10.scrollTop

    <script src="../JS/jquery-1.11.3.js"></script>
    <style>
        *{margin: 0px;padding: 0px;}
        #div1{width: 300px;height: 300px;border: 1px solid black;position: relative;display: none;}
        #close{position: absolute;right: 0px; top: 0px;}
    </style>
    <script>
        $(function(){
            // 计算居中的top和left值
            var top=$(window).scrollTop()+($(window).height()-$("#div1").outerHeight(true))/2;
            var left=($(window).width()-$("#div1").outerWidth(true))/2;

            $("#div1").css({
                left:left,
                top:top
            })

            $("window").on("scroll resize",function(){
                var top=$(window).scrollTop()+($(window).height()-$("#div1").outerHeight(true))/2;
                var left=($(window).width()-$("#div1").outerWidth(true))/2;

                $("#div1").css({
                    left:left,
                    top:top
            })  
            })
            $("#issue").click(function(){
                $("#div1").css("display",'block');
            })

            $("#close").click(function(){
                $("#div1").css("display",'none');
            })
        })
    </script>

<body style="height: 3000px">
    <button id='issue'>发布</button>
    <div id='div1'>
        <input type="text" placeholder="用户名">
        <input type="text" placeholder="密码">
        <div id="close">X</div>
    </div>
 </body>

11.事件细节

    <style>
        div{padding: 50px;}
        #div1{background-color: red;}
        #div2{background-color: blue;}
        #div3{background-color: orange;}
    </style>
    <script>
        /* 【注】都是兼容的后。
            ev pageX
            which  
                鼠标事件：button   1 左键   2 滚轮     3右键
                keydown:keyCode 键码
                keypress: charCode 字符码
            preventDefault  stopPropagation

            [注]大家不能为了使用JQ而使用JQ，如果实际开发的时候JS一些比较简单的操作，没必要写成JQ代码
         */
         $(function(){
             $("div").click(function(ev){
                 alert(this.id);
                 ev.stopPropagation(); //阻止冒泡行为
             })
             $("a").click(function(ev){
                /*  ev.preventDefault(); //阻止a链接默认行为
                 ev.stopPropagation(); //阻止冒泡行为 */

                //  既阻止事件冒泡，又阻止默认行为
                return false;
             })

             $(document).mousedown(function(ev){
                /*  alert(ev.pageX +','+ev.pageY);//带滚动距离
                 alert(ev.clientX +','+ev.clientY); //可视窗口为原点 */
                 alert(ev.which);
             })

             $(document).keydown(function(ev){
                 alert(ev.which);
             })
             $(document).keypress(function(ev){
                 alert(ev.which);
             })
         })
    </script>
<body style="height: 3000px;">
  <!--   <div id="div1">
        <div id="div2">
            <div id="div3">
                <a href="https://www.baidu.com">百度</a>
            </div>
        </div>
    </div> -->
</body>

12.offset position offsetParent

    <script>
       /* 
            offset()  直接获取当前元素，距离最左边的距离，margin不算数的
            position() 直接获取当前元素，距离第一个有定位父节点的距离，margin算在内
            offsetParent() 查找第一个由定位的父节点，如果父节点没有定位旧继续往上去找，最终找到html节点。
        */ 
        $(function(){
            // alert($("#div2").offset().left);
            // alert($("#div2").position().left);
            // alert($("#div2").position().top);
            $("#div2").offsetParent().css("backgroundColor","yellow");

        })
    </script>
<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>

13.拖拽

    <style>
        div{width: 100px;height: 100px;background-color: red;position: relative;}
    </style>
    <script>
        $(function(){
            $("div").mousedown(function(ev){
                var offsetX = ev.pageX - $(this).offset().left;
                var offsetY = ev.pageY - $(this).offset().top;
                
                //this是当前按下的div
                var _this = this;
                $(document).mousemove(function(ev){
                    $(_this).css({
                        left:ev.pageX - offsetX,
                        top:ev.pageY - offsetY
                    })
                })
            })
            $(document).mouseup(function(){
                $(document).off("mousemove");
            })
        })
    </script>
<body>
    <div></div>
</body>

敏儿啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery学习(2)-jquery方法

1. filter not hasfilter 过滤对已经获取到的网页元素进行过滤not filter的反义词has 拥有，直接判定子节点中是否有符合条件的元素 <script> $(function(){ // $("div").css("backgroundColor","orange"); // $("div").filter(".box").css("backgroundColor","orange")
复制链接

扫一扫

专栏目录